Hero Component Examples

Different data sources for the same component

Loading CMS data...

How It Works: CMS Example

Data Shape

{
  "eyebrow": "From CMS",
  "headline": "CMS-Driven Hero Section",
  "description": "This hero is populated from a CMS-like API endpoint with full social proof and media support.",
  "ctas": {
    "primaryLabel": "Try CMS Version",
    "primaryHref": "/cms-demo",
    "secondaryLabel": "View API",
    "secondaryHref": "/api/hero"
  },
  "media": {
    "kind": "image",
    "url": "/placeholder.jpg",
    "alt": "CMS hero image",
    "width": 800,
    "height": 600
  },
  "bullets": [
    "Real-time updates",
    "Content management",
    "Multi-language support"
  ],
  "socialProof": {
    "userCount": "50k+",
    "rating": "4.9/5",
    "trend": "Trusted by Fortune 500"
  }
}

Usage

// From API/CMS
const data = await fetch('/api/hero')
const hero = heroFromCms(data)
return <HeroFuturistic {...hero} />

Key Benefits

✓Data-driven: Same component, different data sources
✓Type-safe: Full TypeScript support with proper contracts
✓Flexible: Adapters handle different data shapes seamlessly
✓Fallback-ready: Graceful handling of missing data
✓Migration-friendly: Easy to transition from legacy formats