{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-10",
  "title": "Hero 10",
  "description": "A centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.",
  "dependencies": [
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-10/hero-10.tsx",
      "content": "import Balancer from 'react-wrap-balancer'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst fan = [\n  {\n    src: 'https://images.unsplash.com/photo-1685013640715-8701bbaa2207?q=80&w=900&auto=format&fit=crop',\n    alt: 'Alt 1',\n    className: 'z-10 -mr-8 w-[38%] translate-y-6 -rotate-6',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1746467364902-ab40952e33fe?q=80&w=900&auto=format&fit=crop',\n    alt: 'Alt 2',\n    className: 'z-20 w-[42%] -translate-y-2',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1578301978018-3005759f48f7?q=80&w=900&auto=format&fit=crop',\n    alt: 'Alt 3',\n    className: 'z-10 -ml-8 w-[38%] translate-y-6 rotate-6',\n  },\n]\n\nexport function Hero10() {\n  return (\n    <section className=\"bg-background relative isolate w-full overflow-hidden\">\n      <div className=\"relative z-10 mx-auto flex max-w-6xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:py-28\">\n        <div className=\"flex w-full max-w-2xl flex-col items-center gap-5\">\n          <h1 className=\"text-foreground font-serif text-3xl font-normal tracking-tight text-balance sm:text-4xl md:text-5xl\">\n            <Balancer>Build faster interfaces</Balancer>\n            <br />\n            <Balancer>\n              with <span className=\"text-primary\">Ready-Made Blocks</span>\n            </Balancer>\n          </h1>\n          <p className=\"text-muted-foreground max-w-lg text-sm sm:text-base\">\n            <Balancer>\n              Compose beautiful products from accessible, production-ready UI\n              blocks that drop straight into your codebase.\n            </Balancer>\n          </p>\n        </div>\n\n        <div className=\"flex flex-col items-center gap-4\">\n          <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-3\">\n            <Button\n              className=\"w-fit rounded-full px-4\"\n              nativeButton={false}\n              render={<a href=\"#\" />}\n            >\n              Get Started\n            </Button>\n            <Button\n              variant=\"outline\"\n              className=\"w-fit rounded-full px-4\"\n              nativeButton={false}\n              render={<a href=\"#\" />}\n            >\n              How it works\n            </Button>\n          </div>\n          <p className=\"text-muted-foreground text-xs font-medium\">\n            Trusted by 2k+ product teams\n          </p>\n        </div>\n\n        <div className=\"mx-auto w-full max-w-3xl\">\n          <div className=\"relative flex w-full items-center justify-center\">\n            {fan.map((card) => (\n              <div\n                key={card.src}\n                className={cn(\n                  'relative aspect-4/5 shrink-0 overflow-hidden rounded-xl shadow-xl outline outline-black/10 dark:outline-white/10',\n                  card.className,\n                )}\n              >\n                <img\n                  src={card.src}\n                  alt={card.alt}\n                  decoding=\"async\"\n                  className=\"size-full object-cover\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-10.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1100
  },
  "type": "registry:block"
}