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

# Problem

> Show the pain points your product solves

The Problem section builds urgency. Show visitors the pain they're experiencing, make them feel it, then position your product as the solution.

> [!NOTE]
>
> This component works best early on your landing page - right after the hero. It primes visitors to care about your solution by reminding them of the frustration they're trying to escape.

## Edit Content

```tsx /components/Problem.tsx theme={null}
const CONTENT = {
  badge: "The Problem",  // Small label above headline
  headline: "Building without {productName}?",  // {productName} auto-fills from config
  subtitle: "Hours wasted on setup before writing any real code",  // Expand on the pain
  
  breakdown: [
    { time: 7, task: "designing landing pages" },  // Use real numbers
    { time: 2, task: "for SEO optimization" },
    { time: 4, task: "setting up transactional emails" },
    { time: 3, task: "wrestling with authentication" },
    { time: 3, task: "configuring databases" },
    { time: 4, task: "securing API routes" },
    { time: 2, task: "managing DNS records" },
    { time: "∞", task: "overthinking everything..." },  // Use ∞ for endless tasks
  ],
  
  totalLabel: "of pure frustration",  // What the total hours represent
  
  closing: {
    prefix: "There's a",
    highlight: "better way",  // Your transition to the solution
  },
}
```

> **What to focus on**
>
> * **Headline** - Make it personal. Use "you" or "your" to connect directly.
> * **Breakdown** - List specific tasks your audience wastes time on. They should nod along thinking "yes, that's me."
> * **Time estimates** - Be realistic. Inflated numbers hurt credibility. Use actual time people spend.
> * **Closing** - Transition to hope. You've shown the pain, now hint at the relief.

> **How to structure your breakdown**
>
> **Good breakdown:**
>
> * Specific tasks: "setting up authentication" not "technical stuff"
> * Recognizable pain: things they've actually done or will do
> * Varied time: mix of small (2hr) and large (7hr) tasks
> * Relatable order: follows a typical workflow
>
> **Bad breakdown:**
>
> * Vague: "dealing with problems"
> * Exaggerated: "100 hours on buttons"
> * Random: unrelated tasks thrown together

> **Using ∞ (infinity)**
>
> The last item can use `"∞"` instead of a number for open-ended frustrations:
>
> ```tsx theme={null}
>     { time: "∞", task: "overthinking everything..." }
>     { time: "∞", task: "debugging production issues" }
> ```
>
> This won't count toward the total - it's just for effect.

## Customize the Look

**Change colors**

The time numbers are red (`text-destructive`) by default. Change in the component:

```tsx theme={null}
    <span className="font-bold text-destructive">  // Change to text-primary, text-orange-500, etc.
```

**Remove arrow animation**

Delete the arrow SVG section if you don't want it:

```tsx theme={null}
    {/* Delete this entire block */}
    <div className="inline-block animate-pulse">
      <svg ... />
    </div>
```

**Adjust spacing**

Change padding to make it taller or shorter:

```tsx theme={null}
    <section className="py-16 sm:py-20 md:py-24">  // Reduce numbers for less space
```

## When to Use This Component

> **Use When**
>
> * You solve a clear, painful problem
> * Your audience does repetitive tasks
> * Time/money waste is a key pain point
> * You need to build urgency

> **Skip When**
>
> * You're selling something new (no existing pain)
> * Your audience doesn't relate to time waste
> * You want to stay purely positive
> * Problem is too abstract to quantify

## Writing Good Pain Points

**1. Interview your customers**

Ask: "What frustrated you before using \[product]?" Their exact words = your breakdown items.

**2. Be specific**

❌ "wasting time on technical issues" ✅ "debugging OAuth callbacks"

**3. Make it relatable**

Use tasks most of your audience has done or will do. If only 10% relate, it won't work.

**4. Keep it real**

Don't exaggerate. If authentication setup is 3 hours, say 3 hours, not 20.

> [!TIP]
>
> The breakdown should feel like a checklist from hell. Each line should make them think "ugh, yes, I hate that."

> [!TIP]
>
> Don't make up problems your product doesn't solve. Only highlight pain points you actually fix.

> [!WARNING]
>
> Avoid negativity overload. Show the pain, but transition to hope quickly. You're building urgency, not depression.

## Total Hours Calculation

The component auto-calculates total hours from your breakdown:

```tsx theme={null}
const totalHours = CONTENT.breakdown
  .filter((item) => typeof item.time === "number")
  .reduce((sum, item) => sum + (item.time as number), 0);
```

It ignores non-numeric values like `"∞"`. The total shows automatically.

## Remove This Component

If this doesn't fit your product, delete it from `/app/(site)/page.tsx`:

```tsx theme={null}
// Delete this line
<Problem />
```

Not every product needs a Problem section. If you're selling something new and exciting (not solving frustration), skip it.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.