|
1 | | -# vanilla-js-ecommerce |
2 | | -Responsive front-end e-commerce website for a handmade candle brand. Built with pure HTML, CSS, and JavaScript. |
| 1 | +# Frontend de E-commerce para Velas Artesanais (Luarce) |
3 | 2 |
|
4 | | -Acess it through GitHub Pages. |
| 3 | +Este repositório contém o código-fonte completo do frontend de um site de e-commerce responsivo, projetado para a marca de velas artesanais "Luarce". O site oferece uma interface limpa e elegante para os clientes navegarem pelos produtos, verem detalhes e gerenciarem seus carrinhos de compras. |
| 4 | + |
| 5 | +Este projeto foi desenvolvido como parte de um trabalho de extensão universitário, utilizando tecnologias web fundamentais como HTML, CSS e JavaScript puro, sem o uso de frameworks externos. |
| 6 | + |
| 7 | +## Funcionalidades |
| 8 | + |
| 9 | +* **Design Responsivo**: Uma abordagem que prioriza dispositivos móveis garante que o layout se adapte a vários tamanhos de tela, de desktops a smartphones. |
| 10 | +* **Vitrines de Produtos**: Um catálogo dedicado e páginas de produtos individuais com carrosséis de imagens, descrições detalhadas e pirâmides olfativas. |
| 11 | +* **Carrinho de Compras Interativo**: Os usuários podem adicionar produtos com opções específicas (como tipo de pavio), ajustar quantidades e ver o preço total ser atualizado dinamicamente. O estado do carrinho é salvo no `LocalStorage` do navegador. |
| 12 | +* **Conteúdo Dinâmico**: O JavaScript é usado para gerenciar o catálogo de produtos, o estado do carrinho de compras e elementos interativos como carrosséis de imagens e pop-ups. |
| 13 | +* **Fluxo de Compra Completo**: Um processo claro e com várias páginas para o checkout, incluindo páginas para seleção de pagamento e confirmação de pedido. |
| 14 | + |
| 15 | +## Tecnologias Utilizadas |
| 16 | + |
| 17 | +* **HTML5**: Para a estrutura e o conteúdo do site. |
| 18 | +* **CSS3**: Para toda a estilização, layout (incluindo Flexbox) e responsividade. |
| 19 | +* **JavaScript (Vanilla)**: Para toda a lógica do lado do cliente, interatividade e manipulação do DOM. Nenhum framework ou biblioteca externa de JS foi utilizado. |
| 20 | + |
| 21 | +## Como Executar Localmente |
| 22 | + |
| 23 | +Para executar este projeto em sua máquina local, você pode usar um servidor simples. |
| 24 | + |
| 25 | +1. Clone o repositório: |
| 26 | + ```bash |
| 27 | + git clone [https://github.com/seu-usuario/frontend-ecommerce-for-artisans.git](https://github.com/seu-usuario/frontend-ecommerce-for-artisans.git) |
| 28 | + ``` |
| 29 | +2. Navegue até o diretório do projeto: |
| 30 | + ```bash |
| 31 | + cd frontend-ecommerce-for-artisans |
| 32 | + ``` |
| 33 | +3. Se você usa o Visual Studio Code, a maneira mais fácil é instalar a extensão **Live Server** e clicar em "Go Live" no canto inferior direito. Isso iniciará o projeto em seu navegador. |
| 34 | + |
| 35 | +## Estrutura de Arquivos |
| 36 | + |
| 37 | +O repositório está organizado em pastas baseadas nas funcionalidades do site: |
| 38 | + |
| 39 | +├── CARRINHO/ # Página e lógica do carrinho de compras |
| 40 | +├── CATEGORIAS/ # Páginas das categorias de produtos |
| 41 | +├── CATÁLOGO/ # Catálogo principal de produtos |
| 42 | +├── GLOSSÁRIO/ # Página com o glossário de termos |
| 43 | +├── HOME/ # Estilos e scripts da página inicial |
| 44 | +├── Imagens/ # Todas as imagens, ícones e SVGs |
| 45 | +├── PAGAMENTOS/ # Páginas do fluxo de pagamento |
| 46 | +├── PEDIDO/ # Página de informações do pedido |
| 47 | +├── PRODUTOS/ # Páginas de detalhes dos produtos individuais |
| 48 | +├── REGISTRO/ # Páginas de login e cadastro de usuário |
| 49 | +├── index.html # A página inicial do site |
| 50 | +└── README.md # Este arquivo |
| 51 | + |
| 52 | + |
| 53 | +## 📄 Licença |
| 54 | + |
| 55 | +Este projeto é de código aberto. Sinta-se à vontade para usá-lo como referência para seus |
0 commit comments