Section Components

Section components are reusable, composable blocks for building marketing sites and landing pages. Each section serves a specific purpose in your site's conversion funnel.

Overview

Section components implement common marketing patterns with type-safe props and consistent styling. Use them as building blocks within <LandingPage> or <Page> layouts.

import { LandingPage, Hero, Features, Pricing, CTA } from '@mdxui/beacon'

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />
  <Pricing {...pricingProps} />
  <CTA {...ctaProps} />
</LandingPage>

Available Sections

Hero Section

Above-the-fold section with headline, CTA, and visual content.

Variants: default, centered, split

<Hero
  title="Build faster with mdxui"
  subtitle="Type-safe React components for modern web apps"
  cta={{ text: "Get Started", href: "/docs" }}
  variant="split"
  image="/hero.png"
/>

Use for:

Main value proposition
Primary call-to-action
First impression and engagement

Features Section

Feature grid showcasing product benefits and capabilities.

Variants: grid, list, bento

<Features
  title="Everything you need"
  variant="grid"
  columns={3}
  features={[
    { title: "Type-safe", description: "Full TypeScript support", icon: "Shield" },
    { title: "Fast", description: "Optimized performance", icon: "Zap" },
    { title: "Flexible", description: "Highly customizable", icon: "Sliders" }
  ]}
/>

Use for:

Product capabilities
Key differentiators
Technical features

Pricing Section

Pricing tiers and plans with feature comparison.

<Pricing
  title="Simple, transparent pricing"
  showToggle={true}
  tiers={[
    {
      name: "Starter",
      price: "$29/mo",
      features: ["Up to 10 users", "10GB storage", "Email support"],
      cta: { text: "Start Trial", href: "/signup" }
    },
    {
      name: "Pro",
      price: "$99/mo",
      features: ["Unlimited users", "100GB storage", "Priority support"],
      cta: { text: "Start Trial", href: "/signup" },
      highlighted: true
    }
  ]}
/>

Use for:

Plan comparison
Feature-based pricing
Conversion optimization

Testimonials Section

Customer testimonials and social proof.

Variants: grid, carousel, masonry

<Testimonials
  title="Loved by developers"
  variant="grid"
  testimonials={[
    {
      quote: "Best component library I've used",
      author: "Sarah Chen",
      title: "CTO",
      company: "Acme Corp",
      avatar: "/avatars/sarah.jpg"
    }
  ]}
/>

Use for:

Building trust
Social proof
Customer success stories

CTA Section

Call-to-action section for conversions.

Variants: default, centered, split

<CTA
  title="Ready to get started?"
  subtitle="Join thousands of developers building with mdxui"
  cta={{ text: "Start Free Trial", href: "/signup" }}
  secondaryCta={{ text: "Book Demo", href: "/demo" }}
  variant="centered"
/>

Use for:

Final conversion push
Section transitions
Multiple placement points

FAQ Section

Frequently asked questions accordion.

Variants: default, two-column

<FAQ
  title="Frequently asked questions"
  variant="default"
  items={[
    {
      question: "How does pricing work?",
      answer: "We offer monthly and annual plans. All plans include a 14-day free trial."
    },
    {
      question: "Can I cancel anytime?",
      answer: "Yes, you can cancel your subscription at any time with no penalties."
    }
  ]}
/>

Use for:

Addressing objections
Common questions
Reducing support burden

Additional Section Types

The following sections are commonly used in marketing sites but may not have dedicated documentation yet:

Stats Section

Display impressive metrics and achievements.

<Stats
  stats={[
    { value: "10M+", label: "API calls per day" },
    { value: "99.9%", label: "Uptime SLA" },
    { value: "500+", label: "Enterprise customers" }
  ]}
/>

Use for:

Social proof
Building credibility
Quantifying impact

Comparison Table

Feature comparison between plans or competitors.

<Comparison
  title="How we compare"
  competitors={["Us", "Competitor A", "Competitor B"]}
  features={[
    { name: "Type-safe", us: true, competitorA: false, competitorB: true },
    { name: "Auto-wiring", us: true, competitorA: false, competitorB: false }
  ]}
/>

Use for:

Competitive differentiation
Plan comparison
Decision support

Timeline Section

Visual timeline for product roadmap, company history, or process steps.

<Timeline
  title="Our journey"
  items={[
    { date: "2020", title: "Founded", description: "Started in a garage" },
    { date: "2021", title: "Series A", description: "Raised $10M" },
    { date: "2022", title: "Launch", description: "Product goes live" }
  ]}
/>

Use for:

Company history
Product roadmap
Process visualization

Common Patterns

Full Landing Page

Standard landing page flow:

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />
  <Pricing {...pricingProps} />
  <Testimonials {...testimonialsProps} />
  <FAQ {...faqProps} />
  <CTA {...ctaProps} />
</LandingPage>

Product Launch Page

Focus on features and social proof:

<LandingPage>
  <Hero variant="centered" {...heroProps} />
  <Stats {...statsProps} />
  <Features variant="bento" {...featuresProps} />
  <Testimonials variant="carousel" {...testimonialsProps} />
  <CTA {...ctaProps} />
</LandingPage>

Pricing-Focused Page

Lead with value, close with pricing:

<LandingPage>
  <Hero {...heroProps} />
  <Features variant="list" {...featuresProps} />
  <Comparison {...comparisonProps} />
  <Pricing {...pricingProps} />
  <FAQ {...faqProps} />
  <CTA {...ctaProps} />
</LandingPage>

Trust-Building Page

Emphasize credibility and proof:

<LandingPage>
  <Hero {...heroProps} />
  <Stats {...statsProps} />
  <Testimonials {...testimonialsProps} />
  <Features {...featuresProps} />
  <Timeline {...timelineProps} />
  <CTA {...ctaProps} />
</LandingPage>

Section Composition

Placement Order

Typical landing page structure:

Hero - Capture attention with value proposition
Stats (optional) - Build instant credibility
Features - Explain what you offer
Testimonials - Provide social proof
Pricing - Present options
FAQ - Address objections
CTA - Final conversion push

Multiple CTA Sections

Use CTAs strategically throughout the page:

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />

  {/* Mid-page CTA */}
  <CTA variant="centered" {...earlyCtaProps} />

  <Pricing {...pricingProps} />
  <Testimonials {...testimonialsProps} />
  <FAQ {...faqProps} />

  {/* Final CTA */}
  <CTA variant="split" {...finalCtaProps} />
</LandingPage>

Alternating Layouts

Create visual rhythm with variant mixing:

<LandingPage>
  <Hero variant="split" />
  <Features variant="grid" />
  <CTA variant="centered" />
  <Features variant="list" />
  <Testimonials variant="masonry" />
  <CTA variant="split" />
</LandingPage>

Design Principles

Visual Hierarchy

Section components follow consistent hierarchy:

Section title (<h2>) - Optional heading
Section description (<p>) - Optional subtitle
Content - Main section body
CTA - Optional call-to-action

Responsive Behavior

All sections are mobile-first responsive:

Desktop: Full layouts with columns
Tablet: Reduced columns, maintained structure
Mobile: Stacked, single-column layouts

Spacing

Consistent vertical spacing between sections:

// Default spacing
<section className="py-16 md:py-24 lg:py-32">
  {/* Section content */}
</section>

Color Schemes

Alternate background colors for visual separation:

<LandingPage>
  <Hero />                  {/* White background */}
  <Features />              {/* Gray background */}
  <Pricing />               {/* White background */}
  <Testimonials />          {/* Gray background */}
  <CTA />                   {/* Primary color background */}
</LandingPage>

Accessibility

All section components include:

Semantic HTML - Proper heading hierarchy (<section>, <h2>, <h3>)
ARIA Labels - Screen reader support
Keyboard Navigation - Full keyboard accessibility
Focus Indicators - Visible focus states
Color Contrast - WCAG AA compliant

<section className="hero" aria-labelledby="hero-title">
  <h2 id="hero-title">{title}</h2>
  {/* Content */}
</section>

Performance

Lazy Loading

Sections below the fold lazy-load images:

<Features
  features={[
    { title: "Feature", image: "/feature.png" }  // Lazy loaded
  ]}
/>

Code Splitting

Import sections dynamically for better performance:

import dynamic from 'next/dynamic'

const Testimonials = dynamic(() => import('@mdxui/beacon').then(m => m.Testimonials))

Image Optimization

Use optimized image formats:

WebP for photos and screenshots
SVG for icons and illustrations
Responsive images with srcset

TypeScript

All sections are fully typed:

import type {
  HeroProps,
  FeaturesProps,
  PricingProps,
  TestimonialsProps,
  CTAProps,
  FAQProps
} from 'mdxui'

// Type-safe props
const heroProps: HeroProps = {
  title: "Build faster",
  cta: { text: "Start", href: "/signup" }
}

// Zod validation
import {
  HeroPropsSchema,
  FeaturesPropsSchema
} from 'mdxui/zod'

const validatedProps = HeroPropsSchema.parse(heroProps)