Skip to main content
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
  },
}
  • 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.
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
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

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.

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