Section: Solution

The solution section presents your product's key value propositions in a visually appealing bento grid layout. Each solution card has a title, description, and optional icon.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`solutions`	array	Yes	Array of solution objects	—
`solutions[].title`	string	Yes	Solution title	—
`solutions[].description`	string	Yes	Solution description	—
`solutions[].icon`	string	No	Lucide icon name	—
`className`	string	No	Custom CSS class	—

Layout Behavior

The bento grid adapts based on the number of solutions:

Count	Layout
1-2	Side by side
3	Three equal columns
4	2×2 grid
5-6	Mixed sizes — first item spans wider

For the best visual balance, 3 or 6 solutions work particularly well.

Minimal Example

{
  "type": "solution",
  "solutions": [
    { "title": "API-First", "description": "Create pages with a single API call." }
  ]
}

Full Example

{
  "type": "solution",
  "label": "The Solution",
  "heading": "PageGun Makes It Easy",
  "description": "A programmatic site builder designed for developers and AI agents.",
  "solutions": [
    {
      "title": "REST API",
      "description": "Full CRUD API for pages, articles, and directory items. Build your entire site programmatically.",
      "icon": "Code"
    },
    {
      "title": "Pre-built Sections",
      "description": "Drop in hero, features, FAQ, pricing, and 10+ more section types with JSON config.",
      "icon": "Layout"
    },
    {
      "title": "AI-Ready",
      "description": "The only CMS designed from the ground up for AI agents to create and manage content autonomously.",
      "icon": "Bot"
    }
  ]
}

Writing Tips

Lead with the benefit, not the feature ("Save 10 hours/week" > "Automation engine")
Keep titles to 2-4 words — they're scanned, not read
Descriptions: 1-2 sentences max. Expand on the title, don't repeat it
Icons: Use concrete, recognizable Lucide icons. Browse all options at lucide.dev/icons

Common Patterns

SaaS Product

{
  "type": "solution",
  "heading": "Why Teams Love Us",
  "solutions": [
    { "title": "Ship Faster", "description": "Deploy landing pages in minutes, not weeks.", "icon": "Zap" },
    { "title": "Stay On Brand", "description": "Consistent design across every page.", "icon": "Palette" },
    { "title": "Scale Effortlessly", "description": "CDN-backed pages that handle any traffic.", "icon": "TrendingUp" }
  ]
}

Developer Tool

{
  "type": "solution",
  "heading": "Built for Developers",
  "solutions": [
    { "title": "REST API", "description": "Standard REST with JSON responses.", "icon": "Code" },
    { "title": "Webhooks", "description": "Real-time notifications for all events.", "icon": "Webhook" },
    { "title": "TypeScript SDK", "description": "Fully typed client library.", "icon": "FileCode" }
  ]
}

Placement

Typically placed after a Problem section and before Features. The narrative flow is: Problem → Solution → Features → How It Works.