Skip to main content

Problem

Problem section 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

Solution section 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

Benefits section 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

How it works section 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)

CTA section 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

Lead capture form 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

Logo cloud 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

Maker introduction 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

Rating components 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

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:
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.