Landing Page Components

9 production-ready sections that assemble into a complete SaaS landing page.

All landing components use Framer Motion for scroll-triggered animations and pull content from lib/config.ts.

Navbar

Fixed responsive navigation bar with logo from config, dynamic nav links from siteConfig.navLinks, dark/light theme toggle using next-themes, Login/Get Started CTA buttons, and a slide-down mobile menu. Uses useSyncExternalStore for hydration-safe theme rendering.

components/landing/Navbar.tsx

Hero

Full-viewport hero section with Framer Motion entrance animations (fade-up with stagger), gradient text headline pulling app name from siteConfig.name, description from siteConfig.description, a "Get Started Free" CTA button, and a social proof strip with 5 avatars and "Trusted by 100+ developers" text.

components/landing/Hero.tsx

Features

3-column responsive grid (1-col mobile, 2-col tablet, 3-col desktop) of 6 feature cards with Lucide icons (Zap, Shield, BarChart3, Globe, Clock, Sparkles), staggered Framer Motion reveal animations, gradient icon backgrounds, and hover border effects. Features data is hardcoded in the component.

components/landing/Features.tsx

Steps

How-it-works section with 3 numbered steps (Clone & Configure, Build Your Features, Launch & Scale) in a horizontal timeline layout. Each step has a large icon box with a floating step number badge, connector lines between steps on desktop, and scroll-triggered Framer Motion animations.

components/landing/Steps.tsx

Pricing

Dynamic pricing cards grid reading plans from siteConfig.stripe.plans. Shows plan name, description, original price (strikethrough), sale price, feature list with check icons, and CTA button. The featured plan gets a "Most Popular" badge and a violet gradient border. Framer Motion scale-up animations on scroll.

components/landing/Pricing.tsx

Testimonials

3-column grid of customer review cards with quoted text, gradient avatar circles with initials, name and role. Staggered Framer Motion fade-up animations. Testimonial data is hardcoded (John D., Sarah M., Ahmed K.).

components/landing/Testimonials.tsx

FAQ

Accordion-style FAQ with 5 questions. Uses useState for open/close tracking, AnimatePresence + motion.div for smooth height animations, and Chevron rotation indicator. Only one item open at a time.

components/landing/FAQ.tsx

CTA

Call-to-action section with gradient border card, background glow effect, "Ready to Ship Your SaaS?" headline with siteConfig.name, and two buttons (Get Started Now + View Pricing). Framer Motion scale-up animation.

components/landing/CTA.tsx

Footer

4-column footer with brand logo/description from siteConfig, Product/Resources/Legal link columns from siteConfig.footerLinks, copyright year, and Twitter/GitHub social icons from siteConfig.twitter and siteConfig.github.

components/landing/Footer.tsx

Config Mapping

Landing components read content from lib/config.ts:

Config KeyUsed By
config.nameNavbar, Hero, CTA, Footer
config.descriptionHero, Footer
config.navLinksNavbar, Footer
config.stripe.plansPricing
config.footerLinksFooter
config.twitterFooter (social)
config.githubFooter (social)

Component Pattern

All landing components follow this consistent structure:

Component Pattern
"use client";

import { motion } from "framer-motion";
import { siteConfig } from "@/lib/config";

export default function ComponentName() {
  return (
    <section id="section-id" className="py-24 relative">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.5 }}
          className="text-center mb-16"
        >
          <h2>Section Title</h2>
          <p>Section description</p>
        </motion.div>
        {/* Content */}
      </div>
    </section>
  );
}

Page Assembly

All 9 components assemble together in app/page.tsx to form the complete landing page:

app/page.tsx
import Navbar from "@/components/landing/Navbar";
import Hero from "@/components/landing/Hero";
import Features from "@/components/landing/Features";
import Steps from "@/components/landing/Steps";
import Pricing from "@/components/landing/Pricing";
import Testimonials from "@/components/landing/Testimonials";
import FAQ from "@/components/landing/FAQ";
import CTA from "@/components/landing/CTA";
import Footer from "@/components/landing/Footer";

export default function Home() {
  return (
    <main className="min-h-screen bg-background text-foreground overflow-x-hidden">
      <Navbar />
      <Hero />
      <Features />
      <Steps />
      <Pricing />
      <Testimonials />
      <FAQ />
      <CTA />
      <Footer />
    </main>
  );
}

Tech Stack

React 19 + Next.js 16

App Router with server components

TypeScript

Type-safe across all components

Tailwind CSS 4

Utility-first responsive styling

Framer Motion

Scroll-triggered animations via whileInView

Lucide React

Beautiful, consistent iconography

next-themes

Dark/light mode with system preference