MatiSolina/gtm-skills

Landing Page GTM

Crie páginas de destino SaaS prontas para produção com a linguagem visual do cer0.ai — modo escuro, minimalista, fundo com gradiente e granulação, microinterações com Framer Motion, primitivos de UI baseados em shadcn, copy orientada a conversão em espanhol (Río de la Plata) ou inglês.

Quando usar esta skill

• O usuário pede: "armame una landing", "build a landing page", "site de marketing", "SaaS homepage", "página de producto".
• O usuário menciona: cer0.ai, Midday, Linear, Vercel como inspiração de design.
• O usuário deseja uma estética escura/minimalista para um produto SaaS B2B ou B2C.
• O usuário está usando o v0.dev e quer prompts/componentes que sigam esse estilo.

Stack (padrões não negociáveis)

• Next.js 15 App Router com componentes de servidor por padrão.
• TypeScript com strict: true.
• Tailwind CSS v4 com variáveis CSS para temas (bg-background, text-foreground, etc.).
• shadcn/ui para primitivos (button, card, accordion, dialog).
• Framer Motion (framer-motion) importado como m de motion-provider para animações in-view.
• lucide-react para ícones (NUNCA emojis na UI do produto).
• next/image para todas as imagens com largura/altura explícitas.
• next/dynamic para seções abaixo da dobra (lazy load).

Estrutura obrigatória da página

Toda landing segue esta ordem de seções. Pular uma seção requer justificativa explícita.

1. <Navbar /> — fixa, transparente → com desfoque ao rolar
2. <Hero /> — h1 + subtítulo + 2 CTAs + mockup do produto (coluna direita)
3. <LogoStrip /> — logotipos de clientes/imprensa, monocromáticos (filter: brightness(0) invert(1))
4. Prévia do produto — captura de tela grande do dashboard em um cartão emoldurado com gradiente de desvanecimento na parte inferior
5. Seções de funcionalidades (3-5) — alternando esquerda/direita, cada = título + parágrafo + mockup visual
6. <Benefits /> — grid de 3 colunas com ícone + título + descrição de 1 linha
7. <Pricing /> — 3 planos, o do meio destacado com badge "Más elegido"
8. <Faq /> — accordion com 5-7 objeções reais, schema JSON-LD FAQPage
9. <Footer /> — minimalista, links + redes sociais + legal
10. Blocos JSON-LD — SoftwareApplication, Organization, FAQPage

Sistema visual

Carregue references/design-tokens.md para a especificação completa. Referência rápida:

• Paleta: --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• Fundo: Dois desfoques radial-gradient (canto superior esquerdo + inferior direito) com ~5% de opacidade, mais um overlay PNG de ruído com opacidade 0.03 e mix-blend-overlay.
• Tipografia: Fonte de display para títulos (Geist Sans ou --font-display local). Corpo usa Inter. Títulos têm tracking-[-0.02em] e font-medium (NÃO font-bold — muito pesado para essa estética).
• Tamanhos de títulos: text-[clamp(2.5rem,5vw,4.5rem)] para h1, text-balance. Use clamps em toda parte para escala fluida.
• Bordas: Sempre border-border/50 (50% de opacidade). Nunca bordas sólidas — muito agressivas.
• Superfícies: bg-secondary/20, bg-secondary/30, bg-secondary/50 — sempre semitransparentes para profundidade.
• Botões: Pílulas (rounded-full), h-12, px-8. Primário: bg-foreground text-background. Secundário: border border-border/50 bg-secondary/30 backdrop-blur-sm.
• Cards: rounded-[24px] externo, rounded-[20px] interno (matriosca). Bordas de 1px. Sombra sutil shadow-2xl shadow-black/20.
• Efeitos de desfoque: Brilhos de fundo usam blur-[100px] a blur-[120px]. Desfoques decorativos internos em mockups usam blur-2xl.
• Movimento: Fade + translação de 10-40px, duration: 0.6-1s, escalonamento de 0.1-0.15s. Use useInView({ once: true, margin: "-100px" }) para gatilhos.

Padrões de copy

Carregue references/copy-patterns.md para o guia completo. Regras rápidas:

• Título do Hero: Imperativo ou declarativo, aborda a dor ("Dejá de aceptar cheques a ciegas."). NUNCA "Bem-vindo ao X" ou "X é uma plataforma para...".
• Subtítulo do Hero: 1-2 frases. O que faz + como + por que importa.
• CTA primário: Verbo de ação no imperativo. "Probar gratis", "Empezar", "Crear cuenta". Sempre ação, nunca substantivo ("Get started" não "Get started today!").
• CTA secundário: Opção de menor fricção, geralmente informacional. "Ver demo", "Cómo funciona".
• Abaixo do CTA: Linha de confiança. "+50.000 cheques analizados · Sin tarjeta de crédito". Use pontos médios ·.
• Títulos de seção: Afirmação de fato, não pergunta. "El análisis llega en 3 segundos." não "How fast is it?".
• Tom para espanhol: Voseo quando a audiência é argentina. Direto, sem linguagem corporativa. ("Sacale una foto", não "Tome una fotografía").
• NÃO: "Revolucionário", "de ponta", "sinergia", "alavancar", "nível mundial", "melhor da categoria".

Sequência de construção

Ao gerar uma landing:

1. Faça no máximo 3 perguntas ao usuário (skip se for óbvio pelo contexto):
   • O que o produto faz? (1 frase)
   • Quem é o público?
   • Qual é a ação principal do CTA?
2. Gere o Hero primeiro. Obtenha aprovação do Hero antes de construir o restante.
3. Construa as seções incrementalmente — uma seção por resposta, com o usuário aprovando a copy antes de prosseguir.
4. Adicione JSON-LD no final, nunca pule (SEO importa).
5. Verifique acessibilidade: todas as imagens têm alt, todos os botões são <button> ou <a> reais, contraste de cores passa WCAG AA.

Anti-padrões (recuse estes)

• Hero com foto de stock de "equipe diversificada sorrindo no laptop".
• Hero com gradiente genérico e sem mockup do produto.
• Pricing "Contate vendas" para todos os planos (em SaaS em estágio inicial).
• Esconder o preço completamente.
• Mais de 3 CTAs acima da dobra (força paralisia de decisão).
• Carrosséis para depoimentos (baixo engajamento, prejudica o LCP).
• motion.div com transition: { duration: 2 } — muito lento.
• Modo claro como padrão (esta skill = escuro primeiro).

Referências

Leia sob demanda:

• references/sections.md — anatomia de cada seção com padrões de código
• references/design-tokens.md — tokens completos de cor, tipografia e espaçamento
• references/copy-patterns.md — fórmulas de título, biblioteca de CTA, padrões de FAQ
• references/seo-jsonld.md — modelos schema.org para landings SaaS

Modelos

Em templates/:

• page.tsx — página raiz com todas as seções, imports dinâmicos, JSON-LD
• hero.tsx — componente Hero com padrão de mockup na coluna direita
• pricing.tsx — card de pricing de 3 planos com destaque no meio
• faq.tsx — FAQ em accordion com JSON-LD
• navbar.tsx — navbar ciente de rolagem com desfoque de fundo

Copie um modelo, adapte a copy e as props. Não reescreva do zero.

Base de código de referência

Referência ativa: /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (fonte do cer0.ai). Em caso de dúvida, espelhe exatamente os padrões dessa base de código. Ela foi testada em produção.