Sereno — café & torrefação
Marca fictícia — projeto conceitual
Um exercício de direção de arte: marca inventada do zero — nome, tom de voz, cardápio, grãos, assinatura — para mostrar até onde vai um site quando ninguém segura a mão.
O desafio
Provar que o estúdio consegue criar não só o site, mas a marca inteira em volta dele: naming, copy, cardápio, storytelling de produto e identidade visual.
A solução
Hero em vídeo controlado por scroll, seção pinada narrando a jornada do grão (fazenda → torra → xícara), som ambiente opcional e um clube de assinatura completo. Todo o conteúdo — inclusive a história de cada bebida — vive num único arquivo comentado.
O que tem dentro
Funcionalidades
Marca criada do zero
Nome, tagline, tom de voz, cardápio com história por item, três grãos com ficha completa e clube de assinatura.
Jornada do grão
Seção pinada com GSAP ScrollTrigger: três atos que avançam conforme você rola.
Hero em vídeo por scroll
O vídeo avança de acordo com a posição da página, não com o tempo — e cai para imagem em conexões lentas.
Reserva por WhatsApp
Modal de reserva que monta a mensagem pronta com nome, data, horário e número de pessoas.
Stack
- Next.js 14
- TypeScript
- Tailwind CSS
- GSAP
- Lenis
- Framer Motion
- OGL
Nosso papel
- Naming e identidade
- Copy
- Direção de arte
- Front-end