Problem

Pain point identification section that highlights customer challenges.

Usage

import { Problem } from '@/components/landing';

<Problem />

Location: src/components/landing/Problem.tsx

Purpose

This section identifies customer pain points before presenting your solution. It creates emotional resonance by showing you understand their challenges.

Customization

Edit the problems array in Problem.tsx:

const problems: ProblemItem[] = [
  {
    iconKey: 'time',
    titleKey: 'time.title',
    descriptionKey: 'time.description',
  },
  {
    iconKey: 'complexity',
    titleKey: 'complexity.title',
    descriptionKey: 'complexity.description',
  },
  {
    iconKey: 'cost',
    titleKey: 'cost.title',
    descriptionKey: 'cost.description',
  },
];

i18n

Update translations:

{
  "landing": {
    "problem": {
      "title": "Building Apps is Hard",
      "subtitle": "Don't waste months reinventing the wheel",
      "time": {
        "title": "Months of Setup",
        "description": "Building auth, billing, and admin from scratch takes forever"
      },
      "complexity": {
        "title": "Complex Integration",
        "description": "Connecting Stripe, email, and databases is error-prone"
      },
      "cost": {
        "title": "High Development Costs",
        "description": "Hiring developers to build boilerplate is expensive"
      }
    }
  }
}

Best Practices

1. Be specific - Generic problems don't resonate
2. Use emotional language - "frustrating", "overwhelming", "costly"
3. Limit to 3-4 problems - More dilutes the message
4. Follow with Solution - Pair this section with the Solution component

Example Layout

<section className="py-20 bg-zinc-50 dark:bg-zinc-900/50">
  <div className="container mx-auto px-4">
    <div className="text-center mb-12">
      <h2 className="text-3xl font-bold mb-4">{t('title')}</h2>
      <p className="text-zinc-600 dark:text-zinc-400">{t('subtitle')}</p>
    </div>

    <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      {problems.map((problem, index) => (
        <div key={index} className="text-center">
          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
            <XCircleIcon className="w-8 h-8 text-red-600 dark:text-red-400" />
          </div>
          <h3 className="text-xl font-bold mb-2">{t(problem.titleKey)}</h3>
          <p className="text-zinc-600 dark:text-zinc-400">
            {t(problem.descriptionKey)}
          </p>
        </div>
      ))}
    </div>
  </div>
</section>