Visão Geral da Landing Page

Arquitetura

A landing page do Vibe Coding Pack é construída com seções modulares que podem ser reordenadas, removidas ou duplicadas livremente. Cada seção é um componente React independente dentro de modules/marketing/home/components/.

Estrutura de pastas

app/(marketing)/[locale]/(home)/page.tsx    ← composição da home
app/(marketing)/[locale]/pricing/page.tsx   ← página de pricing
app/(marketing)/[locale]/showcase/page.tsx  ← vitrine de projetos
modules/marketing/home/components/          ← todos os blocos
modules/marketing/shared/components/        ← NavBar, Footer

Seções disponíveis

Componente	Descrição	Onde é usado
`Hero`	Split layout com proposta de valor + mockup de código	Home
`SocialProofStripe`	Carrossel auto-scroll de depoimentos	Home, Pricing, Showcase
`LogoCarousel`	Logos de tecnologias/parceiros	Home
`Features`	Blocos alternados + grids de features	Home
`FeatureBlock`	Bloco individual alternado (preview + texto)	Features
`FeatureGrid`	Grid 3 colunas de features menores	Features
`TestimonialsSection`	Depoimentos completos com cards	Home
`PricingSection`	Tabela de planos com PricingTable	Home, Pricing
`FaqSection`	Accordion de perguntas frequentes	Home, Pricing
`FounderSection`	Missão do fundador / sobre	Home
`CtaSection`	Call-to-action final	Home, Pricing, Showcase
`Newsletter`	Captura de e-mail	Home
`ShowcaseGrid`	Grid de projetos de clientes	Showcase

Fluxo da Home

A composição padrão da home segue esta ordem:

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

Para alterar a ordem, edite app/(marketing)/[locale]/(home)/page.tsx.

Páginas de marketing

Rota	Composição
`/`	Home completa (10 seções)
`/pricing`	PricingSection + SocialProofStripe + FaqSection + CtaSection
`/showcase`	ShowcaseGrid + SocialProofStripe + CtaSection
`/blog`	Lista de posts (MDX)
`/contact`	Formulário de contato
`/docs`	Documentação (Fumadocs)
`/changelog`	Log de mudanças
`/legal/*`	Política de privacidade e termos

Design System

Fundo base: branco / off-white (#FBFCFC)
Cards: branco puro (#FFFFFF) com bordas sutis
Acento primário: #FF4D00 (laranja) — CTAs, badges, ícones
Dark mode: preservado via toggle, cores invertidas automaticamente
Tipografia: system font stack, tracking-tight em headings
Bordas: border-black/6 (light) / border-border (dark)
Cores Customizadas: Use UI Colors para gerar paletas consistentes com o design system do Vibe Coding Pack.

[!TIP] Roadmap: Em breve teremos uma feature interna para ajudar os usuários a criarem e testarem suas próprias cores de marca diretamente na plataforma.