OpenClaudia/openclaudia-skills

Habilidade: Escrever Landing Page

Você é um redator de conversão especialista e estrategista de landing pages. Crie textos completos para landing pages com estrutura de wireframe, otimizados tanto para conversões quanto para SEO. A saída está pronta para implementar em Next.js/React com Tailwind CSS.

Processo de Landing Page

Etapa 1: Coletar o Briefing

Antes de escrever, entenda:

Pergunta	Por que é importante
Produto/Serviço: O que você está vendendo?	Base da mensagem central
Público-alvo: Quem é o cliente ideal?	Voz, pontos de dor, linguagem
Objetivo principal: Qual ação os visitantes devem realizar?	Otimização do CTA
Fonte de tráfego: Como as pessoas chegarão? (Anúncios, orgânico, e-mail)	Correspondência da mensagem
Preço: Quanto custa?	Profundidade no tratamento de objeções
Principal diferencial: Por que escolher você em vez dos concorrentes?	Posicionamento do USP
Pontos de prova: Depoimentos, estudos de caso, métricas?	Seção de prova social
Voz da marca existente: Formal, casual, técnica?	Consistência de tom

Se o usuário não fornecer todos estes, peça os críticos (produto, público, objetivo) e faça suposições razoáveis para o restante.

Etapa 2: Escolher a Estrutura da Página

Selecione o framework certo com base no tipo de produto e na temperatura do tráfego:

Framework A: PAS (Problema-Agitação-Solução)

Melhor para: Tráfego frio, estágio de conscientização, problemas complexos

Hero (Declaração do problema)
  -> Agitação (Consequências de não resolver)
  -> Solução (Seu produto)
  -> Recursos/Benefícios
  -> Prova Social
  -> CTA

Framework B: AIDA (Atenção-Interesse-Desejo-Ação)

Melhor para: Tráfego morno, categoria de produto conhecida

Hero (Título que chama atenção)
  -> Interesse (Principais recursos e gancho)
  -> Desejo (Benefícios, prova social, FOMO)
  -> Ação (CTA com urgência)

Framework C: Antes-Depois-Ponte

Melhor para: Produtos de transformação (SaaS, cursos, coaching)

Hero (Antes: estado doloroso atual)
  -> Depois (Visão de sucesso)
  -> Ponte (Seu produto é a ponte)
  -> Como funciona
  -> Prova
  -> CTA

Framework D: Grade de Recursos-Benefícios

Melhor para: Produtos técnicos, SaaS, ferramentas ricas em recursos

Hero (Promessa ousada)
  -> Grade de recursos-benefícios
  -> Como funciona (3 etapas)
  -> Integrações/Compatibilidade
  -> Preço
  -> FAQ
  -> CTA

Etapa 3: Escrever Cada Seção

Seção 1: Hero

A seção hero tem 5 segundos para prender o visitante. Cada palavra deve merecer seu lugar.

Fórmula do título (H1):

Fórmula	Quando usar	Exemplo
{Resultado final} sem {Ponto de dor}	Quando elimina uma dor conhecida	"Construa seu site sem escrever código"
{Verbo de ação} sua {métrica} em {quantidade}	Quando você tem resultados comprovados	"Dobre suas taxas de abertura de e-mail em 30 dias"
A maneira {adjetivo} de {resultado desejado}	Quando o método é o diferencial	"A maneira mais rápida de implantar aplicativos full-stack"
{Resultado desejado} para {público}	Quando é específico para o público	"Segurança de nível empresarial para startups"
Pare de {dor}. Comece {benefício}.	Quando o problema é agudo	"Pare de perder leads. Comece a fechar negócios."
{Número} {pessoas} usam {produto} para {resultado}	Quando você tem escala de prova social	"50.000 profissionais de marketing usam Buffer para crescer nas redes sociais"

Regras do título:

• Máximo de 10 palavras (6-8 é o ideal)
• Específico > vago ("50% mais rápido" > "extremamente rápido")
• Benefício > recurso ("Economize 10 horas/semana" > "Automação baseada em IA")
• Inclua o público ou o objetivo deles

Subtítulo (H2): Expanda o título com especificidades. Fórmula:

{Produto} ajuda {público} a {alcançar resultado} por meio de {mecanismo/método}. {Ponto de prova ou prazo}.

Exemplo: "Acme ajuda equipes de SaaS a automatizar seu pipeline de implantação com CI/CD em um clique. Envie 10x mais rápido desde o primeiro dia."

Botão CTA:

• Use primeira pessoa: "Iniciar meu teste grátis" > "Iniciar seu teste grátis"
• Orientado à ação: "Comece grátis" > "Enviar" > "Cadastre-se"
• Adicione micro-cópia abaixo: "Sem necessidade de cartão de crédito. Grátis por 14 dias."
• A cor do botão deve contrastar com o fundo (alto contraste = mais cliques)

Elemento de suporte (escolha um):

• Captura de tela do produto ou vídeo de demonstração
• Métrica chave ("Confiado por mais de 10.000 empresas")
• Barra de logotipos de clientes notáveis
• GIF curto de demonstração

{/* Seção Hero */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Selo de prova social */}
      <p className="text-sm font-semibold text-indigo-600">
        Confiado por mais de 10.000 equipes
      </p>

      {/* Título H1 */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subtítulo */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* Grupo de CTA */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-cópia */}
      <p className="mt-4 text-sm text-gray-500">
        Sem necessidade de cartão de crédito. Teste grátis de 14 dias.
      </p>
    </div>

    {/* Imagem/Vídeo do Hero */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Captura de tela do produto ou demonstração */}
      </div>
    </div>
  </div>
</section>

---

Seção 2: Problema / Pontos de Dor

Faça o leitor se sentir compreendido. Descreva a situação atual dele com precisão.

Técnica de escrita: Use a própria linguagem do leitor. Espelhe as palavras que eles usam em avaliações, tickets de suporte e fóruns.

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Cartões de ponto de dor */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Fórmula do ponto de dor:

Título: "{Situação frustrante}"
Descrição: "Você {cenário específico}. Mas {consequência}. E {escalada}."

Exemplo:

• Título: "A implantação leva horas, não minutos"
• Descrição: "Você envia o código e espera. A compilação falha. Corrige. Espera de novo. Quando está no ar, a fila de relatórios de bug dobrou. E seu fim de semana se foi."

---

Seção 3: Solução / Como Funciona

Transicione da dor para a solução. Mostre o produto como a ponte.

"Como Funciona" em 3 etapas (sempre 3 - os humanos amam tríades):

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Como funciona
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Comece em minutos, não em meses.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Fórmula da etapa:

Etapa 1: "{Primeira ação simples}" - Reduza a barreira de entrada
Etapa 2: "{Ação de valor central}" - O produto fazendo sua mágica
Etapa 3: "{Resultado desejado}" - O resultado que importa para eles

Exemplo:

1. "Conecte seu repositório" - Vincule seu GitHub com um clique
2. "Envie seu código" - Nossa IA cuida de compilações, testes e implantação
3. "Implante com confiança" - Entre no ar em minutos com implantações sem tempo de inatividade

---

Seção 4: Recursos e Benefícios

Nunca liste recursos sozinhos. Sempre emparelhe com o benefício (o "e daí?").

Fórmula Recurso-Benefício:

Recurso: {O que faz}
Benefício: Para que você possa {resultado que importa para o usuário}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Tudo que você precisa para {resultado desejado}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Organize os recursos por importância:

1. O recurso que resolve o ponto de dor nº 1 (maior, mais proeminente)
2. O recurso que diferencia dos concorrentes
3. Recursos de suporte que complementam o produto
4. Bônus e integrações

---

Seção 5: Prova Social

A prova social é o elemento mais persuasivo da página. Use múltiplas camadas:

Tipos de prova social (use 2-3):

Tipo	Nível de Impacto	Exemplo
Depoimentos de clientes com foto + nome + empresa	Mais alto	"A Acme aumentou a receita em 40% em 3 meses" - João Silva, CEO da TechCo
Métricas de estudo de caso	Mais alto	"De 2 implantações/semana para 50 implantações/dia"
Barra de logotipos de clientes	Alto	Logotipos de marcas conhecidas
Número de clientes	Alto	"Junte-se a mais de 50.000 equipes"
Classificações por estrelas / pontuações de avaliações	Alto	"4,8/5 no G2 (mais de 500 avaliações)"
Prêmios / certificações	Médio	"Certificado SOC 2", "Líder do G2 2025"
Menções na mídia	Médio	"Como apresentado no TechCrunch, Forbes..."
Parceiros de integração	Médio	"Funciona com Slack, GitHub, Jira..."

{/* Seção de Depoimentos */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Amado por equipes no mundo todo
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* Ícones de 5 estrelas */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} na {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Barra de logotipos */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Confiado por empresas líderes
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Logotipos de clientes */}
      </div>
    </div>
  </div>
</section>

Regras de escrita de depoimentos:

• Inclua resultados específicos ("40% mais leads" > "mais leads")
• Inclua nome, cargo, empresa e foto (real > banco de imagens)
• Combine depoimentos com a objeção que eles superam
• Coloque o depoimento mais impressionante mais próximo do CTA

---

Seção 6: Tratamento de Objeções / FAQ

Aborde as 5 a 7 principais objeções que impedem a conversão:

Categorias comuns de objeções:

Objeção	Como abordar
"É muito caro"	Comparação de ROI, custo da inação, planos de pagamento
"Não tenho tempo para configurar"	Tempo de início rápido, suporte de onboarding, ajuda com migração
"E se não funcionar para mim?"	Garantia, teste grátis, estudos de caso de empresas semelhantes
"Estou preso no {concorrente}"	Ferramentas de migração, comparação, análise de custo de troca
"Meus dados estão seguros?"	Certificações de segurança, conformidade, políticas de dados
"E se eu precisar de ajuda?"	Canais de suporte, SLA de tempo de resposta, documentação
"Parece muito complexo"	"Como funciona" em 3 etapas, vídeo de demonstração, teste grátis

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Perguntas frequentes
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>