Variantes de section

Every major section of the landing page ships in three layouts. Pick V1, V2, or V3 per section — no code changes required.

The variant system

Loop's landing page is assembled from sections: nav, hero, social proof, features, testimonials, pricing, FAQ, CTA, and footer. Each one has three interchangeable designs.

// src/config/site.ts
sectionVariants: {
  nav: 1,
  hero: 1,
  social: 1,
  features: 3,
  testimonials: 1,
  pricing: 2,
  faq: 3,
  cta: 1,
  footer: 1,
}

Change any number to 1, 2, or 3 and rebuild. The section renderer reads the value and mounts the matching component.

What the variants give you

The three options aren't cosmetic tweaks — they're genuinely different layouts:

• Features — V1 grid of six, V2 alternating rows of three, V3 tabbed showcase
• Pricing — V1 simple cards, V2 cards with a feature matrix below, V3 compact toggle
• FAQ — V1 flat list, V2 two columns, V3 categorized with filter pills

Runtime preview with the TweakPanel

You don't have to edit the config to explore variants. The built-in TweakPanel lets you flip every section live in the browser, storing your choice in the vs-section-variants cookie. Once you find a combination you like, copy the numbers back into sectionVariants so they ship as the default.

Page variants

Beyond sections, seven marketing pages each ship in three full-page layouts, driven by pagesConfig.variants and the vs-page-variants cookie. The mechanism mirrors section variants exactly.

Removing variants

If you've settled on one layout per section and want to slim the bundle, delete the unused variant components and replace the switch with a direct import. The config field can stay or go — nothing else depends on it.