redme atualizado

README.md

@@ -1,15 +1,123 @@
-# React + Vite
+# E-commece Compass.uol
 
-## Links Demo
-Produção: https://ecommece-compass.vercel.app/
+![Logo](https://i.ibb.co/chJPk3G/Home.png)
 
-Desenvolvimento: https://ecommece-compass.pages.dev/
+O site de Ecommerce para o programa de bolsa da @compass.uol composto por três telas principais: Página Inicial, Detalhes do Produto e Carrinho. O design e a funcionalidade de cada tela foi implementado conforme especificado no protótipo do Figma.
 
+## Funcionalidades Principais🔥
+### Tela de Página Inicial
 
+1. **Lista de Produtos**: Exibir uma lista de produtos incluindo nome, preço e, em alguns casos, uma descrição de avaliação.
+2. **Contador de Tempo para Ofertas Finais**: Para alguns produtos, mostrar um contador de tempo indicando quanto tempo resta para o fim da oferta.
+3. **Marcadores de Oferta e Novos Produtos**: Alguns produtos serão marcados com a porcentagem de desconto como "Oferta", enquanto outros serão marcados como "Novo".
+4. **Funcionalidade de Favoritos**: Os cards de produtos terão um botão para marcar produtos como favoritos.
+5. **Funcionalidade de Adicionar ao Carrinho**: Os cards de produtos também incluirão um botão para adicionar o produto ao carrinho. Isso deve atualizar o estado global do sistema.
+6. **Seção de Novos Produtos**: Uma seção permitindo navegação para novos produtos.
+7. **Botão de Retorno**: Um botão para voltar à tela anterior.
+8. **Cabeçalho e Rodapé Globais**: O site deve ter um cabeçalho e rodapé consistentes em todas as páginas.
+9. **Banners Estáticos**: Os banners na página inicial serão estáticos e não terão funcionalidade interativa.
+10. **Responsividade**: A tela de Página Inicial deve ser adequadamente projetada para dispositivos móveis.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+### Tela de Detalhes do Produto
 
-Currently, two official plugins are available:
+1. **Detalhes do Produto**: Exibir informações detalhadas sobre um produto específico, incluindo nome, preço, descrição, etc.
+2. **Funcionalidade de Adicionar ao Carrinho**: Botão para adicionar o produto ao carrinho. Isso também deve atualizar o estado global do carrinho.
+3. **Funcionalidade de Compra**: Opção para comprar o produto, com a capacidade de escolher a quantidade desejada.
+4. **Contador de Quantidade**: Um contador que permite ajustar a quantidade de produtos a serem adicionados.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Tela de Carrinho
+
+1. **Informações de Compra**: Exibir os produtos selecionados, suas quantidades e preços individuais.
+2. **Total de Itens e Valor Total**: Mostrar o número total de itens no carrinho e o valor total da compra.
+3. **Contadores de Adicionar/Remover Produtos**: Para cada produto no carrinho, fornecer um contador que permite ajustar a quantidade.
+
+## Link do demo 🚀
+
+Produção: [https://ecommece-compass.vercel.app/](https://ecommece-compass.vercel.app/)
+
+Desenvolvimento: [https://ecommece-compass.pages.dev/](https://ecommece-compass.pages.dev/)
+
+## Rodando localmente 💻
+
+Siga os passos abaixo para rodar o projeto em sua máquina local:
+
+1. Clone o repositório ⬇️
+
+```bash
+git clone https://github.com/ecsistem/blog-compass
+```
+
+2. Acesse o diretório do projeto 📂
+
+```bash
+cd blog-compass
+```
+
+3. Instale as dependências usando NPM 📦
+
+```bash
+npm install
+```
+
+ou usando PNPM 📦
+
+```bash
+pnpm install
+```
+
+ou usando Yarn 📦
+
+```bash
+yarn install
+```
+
+4. Inicie o servidor local 🚀
+
+```bash
+npm run start
+```
+
+## Build 🛠️
+
+Para fazer o build do projeto, execute o seguinte comando:
+
+```bash
+npm run build
+```
+
+## 🧱Ambiente de Desenvolvimento - Docker
+Para iniciar o servidor de desenvolvimento do Vite com docker, execute o seguinte comando:
+
+```bash
+docker-compose up development
+```
+Isso iniciará o servidor de desenvolvimento do Vite, e você poderá acessá-lo em http://localhost:3000 no seu navegador.
+
+## 🧱Ambiente de Produção - Docker
+Para realizar o build da aplicação usando o Vite e executar o ambiente de produção com o Nginx, execute o seguinte comando:
+
+```bash
+docker-compose up production
+```
+Isso executará o build da aplicação usando o Vite e, em seguida, iniciará o servidor Nginx para servir os arquivos estáticos. Você poderá acessar a aplicação em http://localhost no seu navegador.
+
+## Requisitos Técnicos
+
+- A aplicação deve ser desenvolvida usando o framework ReactJS.
+- O design e a funcionalidade devem ser implementados de acordo com o protótipo fornecido no Figma.
+- O estado global da aplicação deve ser gerenciado usando ferramentas como Context API ou Redux.
+- A aplicação deve ser responsiva e devidamente otimizada para dispositivos móveis.
+
+## Autores 👤
+- [@Edson Costa](https://www.github.com/ecsistem)
+
+## Contato📱
+
+Se tiver alguma dúvida ou precisar entrar em contato, você pode me encontrar em:
+- E-mail: [email protected]
+- GitHub: [ecsistem](https://github.com/ecsistem)
+- LinkedIn [https://www.linkedin.com/in/edsoncostadev/](https://www.linkedin.com/in/edsoncostadev/)
+
+## Suporte ✉️
+
+Para suporte, entre em contato enviando um e-mail para [email protected]. Estou à disposição para ajudar com qualquer dúvida ou problema relacionado ao projeto.