{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-hero-01",
  "title": "Gradient Hero 01",
  "description": "A simple centered hero with a warm cinematic gradient, compact badge, short copy, and two actions.",
  "type": "registry:block",
  "categories": [
    "hero-section"
  ],
  "files": [
    {
      "path": "registry/blocks/gradient-hero-01/gradient-hero-01.tsx",
      "target": "components/gradient-hero-01.tsx",
      "type": "registry:component",
      "content": "export function GradientHero01() {\n  return (\n    <section className=\"relative min-h-screen overflow-hidden bg-background font-[system-ui,-apple-system,BlinkMacSystemFont,'Segoe_UI',sans-serif] text-foreground\">\n      <div\n        className=\"absolute inset-x-[-18%] bottom-[-34%] h-[78%] rounded-[100%] blur-3xl\"\n        style={{\n          background:\n            \"radial-gradient(ellipse at center, rgba(56, 189, 248, 0.58) 0%, rgba(59, 130, 246, 0.34) 34%, rgba(99, 102, 241, 0.2) 58%, transparent 78%)\",\n        }}\n      />\n      <div\n        className=\"absolute inset-x-0 bottom-0 h-[68%]\"\n        style={{\n          background:\n            \"linear-gradient(to top, rgba(37, 99, 235, 0.42), rgba(14, 165, 233, 0.2) 42%, transparent 78%)\",\n        }}\n      />\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          background:\n            \"radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--background) 18%, transparent) 0%, transparent 34%, color-mix(in oklab, var(--background) 90%, transparent) 78%)\",\n        }}\n      />\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          background:\n            \"linear-gradient(to bottom, var(--background) 0%, color-mix(in oklab, var(--background) 68%, transparent) 38%, color-mix(in oklab, var(--background) 12%, transparent) 100%)\",\n        }}\n      />\n\n      <div className=\"relative mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-24 text-center\">\n        <div className=\"rounded-full border border-border bg-background/50 px-4 py-1.5 text-sm font-medium text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_12px_40px_rgba(0,0,0,0.08)] backdrop-blur-md\">\n          Previewing Componentry Blocks\n        </div>\n\n        <h1 className=\"mt-8 max-w-5xl text-balance text-5xl font-medium leading-[0.96] tracking-normal md:text-6xl lg:text-7xl\">\n          Launch pages that feel finished from the first pass\n        </h1>\n\n        <p className=\"mt-6 max-w-2xl text-pretty text-base leading-7 text-muted-foreground md:text-lg\">\n          Simple sections with considered spacing, quiet motion, and production\n          ready code you can paste into real product work.\n        </p>\n\n        <div className=\"mt-10 flex flex-col items-center gap-3 sm:flex-row\">\n          <a className=\"inline-flex h-11 w-36 items-center justify-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground shadow-[0_1px_0_rgba(255,255,255,0.24)_inset,0_18px_60px_rgba(0,0,0,0.12)] transition hover:opacity-90\">\n            Explore Blocks\n          </a>\n          <a className=\"inline-flex h-11 w-36 items-center justify-center rounded-lg border border-border bg-background/45 px-5 text-sm font-semibold text-foreground/80 shadow-[0_1px_0_rgba(255,255,255,0.12)_inset] backdrop-blur transition hover:bg-foreground/5 hover:text-foreground\">\n            View Source\n          </a>\n        </div>\n      </div>\n    </section>\n  )\n}\n"
    }
  ],
  "meta": {
    "createdAt": "2026-06-30",
    "iframeHeight": 760,
    "previewClassName": "min-h-screen"
  }
}