{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-09",
  "title": "Hero 09",
  "description": "A centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split closing statement.",
  "dependencies": [
    "react-wrap-balancer",
    "lucide-react"
  ],
  "registryDependencies": [
    "input",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-09/hero-09.tsx",
      "content": "'use client'\n\nimport { Search } from 'lucide-react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nexport function Hero09() {\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 gap-10 px-6 py-20 sm:gap-14 sm:py-28\">\n        <div className=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6 text-center\">\n          <h1 className=\"text-foreground font-serif text-3xl font-normal tracking-tight text-balance sm:text-4xl md:text-5xl\">\n            <Balancer>Find the perfect</Balancer>\n            <br />\n            <Balancer>block for your app.</Balancer>\n          </h1>\n          <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">\n            <Balancer>\n              Production-ready UI blocks built with React, Tailwind, and shadcn.\n            </Balancer>\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className=\"bg-card focus-within:ring-ring/40 mx-auto flex w-full max-w-lg items-center gap-2 rounded-full border p-1.5 shadow-sm transition focus-within:ring-2\"\n          >\n            <div className=\"text-muted-foreground pl-3\">\n              <Search className=\"size-4\" />\n            </div>\n            <Input\n              aria-label=\"Search blocks and components\"\n              placeholder=\"Search blocks and components\"\n              className=\"h-9 flex-1 border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent\"\n            />\n            <Button type=\"submit\" className=\"shrink-0 rounded-full px-5\">\n              Search\n            </Button>\n          </form>\n        </div>\n\n        <div className=\"relative mx-auto w-full max-w-4xl\">\n          <div className=\"relative mx-auto w-full overflow-hidden mask-t-from-35% mask-t-to-95% mask-x-from-80% mask-x-to-100% mask-b-from-55% mask-b-to-100% mask-radial-[95%_85%] mask-radial-from-60% mask-radial-to-100% mask-radial-at-center dark:opacity-85\">\n            <img\n              src=\"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1400&auto=format&fit=crop\"\n              alt=\"Alt\"\n              decoding=\"async\"\n              className=\"aspect-16/10 w-full object-cover object-center\"\n            />\n          </div>\n        </div>\n\n        <div className=\"mt-6 grid grid-cols-1 items-end gap-6 lg:grid-cols-2\">\n          <h2 className=\"text-foreground font-serif text-2xl font-normal tracking-tight text-balance sm:text-3xl md:text-4xl\">\n            <Balancer>Blocks</Balancer>\n            <br />\n            <Balancer>crafted with purpose.</Balancer>\n          </h2>\n          <p className=\"text-muted-foreground max-w-xs text-sm lg:justify-self-end\">\n            <Balancer>\n              A curated library where clean design, accessibility, and\n              copy-paste code come together.\n            </Balancer>\n          </p>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-09.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1300
  },
  "type": "registry:block"
}