Uma Landing Page 3D interativa, futurista e de alto impacto visual para uma marca de refrigerantes artesanais saudáveis. Desenvolvido com HTML5, CSS3 puro (Glassmorphism & 3D Keyframes) e JavaScript Vanilla com Web Audio API.
- 🎮 Efeito 3D Parallax com o Mouse: A lata inclina em 3D e as frutas flutuam em direções opostas conforme o movimento do cursor.
- 🎵 Efeitos Sonoros Reais Sintetizados (Web Audio API): Som característico de abertura de latinha (Pop! + Tssshhh!), bolhas de gás ao navegar e acorde musical de celebração ao finalizar a compra.
- 🛍️ Gaveta da Sacola (Cart Drawer) com Checkout & Confetes:
- Controle dinâmico de itens e quantidades (
+/-). - Cupom de desconto funcional: use
DEV10para 10% de desconto. - Finalização com celebração de confetes em Canvas em tela cheia.
- Controle dinâmico de itens e quantidades (
- 📦 Seletor de Pacotes Inteligente: Opções de 1x Lata (350ml), Pack 3x (5% OFF) e Caixa 6x (15% OFF) com atualização de preço em tempo real.
- 📋 Modal de Tabela Nutricional & Ingredientes: Informações nutricionais dinâmicas, origem das frutas e selos de sustentabilidade.
- 🖱️ Navegação Multimodal:
- Setas no rodapé e pílulas de sabores.
- Scroll da roda do mouse (Wheel com throttle inteligente).
- Setas do teclado (← e →).
- Touch / Swipe em celulares e tablets.
- 📱 100% Responsivo: Otimizado desde telas compactas de 320px (smartphones) até monitores 4K / Ultrawide.
- HTML5 Semântico
- CSS3 Vanilla: Glassmorphism, CSS Variables, Flexbox, Grid, Animações Keyframe.
- JavaScript Moderno (ES6+): Web Audio API, Canvas 2D Confetti, Event Listeners.
- Google Fonts: Syne e Plus Jakarta Sans.
- Suba o projeto para o seu repositório no GitHub:
https://github.com/Schimidt06/refridev.git - Acesse vercel.com e faça login com seu GitHub.
- Clique em "Add New..." > "Project".
- Selecione o repositório refridev e clique em "Deploy".
- O arquivo
vercel.jsonincluso já configura automaticamente as URLs limpas, cache de imagens e cabeçalhos de segurança!
Desenvolvido com 💜 para o Refridev.