# Lp Captura

> Gera landing page de captura de leads em Next.js 15 + Tailwind v4, modelada no padrão Bravy validado (`/aula-claude-code`). Use quando o usuário disser 'criar lp de captura', 'página de inscrição', 'página de captura', 'lp gratuita', 'página de aula gratuita', 'lp de evento', 'página de webinar', ou qualquer variação de captura de lead com formulário + redirect WhatsApp. Exige tema do evento, dat…

- **Type:** Skill
- **Install:** `agentstack add skill-tiago1002bravy-skills-marketing-lp-captura`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tiago1002bravy](https://agentstack.voostack.com/s/tiago1002bravy)
- **Installs:** 0
- **Category:** [Communication](https://agentstack.voostack.com/c/communication)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tiago1002bravy](https://github.com/tiago1002bravy)
- **Source:** https://github.com/tiago1002bravy/skills-marketing/tree/main/skills/lp-captura

## Install

```sh
agentstack add skill-tiago1002bravy-skills-marketing-lp-captura
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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)

- **WHATSAPP_GROUP_URL** — link do grupo de destino após captura
- **BI_WEBHOOK_URL** — webhook BI que recebe nome+whatsapp
- **N8N_WEBHOOK_URL** — webhook n8n que recebe os 5 steps
- **PIXEL_CONTENT_NAME** — string do Meta Pixel (ex: `lead_aula_agentes_ia`)
- **META_PIXEL_ID** *(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

```typescript
// 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:
```typescript
{
  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`):
```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`)

```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 + first_visit 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
6. 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](https://github.com/tiago1002bravy)
- **Source:** [tiago1002bravy/skills-marketing](https://github.com/tiago1002bravy/skills-marketing)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tiago1002bravy-skills-marketing-lp-captura
- Seller: https://agentstack.voostack.com/s/tiago1002bravy
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.