Section: Problem

Highlight pain points your product solves. Displays problem cards in a grid layout with emoji icons, titles, and descriptions.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`problems`	array	Yes	Array of problem objects	—
`problems[].title`	string	Yes	Problem title	—
`problems[].description`	string	Yes	Problem description	—
`problems[].emoji`	string	No	Unicode emoji	`⚠️`
`className`	string	No	Custom CSS class	—

Minimal Example

{
  "type": "problem",
  "problems": [
    { "title": "Slow Development", "description": "Building pages takes weeks instead of minutes." },
    { "title": "High Costs", "description": "Development teams are expensive and hard to scale." }
  ]
}

Full Example

{
  "type": "problem",
  "label": "The Challenge",
  "heading": "Why Traditional Web Development Falls Short",
  "description": "Modern businesses need to move fast, but web development hasn't kept up.",
  "problems": [
    {
      "title": "Manual Process",
      "description": "Every page requires manual coding and design work, slowing down launches.",
      "emoji": "🐌"
    },
    {
      "title": "High Costs",
      "description": "Hiring developers for simple page updates costs thousands per month.",
      "emoji": "💸"
    },
    {
      "title": "Technical Bottlenecks",
      "description": "Marketing depends on developers for every change, creating friction.",
      "emoji": "🚧"
    }
  ]
}

Writing Tips

3-6 problems is the sweet spot — enough to be convincing, not overwhelming
Keep titles to 2-5 words — scanned, not read
Be specific — "Takes 3 weeks per page" > "It's slow"
Address real pain — use language from customer support tickets
Choose relevant emojis — they're the first thing users see

Common Patterns

SaaS

{
  "type": "problem",
  "heading": "What's Holding Your Team Back",
  "problems": [
    { "title": "No API Access", "description": "Most builders have no programmatic control.", "emoji": "🔒" },
    { "title": "Template Prison", "description": "Stuck with generic templates that look like everyone else.", "emoji": "🎭" },
    { "title": "Vendor Lock-in", "description": "Content trapped in proprietary formats.", "emoji": "⛓️" }
  ]
}

Placement

Typically first section after the hero. The narrative flow: Hero → Problem → Solution → Features → How It Works → CTA.

Each problem should map to a corresponding solution in the Solution section.