Problem
Shows the pain point your product solves.
Edit: /components/Problem.tsx
<h2>Tired of spending weeks on boilerplate?</h2>
<p>Most developers waste time setting up auth, payments, and basic features instead of building their actual product.</p>
Keep it relatable. Describe a frustration your audience feels daily.
Solution
Shows how your product solves the problem.
Edit: /components/Solution.tsx
<h2>Ship your SaaS in days, not months</h2>
<p>Everything you need is already built and ready to use. Just customize and launch.</p>
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
const withoutProduct = [
"Weeks setting up auth",
"Days configuring Stripe",
"Hours on email templates",
]
const withProduct = [
"Auth working in 5 minutes",
"Payments ready out of the box",
"Professional emails included",
]
Focus on time/money saved.
How It Works
Step-by-step process to use your product.
Edit: /components/HowItWorks.tsx
const steps = [
{
number: "1",
title: "Clone the repo",
description: "Get the code and install dependencies in 2 minutes",
},
{
number: "2",
title: "Configure your brand",
description: "Update colors, logo, and copy in one config file",
},
{
number: "3",
title: "Deploy and launch",
description: "Push to production and start getting customers",
},
]
Keep it 3-5 steps max.
CTA (Call to Action)
Final push to convert visitors.
Edit: /components/Cta.tsx
<h2>Ready to ship your product?</h2>
<p>Join hundreds of developers who launched faster with ShipFast.</p>
<ButtonCheckout priceId={config.stripe.plans[0].priceId} />
Simple and action-focused. No more than 2 sentences.
Lead Capture / Waitlist
Email signup for waitlist or early access.
Edit: /components/Lead.tsx
<h2>Join the waitlist</h2>
<p>Be the first to know when we launch.</p>
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
const logos = [
{ name: "Company A", src: "/logos/company-a.svg" },
{ name: "Company B", src: "/logos/company-b.svg" },
]
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
<img src="/maker-photo.jpg" alt="Your name" />
<h3>Built by [Your Name]</h3>
<p>I'm a solo developer who got tired of rebuilding the same features for every project...</p>
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
// RatingBadge.tsx
<Badge>
⭐ Rated 5 Stars by 123+ Startups
</Badge>
// RatingStars.tsx
// Shows 5 star icons - update count if needed
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:
Hero → Features → Pricing → Testimonials → FAQ → CTA
Pre-launch:
Hero → Problem → Solution → How It Works → Lead Capture → FAQ
Developer Tool:
Hero → Features → How It Works → Pricing → CTA
Indie Hacker:
Hero → Problem → Solution → Maker Intro → Pricing → Testimonials → FAQ → CTA
Removing Components
Delete from /app/(public)/page.tsx:
export default function Home() {
return (
<>
<Hero />
<Features />
{/* <Problem /> - Commented out */}
{/* <Solution /> - Not using */}
<Pricing />
<Testimonials />
<FAQ />
<Cta />
</>
)
}
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.