Do Webflow para um site que é só da marca.
A Diverno Gelato faz gelato artesanal, cafés e sobremesas em São Luís, com várias lojas. O site antigo dependia do runtime e do jQuery do Webflow. A nova versão foi redesenhada e reconstruída em Astro, estática, com o conteúdo em dados tipados e um caminho curto para pedir pelo iFood.
- Nada da plataforma antiga
Sem runtime do Webflow, sem jQuery e sem atributos da plataforma; as classes ganharam o prefixo próprio do projeto.
- Dados no lugar de páginas
Preço, produto, loja e endereço vivem em arrays tipados; mudar o cardápio é editar um arquivo.
- Uma página por loja
Cada unidade tem endereço, mapa, rota e dados estruturados próprios, geradas a partir da mesma lista.
As telas, como foram construídas.
Capturas e gravações do produto rodando, sem montagem.
Como o sistema se organiza.
Camadas da aplicação e a estrutura real do repositório.
- WebAstro 7 · saída 100% estática · TypeScript estrito
- InteraçõesScripts próprios para menu, carrossel, abas, revelações e formulário, sem framework de UI
- ConteúdoDados tipados em src/data · feed do Instagram com seleção fixa e opção ao vivo
- Testes27 testes de fumaça com Playwright no CI
- PublicaçãoCloudflare com deploy automático na main
diverno-website/ ├─ src/layouts/ ............ contrato de página e JSON-LD ├─ src/components/sections/ . seções por página ├─ src/scripts/ ............ interações ├─ src/data/ ............... cardápio, lojas e textos ├─ tests/fumaca.spec.ts ...... testes de fumaça ├─ public/_headers .......... noindex da prévia └─ docs/ARQUITETURA.md ...... decisões
Decisões que sustentam o produto.
- 01
Estático de verdade
Todo o JavaScript enviado ao navegador é do projeto e existe só para as interações; a página abre sem esperar script.
- 02
Rotas geradas
Treze rotas escritas e seis geradas, uma por loja, a partir da mesma lista de unidades.
- 03
Dados estruturados
Cada loja publica endereço e localização em JSON-LD, com a validade conferida nos testes.
- 04
Testes que pegam o sumiço
Os testes não avaliam o design: garantem que nenhuma rota, menu, aba ou carrossel desapareça entre versões.
- 05
Instagram sem quebrar
A galeria funciona com uma seleção fixa e passa a puxar as publicações reais quando o token for configurado.
O que foi entregue.
Um site estático e rápido, sem dependência de plataforma, em prévia na Cloudflare enquanto o domínio da marca não é apontado.
- 19rotas, 6 delas geradas por loja
- 27testes de fumaça
- 6lojas com página própria
- 0dependências de runtime de plataforma
- UX/UI do site
- Migração do Webflow para Astro
- Cardápio e categorias
- Páginas das lojas com mapa
- Página de links com iFood
- Testes e CI
Em prévia (diverno.glifodev.com), com noindex até o domínio da marca ser apontado.
métricas de uso a incluir quando medidas em produção