Lp Captura

Skill: LP de Captura (padrão Bravy)

Gera uma página de captura de leads no padrão validado das LPs Bravy de aula gratuita. Estrutura testada em /aula-claude-code (modelo de referência) — capta nome+WhatsApp em modal de 2 steps, dispara webhooks paralelos (BI, n8n, Meta Pixel) e redireciona pro grupo WhatsApp.

Inputs obrigatórios

• tema — assunto da aula/evento (ex: "agentes de IA com Claude Code")
• persona — público-alvo (ex: "empresários", "contadores", "advogados")
• promessa — o que a pessoa leva em 1 frase (ex: "sai com seu primeiro agente rodando")
• data — quando rola (ex: "hoje às 20h", "quinta 15/05 19h30")
• duração — tempo da aula (ex: "2 horas")
• slug — pasta da página (ex: "aula-agentes-ia")

Inputs de integração (obrigatórios pra funcionar)

• WHATSAPPGROUPURL — link do grupo de destino após captura
• BIWEBHOOKURL — webhook BI que recebe nome+whatsapp
• N8NWEBHOOKURL — webhook n8n que recebe os 5 steps
• PIXELCONTENTNAME — string do Meta Pixel (ex: lead_aula_agentes_ia)
• METAPIXELID (opcional, default do projeto)

Anatomia da LP de captura — 5 seções na ordem

1. Sticky Countdown (topo)
2. Hero (headline + countdown grande + CTA)
3. Takeaways (3 cards do que a pessoa leva)
4. Modal 2-step (capturar lead — abre ao clicar CTA)
5. Final Screen (msg de confirmação + redirect WhatsApp em 2s)

Seção 1 — Sticky Countdown

Função: urgência permanente. Elementos: badge "AO VIVO" pulsante + data/horário + countdown H:MM:SS à direita. Fica fixo no topo durante todo o scroll.

Seção 2 — Hero

Função: parar o scroll e prometer transformação concreta.

Estrutura de copy:

• Badge (acima do H1): contexto + grátis (ex: "Aula gratuita · Hoje às 20h")
• H1 — máximo 14 palavras, declarativa, com negrito no benefício final:

> Tenha um time de agentes de IA trabalhando 24/7 sem contratar mais ninguém.

• Subtitle — 2 linhas, reforça gratuito + duração + entrega:

> Aula 100% gratuita e ao vivo. Em 2h, você sai com seu primeiro agente Claude Code rodando — do zero, mesmo sem saber programar.

• CTA primário: ação direta + seta (QUERO MINHA VAGA →)
• Badges de data/hora: 2 chips com ` e `
• Countdown grande: 4 colunas (DIAS · HORAS · MINUTOS · SEGUNDOS), tipografia font-black

Seção 3 — Takeaways

Função: prova de entrega antes do form.

3 cards lado a lado, cada um com:

• Icon (Lucide)
• H3 curto (ex: "Crie seu 1º agente")
• Body 1-2 linhas explicando o que sai pronto

CTA secundário no fim (mesmo texto do CTA primário) abrindo o mesmo modal.

Seção 4 — Modal 2-step

Step 1 (qualifica intenção):

• Nome (text)
• WhatsApp (formatado E.164: +55 (XX) XXXXX-XXXX)
• Botão CONTINUAR →

Step 2 (qualifica perfil — SDR-friendly):

• Modelo de negócio (dropdown: B2B, B2C, SaaS, Serviço, E-commerce, Outros + campo "Outros qual?")
• Cargo (dropdown: Sócio, CEO, CMO, COO, Operacional, Outros)
• Faturamento anual (dropdown: até 100k, 100-500k, 500k-1M, 1-5M, 5M+)
• Confirmação presença (radio: Sim, vou estar ao vivo / Vou ver gravação / Só quero o material)
• Botão CONFIRMAR INSCRIÇÃO →

Comportamento:

• Backdrop blur, modal centralizado, rounded 2xl
• Fecha no ESC e clique fora
• Validação inline (sem submit com campos vazios)
• Persiste estado em localStorage (recupera se fechar antes de finalizar)

Seção 5 — Final Screen

Substitui todo o conteúdo após Step 2:

• ✅ icon grande
• H2: "Inscrição confirmada!"
• Body: "Você vai receber o link da aula no grupo do WhatsApp."
• Countdown 2s antes do redirect automático
• Botão verde ENTRAR NO GRUPO AGORA

Webhooks e tracking — fluxo de dados

// Step 1 (após nome+whatsapp validados):
fetch(BI_WEBHOOK_URL, { method: 'POST', body: JSON.stringify({ name, whatsapp_e164, source: slug, timestamp }) })
fetch(N8N_WEBHOOK_URL, { method: 'POST', body: JSON.stringify({ step: 1, name, whatsapp_e164 }) })

// Step 2 (após cada campo do quiz):
fetch(N8N_WEBHOOK_URL, { method: 'POST', body: JSON.stringify({ step: 2, field: 'modelo_negocio', value }) })
// ... idem pra cargo, faturamento, presença
fetch(N8N_WEBHOOK_URL, { method: 'POST', body: JSON.stringify({ step: 'final', complete_profile }) })

// Final (Meta Pixel + Final Screen):
fbq('track', 'Lead', { content_name: PIXEL_CONTENT_NAME })
window.location.href = WHATSAPP_GROUP_URL  // após 2s

localStorage — sessão e atribuição

Salvar no primeiro load:

{
  session_id: uuid(),
  pixel_id: getMetaPixelClientId(),
  visit_count: incrementOrInit(),
  first_visit: ISO_timestamp,
  utm: parseUTMParams(window.location.search),  // utm_source, _medium, _campaign, _content
  referrer: document.referrer,
}

Recuperar a cada step do form e mandar junto nos webhooks (atribuição completa).

Stack

Next.js 15 (App Router) + React 19
TypeScript 5
Tailwind CSS v4 (sem config externa, @theme inline)
Lucide React (icons)

Não usar (overkill pra LP de captura): Three.js, GSAP, Lenis, Framer Motion. Anima tudo com Tailwind keyframes (animate-fade-up, animate-fade-up-d1, animate-fade-up-d2, animate-pulse).

Visual / Style guide

Palette dark (recomendado pra LP de captura tech):

• --ag-bg: #0a0a0a (near-black)
• --ag-card: #141413
• --ag-border: rgba(255,255,255,0.08)
• --ag-text: #f5f5f5
• --ag-muted: #a3a3a3
• --ag-dim: #525252
• --ag-accent: cor de marca da pessoa (default: verde #10b981 ou laranja Anthropic #CC785C)

Tipografia:

• Fonte principal: Geist ou Inter (font-sans Tailwind)
• H1: text-5xl md:text-7xl font-black tracking-tight
• H2: text-3xl md:text-5xl font-bold
• Body: text-lg md:text-xl text-ag-muted

Animações Tailwind v4 (adicionar em globals.css):

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 0.7s ease-out forwards; }
.animate-fade-up-d1 { animation: fade-up 0.7s ease-out 0.15s forwards; opacity: 0; }
.animate-fade-up-d2 { animation: fade-up 0.7s ease-out 0.3s forwards; opacity: 0; }
.animate-fade-up-d3 { animation: fade-up 0.7s ease-out 0.45s forwards; opacity: 0; }

Metadata SEO (layout.tsx)

export const metadata: Metadata = {
  title: `${TEMA} · Aula gratuita`,
  description: `${PROMESSA}. ${DATA}, ao vivo. ${DURACAO}.`,
  openGraph: {
    title: `Aula gratuita · ${TEMA}`,
    description: `${PROMESSA}`,
    type: 'website',
    images: ['/og-image.png'],  // 1200x630
  },
  robots: { index: true, follow: true },
}

Anti-padrões (não fazer)

❌ Form gigante na home — sempre modal disparado por CTA. Reduz fricção visual. ❌ CTA genérico ("ENVIAR", "CADASTRAR") — usar verbo + benefício ("QUERO MINHA VAGA") ❌ Sem countdown — sem urgência, conversão cai. Mesmo se for evento "diário", coloca countdown pro próximo horário. ❌ Webhook único — separar BI (analytics) de n8n (workflow comercial). Falha em um não derruba o outro. ❌ Esquecer UTM/atribuição — toda LP captura tem que enviar utm* + referrer + firstvisit no payload. ❌ Cor de marca vibrante demais — accent é pra CTAs e ênfase, não para fundos. Manter dark sóbrio. ❌ H1 abstrato — "Eleve seu negócio com IA" é placeholder. Sempre prometer entrega concreta com tempo definido. ❌ WhatsApp redirect imediato — sempre tela de confirmação 2s antes (dá tempo do pixel disparar e o usuário entender que registrou).

Fluxo da skill

1. Recebe inputs (tema, persona, promessa, data, links, pixel ID, slug)
2. Pergunta o que faltar (sem assumir)
3. Sugere copy do Hero seguindo a estrutura (badge, H1, subtitle, CTA)
4. Apresenta pra revisão antes de gerar código
5. Após aprovação, gera:

• src/app/(public)//page.tsx (componente client com modal + form + webhooks)
• src/app/(public)//layout.tsx (metadata SEO)
• Trecho de globals.css (keyframes + variáveis CSS) pra adicionar no projeto

1. Mostra checklist final: pixel ID, webhooks testados, copy do whatsapp da fila, og-image gerada

Checklist antes de subir

• [ ] Pixel disparou em test mode (Meta Events Manager)
• [ ] BI webhook respondeu 200 com payload de teste
• [ ] N8n recebeu os 5 steps em ordem
• [ ] Redirect WhatsApp funciona no celular (testar deep link)
• [ ] Countdown bate com horário do evento (timezone BRT)
• [ ] OG image renderiza no WhatsApp/LinkedIn (1200x630)
• [ ] Form valida WhatsApp E.164 antes de submit
• [ ] LocalStorage persiste session_id entre reloads

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tiago1002bravy
• Source: tiago1002bravy/skills-marketing
• License: MIT

Install and usage instructions live in the source repository linked above.