{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-01",
  "title": "Aurora-glow hero",
  "description": "Centered hero with a soft conic-gradient aurora behind the headline and a row of stacked avatars as social proof.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/hero/hero-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Menu, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst navItems = [\"Blocks\", \"Pricing\", \"Docs\", \"Changelog\"]\n\nexport default function Hero01() {\n  const [menuOpen, setMenuOpen] = React.useState(false)\n\n  return (\n    <section className=\"relative isolate overflow-hidden bg-background pb-32 sm:pb-40\">\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute left-1/2 top-[-12rem] -z-10 h-[40rem] w-[64rem] max-w-[140%] -translate-x-1/2 opacity-60\"\n        style={{\n          background:\n            \"radial-gradient(closest-side, rgba(99,102,241,0.18), transparent 72%)\",\n        }}\n      />\n\n      <header className=\"relative mx-auto flex max-w-6xl items-center justify-between px-6 py-5 sm:px-8\">\n        <a href=\"#\" className=\"flex items-center gap-2 font-semibold tracking-tight text-foreground\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            src=\"https://blockus.lndevui.com/brand/logo.svg\"\n            alt=\"blockus\"\n            className=\"size-6 dark:invert\"\n          />\n          blockus\n        </a>\n        <nav className=\"hidden items-center gap-7 md:flex\">\n          {navItems.map((item) => (\n            <a\n              key={item}\n              href={`#${item.toLowerCase()}`}\n              className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              {item}\n            </a>\n          ))}\n        </nav>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"ghost\" className=\"hidden rounded-full sm:inline-flex\">\n            Sign in\n          </Button>\n          <Button size=\"sm\" className=\"rounded-full px-4\">\n            Get started\n          </Button>\n          <button\n            type=\"button\"\n            onClick={() => setMenuOpen(true)}\n            aria-label=\"Open menu\"\n            className=\"grid size-9 place-items-center rounded-full border border-border text-foreground md:hidden\"\n          >\n            <Menu className=\"size-4\" />\n          </button>\n        </div>\n      </header>\n\n      {menuOpen && (\n        <div className=\"fixed inset-0 z-50 md:hidden\" role=\"dialog\" aria-modal=\"true\">\n          <div\n            aria-hidden\n            className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n            onClick={() => setMenuOpen(false)}\n          />\n          <div className=\"absolute inset-x-4 top-4 rounded-2xl border border-border bg-card p-5 shadow-2xl shadow-black/30\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"font-semibold tracking-tight\">blockus</span>\n              <button\n                type=\"button\"\n                onClick={() => setMenuOpen(false)}\n                aria-label=\"Close menu\"\n                className=\"grid size-9 place-items-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n            <ul className=\"mt-5 flex flex-col\">\n              {navItems.map((item) => (\n                <li key={item}>\n                  <a\n                    href={`#${item.toLowerCase()}`}\n                    onClick={() => setMenuOpen(false)}\n                    className=\"block rounded-md px-3 py-2.5 text-sm font-medium text-foreground hover:bg-muted\"\n                  >\n                    {item}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      )}\n\n      <div className=\"relative mx-auto flex max-w-3xl flex-col items-center gap-7 px-6 pt-24 text-center sm:pt-32\">\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-border bg-background/40 px-3 py-1 text-xs text-muted-foreground backdrop-blur\">\n          <span className=\"size-1 rounded-full bg-foreground\" />\n          A new block every week\n        </span>\n\n        <h1\n          className=\"text-balance font-semibold tracking-tight text-foreground\"\n          style={{\n            fontSize: \"clamp(2.75rem, 6vw, 5rem)\",\n            lineHeight: 1.02,\n            letterSpacing: \"-0.035em\",\n          }}\n        >\n          The library every dev wishes they had on day one.\n        </h1>\n\n        <p className=\"max-w-xl text-balance text-base text-muted-foreground sm:text-lg\">\n          Production-ready React sections, hand-built on shadcn/ui and Tailwind\n          v4. Drop them in. Ship the page.\n        </p>\n\n        <Button size=\"lg\" className=\"mt-2 rounded-full px-7\">\n          Browse the catalog\n          <ArrowRight />\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/hero-01.tsx"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}