{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hero-centered","type":"registry:block","title":"Hero Centered","description":"Badge, headline and dual CTAs over a blueprint grid.","categories":["hero"],"dependencies":["lucide-react"],"registryDependencies":["badge","button"],"css":{"@utility bg-grid-lg":{"background-image":"linear-gradient(to right, color-mix(in oklab, var(--foreground) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 9%, transparent) 1px, transparent 1px)","background-size":"96px 96px"}},"files":[{"path":"registry/blocks/hero-centered.tsx","content":"import Link from \"next/link\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function HeroCentered() {\n  return (\n    <section className=\"relative overflow-hidden bg-background\">\n      <div\n        aria-hidden\n        className=\"absolute inset-0 bg-grid-lg mask-[linear-gradient(to_bottom,black_40%,transparent)]\"\n      />\n      <div className=\"relative mx-auto flex w-full max-w-3xl flex-col items-center px-6 py-24 text-center sm:py-32\">\n        <Badge variant=\"secondary\" className=\"mb-6 gap-1.5 border border-border/60\">\n          <Sparkles className=\"size-3\" />\n          Announcing our public beta\n        </Badge>\n        <h1 className=\"text-4xl font-semibold tracking-tight text-balance sm:text-6xl\">\n          Ship interfaces your users remember\n        </h1>\n        <p className=\"mt-6 max-w-xl text-lg text-pretty text-muted-foreground\">\n          A design system that gets out of your way. Typed, accessible and\n          themable — from the first component to the last pixel.\n        </p>\n        <div className=\"mt-8 flex flex-col items-center gap-3 sm:flex-row\">\n          <Button size=\"lg\" render={<Link href=\"#\" />}>\n            Start building\n            <ArrowRight data-icon=\"inline-end\" />\n          </Button>\n          <Button size=\"lg\" variant=\"outline\" render={<Link href=\"#\" />}>\n            Read the docs\n          </Button>\n        </div>\n        <p className=\"mt-6 text-sm text-muted-foreground\">\n          Free for personal projects. No credit card required.\n        </p>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/hero/hero-centered.tsx"}]}