Componentes de LP

Hero

O Hero usa layout split-column: texto à esquerda, mockup visual à direita.

Props implícitas (hard-coded): headline, subheadline, CTAs, tech stack icons.

Para customizar: edite diretamente modules/marketing/home/components/Hero.tsx. Troque os textos, CTAs e o mockup visual conforme seu produto.

// Exemplo: trocar o heading principal
<h1>Seu headline aqui</h1>
<p>Seu subheadline com proposta de valor</p>

FeatureBlock

Bloco individual com layout alternado: imagem/preview de um lado, texto + lista de features do outro.

Props:

<FeatureBlock
  title="Autenticação completa"
  description="Login social, magic link, 2FA"
  features={["Google OAuth", "Email + senha", "Passkeys"]}
  preview={<AuthPreviewMockup />}
  reversed={false}
/>

FeatureGrid

Grid de 3 colunas para features menores.

Props:

Cada FeatureItem tem: icon, title, features (string[]).

<FeatureGrid
  title="Tudo incluso"
  subtitle="Ferramentas prontas para produção"
  items={[
    { icon: <Mail />, title: "Email", features: ["Templates", "SMTP", "Filas"] },
    { icon: <Database />, title: "Banco", features: ["Drizzle", "Migrations", "Seeds"] },
    { icon: <Bot />, title: "IA", features: ["Chat", "Embeddings", "RAG"] },
  ]}
/>

SocialProofStripe

Carrossel auto-scroll horizontal com cards de depoimento.

Para customizar: edite o array testimonials dentro do componente com nome, cargo, texto e avatar.

PricingSection

Tabela de planos com integração ao sistema de pagamentos.

Para customizar: edite os planos, features e preços diretamente no componente. Os CTAs disparam o fluxo de checkout.

ShowcaseGrid

Grid de cards para exibir projetos de clientes.

Para customizar: edite o array projects dentro do componente com nome, descrição, URL, imagem e badge.

Seções simples