DZMing/claude-code-config

Landing Page — Gere rapidamente landing pages de alta conversão

Gatilhos

• O usuário diz "me ajude a criar uma landing page", "gerar página inicial" ou "criar uma landing page"
• O produto precisa de uma vitrine externa, mas ainda não tem uma página pública
• É necessário vender o produto e ter uma página de apresentação

Fluxo de trabalho

1. Coletar informações: Nome do produto, descrição em uma frase, 3 funcionalidades principais, público-alvo, preço
2. Gerar estrutura: Hero → Problema → Solução → Funcionalidades → Preços → FAQ → CTA
3. Escrever copy: Foco nos pontos de dor do usuário, não escreva listas de funcionalidades, escreva os resultados que o usuário obtém
4. Gerar código: Next.js + Tailwind + shadcn/ui, diretamente executável
5. Verificar conversão: Garanta que cada seção tenha um CTA e que a cor do botão principal tenha contraste suficiente

Especificações de saída

• Arquivo app/page.tsx completo
• Todas as seções em um único arquivo (Landing Pages não precisam de componentes separados)
• Prioridade para dispositivos móveis (sm: breakpoint)
• Inclui tags <meta> SEO

Exemplo

Entrada:

Criei um assistente de escrita com IA que ajuda usuários a superar o medo da página em branco. Custa $9/mês e o público-alvo são redatores freelancers.

Estrutura do copy de saída:

Hero: "Nunca mais fique olhando para uma página em branco" — [Iniciar teste gratuito]
Problema: 80% do tempo de escrita é desperdiçado em "não saber por onde começar"
Solução: A IA te dá a primeira frase, você escreve o resto
Funcionalidades: Geração inteligente de início / Correspondência de estilo / Geração de esboço
Preços: $9/mês, 7 dias de teste gratuito, cancele quando quiser
FAQ: Qual a diferença para o ChatGPT? Isso vai substituir minha escrita?

Trecho de código:

// Seção Hero
export function Hero() {
  return (
    <section className="flex flex-col items-center py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight max-w-2xl">
        Nunca mais fique olhando para uma página em branco
      </h1>
      <p className="mt-4 text-xl text-muted-foreground max-w-lg">
        A IA te dá a primeira frase, você escreve o resto. 80% do tempo de escrita é desperdiçado no início — nós resolvemos isso.
      </p>
      <Button size="lg" className="mt-8">Iniciar teste gratuito de 7 dias</Button>
    </section>
  )
}