YourSaaS

LaunchFst includes 33 block variants across 7 categories. Every landing page section has multiple design options you can swap with a single config change.

Categories

Heroes (4 variants)

Variant	File	Description
`centered`	`hero-centered.tsx`	Headline + CTA centered, screenshot below
`split`	`hero-split.tsx`	Text left, image/demo right
`video`	`hero-video.tsx`	Background or inline video hero
`product`	`hero-product.tsx`	Product screenshot focus with minimal text

Features (4 variants)

Variant	File	Description
`grid`	`features-grid.tsx`	Responsive card grid
`bento`	`features-bento.tsx`	Bento box layout with mixed sizes
`asymmetric`	`features-asymmetric.tsx`	Alternating left/right sections
`tabs`	`features-tabs.tsx`	Tabbed feature showcase

Pricing (3 variants)

Variant	File	Description
`cards`	`pricing-cards.tsx`	Standard pricing cards
`simple`	`pricing-simple.tsx`	Minimal single-tier layout
`comparison`	`pricing-comparison.tsx`	Feature comparison table

Testimonials (4 variants)

Variant	File	Description
`marquee`	`testimonials-marquee.tsx`	Infinite scroll marquee
`grid`	`testimonials-grid.tsx`	Static card grid
`carousel`	`testimonials-carousel.tsx`	Swipeable carousel
`featured`	`testimonials-featured.tsx`	Single featured testimonial

FAQ (3 variants)

Variant	File	Description
`accordion`	`faq-accordion.tsx`	Expandable accordion
`two-column`	`faq-two-column.tsx`	Two-column layout
`categorized`	`faq-categorized.tsx`	Grouped by category

CTA (5 variants)

Variant	File	Description
`centered`	`cta-centered.tsx`	Full-width centered headline + button
`split`	`cta-split.tsx`	Text + checklist left, stats card right
`banner`	`cta-banner.tsx`	Primary-colored full-width banner
`card`	`cta-card.tsx`	Centered card with gradient border glow
`minimal`	`cta-minimal.tsx`	Simple inline text + link

Dashboard Widgets (10 variants)

Variant	File	Description
`stat-simple`	`widget-stat-simple.tsx`	Number + label
`stat-chart`	`widget-stat-chart.tsx`	Number + sparkline
`stat-progress`	`widget-stat-progress.tsx`	Number + progress bar
`chart-area`	`widget-chart-area.tsx`	Area chart card
`chart-bar`	`widget-chart-bar.tsx`	Bar chart card
`chart-donut`	`widget-chart-donut.tsx`	Donut chart card
`chart-sparkline`	`widget-chart-sparkline.tsx`	Compact sparkline
`activity-feed`	`widget-activity-feed.tsx`	Recent activity list
`recent-users`	`widget-recent-users.tsx`	Latest registered users
`quick-actions`	`widget-quick-actions.tsx`	Quick action buttons grid

Switching Variants

Update the design object in lib/config/site.ts:

design: {
  heroStyle: "centered",       // centered | split | video | product
  headerStyle: "default",      // default | centered | minimal | floating | bordered
  featuresLayout: "grid",      // grid | bento | asymmetric | tabs
  testimonials: "marquee",     // marquee | grid | carousel | featured
  ctaStyle: "centered",        // centered | split | banner | card | minimal
  // ...
}

Blocks are loaded dynamically based on the design config. The landing page assembler reads siteConfig.design and renders the matching component for each section. All blocks live in components/blocks/ organized by category.

components/blocks/
  heroes/          — 4 hero layout variants
  features/        — 4 features section variants
  pricing/         — 3 pricing layout variants
  testimonials/    — 4 testimonials variants
  faq/             — 3 FAQ layout variants
  cta/             — 5 CTA section variants
  dashboard-widgets/ — 10 chart + stat widgets
  backgrounds/     — 6 hero background presets
  headers/         — site-header.tsx (single file, style via headerStyle config)
  templates/       — 5 full-page landing templates
  marketing/       — shared marketing components

Each block receives its content from siteConfig (headlines, items, CTAs) so you can swap variants without changing any copy.

Block Variants