Section Templates17Brandbook

Section Templates

Templates padronizados para seções de marketing, landing pages e páginas de produto.

Section Templates

Hero Section

Ativo

Badge → Título Hero → Subtítulo → 2 CTAs (primary + secondary) → Visual/Mockup

Topo de landing pages

Features Grid

Ativo

Section title → Grid 3 cols → Card (ícone + título + descrição) × 3-6

Apresentação de funcionalidades

Social Proof

Ativo

Stats bar (3-4 métricas) → Testimonials carousel → Logos parceiros

Credibilidade

Pricing Table

Ativo

Toggle anual/mensal → Grid 3 cols → PricingCard (nome + preço + features + CTA)

Conversão

FAQ Accordion

Ativo

Section title → Accordion items (pergunta + resposta colapsável)

Objeções e dúvidas

CTA Final

Ativo

Background gradient/glow → Título impactante → Subtítulo → CTA grande

Fechamento de página

Contact Form

Ativo

2 cols: Form (nome + email + empresa + mensagem) + Info sidebar

Captação de leads

Blog Article

Planejado

Breadcrumb → Hero (título + meta + img) → Content (MDX) → Related posts

Conteúdo

Anatomia de uma Section

/* Estrutura padrão de section */
<section className="py-20 md:py-28">
  <div className="max-w-7xl mx-auto px-4 md:px-8">
    /* Badge / Eyebrow */
    <span className="inline-flex bg-[var(--brand-primary)]/10 text-[#cbd5e1] text-xs font-bold px-3 py-1 rounded-full border border-[#64748b]/30 uppercase tracking-wider mb-6">
      Título da Seção
    </span>

    /* Heading */
    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
      Texto do <span className="grad-text">Heading</span>
    </h2>

    /* Description */
    <p className="text-slate-400 text-lg max-w-2xl mb-12">...</p>

    /* Content Grid */
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">...</div>
  </div>
</section>