{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-13",
  "title": "Hero 13",
  "description": "Asymmetric editorial hero with serif brand title, supporting copy, and two overlapping media frames.",
  "dependencies": [
    "react-wrap-balancer"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/blocks/hero/hero-13/hero-13.tsx",
      "content": "import Balancer from 'react-wrap-balancer'\n\nexport function Hero13() {\n  return (\n    <section className=\"bg-background relative isolate w-full overflow-hidden\">\n      <div className=\"relative z-10 mx-auto grid max-w-6xl gap-12 px-6 py-20 sm:py-28 lg:grid-cols-2 lg:items-start lg:gap-16\">\n        <div className=\"order-2 flex flex-col gap-10 lg:order-1 lg:gap-16\">\n          <div className=\"relative max-w-lg\">\n            <div\n              aria-hidden\n              className=\"border-foreground/15 pointer-events-none absolute -right-3 -bottom-3 size-16 border sm:size-20\"\n            />\n            <div className=\"relative aspect-4/3 overflow-hidden rounded-md outline outline-black/10 dark:outline-white/10\">\n              <img\n                src=\"https://images.unsplash.com/photo-1578301978018-3005759f48f7?q=80&w=1144&auto=format&fit=crop\"\n                alt=\"Alt 1\"\n                className=\"size-full object-cover\"\n              />\n            </div>\n          </div>\n          <div className=\"flex flex-col gap-3 lg:max-w-sm\">\n            <p className=\"text-foreground text-xs font-semibold tracking-[0.18em] uppercase\">\n              Craft &amp; quiet\n            </p>\n            <p className=\"text-muted-foreground max-w-sm text-sm leading-relaxed text-pretty sm:text-base\">\n              <Balancer>\n                We shape residential and commercial interiors into calm rooms\n                where light, material, and proportion do the quiet work.\n              </Balancer>\n            </p>\n          </div>\n        </div>\n\n        <div className=\"order-1 flex flex-col gap-8 lg:order-2 lg:gap-12\">\n          <div className=\"flex flex-col gap-3 lg:pt-2\">\n            <h1 className=\"text-foreground font-serif text-3xl font-normal tracking-tight text-balance uppercase sm:text-4xl md:text-5xl\">\n              <Balancer>\n                Haven\n                <br />\n                Studio.\n              </Balancer>\n            </h1>\n            <p className=\"text-muted-foreground text-xs font-medium tracking-[0.22em] uppercase\">\n              Portland — 2019\n            </p>\n          </div>\n          <div className=\"relative ml-auto w-full max-w-md lg:mr-4\">\n            <div\n              aria-hidden\n              className=\"border-foreground/15 pointer-events-none absolute top-[18%] -left-7 size-24 rounded-full border sm:-left-9 sm:size-28\"\n            />\n            <div className=\"relative aspect-3/4 max-w-md overflow-hidden rounded-md outline outline-black/10 lg:max-w-none dark:outline-white/10\">\n              <img\n                src=\"https://images.unsplash.com/photo-1746467364902-ab40952e33fe?q=80&w=1131&auto=format&fit=crop\"\n                alt=\"Alt 2\"\n                className=\"size-full object-cover\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-13.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1100
  },
  "type": "registry:block"
}