Customizing the marketing homepage

DocsKit ships with a complete marketing homepage that demonstrates the template's full capability. It is designed to be replaced with your own product's content — the structure, layout, and components are the valuable part. The words are just placeholders.

What to replace

1. Product name and logo

Open src/components/Logo.tsx and change the letter and name:

export function Logo() {
  return (
    <span className="flex items-center gap-2 text-sm font-bold text-[var(--foreground)]">
      <span className="flex h-6 w-6 items-center justify-center rounded bg-[var(--primary)] text-[10px] font-bold text-white">
        A {/* ← your initial */}
      </span>
      Acme Docs {/* ← your product name */}
    </span>
  );
}

2. Hero headline and CTA

Open src/components/marketing/Hero.tsx and update:

• The badge text (line ~15) — your own value proposition
• The h1 headline
• The subtitle paragraph
• The CTA button href — point it to your purchase or signup URL
• The trust pills at the bottom — your stack or key facts

3. Features

Open src/components/marketing/Features.tsx and replace:

• The flagship array — your two standout features with visuals
• The grid array — your six supporting features
• The section headline

4. Comparison table

Open src/components/marketing/Comparison.tsx and replace:

• Column headers — your product vs your actual competitors
• Row data — the features that matter for your category
• The callout below the table

Remove this section entirely if a comparison table doesn't fit your product.

5. Testimonials

Open src/components/marketing/Testimonials.tsx and replace the testimonials array with real quotes from your users once you have them. Until then, use realistic placeholder quotes that describe your product's actual benefits.

6. How it works

Open src/components/marketing/HowItWorks.tsx and replace the three steps with your product's onboarding flow.

7. Pricing

Open src/components/marketing/Pricing.tsx and update:

• The plans array — your plan names, prices, and feature lists
• The CTA button href — your checkout or signup URL

8. FAQ

Open src/components/marketing/FAQ.tsx and replace the items array with questions your actual buyers ask.

9. Accent color

The entire UI uses two CSS variables. Open src/app/globals.css and change:

:root {
  --primary: #8b5cf6;       /* ← your brand color */
  --primary-hover: #7c3aed; /* ← slightly darker shade */
}

Both dark and light mode update automatically.

10. Site URL and metadata

Set your domain in .env.local:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Update the page title and description in src/app/page.tsx:

export const metadata: Metadata = {
  title: "YourProduct - Your tagline",
  description: "Your meta description.",
};

Page structure

The homepage renders sections in this order in src/app/page.tsx:

Hero → TechStack → Comparison → Features → Testimonials
→ Preview → HowItWorks → FAQ → Pricing → CallToAction → Footer

Remove any section by deleting its import and JSX tag from src/app/page.tsx. No other files need updating.