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.
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.
- 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.
- 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.
- 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. - 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.
- 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.
- HTML5: Para a estrutura e o conteúdo do site.
- CSS3: Para toda a estilização, layout (incluindo Flexbox) e responsividade.
- 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.
Para executar este projeto em sua máquina local, você pode usar um servidor simples.
- Clone o repositório:
git clone [https://github.com/seu-usuario/frontend-ecommerce-for-artisans.git](https://github.com/seu-usuario/frontend-ecommerce-for-artisans.git)
- Navegue até o diretório do projeto:
cd frontend-ecommerce-for-artisans
- 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.
O repositório está organizado em pastas baseadas nas funcionalidades do site:
├── CARRINHO/ # Página e lógica do carrinho de compras ├── CATEGORIAS/ # Páginas das categorias de produtos ├── CATÁLOGO/ # Catálogo principal de produtos ├── GLOSSÁRIO/ # Página com o glossário de termos ├── HOME/ # Estilos e scripts da página inicial ├── Imagens/ # Todas as imagens, ícones e SVGs ├── PAGAMENTOS/ # Páginas do fluxo de pagamento ├── PEDIDO/ # Página de informações do pedido ├── PRODUTOS/ # Páginas de detalhes dos produtos individuais ├── REGISTRO/ # Páginas de login e cadastro de usuário ├── index.html # A página inicial do site └── README.md # Este arquivo
Este projeto é de código aberto. Sinta-se à vontade para usá-lo como referência para seus