Skip to main content

Problem

Problem section Shows the pain point your product solves. Edit: /components/Problem.tsx
Keep it relatable. Describe a frustration your audience feels daily.

Solution

Solution section Shows how your product solves the problem. Edit: /components/Solution.tsx
Connect directly to the problem you just stated.

Benefits / With-Without

Benefits section Side-by-side comparison of life before/after your product. Edit: /components/WithWithout.tsx
Focus on time/money saved.

How It Works

How it works section Step-by-step process to use your product. Edit: /components/HowItWorks.tsx
Keep it 3-5 steps max.

CTA (Call to Action)

CTA section Final push to convert visitors. Edit: /components/Cta.tsx
Simple and action-focused. No more than 2 sentences.

Lead Capture / Waitlist

Lead capture form Email signup for waitlist or early access. Edit: /components/Lead.tsx
How it works:
  • Form submits to /api/lead
  • Emails stored in Supabase leads table
  • Sends confirmation email via Resend
  • No additional setup needed

Logos / Social Proof

Logo cloud Show companies/brands using your product. Edit: /components/Logos.tsx
Add logo images to /public/logos/ Only use if you have real logos. Don’t fake this.

Maker Intro

Maker introduction Personal intro from the creator. Builds trust. Edit: /components/MakerIntro.tsx
Keep it honest and personal. Explain why you built this.

Rating Badge & Stars

Rating components Shows star ratings and review count. Used in: Hero, Header sections Edit: /components/RatingBadge.tsx and /components/RatingStars.tsx
Remove if you don’t have real ratings yet.

Theme Toggle

Theme toggle button Dark/light mode switcher. Location: Footer (automatically included) Works out of the box. No setup needed.

Choosing Components

1

Start with the essentials

  • Hero
  • Features or Problem/Solution
  • Pricing
  • FAQ
  • CTA
2

Add social proof if you have it

  • Testimonials (real quotes only)
  • Logos (real companies only)
  • Rating badges (real ratings only)
3

Add extras based on your audience

  • How It Works (if process isn’t obvious)
  • Maker Intro (for indie hackers/solo founders)
  • Lead capture (for pre-launch products)

Common Layouts

SaaS Product:
Pre-launch:
Developer Tool:
Indie Hacker:

Removing Components

Delete from /app/(public)/page.tsx:
Only use what serves your specific sales message.
Order matters: Problem → Solution → Features → Pricing → FAQ → CTA works well for most products.
Don’t use every component. Pick 5-7 that tell your story best.
Never fake social proof (logos, testimonials, ratings). It’s obvious and kills trust.