LandingPage Component

The <LandingPage> component provides a container layout for building marketing landing pages with Hero, Features, Pricing, and other composable sections.

Interface

import type { LandingPageProps } from 'mdxui'

interface LandingPageProps {
  /** Child sections (Hero, Features, Pricing, etc.) */
  children: ReactNode
}

Usage

Basic Example

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

<LandingPage>
  <Hero
    title="Build Better Products"
    subtitle="Ship faster with our component library"
    cta={{ label: "Get Started", href: "/signup" }}
  />
  <Features
    title="Key Features"
    features={[
      { title: "Fast", description: "Lightning-fast performance" },
      { title: "Flexible", description: "Customize everything" },
      { title: "Accessible", description: "WCAG AA compliant" },
    ]}
  />
  <Pricing
    title="Simple Pricing"
    tiers={pricingTiers}
  />
  <CTA
    title="Ready to get started?"
    cta={{ label: "Start Free Trial", href: "/signup" }}
  />
</LandingPage>

MDX Usage

Landing pages work great with MDX:

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

<LandingPage>
  <Hero
    title="Welcome to Acme"
    subtitle="The best product you'll ever use"
    cta={{ label: "Get Started", href: "/signup" }}
  />

  <Features
    title="Why Choose Us"
    features={[
      { title: "Feature 1", description: "Description here" },
      { title: "Feature 2", description: "Description here" },
    ]}
  />

  <CTA
    title="Ready to start?"
    cta={{ label: "Sign Up", href: "/signup" }}
  />
</LandingPage>

With Custom Sections

Compose your own sections:

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

  <CustomSection className="py-24">
    <div className="container">
      <h2>Custom Content</h2>
      <p>Your custom section content here</p>
    </div>
  </CustomSection>

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

Props

`children` (required)

Type: ReactNode

Child sections that compose the landing page. Typically includes Hero, Features, Pricing, Testimonials, CTA, and FAQ sections.

<LandingPage>
  {/* Compose sections in any order */}
  <Hero />
  <LogoCloud />
  <Features />
  <Testimonials />
  <Pricing />
  <FAQ />
  <CTA />
</LandingPage>

Implementation Details

The reference implementation from @mdxui/beacon includes:

Features

Flexible Section Composition - Children can be any valid React elements
Semantic HTML - Uses <main> with proper ARIA roles
Responsive Spacing - Consistent vertical rhythm between sections
Full-Width Support - Sections can break out of container for full-bleed designs

Structure

<main className="flex-1">
  {children}
</main>

Key implementation points:

Minimal wrapper - doesn't constrain section layouts
Sections manage their own spacing and containers
Works with Site component for full page layout

Section Spacing

Sections typically use consistent vertical spacing:

<section className="py-12 md:py-24 lg:py-32">
  <div className="container">
    {/* Section content */}
  </div>
</section>

Spacing scale:

Mobile: py-12 (3rem)
Tablet: py-24 (6rem)
Desktop: py-32 (8rem)

Common Section Patterns

Hero Section

Always first, establishes the value proposition:

<LandingPage>
  <Hero
    title="Main Value Proposition"
    subtitle="Supporting description"
    cta={{ label: "Primary Action", href: "/signup" }}
    secondaryCta={{ label: "Learn More", href: "#features" }}
  />
  {/* Other sections */}
</LandingPage>

Features Section

Showcases product benefits:

<Features
  title="Why Choose Us"
  description="Everything you need to succeed"
  features={[
    {
      title: "Fast",
      description: "Lightning-fast performance",
      icon: <Zap />
    },
    {
      title: "Secure",
      description: "Bank-level security",
      icon: <Shield />
    },
  ]}
  variant="grid"
  columns={3}
/>

Testimonials and logos:

<LandingPage>
  <Hero />

  <LogoCloud
    title="Trusted by industry leaders"
    logos={[
      { name: "Company A", src: "/logos/a.svg" },
      { name: "Company B", src: "/logos/b.svg" },
    ]}
  />

  <Testimonials
    testimonials={[
      {
        quote: "This product changed everything",
        author: "Jane Doe",
        title: "CEO",
        company: "Acme Inc"
      }
    ]}
    variant="carousel"
  />

  <Pricing />
</LandingPage>

Pricing Section

Convert visitors with clear pricing:

<Pricing
  title="Simple, Transparent Pricing"
  description="Choose the plan that fits your needs"
  tiers={[
    {
      name: "Starter",
      price: "$29/mo",
      features: ["Feature 1", "Feature 2", "Feature 3"],
      cta: { label: "Start Free", href: "/signup" }
    },
    {
      name: "Pro",
      price: "$99/mo",
      features: ["Everything in Starter", "Feature 4", "Feature 5"],
      cta: { label: "Start Free", href: "/signup" },
      highlighted: true
    },
  ]}
  showToggle={true}
/>

FAQ Section

Address common questions:

<FAQ
  title="Frequently Asked Questions"
  items={[
    {
      question: "How does pricing work?",
      answer: "We offer simple monthly pricing..."
    },
    {
      question: "Can I cancel anytime?",
      answer: "Yes, you can cancel your subscription..."
    },
  ]}
  variant="accordion"
/>

Final CTA

End with a strong call-to-action:

<CTA
  title="Ready to get started?"
  description="Join thousands of happy customers today"
  cta={{ label: "Start Free Trial", href: "/signup" }}
  secondaryCta={{ label: "Schedule Demo", href: "/demo" }}
  variant="centered"
/>

Real-World Examples

SaaS Landing Page

<LandingPage>
  <Hero
    title="Ship Products Faster"
    subtitle="The all-in-one platform for modern development teams"
    cta={{ label: "Start Free Trial", href: "/signup" }}
    secondaryCta={{ label: "Watch Demo", href: "#demo" }}
    image="/hero.png"
    variant="split"
  />

  <LogoCloud
    title="Trusted by 500+ companies"
    logos={customerLogos}
  />

  <Features
    title="Everything You Need"
    features={features}
    variant="bento"
  />

  <Testimonials
    testimonials={testimonials}
    variant="carousel"
  />

  <Pricing
    title="Simple Pricing"
    tiers={pricingTiers}
    showToggle={true}
  />

  <FAQ
    title="Common Questions"
    items={faqItems}
  />

  <CTA
    title="Start Building Today"
    cta={{ label: "Get Started Free", href: "/signup" }}
  />
</LandingPage>

Product Launch Page

<LandingPage>
  <Hero
    title="Introducing Product X"
    subtitle="The future of productivity is here"
    cta={{ label: "Join Waitlist", href: "/waitlist" }}
    video="/launch-video.mp4"
    variant="centered"
  />

  <Features
    title="Key Features"
    features={features}
    variant="grid"
    columns={3}
  />

  <Demo
    title="See It In Action"
    video="/demo.mp4"
  />

  <Pricing
    title="Early Bird Pricing"
    description="Lock in special launch pricing"
    tiers={earlyBirdTiers}
  />

  <Newsletter
    title="Get Launch Updates"
    description="Be the first to know when we launch"
  />
</LandingPage>

Minimal Landing Page

<LandingPage>
  <Hero
    title="Simple. Powerful. Yours."
    subtitle="The tool you've been waiting for"
    cta={{ label: "Get Started", href: "/signup" }}
    variant="centered"
  />

  <Features
    features={minimalFeatures}
    variant="list"
  />

  <CTA
    title="Ready?"
    cta={{ label: "Start Now", href: "/signup" }}
    variant="simple"
  />
</LandingPage>

Composition with Site

The <LandingPage> component works with <Site> for full page layout:

<Site name="Acme">
  <LandingPage>
    <Hero />
    <Features />
    <Pricing />
  </LandingPage>
</Site>

How it works:

<Site> provides the root layout with Header and Footer
<LandingPage> provides the <main> content area
Sections compose freely within <LandingPage>

Full page structure:

<Site>
  <Header />      {/* Provided by Site */}
  <LandingPage>   {/* Main content */}
    {children}
  </LandingPage>
  <Footer />      {/* Provided by Site */}
</Site>

Accessibility

The reference implementation includes:

Semantic HTML - Uses <main> element
Heading Hierarchy - Maintains proper h1-h6 structure
Landmark Regions - Sections use appropriate ARIA landmarks
Skip Links - Support for "skip to content" navigation
Keyboard Navigation - All interactive elements are keyboard accessible

<main id="main-content" role="main">
  {children}
</main>

TypeScript

Full type definitions:

import type { ReactNode } from 'react'
import type { z } from 'zod'
import type { Component } from 'mdxui'

export const LandingPagePropsSchema = z.object({
  children: z.any(),
})

export type LandingPageProps = z.infer<typeof LandingPagePropsSchema>
export type LandingPage = Component<LandingPageProps>

Site Component - Root wrapper with Header/Footer
Page Component - Generic page layout
Hero Component - Hero section
Features Component - Features section
Pricing Component - Pricing section
CTA Component - Call-to-action section

LandingPage Component

On this page