Problem - ShipFast Docs

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

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

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:

    { 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
Remove arrow animation
Adjust spacing

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

    <span className="font-bold text-destructive">  // Change to text-primary, text-orange-500, etc.

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

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

Change padding to make it taller or shorter:

    <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

Interview your customers

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

Be specific

❌ “wasting time on technical issues” ✅ “debugging OAuth callbacks”

Make it relatable

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

Keep it real

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

The breakdown should feel like a checklist from hell. Each line should make them think “ugh, yes, I hate that.”

Don’t make up problems your product doesn’t solve. Only highlight pain points you actually fix.

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:

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:

// Delete this line
<Problem />

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

​Edit Content

​Customize the Look

​When to Use This Component

Use When

Skip When

​Writing Good Pain Points

​Total Hours Calculation

​Remove This Component

Edit Content

Customize the Look

When to Use This Component

Writing Good Pain Points

Total Hours Calculation

Remove This Component