Solution

Solution highlight section that contrasts with the Problem section.

Usage

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

<Solution />

Location: src/components/landing/Solution.tsx

Purpose

This section presents your product as the solution to the problems identified earlier. It should directly address each pain point with a clear benefit.

Customization

Edit the solutions array in Solution.tsx:

const solutions: SolutionItem[] = [
  {
    iconKey: 'fast',
    titleKey: 'fast.title',
    descriptionKey: 'fast.description',
  },
  {
    iconKey: 'simple',
    titleKey: 'simple.title',
    descriptionKey: 'simple.description',
  },
  {
    iconKey: 'affordable',
    titleKey: 'affordable.title',
    descriptionKey: 'affordable.description',
  },
];

i18n

Update translations:

{
  "landing": {
    "solution": {
      "title": "The Smarter Way to Build",
      "subtitle": "Start with a production-ready foundation",
      "fast": {
        "title": "Ship in Days, Not Months",
        "description": "Pre-built auth, billing, and admin panel ready to go"
      },
      "simple": {
        "title": "Everything Just Works",
        "description": "Stripe, Resend, and database integrations pre-configured"
      },
      "affordable": {
        "title": "One-Time Purchase",
        "description": "No recurring fees, no per-seat pricing, yours forever"
      }
    }
  }
}

Best Practices

1. Mirror the problems - Each solution should address a specific problem
2. Use positive language - "fast", "simple", "powerful"
3. Be specific about benefits - Concrete outcomes beat vague promises
4. Include social proof - Numbers or testimonials strengthen claims

Example Layout

<section className="py-20 bg-white dark:bg-zinc-950">
  <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">
      {solutions.map((solution, index) => (
        <div key={index} className="text-center">
          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
            <CheckCircleIcon className="w-8 h-8 text-green-600 dark:text-green-400" />
          </div>
          <h3 className="text-xl font-bold mb-2">{t(solution.titleKey)}</h3>
          <p className="text-zinc-600 dark:text-zinc-400">
            {t(solution.descriptionKey)}
          </p>
        </div>
      ))}
    </div>
  </div>
</section>

Problem + Solution Flow

For best conversion, use these sections together:

<Problem />
<Solution />
<Features />

This creates a narrative: "Here's your pain → Here's the solution → Here's how it works"