Customize the Landing Page

The KitRocket landing page is built from composable React components. Each section is a separate file you can edit independently.

File locations

src/components/landing/
├── hero.tsx            # Hero section
├── features.tsx        # Feature cards grid
├── pricing.tsx         # Pricing comparison
├── faq.tsx             # FAQ accordion
├── testimonials.tsx    # Customer quotes
├── cta.tsx             # Final call-to-action
└── footer.tsx          # Footer with links

src/app/(marketing)/
├── page.tsx            # Composes all sections
└── layout.tsx          # Marketing layout (navbar + footer)

Change the hero text

Open the hero component and update the headline, subheadline, and CTA:

export function Hero() {
  return (
    <section className="py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight">
        {/* Change this to your headline */}
        Your SaaS headline goes here
      </h1>
      <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
        {/* Change this to your value proposition */}
        One sentence that explains what your product does and why it matters.
      </p>
      <div className="mt-8 flex gap-4 justify-center">
        <Button size="lg" asChild>
          <Link href="/register">Get Started Free</Link>
        </Button>
      </div>
    </section>
  );
}

Update feature cards

Features are defined as an array. Add, remove, or modify entries:

const features = [
  {
    icon: Zap,
    title: "Lightning fast",
    description: "Built on Next.js with edge runtime support.",
  },
  {
    icon: Shield,
    title: "Secure by default",
    description: "Auth, CSRF protection, and rate limiting included.",
  },
  {
    icon: CreditCard,
    title: "Payments ready",
    description: "DodoPayments handles global taxes and compliance.",
  },
  // Add your own features
  {
    icon: Bot,
    title: "AI powered",
    description: "Claude and OpenAI integration with streaming.",
  },
];

Icons come from Lucide React. Import any icon:

import { Zap, Shield, CreditCard, Bot } from "lucide-react";

Modify pricing

Pricing cards pull from your plan definitions. Update plans in one place:

export const PLANS = {
  starter: {
    name: "Starter",
    priceId: process.env.DODO_STARTER_PRICE_ID!,
    price: 29,
    interval: "month",
    features: [
      "Up to 1,000 users",
      "Basic analytics",
      "Email support",
      "All core features",
    ],
  },
  pro: {
    name: "Pro",
    priceId: process.env.DODO_PRO_PRICE_ID!,
    price: 79,
    interval: "month",
    popular: true, // highlights this card
    features: [
      "Unlimited users",
      "Advanced analytics",
      "Priority support",
      "AI features",
      "Custom integrations",
    ],
  },
};

The pricing component reads from PLANS and renders cards automatically. The popular: true flag adds a "Most Popular" badge.

Edit FAQ questions

const faqs = [
  {
    question: "Is there a free trial?",
    answer: "Yes, you get 14 days free on any plan. No credit card required.",
  },
  {
    question: "Can I cancel anytime?",
    answer: "Absolutely. Cancel from your dashboard and you won't be charged again.",
  },
  {
    question: "Do you offer refunds?",
    answer: "We offer a 30-day money-back guarantee on all plans.",
  },
  // Add your own questions
];

Replace testimonials

const testimonials = [
  {
    quote: "This product changed how our team works.",
    author: "Jane Smith",
    role: "VP Engineering at TechCo",
    avatar: "/testimonials/jane.jpg",
  },
  // Replace with real testimonials from your users
];

Put avatar images in public/testimonials/.

Add or remove sections

Edit the page composition:

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 />
      {/* Add a new section: */}
      <LogoCloud />
      <Features />
      <Pricing />
      <Testimonials />
      <FAQ />
      <CTA />
      {/* Remove any section by deleting its line */}
    </main>
  );
}

Change colors and fonts

Colors

Theme colors use CSS variables in HSL format:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --primary: 222 47% 11%;
    --primary-foreground: 210 40% 98%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --border: 214 32% 91%;
    --ring: 222 47% 11%;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    /* ... dark mode colors */
  }
}

Fonts

Update the font in your root layout:

import { Inter } from "next/font/google";

const font = Inter({ subsets: ["latin"] });

// To use a different font:
import { Plus_Jakarta_Sans } from "next/font/google";
const font = Plus_Jakarta_Sans({ subsets: ["latin"] });

Using Claude Code

You can also customize the landing page with Claude Code:

claude "Update the hero section: change the headline to 'Build AI Apps 10x Faster',
the subheadline to 'The developer platform for shipping AI products',
and the CTA to 'Start Building'."

Or for bigger changes:

claude "Add a logo cloud section between Hero and Features showing logos of
companies that use our product. Use placeholder logos for now."

Next steps

• Go Production — checklist before launch
• Landing Kit Module — full module documentation