Landing page premium para Pet Shop & Veterinária 24h em Bragança Paulista
O Pet Amigo é uma landing page de nível premium internacional para um Pet Shop e Clínica Veterinária 24h em Bragança Paulista, SP. O projeto foi totalmente refatorado com foco em estética de agência, micro-interações sofisticadas, performance e acessibilidade — transmitindo ao mesmo tempo carinho, confiança e profissionalismo.
A linguagem visual combina glassmorphism, gradientes sutis, sombras em camadas e tipografia fluida, sobre uma paleta quente e refinada inspirada no universo pet/veterinário.
| Elemento | Valor |
|---|---|
| Primária (coral) | #F2622E |
| Secundária (teal) | #0F9E91 |
| Acento (gold) | #F4A93C |
| Tinta / texto | #211C17 |
| Fundos | Creme #FFFCF9 · Areia #FBF5EE |
| Tipografia Display | Sora (500–800) |
| Tipografia Body | Plus Jakarta Sans (400–700) |
| Estilo | Glassmorphism premium, gradientes sutis, grid de agência |
- HTML5 — Estrutura semântica, single-file, sem build
- Tailwind CSS (CDN) — Design system com tokens customizados (cores, sombras, raios, fontes)
- JavaScript Vanilla — Sem frameworks (sem React/Vue)
- Intersection Observer API — Reveals on-scroll, scroll-spy e contadores animados
- Lucide Icons (CDN) — Ícones consistentes e leves
- Google Fonts — Sora + Plus Jakarta Sans (máx. 2 famílias)
- Imagens — Unsplash & Pexels (URLs estáveis, com
lazy loading)
Substituímos a biblioteca AOS por animações CSS custom + Intersection Observer:
- ✅ Reveals com stagger — entradas sequenciais por grupo (
data-stagger) - ✅ Parallax suave — blobs e cards flutuantes via
requestAnimationFrame(throttled) - ✅ Micro-interações — botões com efeito sheen, lift em cards, ícones que reagem ao hover
- ✅ Contadores animados — estatísticas que sobem ao entrar na viewport
- ✅ Hamburger animado — transforma em "X" com transição fluida
- ✅ Loading states — page loader, skeleton/fade-in de imagens
- ✅ Navbar inteligente — encolhe e ganha glass ao rolar, com scroll-spy do item ativo
preconnect/dns-prefetchpara fontes e CDNs de imagemloading="lazy"+decoding="async"em todas as imagens abaixo da dobrafetchpriority="high"na imagem principal do hero- Atributos
width/heightpara evitar CLS (layout shift) - Animações GPU-accelerated (
transform/opacity,will-change)
- Skip link "Pular para o conteúdo"
aria-label,aria-current,aria-expanded,role="dialog",aria-liveno formulário- Focus states visíveis (
:focus-visible) em toda a navegação - Suporte completo a
prefers-reduced-motion(desliga animações e parallax) - HTML semântico (
header,main,nav,section,article,figure,blockquote,footer) - Contraste de cores em conformidade com nível AA
- Hero — Headline com gradiente, estatísticas animadas, cards de confiança flutuantes
- Faixa de diferenciais — Marquee contínuo com os principais serviços
- Serviços — Banho & Tosa, Veterinária 24h, Hotelzinho, Adestramento + CTA de boas-vindas
- Produtos — Grid de produtos premium com badges e botão de carrinho
- Galeria — Mosaico responsivo com overlay no hover
- Depoimentos — Avaliações de tutores em cards glass
- Agendamento — Formulário validado + bloco de informações de contato
- Footer — Navegação, redes sociais e créditos
- Abordagem mobile-first
- Tipografia fluida com
clamp()(sem saltos entre breakpoints) - Menu hamburguer animado com overlay glass em telas menores
- Grids que se adaptam de 1 a 4 colunas conforme o dispositivo
- Abra o arquivo
index.htmlem qualquer navegador moderno - Não requer servidor nem build — tudo via CDN
- Para deploy, faça upload do arquivo para qualquer hospedagem estática
pet-amigo/
├── index.html # Landing page completa (single-file)
└── README.md # Documentação
- As imagens são carregadas via CDN (Unsplash/Pexels) e não exigem arquivos locais
- O formulário de agendamento exibe confirmação no front-end; para integração, adicione um
action/endpoint e trate o envio nosubmit
Akamine Web Studio — Bragança Paulista, SP
Criado com 🧡 por JulioAkaminee — desenvolvimento web, design criativo e soluções digitais para negócios locais.
🐕 🐈 Feito com amor para pets 🐈 🐕