Lp Venda

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 →

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:

.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):

@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:

.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

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)

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)

1. 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
• Source: tiago1002bravy/skills-marketing
• License: MIT

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