Uma jornada ambiental longa, contada em passos.
A Forest Brasil faz consultoria e engenharia ambiental: estudos, licenciamento, gestão e produção de mudas. O site precisava explicar um processo que leva meses sem cansar quem lê, e mostrar o trabalho de campo com a sobriedade da marca, criada pelo Studio no mesmo projeto.
- SPA leve, sem framework de rotas
React com um roteador próprio sobre a History API e cada página carregada sob demanda.
- O processo como fluxograma
No computador, a página de processo prende o fluxograma à tela e acende cada etapa conforme a rolagem; no celular, vira uma lista vertical.
- Conteúdo sem servidor
O portfólio é editado num painel em /admin que salva no navegador de quem edita, com exportação e importação de backup.
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.
- WebReact 18 · Vite 6 · TypeScript · Tailwind CSS 4
- RotasRoteador próprio (pushState/popstate) · páginas com React.lazy
- ConteúdoDados tipados dos serviços · portfólio editável em /admin
- PublicaçãoCloudflare Workers com assets estáticos · CSP e cache imutável
- QualidadeCI com typecheck, build e auditoria de dependências
forestbrasil-website/ ├─ src/App.tsx .............. shell e rotas ├─ src/utils/router.ts ...... roteador leve ├─ src/components/process/ ... fluxograma do processo ├─ src/components/admin/ ..... painel de conteúdo ├─ src/data/services.ts ..... serviços ├─ src/styles/globals.css ... tokens da marca ├─ public/_headers .......... CSP e cache └─ wrangler.jsonc ........... Cloudflare Workers
Decisões que sustentam o produto.
- 01
Rotas que não pesam
Cada página entra em um pedaço próprio do bundle e só carrega quando visitada; a primeira tela não espera pelo resto do site.
- 02
Rolagem que explica
O fluxograma acompanha a rolagem e marca o estado de cada etapa com cores de jornada que passam no contraste.
- 03
Painel que não mente
O /admin só funciona com senha definida no build e deixa claro que salva no navegador; o backup em JSON é o caminho para não perder conteúdo.
- 04
Acessível por padrão
Landmarks, skip link, foco visível, menus com aria e animações que respeitam prefers-reduced-motion.
- 05
Imagens otimizadas
Fotos servidas no tamanho e formato certos, lazy por padrão e prioridade alta só na imagem principal.
O que foi entregue.
Um site que conta a jornada ambiental da Forest Brasil passo a passo, publicado na Cloudflare em domínio de prévia.
- 11rotas
- 4frentes de serviço
- 37arquivos de interface em React
- 0servidor para manter
- UX/UI do site
- SPA em React
- Fluxograma do processo na rolagem
- Painel de conteúdo do portfólio
- Publicação na Cloudflare
- CI de qualidade
No ar em domínio de prévia (forest.glifodev.com). As fotos são de ambientação de banco aberto até a chegada das imagens próprias; o formulário de contato abre o e-mail do visitante enquanto não há backend.
métricas de uso a incluir quando medidas em produção