Construir um Site de E-commerce Full-Stack do Zero

Atue como um desenvolvedor full-stack sênior e designer de UI/UX. Quero que você construa um site de e-commerce moderno, profissional e totalmente responsivo do zero. ### Objetivo Criar um site de compras online limpo e atraente, adequado para um negócio real. O site deve funcionar perfeitamente em celular, tablet e desktop. ### Tecnologia Use: * HTML5 * CSS3 * JavaScript * Use um único arquivo HTML com CSS e JavaScript incluídos dentro dele. * Não use backend, a menos que seja absolutamente necessário. * Use código limpo, bem organizado e amigável para iniciantes. ### Recursos do Site 1. **Cabeçalho/Barra de Navegação** * Logotipo/nome da loja profissional * Início * Loja * Categorias * Sobre * Contato * Ícone/barra de pesquisa * Ícone de carrinho de compras com contagem de itens * Botão Entrar/Cadastrar 2. **Seção Hero** * Banner promocional grande * Título atraente * Descrição curta * Botão "Comprar Agora" * Design moderno de e-commerce 3. **Categorias** Crie cards de categoria atraentes, como: * Eletrônicos * Moda * Calçados * Acessórios * Beleza * Casa & Decoração 4. **Seção de Produtos** Exiba vários cards de produto contendo: * Imagem do produto * Nome do produto * Avaliação * Preço original * Preço com desconto * Percentual de desconto * Botão "Adicionar ao Carrinho" * Botão "Comprar Agora" * Botão de lista de desejos/coração 5. **Pesquisa e Filtro de Produtos** Adicione funcionalidade JavaScript funcional para: * Pesquisa de produtos * Filtro por categoria * Ordenação por preço * Ordenação por avaliação 6. **Carrinho de Compras** Crie um carrinho funcional onde os usuários possam: * Adicionar produtos * Remover produtos * Aumentar/diminuir quantidade * Ver subtotal * Ver preço total * Limpar carrinho 7. **Checkout** Crie uma página/seção de checkout profissional com: * Nome do cliente * E-mail * Telefone * Endereço * Cidade * Estado * Código PIN * Método de pagamento * Resumo do pedido * Botão Fazer Pedido 8. **Seções Especiais** Adicione: * Promoção Relâmpago * Mais Vendidos * Novidades * Avaliações de Clientes * Assinatura de Newsletter 9. **Rodapé** Inclua: * Sobre a loja * Links rápidos * Suporte ao cliente * Política de Privacidade * Termos e Condições * Ícones de redes sociais * Direitos autorais ### Requisitos de Design * UI premium e moderna * Tipografia limpa * Cards de produto atraentes * Animações suaves de hover * Layout responsivo * Menu hambúrguer amigável para celular * Bom espaçamento e alinhamento * Esquema de cores profissional * Rolagem suave * Botões e formulários acessíveis * Adicione animações sutis sem deixar o site lento ### Requisitos de JavaScript Faça os seguintes recursos funcionarem de verdade: * Pesquisa * Filtro por categoria * Ordenação * Adicionar ao carrinho * Remover do carrinho * Controles de quantidade * Cálculo do total do carrinho * Botão de lista de desejos * Navegação mobile * Validação do formulário de checkout * Mensagem de confirmação do pedido Use produtos de exemplo e imagens de produtos realistas de URLs de imagens publicamente acessíveis. ### Importante Não me dê apenas uma explicação. **Construa o código completo do site funcional.** Retorne o código completo em um único arquivo HTML que eu possa salvar como `index.html` e abrir diretamente no navegador. Faça o resultado final parecer um site de e-commerce profissional do mundo real, em vez de uma demonstração básica.