Um projeto de e-commerce moderno desenvolvido com HTML, JavaScript, Vite, Tailwind CSS v4 e Swiper.js.

Tecnologias Utilizadas

• HTML5 - Estrutura semântica e acessível do conteúdo.
• JavaScript (ES6+) - Lógica, manipulação do DOM e interatividade do site.
• Vite - Build tool rápida e moderna para o desenvolvimento.
• Tailwind CSS v4 - Framework CSS utilitário de última geração.
• Swiper.js - Biblioteca para sliders e carrosséis touch-friendly.
• Google Fonts - Tipografia Nunito Sans para a identidade visual.

Instalação

Clone o repositório e instale as dependências:

npm install

Scripts Disponíveis

Comando	Descrição
npm run dev	Inicia o servidor de desenvolvimento com hot-reload
npm run build	Gera build otimizado para produção
npm run preview	Visualiza a build de produção localmente

Desenvolvimento

Para iniciar o ambiente de desenvolvimento:

npm run dev

O servidor será iniciado em http://localhost:5173 (porta padrão do Vite).

Estrutura do Projeto

├── src/
│   ├── assets/          # Imagens, ícones e outros recursos estáticos
│   ├── main.js          # Ponto de entrada da aplicação JavaScript
│   └── style.css        # Estilos globais e imports do Tailwind
├── index.html           # HTML principal
├── package.json         # Dependências e scripts
├── vite.config.js       # Configuração do Vite
└── README.md            # Documentação do projeto

Funcionalidades

• Menu Responsivo - Menu hambúrguer para dispositivos móveis
• Megamenu - Navegação avançada para desktop
• Carrossel de Produtos - Slider responsivo com Swiper.js
  • Mobile: 2 produtos por vez
  • Desktop: 4-5 produtos por vez
• Busca - Funcionalidade de busca para produtos
• Acordeão no Footer - Seções expansivas para mobile
• Banner Promocional - Cupom de desconto para primeiro pedido

Responsividade

O projeto é totalmente responsivo, com breakpoints configurados para:

• Mobile (390px - 639px)
• Desktop (1024px+)