Section Templates17Brandbook

Section Templates

Templates estandarizados para secciones de marketing, landing pages y páginas de producto.

Section Templates

Hero Section

Activo

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

Parte superior de landing pages

Features Grid

Activo

Section title → Grid 3 cols → Card (ícono + título + descripción) × 3-6

Presentación de funcionalidades

Social Proof

Activo

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

Credibilidad

Pricing Table

Activo

Toggle anual/mensual → Grid 3 cols → PricingCard (nombre + precio + features + CTA)

Conversión

FAQ Accordion

Activo

Section title → Accordion items (pregunta + respuesta colapsable)

Objeciones y dudas

CTA Final

Activo

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

Cierre de página

Contact Form

Activo

2 cols: Form (nombre + email + empresa + mensaje) + Info sidebar

Captación de leads

Blog Article

Planeado

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

Contenido

Anatomía de una Section

/* Estructura estándar 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 de la Sección
    </span>

    /* Heading */
    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
      Texto del <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>