Landing Page

A complete, conversion-optimized sample landing page with customizable sections and a dev toolbar for experimenting with themes.

Sections

The landing page includes five sections optimized for conversion:

1. Hero - Headline, subheadline, CTAs, and social proof line
2. Testimonials - 3 customer quotes with avatars
3. Features - 6-card grid with icons
4. Pricing - 3 tiers with monthly/annual toggle
5. FAQ - Accordion-style Q&A

Key files

• app/(marketing)/page.tsx - Composes all sections
• app/(marketing)/layout.tsx - Header, footer, theme provider
• components/landing/hero.tsx - Hero section
• components/landing/testimonials.tsx - Testimonials section
• components/landing/features.tsx - Features grid
• components/landing/pricing.tsx - Pricing tiers
• components/landing/faq.tsx - FAQ accordion
• components/landing/theme-customizer.tsx - Theme context provider
• components/landing/dev-toolbar.tsx - Dev-only customization toolbar

Customizing content

Each section has its content defined as an array at the top of the file:

// components/landing/features.tsx
const features = [
  {
    icon: Activity,
    title: "Health Scores",
    description: "Track customer health...",
  },
  // Add, remove, or edit items
];

| Section | Array name | Fields | |---------|------------|--------| | Testimonials | testimonials | quote, name, role, company, avatar | | Features | features | icon, title, description | | Pricing | plans | name, description, monthlyPrice, yearlyPrice, features, cta, href, popular | | FAQ | faqs | question, answer |

Dev toolbar

In development, a toolbar appears above the header with three controls:

• Color - Slate (default), Blue, Green, Violet
• Font - Inter (default), Geist, Outfit
• Spacing - Compact, Default, Spacious

Preferences persist to localStorage under the key landing-theme.

The toolbar only renders when NODE_ENV === 'development'.

Theme customization context

The landing page uses a React Context for theme state:

import { useTheme, useSpacing } from "@/components/landing";

function MySection() {
  const { color, font, spacing } = useTheme();
  const { section, gap } = useSpacing();
  
  return (
    <section className={cn("px-4", section)}>
      <div className={gap}>...</div>
    </section>
  );
}

Adding a new section

1. Create components/landing/my-section.tsx
2. Export from components/landing/index.ts
3. Add to app/(marketing)/page.tsx

// components/landing/my-section.tsx
"use client";

import { useSpacing } from "./theme-customizer";
import { cn } from "@/lib/utils";

export function MySection() {
  const { section, gap } = useSpacing();
  
  return (
    <section className={cn("mx-auto max-w-6xl px-4", section)}>
      {/* Your content */}
    </section>
  );
}

Removing the dev toolbar

The toolbar is automatically hidden in production. To remove it entirely:

1. Delete components/landing/dev-toolbar.tsx
2. Remove <DevToolbar /> from app/(marketing)/layout.tsx
3. Remove export from components/landing/index.ts

Design principles

The landing page follows these guidelines:

• Clean typography with generous line-height
• Subtle borders instead of shadows
• Single accent color per view
• Generous whitespace
• No gradients or glow effects
• Animations under 200ms with ease-out

Related: SEO for metadata and OpenGraph images