# Lp Venda

> Gera landing page de venda direta em Next.js 15 + Tailwind v4, modelada no padrão Bravy validado (`/57-agents`). Use quando o usuário disser 'criar lp de venda', 'página do produto', 'landing page de venda', 'lp de checkout', 'página da oferta', 'lp de infoproduto', 'página de pacote', ou qualquer variação de venda direta com checkout (Kirvano, Hotmart, Stripe). Exige produto + preço + promessa +…

- **Type:** Skill
- **Install:** `agentstack add skill-tiago1002bravy-skills-marketing-lp-venda`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tiago1002bravy](https://agentstack.voostack.com/s/tiago1002bravy)
- **Installs:** 0
- **Category:** [Finance & Payments](https://agentstack.voostack.com/c/finance-and-payments)
- **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-venda

## Install

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

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

## About

# Skill: LP de Venda (padrão Bravy)

Gera uma página de venda direta no padrão validado das LPs Bravy. Estrutura testada em `/57-agents` — leva o visitante do hero ao checkout sem etapa intermediária de captura, com 4-5 CTAs distribuídos e ancoragem de preço explícita.

## Filosofia: venda direta, não captura

Diferente de LP de captura (form + lead nurturing), LP de venda envia direto pro checkout. O visitante chega quente (Ads, email, orgânico) e a página tem 1 missão: converter em pagamento. **Não tem form de email obrigatório** — fricção mata conversão de checkout direto.

## Inputs obrigatórios

- **produto** — nome do produto (ex: "57 Agentes de IA")
- **promessa** — transformação em 1 frase (ex: "todos os funcionários que sua empresa precisa em 5 minutos")
- **persona** — alvo (ex: "empresário", "contador", "agência")
- **preço** — valor à vista (ex: "R$ 97")
- **parcelamento** — ex: "12× R$ 9,71"
- **bônus** — lista de bônus inclusos (mínimo 1, ideal 2-3)
- **garantia** — prazo + condições (ex: "7 dias incondicional, 100% reembolso")
- **checkout_url** — URL do checkout (Kirvano, Hotmart, Stripe, etc)
- **slug** — pasta da página (ex: "57-agents")

## Inputs opcionais

- **valor_ancorado** — preço "original" pra ancoragem (ex: "R$ 497")
- **breakdown_oferta** — itens detalhados da oferta com valores individuais
- **vagas_limitadas** — qtd e prazo (ex: "100 vagas até domingo")
- **prova_social** — depoimentos, faturamento de aluno, número de clientes
- **vsl_url** — link do vídeo de vendas (se houver)

## Anatomia da LP de venda — 9 seções na ordem

```
1. Ticker (topo, animado, infinito)
2. Hero (headline + benefícios + CTA pulse)
3. Transformação (antes vs hoje)
4. Showcase de valor (categorias do que vem)
5. Pra quem (segmentação por persona)
6. Bônus (incrementa valor percebido)
7. Oferta + Ancoragem (breakdown + preço final + garantia)
8. FAQ (objeções)
9. Final CTA (urgência psicológica + benefícios)
```

### Seção 1 — Ticker
Função: micro-conversão imediata, mesmo no scroll.

Faixa fina no topo, animação infinita à esquerda, com 5 pontos-chave separados por `·`:
> Acesso vitalício · 7 dias de garantia · Suporte WhatsApp · Atualizações grátis · Compra segura

### Seção 2 — Hero

**Estrutura:**
- **Badge** (chip pequeno acima do H1): contexto + preço (ex: "Pack Bravy · 57 agentes prontos · R$ 97")
- **H1 em 2 linhas** (a 2ª linha em cor accent):
  ```
  Linha 1 (texto principal preto/cream)
  Linha 2 (cor accent — qualifica/quebra objeção comum)
  ```
  Exemplo:
  > Todos os funcionários que sua empresa precisa. Em 5 minutos.
  > _Sem contratar ninguém. Sem saber programar._
- **Subtitle** — 2 linhas, lista o que vem + benefício final em negrito:
  > 57 agentes de IA já treinados pra trabalhar na sua operação — Marketing, Vendas, Atendimento, Financeiro, RH e Tecnologia. **Você só chama pro expediente.**
- **CTA primário** com pulse animation: ação + preço + seta
  > `Quero os 57 agentes por R$ 97 →`
- **Trust chips** (linha abaixo do CTA): 🔒 Compra segura · ⚡ Acesso imediato · ✅ Garantia 7 dias

### Seção 3 — Transformação (Antes vs Hoje)

Função: mostrar o salto sem precisar de prova social externa.

3 colunas (ou 2 colunas em mobile):
- ❌ **Antes** (cinza/dim): 4-5 dores específicas
- ✅ **Hoje** (cor accent): 4-5 entregas concretas após o produto
- 💎 **Bônus** (destaque): 1 ganho extra que ninguém promete

Exemplo de linha "antes":
> Pagar R$ 8k/mês pra um social media que demora 3 dias pra entregar 4 posts.

Linha "hoje":
> 1 agente que escreve, edita e agenda 30 posts no calendário em 12 minutos.

### Seção 4 — Showcase de valor (Categorias)

Grid de 6 cards (3 colunas × 2 linhas em desktop), cada card:
- Icon (Lucide, cor accent)
- H3 (categoria — ex: "Marketing & Conteúdo")
- Lista de 4-5 agentes/ferramentas/módulos
- Sub-CTA pequeno opcional

**Summary abaixo do grid:**
> 57 agentes ao todo. Todos prontos pra usar hoje.

**CTA mid-page** (ghost outline) reforçando: `Ver oferta completa →`

### Seção 5 — Pra quem (Segmentação)

6 cards com icon + H3 (persona) + body curto (caso de uso específico).

Exemplo:
> 🏪 **Lojista** — Atendimento WhatsApp 24/7 que recupera carrinho abandonado e fecha venda sem você responder.

Função: mesmo público misto identifica "esse sou eu".

### Seção 6 — Bônus

2 cards grandes (não 6 mini-cards). Cada um com:
- Mockup visual (screenshot, ícone grande, ou imagem ilustrativa) — meio do card
- Tag: `BÔNUS #1`
- H3 (nome do bônus)
- Body 2-3 linhas explicando entrega
- Selo: **"Sem custo adicional"** ou **"Incluso na sua compra"**

### Seção 7 — Oferta + Ancoragem (peça central)

**Estrutura do card de oferta:**

```
┌─────────────────────────────────────────┐
│ [80% OFF — badge no canto]              │
│                                         │
│ ✓ 57 agentes prontos          R$ 297    │
│ ✓ Bônus #1 — Escritório       R$ 197    │
│ ✓ Bônus #2 — Aula ao vivo      R$  97    │
│ ─────────────────────────────────────── │
│ Subtotal:                     R$ 591    │
│ Você economiza:               R$ 494    │
│                                         │
│ POR APENAS                              │
│ R$ 97          (ou 12× R$ 9,71)         │
│                                         │
│ [QUERO TUDO POR R$ 97 →]  (botão pulse) │
│                                         │
│ 🔒 Pagamento seguro · Acesso imediato  │
└─────────────────────────────────────────┘
```

**Box de garantia abaixo do card** (destaque verde/azul):
- ⚖️ icon escudo
- H4: "Garantia 7 dias 100% incondicional"
- Body: "Não gostou por qualquer motivo? Pede reembolso e devolvemos cada centavo. Sem perguntas."

### Seção 8 — FAQ

Accordion (Radix UI ou implementação manual com ``) com 7 perguntas-objeção:

1. "Funciona pra quem nunca usou IA antes?"
2. "Preciso saber programar?"
3. "Como recebo após a compra?"
4. "E se eu não gostar?"
5. "Tem suporte? Quanto tempo demora pra responder?"
6. "É vitalício ou tem mensalidade?"
7. "Posso usar em mais de uma empresa?"

**Below the fold do FAQ:** link discreto pra falar com humano:
> Não achou sua dúvida? [Fala com a gente no WhatsApp →](https://wa.me/...)

### Seção 9 — Final CTA

Última oportunidade. Função: urgência psicológica.

**Estrutura:**
- H2 grande, em 2 linhas:
  > Amanhã, o preço sobe.
  > _Hoje, é R$ 97._
- Reforço de benefícios em linha (✓ ✓ ✓): "Vitalício · 7 dias garantia · Suporte humano"
- CTA pulse final (mesmo texto do hero)

**Support strip embaixo do CTA:**
> Precisa de ajuda? Time responde em 
Zustand (modal de lead, se for variante c/ form pré-checkout)
```

**Não usar** (overkill pra LP de venda direta): Three.js, GSAP, Framer Motion, Lenis. Anima com Tailwind keyframes (`fade-up`, `pulse-glow`, `cta-pulse`).

## Visual / Style guide

**Palette dark com accent quente** (recomendado pra venda):
```css
--sec-a: #141413;          /* fundo seção principal */
--sec-b: #1B1B19;          /* fundo seção alternada (zebra) */
--cream: #FAF9F5;          /* texto principal */
--cream-dim: #d4d3cc;      /* texto secundário */
--muted: #8a8881;          /* texto auxiliar */
--accent: #CC785C;         /* cor de marca (terracota Anthropic, exemplo) */
--accent-hover: #B86749;
--border: rgba(255,255,255,0.08);
```

**Sec-a / Sec-b**: alterna entre seções pra dar ritmo visual sem usar cores diferentes a cada seção.

**Botões — 3 estilos:**
```css
.brvy-cta { background: var(--accent); color: var(--cream); }
.brvy-cta-ghost { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.brvy-cta-pulse { /* mesmo do brvy-cta + animation: cta-pulse 2.4s infinite */ }
```

**Animações Tailwind v4** (em `globals.css`):
```css
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,120,92,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(204,120,92,0); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; transform: scale(1.02); }
}
.animate-fade-up { animation: fade-up 0.7s ease-out forwards; }
.animate-fade-up-d1 { animation: fade-up 0.7s 0.15s ease-out forwards; opacity: 0; }
.animate-fade-up-d2 { animation: fade-up 0.7s 0.3s ease-out forwards; opacity: 0; }
.animate-fade-up-d3 { animation: fade-up 0.7s 0.45s ease-out forwards; opacity: 0; }
.cta-pulse { animation: cta-pulse 2.4s infinite; }
```

**Grid sutil de fundo** (linhas finas a cada 27px) — opcional, dá textura premium:
```css
.bg-grid {
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 26px,
    rgba(255,255,255,0.03) 26px, rgba(255,255,255,0.03) 27px
  );
}
```

## Tracking e checkout

```typescript
const handleCheckoutClick = () => {
  // 1. Meta Pixel
  fbq('track', 'InitiateCheckout', {
    content_name: PRODUCT_NAME,
    value: PRICE_NUMERIC,
    currency: 'BRL',
  })

  // 2. UTM passthrough — mantém atribuição até o checkout
  const utms = new URLSearchParams(window.location.search)
  const checkoutUrl = `${CHECKOUT_BASE_URL}?${utms.toString()}`

  // 3. Pixel ID + session pra reconciliar com BI
  const sessionId = localStorage.getItem('session_id') || generateUUID()
  checkoutUrl += `&session=${sessionId}`

  window.location.href = checkoutUrl
}
```

**Plataformas suportadas (formato URL):**
- Kirvano: `https://pay.kirvano.com/`
- Hotmart: `https://pay.hotmart.com/`
- Stripe: `https://buy.stripe.com/`
- CartPanda: `https://seller.cartpanda.com/`

## Metadata SEO (`layout.tsx`)

```tsx
export const metadata: Metadata = {
  title: `${PRODUTO} — ${PROMESSA_CURTA}`,
  description: PROMESSA_LONGA,
  openGraph: {
    title: PRODUTO,
    description: PROMESSA_CURTA,
    type: 'website',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  metadataBase: new URL('https://seudominio.com'),
}
```

## Anti-padrões (não fazer)

❌ **Hero fraco** ("Conheça o produto X") — sempre prometer transformação concreta com tempo/quantidade definida.
❌ **Preço escondido** — preço visível no hero E no card de oferta. Esconder = dispara objeção "será que dá pra mim?".
❌ **Sem ancoragem** — preço solo (`R$ 97`) parece arbitrário. Sempre comparar com valor original (`R$ 497 → R$ 97`).
❌ **CTA único** — distribuir 4-5 CTAs ao longo da página (hero, mid, oferta, final, footer). Cada um abre/dispara checkout.
❌ **VSL longo no hero** — se for usar VSL, ela vem ABAIXO do hero, não substituindo. Tem gente que decide sem ver vídeo.
❌ **FAQ defensivo demais** — perguntas tipo "Vou ter problema?" colocam dúvida. Sempre frame positivo: "Como recebo?" "É vitalício?".
❌ **Garantia escondida no rodapé** — garantia tem que estar adjacente ao CTA da oferta. É o que destrava a compra.
❌ **CTA genérico** ("Comprar agora") — sempre incluir benefício/preço no CTA: "Quero os 57 agentes por R$ 97 →".
❌ **Bônus genéricos** — "ebook bônus" não convence. Bônus tem que ser específico, com nome próprio e valor monetário.

## Variantes do padrão

**Variante A — Sem ancoragem (produto premium puro):**
Remove a seção "Antes vs Hoje" + ancoragem de preço. Foca em prova social (depoimentos, números de aluno) + breakdown da oferta sem comparação.

**Variante B — Com VSL:**
Adiciona seção VSL após o Hero (vídeo no centro, max-width 800px, autoplay muted com unmute prompt). Manter texto do hero acima — VSL é reforço, não substituto.

**Variante C — Lead capture pré-checkout:**
Ao invés de redirect direto pro checkout, abre modal de Step 1 (nome+email+whatsapp) → submeter vai pro checkout passando os dados via query string. Aumenta atribuição mas adiciona fricção (~10% drop).

**Variante D — Vagas limitadas + countdown:**
Adiciona contador de vagas restantes ("23 vagas restantes") + countdown ("oferta encerra em 12h"). Use só se for verdade — fake scarcity destrói confiança.

## Fluxo da skill

1. Recebe inputs (produto, preço, bônus, garantia, checkout_url, persona)
2. Pergunta o que faltar (foco em ancoragem e bônus — esses são fáceis de esquecer)
3. Sugere copy do Hero (badge, H1 em 2 linhas, subtitle, CTA com preço)
4. Sugere "Antes vs Hoje" baseado na persona/produto
5. Apresenta pra revisão
6. Após aprovação, gera:
   - `src/app/(public)//page.tsx` (componente client com seções)
   - `src/app/(public)//layout.tsx` (metadata SEO)
   - `src/app/(public)//style.css` (variáveis e animações da LP)
7. Mostra checklist final

## Checklist antes de subir

- [ ] CTA do hero, mid, oferta e final apontam pro mesmo checkout_url
- [ ] UTM passthrough funcionando (testar com `?utm_source=test`)
- [ ] Meta Pixel `InitiateCheckout` dispara no clique (Test Events)
- [ ] Card de oferta mostra preço, parcelamento, ancoragem
- [ ] Garantia visível adjacente ao CTA da oferta
- [ ] FAQ responde as 5 objeções principais do produto
- [ ] OG image renderiza no WhatsApp/LinkedIn (1200x630)
- [ ] Mobile testado: hero não corta, CTA visível em 1 scroll
- [ ] Lighthouse Performance > 85 (sem libs pesadas desnecessárias)
- [ ] Checkout testado end-to-end (compra real cancelada após confirmação)

## 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:** no
- **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-venda
- 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%.