ooiyeefei/ccc

Landing Page GTM

Crie landing pages focadas em conversão que vendem — não apenas descrevem. Combine pesquisa de produto, posicionamento competitivo, copywriting de vendas e implementação de frontend em um único fluxo de trabalho.

Intake — Sempre Pergunte Primeiro

Antes de qualquer trabalho, colete estas informações:

Entrada	Pergunta
URL de destino	"Qual URL ou rota é para esta página?" (ex.: myapp.com/pricing)
Caminho do código	"Onde está o código-fonte?" (ex.: /home/user/projeto/src)
Produto/recurso	"Qual produto ou recurso esta página está vendendo?"
Público	"Quem é o comprador? (cargo, porte da empresa, nível de dor)"
Concorrentes	"Com quem eles te comparam?"
Restrições	"Sistema de design existente, provedor de formulários, destino do CTA?"

Se a página já existe, leia-a primeiro. Nunca proponha alterações em código que você não leu.

Fluxo de Trabalho

Fase 1: Pesquise o Produto

Estude o produto real antes de escrever uma única palavra de copy. Nunca invente recursos.

1. Leia o código-fonte — Procure pela implementação do recurso. Use git log para encontrar alterações recentes.
2. Valide afirmações — Para cada recurso afirmado, confirme que ele existe no código. Relate lacunas: "X existe. Y é parcial. Z não encontrado."
3. Identifique diferenciais — O que ele faz que os concorrentes realmente não fazem? Vantagens arquitetônicas > recursos superficiais.
4. Encontre o ângulo de autoaperfeiçoamento — Qualquer comportamento de aprendizado/adaptação é ouro de marketing. Entenda o mecanismo para descrevê-lo sem jargões.

Fase 2: Posicionamento Competitivo

Enquadre cada seção como "por que nós, não eles" sem nomear concorrentes.

Fórmula de posicionamento:

Dor que eles sentem diariamente
+ O que os concorrentes fazem sobre isso (mal)
+ O que você faz de diferente
+ Resultado que eles experimentarão

Teste antigenericidade — Se a copy pudesse aparecer no site de um concorrente sem alterações, reescreva-a:

• "Com IA" → O que a IA realmente FAZ?
• "Automação inteligente" → O que especificamente é automatizado?
• "Fácil de usar" → Comparado a qual alternativa dolorosa?

Padrões de descarte de concorrentes:

• "Todo aplicativo de [categoria] afirma [buzzword]. A maioria apenas [o que eles fazem]. Nós somos diferentes."
• "Não [abordagem antiga]. Verdadeiro [nova abordagem] que [resultado concreto]."
• "Outras ferramentas ficam estáticas. A nossa [como evolui]."

Fase 3: Escreva Copy de Vendas

Transforme recursos em desejo. Pense como um comprador, não como um engenheiro.

Voz por público:

Público	Tom	Exemplo
Proprietário de PME	Caloroso, direto	"Tire uma foto do recibo. Pronto."
Gerente financeiro	Orientado a resultados	"Cada correspondência mostra exatamente o porquê."
Empresarial	Geração de confiança	"Controle sem complexidade."
Técnico	Preciso, confiável	"Fica mensuravelmente mais inteligente a cada semana."

Regras de copy:

1. Comece pela dor — "Pare de preencher formulários um por um" > "Preenchimento automatizado de formulários"
2. Uma frase, uma ideia — Curta. Impactante. Escaneável.
3. Concreto > abstrato — "Responda em 10 segundos" > "Tempos de resposta rápidos"
4. Teste "eu quero isso" — Leia cada card em voz alta. O comprador pensa "Preciso disso"? Se não, reescreva.
5. Termine com resultado — "Nunca perca uma venda por resposta lenta" > "Usa PLN para gerar respostas"

Falando sobre IA/tecnologia sem jargões:

Realidade técnica	Diga em vez disso
Modelo de ML é retreinado semanalmente	"Fica mais inteligente a cada semana com seu feedback"
Framework de otimização interno	Nunca mencione. Diga "aprende com correções"
LLM / GPT / Claude	"Assistente de IA" ou apenas "seu assistente"
Integração de API	"Conecta às suas ferramentas existentes"
Dados de treinamento de correções do usuário	"Cada correção ensina algo novo"
Gate de precisão evita regressão	"Só pode melhorar — nunca piorar"
IA explicável / traces de raciocínio	"Mostra exatamente por que cada decisão foi tomada"

Fase 4: Projete a Página

Anatomia da página focada em conversão:

1. Hero          — Título + subtítulo + CTA primário
2. Pontos de Dor — 3-4 cenários que o comprador SENTE (tons vermelhos/quentes)
3. Solução       — Cards de transformação, não listas de recursos
4. Prova Social  — Depoimentos ou métricas
5. Como Funciona — Máximo 3 etapas (reduza a complexidade percebida)
6. Preço         — Comparação com o status quo, não apenas uma tabela
7. FAQ           — Tratamento de objeções disfarçado de ajuda
8. CTA Final     — Urgência + formulário (repita o CTA primário)

Nem toda página precisa de todas as seções. Combine com a complexidade do produto:

• Lançamento de novo produto: Todas as seções
• Atualização de card de recurso: Cards + nova seção se necessário
• Produto em portfólio: Cards em gaveta/grid, link para página dedicada

CTA e formulários:

• CTA primário no hero E no final — duas chances de conversão
• Mínimo de campos. Cada campo extra mata ~10% de conversão.
• Captura de lead mínima: nome + email + empresa. Adicione telefone apenas se o produto exigir.
• Use a infraestrutura de formulários existente (Formspree, Resend, etc.) — não adicione dependências.
• Adicione um campo oculto _source para distinguir de qual página o lead veio.

Padrão de Acesso Antecipado / Lista de Espera:

• Badge colorido sinaliza exclusividade (ex.: roxo "Acesso Antecipado")
• Formulário inline mínimo (2-3 campos) diretamente no card do recurso
• Menor atrito do que uma página separada — capture o interesse no momento da descoberta

Fase 5: Construa e Lance

1. Combine com padrões existentes — Leia 2-3 páginas existentes. Combine imports, layout, roteamento, sistema de design.
2. Reutilize o sistema de design — Apenas componentes de UI existentes. Não introduza novos frameworks.
3. Mobile-first — Cada seção deve funcionar em largura de 375px.
4. Registre a rota — Adicione ao roteador com import.
5. Verificação de tipos — Execute o verificador de tipos antes de commitar. Zero novos erros.
6. Consistência em múltiplos codebases — Se o produto aparece em vários sites, atualize TODOS com mensagens consistentes.

Fase 6: Checklist de Lançamento

Antes de enviar:

• Cada recurso na copy existe no código do produto real
• Sem jargões (verifique: API, SDK, LLM, modelo, algoritmo, pipeline, container)
• Cada card passa no teste "eu quero isso"
• Botões de CTA funcionam (rolam para o formulário ou link para inscrição)
• Formulário envia corretamente com campo _source
• Responsivo em mobile a 375px
• Verificação de tipos passa
• Todos os codebases atualizados se o produto estiver em múltiplos sites
• Teste de copy do concorrente: poderia aparecer no site de um concorrente? Se sim, reescreva.

Arquivos de Referência

• references/copy-formulas.md — Fórmulas de título, padrões de card, texto de CTA, templates de FAQ
• references/page-archetypes.md — Templates para lançamento de produto, atualização de recurso, comparação, páginas de lista de espera