> ## Documentation Index
> Fetch the complete documentation index at: https://shipfast.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Other Components

> Quick reference for remaining landing page sections

## Problem

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/problem-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=4a1af420fbecd0d56217618c0d8005b6" alt="Problem section" className="rounded-lg border mb-4" title="" width="2494" height="1592" data-path="images/problem-preview.png" />

Shows the pain point your product solves.

**Edit:** `/components/Problem.tsx`

```tsx theme={null}
<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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/solution-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=bd8492fee0a888838710e42a53b2fa06" alt="Solution section" className="rounded-lg border mb-4" title="" width="2874" height="1274" data-path="images/solution-preview.png" />

Shows how your product solves the problem.

**Edit:** `/components/Solution.tsx`

```tsx theme={null}
<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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/benefits-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=338c82a3027f2d867056e2aa9e25e0c6" alt="Benefits section" className="rounded-lg border mb-4" title="" width="2281" height="2134" data-path="images/benefits-preview.png" />

Side-by-side comparison of life before/after your product.

**Edit:** `/components/WithWithout.tsx`

```tsx theme={null}
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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/howitworks-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=41621a91a89120aa4c2548546cebfd5c" alt="How it works section" className="rounded-lg border mb-4" title="" width="2242" height="1158" data-path="images/howitworks-preview.png" />

Step-by-step process to use your product.

**Edit:** `/components/HowItWorks.tsx`

```tsx theme={null}
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)

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/cta-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=9ebafffec972aabb34fbb7f66f33d297" alt="CTA section" className="rounded-lg border mb-4" title="" width="2170" height="814" data-path="images/cta-preview.png" />

Final push to convert visitors.

**Edit:** `/components/Cta.tsx`

```tsx theme={null}
<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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/lead-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=62da86fbc841df5d70692484f9ca0476" alt="Lead capture form" className="rounded-lg border mb-4" title="" width="2232" height="986" data-path="images/lead-preview.png" />

Email signup for waitlist or early access.

**Edit:** `/components/Lead.tsx`

```tsx theme={null}
<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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/logos-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=d824c196d3a1540a4ce93c72b90a053f" alt="Logo cloud" className="rounded-lg border mb-4" title="" width="2506" height="570" data-path="images/logos-preview.png" />

Show companies/brands using your product.

**Edit:** `/components/Logos.tsx`

```tsx theme={null}
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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/makerintro-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=e7c39d6f21421658ed131c919faed6e5" alt="Maker introduction" className="rounded-lg border mb-4" title="" width="2586" height="1188" data-path="images/makerintro-preview.png" />

Personal intro from the creator. Builds trust.

**Edit:** `/components/MakerIntro.tsx`

```tsx theme={null}
<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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/ratingbadge-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=54b770e605b64aec3b5aeb144ee62e5f" alt="Rating components" className="rounded-lg border mb-4" title="" width="410" height="176" data-path="images/ratingbadge-preview.png" />

Shows star ratings and review count.

**Used in:** Hero, Header sections

**Edit:** `/components/RatingBadge.tsx` and `/components/RatingStars.tsx`

```tsx theme={null}
// 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

<img src="https://mintcdn.com/shipfastso/Uja_RX6DBj_iPIfW/images/themetoggle-preview.png?fit=max&auto=format&n=Uja_RX6DBj_iPIfW&q=85&s=cbf6217f3497751131042fe44f8aee6b" alt="Theme toggle button" className="rounded-lg border mb-4" title="" width="264" height="166" data-path="images/themetoggle-preview.png" />

Dark/light mode switcher.

**Location:** Footer (automatically included)

Works out of the box. No setup needed.

***

## Choosing Components

<Steps>
  <Step title="Start with the essentials">
    * Hero
    * Features or Problem/Solution
    * Pricing
    * FAQ
    * CTA
  </Step>

  <Step title="Add social proof if you have it">
    * Testimonials (real quotes only)
    * Logos (real companies only)
    * Rating badges (real ratings only)
  </Step>

  <Step title="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)
  </Step>
</Steps>

***

## 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`:

```tsx theme={null}
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.

***

<Tip>
  Order matters: Problem → Solution → Features → Pricing → FAQ → CTA works well for most products.
</Tip>

<Tip>
  Don't use every component. Pick 5-7 that tell your story best.
</Tip>

<Warning>
  Never fake social proof (logos, testimonials, ratings). It's obvious and kills trust.
</Warning>