Landing Kit Module

Overview

The Landing Kit gives you a complete, conversion-optimized landing page built with React and Tailwind CSS. Every section is a separate component you can rearrange, customize, or remove.

Included sections:

• Hero — headline, subheadline, CTA button, optional screenshot
• Features — grid of feature cards with icons
• Pricing — plan comparison cards with feature lists
• FAQ — accordion with common questions
• Testimonials — customer quotes with avatars
• CTA — final call-to-action with email capture
• Footer — links, social icons, copyright

All components live in src/components/landing/.

Configuration

The landing page is composed in a single page file:

import { Hero } from "@/components/landing/hero";
import { Features } from "@/components/landing/features";
import { Pricing } from "@/components/landing/pricing";
import { FAQ } from "@/components/landing/faq";
import { Testimonials } from "@/components/landing/testimonials";
import { CTA } from "@/components/landing/cta";

export default function HomePage() {
  return (
    <main>
      <Hero />
      <Features />
      <Pricing />
      <Testimonials />
      <FAQ />
      <CTA />
    </main>
  );
}

To reorder sections, move the components around. To remove a section, delete its line.

Usage

Hero section

export function Hero() {
  return (
    <section className="py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight">
        Ship your SaaS in days, not months
      </h1>
      <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
        Authentication, payments, email, AI — all wired up.
        Just add your idea.
      </p>
      <div className="mt-8 flex gap-4 justify-center">
        <Button size="lg" asChild>
          <Link href="/register">Get Started</Link>
        </Button>
        <Button size="lg" variant="outline" asChild>
          <Link href="#pricing">See Pricing</Link>
        </Button>
      </div>
    </section>
  );
}

Pricing section

Pricing cards pull from the plan definitions:

import { PLANS } from "@/lib/payments/plans";

export function Pricing() {
  return (
    <section id="pricing" className="py-24">
      <h2 className="text-3xl font-bold text-center">Simple pricing</h2>
      <div className="mt-12 grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        {Object.values(PLANS).map((plan) => (
          <PricingCard key={plan.name} plan={plan} />
        ))}
      </div>
    </section>
  );
}

FAQ section

Questions are defined as an array:

const faqs = [
  {
    question: "Can I use this for commercial projects?",
    answer: "Yes. You get a license for unlimited commercial projects.",
  },
  {
    question: "Do I need to pay DodoPayments separately?",
    answer: "DodoPayments takes a percentage of transactions. No monthly fee.",
  },
  // Add more questions here
];

Customization

Change colors and fonts

Theme colors are defined in tailwind.config.ts and src/app/globals.css:

@layer base {
  :root {
    --primary: 222 47% 11%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    /* ... other color variables */
  }
}

Update these CSS variables to change the entire color scheme.

Add a new section

1. Create a new component:

export function Partners() {
  const logos = ["acme.svg", "globex.svg", "initech.svg"];

  return (
    <section className="py-16 bg-muted/50">
      <p className="text-center text-sm text-muted-foreground">
        Trusted by teams at
      </p>
      <div className="mt-8 flex justify-center gap-12">
        {logos.map((logo) => (
          <img key={logo} src={`/logos/${logo}`} alt="" className="h-8 opacity-60" />
        ))}
      </div>
    </section>
  );
}

2. Add it to the page:

import { Partners } from "@/components/landing/partners";

// Add between Hero and Features:
<Hero />
<Partners />
<Features />

Customize testimonials

const testimonials = [
  {
    quote: "KitRocket saved us 3 months of development.",
    author: "Sarah Chen",
    role: "CTO at Acme",
    avatar: "/avatars/sarah.jpg",
  },
  // Replace with your real testimonials
];

Removing this module

1. Delete src/components/landing/ directory
2. Simplify src/app/(marketing)/page.tsx to whatever you need
3. That's it — no dependencies to remove, no database tables to drop