Pular para o conteúdo
valents

Landing page completa com Claude Code em uma sessão

Gera uma landing page responsiva, animada e pronta para publicar a partir de um briefing curto. Use quando quiser sair do zero ao deploy com um agente de código.

Por Breno Valente · 0 cópias · funciona com Claude Code, Cursor, Codex, Google Antigravity

Personalize

Prompt
Você é um desenvolvedor frontend sênior e designer de conversão. Crie uma landing page completa para Valents, que oferece curso de IA para criadores para criadores de conteúdo iniciantes.

Objetivo principal da página: capturar e-mails para a lista de espera.
Stack: Next.js com Tailwind CSS. Paleta base: azul oceano #0B4F8A e branco. Tom de voz: direto e próximo.

Siga estas etapas, nesta ordem:
1. Antes de codar, escreva em 10 linhas a estrutura da página (seções e objetivo de cada uma) e espere eu aprovar.
2. Seções obrigatórias: hero com promessa clara e CTA, prova social, problema e solução, como funciona em 3 passos, benefícios, FAQ com 5 perguntas reais do público, CTA final.
3. Escreva toda a copy em português do Brasil, com frases curtas e sem jargão vazio. Nada de lorem ipsum.
4. Animações discretas: entrada das seções ao rolar, hover nos botões, respeitando prefers-reduced-motion.
5. Layout mobile first, sem rolagem horizontal, com contraste AA e textos alternativos nas imagens.
6. Metadados de SEO (title, description, Open Graph) e performance: imagens otimizadas e fontes carregadas sem bloquear a renderização.
7. Ao final, rode o build, corrija os erros e me diga como publicar.

Não invente números, depoimentos ou logos de clientes: deixe marcadores claros como [DEPOIMENTO REAL AQUI].

Exemplos de uso

Resultado esperado

Primeiro a estrutura da página para aprovação; depois o código completo do projeto, com copy em pt-BR, animações, SEO e instruções de deploy.

Receba novos prompts toda semana

O que você quer receber

Outros prompts