Problem
Shows the pain point your product solves.
Edit: /components/Problem.tsx
Keep it relatable. Describe a frustration your audience feels daily.
Solution
Shows how your product solves the problem.
Edit: /components/Solution.tsx
Connect directly to the problem you just stated.
Benefits / With-Without
Side-by-side comparison of life before/after your product.
Edit: /components/WithWithout.tsx
Focus on time/money saved.
How It Works
Step-by-step process to use your product.
Edit: /components/HowItWorks.tsx
Keep it 3-5 steps max.
CTA (Call to Action)
Final push to convert visitors.
Edit: /components/Cta.tsx
Simple and action-focused. No more than 2 sentences.
Lead Capture / Waitlist
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
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
Personal intro from the creator. Builds trust.
Edit: /components/MakerIntro.tsx
Keep it honest and personal. Explain why you built this.
Rating Badge & Stars
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
Dark/light mode switcher.
Location: Footer (automatically included)
Works out of the box. No setup needed.
Choosing Components
Start with the essentials
- Hero
- Features or Problem/Solution
- Pricing
- FAQ
- CTA
Add social proof if you have it
- Testimonials (real quotes only)
- Logos (real companies only)
- Rating badges (real ratings only)
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.