Uma produtora vende pelo que mostra.
A Malama Produções faz filmes, ensaios e cobertura de eventos no Rio de Janeiro. O site precisava abrir com vídeo, apresentar o portfólio sem pesar e deixar a equipe trocar filmes, fotos e textos sozinha.
- Astro com ilhas
HTML estático em quase tudo; React só no lightbox de vídeo e na galeria de fotos, onde há estado de verdade.
- Painel para a equipe
Sanity Studio embutido em /admin, com login, para editar configurações, filmes, fotos, time e serviços.
- Vídeo fora do servidor
Os vídeos pesados vêm do R2 da Cloudflare, e a abertura respeita quem prefere menos movimento.
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 6 · TypeScript estrito · Tailwind CSS 4 com tokens
- IlhasReact 19 no lightbox de vídeo e na galeria de fotos
- MovimentoLenis e scripts próprios: abertura, parallax e revelações, com prefers-reduced-motion
- CMSSanity Studio embutido em /admin · 11 tipos de documento
- PublicaçãoCloudflare (assets estáticos) ou Docker com nginx · vídeos no R2
malama-institucional/ ├─ src/pages/ ................ home, portfólio e propostas ├─ src/components/malama/ .... galeria, lightbox, reveals ├─ src/lib/ .................. conteúdo e portfólio ├─ studio/schemaTypes/ ....... modelos do CMS ├─ docs/CMS.md ............... guia do painel ├─ docs/MIGRACAO-ASTRO.md ..... análise da migração └─ wrangler.jsonc · Dockerfile . dois alvos de deploy
Decisões que sustentam o produto.
- 01
A migração decidida com dados
A troca de Next.js para Astro foi analisada antes, com medições do código e argumentos contra e a favor registrados.
- 02
Só hidrata o que precisa
Duas ilhas React; todo o resto chega pronto em HTML e roda com scripts pequenos no próprio componente.
- 03
Conteúdo nas mãos da equipe
Filmes com ID do YouTube, capa e descrição, categorias de foto, time, serviços e logos de clientes, tudo editável.
- 04
Propostas sob medida
Páginas de proposta para eventos com aftermovie e crédito de todas as fotos, sem programação inventada.
- 05
Dois caminhos de deploy
Cloudflare para os assets estáticos ou um contêiner nginx, com o mesmo build.
O que foi entregue.
O site no ar em malamaprod.com, com a equipe editando o conteúdo pelo próprio painel.
- 3propostas de evento publicadas
- 11tipos de conteúdo no painel
- 2ilhas React
- 2alvos de deploy
- UX/UI do site
- Site em Astro
- Galeria e lightbox de vídeo
- Painel Sanity para a equipe
- Páginas de proposta
- Publicação na Cloudflare
métricas de uso a incluir quando medidas em produção