Customização Rápida

Passo 1: Escolha as seções

Abra app/(marketing)/[locale]/(home)/page.tsx e escolha quais seções manter. Exemplo minimalista:

export default function HomePage() {
  return (
    <>
      <Hero />
      <Features />
      <PricingSection />
      <CtaSection />
    </>
  );
}

Passo 2: Customize o conteúdo

Cada componente tem seus textos hard-coded. Edite diretamente:

1. Hero — headline, subheadline, CTAs
2. Features — lista de FeatureBlocks e FeatureGrids
3. PricingSection — planos, preços, features por plano
4. FAQ — perguntas e respostas

Passo 3: Ajuste as cores

O design system usa CSS variables. Para mudar o acento:

/* app/globals.css */
:root {
  --primary: 16 100% 50%; /* #FF4D00 - laranja */
}

Para mudar para azul, por exemplo:

:root {
  --primary: 221 83% 53%; /* #3B82F6 - azul */
}

Passo 4: Crie páginas extras

Para criar uma nova página de marketing:

// app/(marketing)/[locale]/sua-pagina/page.tsx
import { CtaSection } from "@marketing/home/components/CtaSection";

export default async function SuaPagina({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);

  return (
    <>
      {/* Compose com qualquer seção */}
      <SeuConteudoCustom />
      <CtaSection />
    </>
  );
}

A página herda automaticamente o NavBar e Footer do layout de marketing.

Passo 5: Adicione à navegação

Edite os links em:

• NavBar: modules/marketing/shared/components/NavBar.tsx → array menuItems
• Footer: modules/marketing/shared/components/Footer.tsx → objeto footerLinks

Receitas comuns

LP focada em conversão (poucas seções)

<Hero />
<SocialProofStripe />
<PricingSection />
<FaqSection />
<CtaSection />

LP completa com prova social

<Hero />
<LogoCarousel />
<SocialProofStripe />
<Features />
<TestimonialsSection />
<PricingSection />
<FaqSection />
<FounderSection />
<CtaSection />
<Newsletter />

LP de produto único (sem pricing na home)

<Hero />
<Features />
<ShowcaseGrid />
<TestimonialsSection />
<CtaSection />

Dicas

• Mantenha a ordem natural: Hero → Prova social → Features → Pricing → CTA
• Menos é mais: 5-7 seções é o ideal para conversão
• Mobile first: todos os componentes são responsivos por padrão
• Dark mode: funciona automaticamente — não precisa de customização extra
• SEO: cada página pode exportar generateMetadata() para meta tags