Gerador de Página de Destino (Landing Page Generator)

Gere páginas de destino de alta conversão a partir de uma descrição de produto. Gere componentes Next.js/React completos com múltiplas variantes de seção, frameworks de cópia comprovados, otimização para SEO e padrões de performance. Não é lorem ipsum — é cópia real que converte.

Meta: LCP < 1s · CLS < 0.1 · FID < 100ms
Saída: Componentes TSX + estilos Tailwind + meta SEO + variantes de cópia

Quando Usar

Você precisa gerar uma página de destino de marketing em Next.js ou React.
A tarefa envolve estrutura de página focada em conversão, variantes de seção, estilização com Tailwind ou cópia otimizada para SEO.
Você deseja uma saída completa de página de destino a partir de uma descrição de produto, em vez de fragmentos de UI isolados.

Capacidades Principais

5 variantes de seção de herói (centralizada, dividida, gradiente, vídeo de fundo, minimalista)
Seções de recursos (grade, alternada, cartões com ícones)
Tabelas de preços (2 a 4 níveis com lista de recursos e alternância)
FAQ em acordeão com marcação de esquema
Depoimentos (grade, carrossel, citação única)
Seções de CTA (banner, página inteira, inline)
Rodapé (simples, mega, minimalista)
4 estilos de design com conjuntos de classes Tailwind

Fluxo de Trabalho de Geração

Siga estas etapas em ordem para cada solicitação de página de destino:

Coletar entradas — colete nome do produto, slogan, público, ponto de dor, benefício principal, níveis de preço, estilo de design e framework de cópia usando o formato de gatilho abaixo. Pergunte apenas pelos campos ausentes.
Analisar voz da marca (recomendado) — se o usuário tiver conteúdo de marca existente (cópia do site, postagens de blog, materiais de marketing), execute-o através de marketing-skill/content-production/scripts/brand_voice_analyzer.py para obter um perfil de voz (formalidade, tom, perspectiva). Use o perfil para informar a seleção de estilo de design e framework de cópia:
- formal + profissional → estilo enterprise, framework AIDA
- casual + amigável → estilo bold-startup, framework BAB
- profissional + autoritário → estilo dark-saas, framework PAS
- casual + conversacional → estilo clean-minimal, framework BAB
Selecionar estilo de design — mapeie a escolha do usuário (ou infira da análise de voz da marca) para um dos quatro conjuntos de classes Tailwind na Referência de Estilo de Design.
Aplicar framework de cópia — escreva todo o texto do título e do corpo usando o framework escolhido (PAS / AIDA / BAB) antes de gerar os componentes. Combine a formalidade e o tom do perfil de voz em todo o texto.
Gerar seções em ordem — Herói → Recursos → Preços → FAQ → Depoimentos → CTA → Rodapé. Pule seções não relevantes para o produto.
Validar contra a checklist de SEO — percorra cada item na Checklist de SEO antes de gerar o código final. Corrija quaisquer lacunas inline.
Gerar componentes finais — entregue arquivos TSX completos e prontos para copiar e colar, com todas as classes Tailwind, meta SEO e dados estruturados incluídos.

Gatilho deste Skill

Produto: [nome]
Slogan: [proposta de valor em uma frase]
Público-alvo: [quem são eles]
Principal ponto de dor: [qual problema você resolve]
Principal benefício: [resultado principal]
Níveis de preço: [gratuito/pro/enterprise ou descreva]
Estilo de design: dark-saas | clean-minimal | bold-startup | enterprise
Framework de cópia: PAS | AIDA | BAB

Referência de Estilo de Design

Estilo	Fundo	Destaque	Cartões	Botão CTA
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

Bold Startup títulos: adicione font-black tracking-tight a todos os elementos <h1>/<h2>.

Frameworks de Cópia

PAS (Problema → Agitação → Solução)

H1: Estado doloroso em que se encontram
Sub: O que acontece se não consertarem
CTA: O que você oferece
Exemplo — H1: "Sua equipe perde 3 horas por dia com relatórios manuais" / Sub: "Cada hora gasta em planilhas é uma hora não fechando negócios. Seus concorrentes já estão automatizados." / CTA: "Automatize seus relatórios em 10 minutos →"

AIDA (Atenção → Interesse → Desejo → Ação)

H1: Declaração ousada que chama a atenção → Sub: Fato ou benefício interessante → Recursos: Pontos de prova que geram desejo → CTA: Ação clara

BAB (Antes → Depois → Ponte)

H1: "[Estado antes] → [Estado depois]" → Sub: "Veja como [produto] faz a ponte" → Recursos: Como funciona (a ponte)

Componente Representativo: Herói (Centralizado com Gradiente — Dark SaaS)

Use este modelo estrutural para todas as variantes de herói. Troque classes de layout, direção do gradiente e posicionamento da imagem para variantes divididas, com vídeo de fundo e minimalistas.

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Agora em beta público
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Entregue mais rápido.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Quebre menos.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          A plataforma de deploy que detecta erros antes dos seus usuários.
          Configuração zero. Rollbacks instantâneos. Monitoramento em tempo real.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Inicie o teste gratuito
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            Veja como funciona →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">Sem cartão de crédito · Teste gratuito de 14 dias</p>
      </div>
    </section>
  )
}

Outros Padrões de Seção

Seção de Recursos (Alternada)

Mapeie sobre um array features com { title, description, image, badge }. Alterne a direção do layout com i % 2 === 1 ? "lg:flex-row-reverse" : "". Use <Image> com width/height explícitos e rounded-2xl shadow-xl. Envolva em <section className="py-24"> com container max-w-6xl.

Tabela de Preços

Mapeie sobre um array plans com { name, price, description, features[], cta, highlighted }. O plano destacado recebe border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; os outros recebem border border-gray-800 bg-gray-900. Renderize preço null como "Personalizado". Use ícone <Check> por linha de recurso. Layout: grid gap-8 lg:grid-cols-3.

FAQ com Marcação de Esquema

Injete FAQPage JSON-LD via <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> dentro da seção. Mapeie FAQs com { q, a } no <Accordion> do shadcn com type="single" collapsible. Container: max-w-3xl.

Depoimentos, CTA, Rodapé

Depoimentos: Grade (grid-cols-1 md:grid-cols-3) ou bloco de herói de citação única com avatar, nome, cargo e texto da citação.
Banner de CTA: Seção de largura total com título, subtítulo e dois botões (primário + ghost). Adicione sinais de confiança (garantia de reembolso, faixa de logotipos) imediatamente abaixo.
Rodapé: Logotipo + colunas de navegação + links sociais + legal. Use separador border-t border-gray-800.

Checklist de SEO

Etapa de validação: Antes de gerar o código final, verifique se cada item da checklist acima foi atendido. Corrija quaisquer lacunas inline — não pule itens.

Metas de Performance

Métrica	Meta	Técnica
LCP	< 1s	Pré-carregar imagem do herói, usar `priority` no Next/Image
CLS	< 0.1	Definir largura/altura explícitos em todas as imagens
FID/INP	< 100ms	Adiar JS não crítico, usar `loading="lazy"`
TTFB	< 200ms	Usar ISR ou geração estática para páginas de destino
Bundle	< 100KB JS	Auditar com `@next/bundle-analyzer`

Armadilhas Comuns

Imagem do herói não pré-carregada — adicione a prop priority ao primeiro <Image>
Breakpoints móveis ausentes — sempre projetar mobile-first com prefixos sm:
Texto do CTA muito vago — "Comece agora" é melhor que "Saiba mais"; "Inicie o teste gratuito" é melhor que "Cadastre-se"
Página de preços sem sinais de confiança — adicione garantia de reembolso e depoimentos perto do CTA
Nenhum CTA acima da dobra no mobile — garanta que o botão esteja visível sem rolagem em viewport de 375px

Skills Relacionados

Analisador de Voz da Marca (marketing-skill/content-production/scripts/brand_voice_analyzer.py) — Execute antes da geração para estabelecer o perfil de voz e garantir consistência da cópia
Sistema de Design de UI (product-team/ui-design-system/) — Gere tokens de design a partir da cor da marca antes de construir a página
Análise Comparativa (product-team/competitive-teardown/) — O posicionamento competitivo informa a mensagem e a diferenciação da página de destino

agency-black/Skills

O que é Skills?

Perguntar na sua IA favorita

Documentação