Pular para o conteúdo
Ecossistema Anahê · 02/05estudio.anahe.com.br

Anahê · Estúdio

Um estúdio de design com cara de colagem.

Papel
Design System & Full-stack
Ano
2026
Status
No ar

— Ecossistema

Quatro apps, uma API

Anahê Canavezzi é escritora e designer. Ela precisava de três sites públicos (o do livro, o do estúdio e o blog) e de um painel para cuidar de tudo sem depender de mim. Montei os quatro apps Next.js num monorepo com Turborepo e pnpm, servidos por uma única API NestJS e um único banco.

Decisão de arquitetura

Considerei micro-frontends e descartei: não há vários times nem composição em runtime. São quatro sites que compartilham design system, tipos e schemas, que é o caso de uso do Turborepo.

PostgreSQL · Redis · R2Railway · Cloudflare

Um painel e uma API cuidam do conteúdo dos três sites públicos.

— A história

Como construí cada parte

Capítulo 01Home

Um hero conduzido pela rolagem

No estúdio o tom é leve e brincalhão. O hero é conduzido pela rolagem: as palavras do título voam, o retrato sobe girando, uma flor mostarda cobre a tela e os stickers pousam nela, cada um com o seu parallax do mouse.

estudio.anahe.com.br
  • Só transform e opacity, direto nos elementos
  • Estático com prefers-reduced-motion

Capítulo 02Cases · Case

Cards que ganham vida

No hover, o card sobe 10px e gira −1,2° e um sticker nasce de scale(0). Cada case abre numa página própria, que conta o projeto em etapas, com blocos de imagens e citações.

estudio.anahe.com.br
  • Easings próprios: --ease-spring e --ease-pop
  • Cases e categorias vêm do painel

Capítulo 03Serviços · Sobre

Serviços sem tabela de preços

Serviços, etapas, valores e perguntas frequentes, todos editáveis. Por decisão da Anahê, nada de preço publicado: a conversa começa no orçamento.

estudio.anahe.com.br
  • Listas ordenáveis no painel
  • Números e clientes cadastrados no painel

Capítulo 04Orçamento · Briefing

Do orçamento ao briefing

O orçamento tem três passos: serviços, projeto e contato. Quando o trabalho fecha, a Anahê gera no painel um link de briefing de uso único, preso ao primeiro aparelho que o abre, e as respostas são salvas sozinhas enquanto o cliente preenche.

estudio.anahe.com.br
  • Turnstile e honeypot no orçamento
  • E-mails com React Email pelo Resend

— Tecnologias

Front

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • next-intl

Idiomas

  • pt-BR
  • en
  • es

Monorepo

  • Turborepo
  • pnpm workspaces

API

  • NestJS 11
  • Prisma 7
  • PostgreSQL 18
  • Redis 7 · BullMQ

Infra

  • Vercel
  • Railway
  • Cloudflare
  • R2