Site de R$50 Mil em 2 Minutos

Sem spam. Acesso imediato.

✓

Desbloqueado!

Role para baixo para acessar o guia completo.

As 4 camadas

Camada 1

Next.js + Tailwind

Base do projeto. O Claude Code já domina essa stack.

Camada 2

Framer Motion

Animações de entrada, scroll reveal, hover. O que separa site de R$2k de site de R$50k.

Camada 3

21st.dev

Biblioteca de componentes premium prontos pra usar. Navbars, heros, CTAs, footers — tudo com animação.

Camada 4

CLAUDE.md com regras visuais

Instrui o Claude a usar as 3 camadas acima de forma coordenada.

Como montar

Setup inicial

npx create-next-app@latest my-site --tailwind --typescript
cd my-site
npm install framer-motion

Acessar 21st.dev →

Escolhe os componentes no 21st.dev e manda o Claude instalar.

O prompt inicial

Cola no Claude Code

Cria um site institucional moderno usando Next.js + Tailwind + Framer Motion.
Use componentes do 21st.dev pra navbar, hero e footer.
Cada seção deve ter animação de entrada com Framer Motion.
Estilo: dark mode, gradientes sutis, tipografia grande, espaçamento generoso.
Referência visual: sites da Linear, Vercel, Raycast.

Erros que matam o resultado

Erro 1

Não usar Framer Motion

Sem animação, o site fica com cara de template grátis.

Erro 2

Componentes genéricos

Usar shadcn puro em vez de 21st.dev. shadcn é pra app, não pra landing page.

Erro 3

Prompt vago

"Faz um site bonito" não funciona. Dê referências visuais concretas.

Participe do grupo Negócios com IA

1.000+ empresários · Conteúdo diário · Gratuito

Entrar no grupo

Explorar outros guias →