LP Starter — Section Catalog

Wrapper for all page sections. Controls variant (dark/light), optional full-bleed mode, and consistent padding.

Mono-styled numbered label at the top of each section. Pattern: [number] label_

CTA button with arrow glyph. Three variants: accent (primary), dark, ghost.

Metric display with large value + mono label. Three sizes, three color variants.

Testimonial block with oversized quote mark, author avatar + name/role.

Overlapping avatar row with +N remaining count and optional label.

const topTicker = string[]   // duplicated 3x
const bottomTicker = string[] // duplicated 3x

// Staircase padding — each row offset 6%
{stats.map((stat, i) => (
  <div style={{ paddingLeft: `${i * 6}%` }}>
    <StatCard size="lg" />
    <div className="flex-1 h-3 bg-black/4%" />
  </div>
))}

interface Testimonial {
  quote: string
  author: string
  role: string
  stats: { value: string; label: string }[]
}

interface Service {
  id: string         // "01"-"06"
  name: string
  description: string
  capabilities: string[]  // 4 items
}

// Cards offset vertically by index
marginTop: isMobile ? '24px' : `${i * 50 + 24}px`

// Progress bar tracks hovered step
width: `${((hovered + 1) / steps.length) * 100}%`

// 48-column tick marks below bar
Array.from({ length: 48 }).map(() =>
  <div className="flex-1 border-l border-black/15" />
)

interface Tier {
  name: string      // Explorer | Creator | Pro
  monthly: number   // 0 | 497 | 1997
  description: string
  features: string[]
  cta: string
  popular: boolean
}

const baseCost = employees * hours * cost * 52
const annual = includeBenefits
  ? Math.round(baseCost * 1.3)
  : baseCost

interface FAQ {
  id: string   // "01"-"06"
  q: string
  a: string
}

interface Article {
  date: string
  category: string
  author: string
  authorTitle: string
  title: string
  excerpt: string
}

Parent has colored background + gap-px. Children have opaque background. The 1px gap reveals the parent color as grid lines.

// Dark variant
<div className="grid gap-px bg-white/[0.06]">
  <div className="bg-brand-dark">...</div>
</div>

// Light variant
<div className="grid gap-px bg-black/[0.06]">
  <div className="bg-brand-light">...</div>
</div>

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ticker-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

font-family: IBM Plex Mono
font-size: 10-11px
text-transform: uppercase
letter-spacing: 0.15em – 0.2em
font-weight: 400-700

Items are offset progressively to create a descending staircase visual.

// HowItWorks: vertical offset
marginTop: isMobile ? '24px' : `${i * 50 + 24}px`

// WhoWeAre: horizontal offset
paddingLeft: `${i * 6}%`

// Fade-up (most common)
initial={{ opacity: 0, y: 20-40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6-0.7 }}

// Staggered children
transition={{ delay: i * 0.04-0.1 }}

// Scale reveal (hero video)
initial={{ opacity: 0, scale: 0.97 }}
animate={{ opacity: 1, scale: 1 }}

LP alternates between dark (#050505) and light (#F5F4E7) sections. Some sections (PainPoints, FAQ, ROICalculator) use standalone backgrounds outside SectionShell for custom layouts.