{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-02",
  "title": "Hero 02",
  "description": "Centered hero section with a grid background, headline, CTA buttons, and a featured product screenshot. Use it above the fold on app or SaaS landing pages to visually showcase your product and guide visitors toward action.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/hero-02/hero.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface Hero02Props {\n  badge?: { text: string; url?: string };\n  title?: string;\n  description?: string;\n  buttons?: {\n    text: string;\n    url?: string;\n    icon?: React.ReactNode;\n    variant?: \"default\" | \"outline\" | \"ghost\" | \"secondary\" | \"link\";\n  }[];\n  img?: string;\n  className?: string;\n}\n\nconst Hero02 = ({\n  badge = { text: \"Production-ready components\", url: \"#\" },\n  title = \"Shadcn UI Blocks, Copy & Customize\",\n  description = \"Pre-built landing page components for React. Just copy the code and focus on what matters — your product.\",\n  buttons = [\n    {\n      text: \"Browse Components\",\n      url: \"#\",\n      icon: <ArrowUpRight className=\"size-4\" />,\n    },\n    { text: \"View Docs\", url: \"#\", variant: \"outline\" },\n  ],\n  img = \"https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp\",\n  className,\n}: Hero02Props) => {\n  return (\n    <section\n      className={cn(\n        \"relative w-full overflow-hidden py-16 md:py-24\",\n        className,\n      )}\n    >\n      <div className=\"container mx-auto px-6\">\n        <div className=\"relative z-10 flex flex-col items-center gap-4 text-center md:pt-16\">\n          {badge && (\n            <Badge\n              variant=\"secondary\"\n              className=\"border border-border py-1\"\n              asChild\n            >\n              <a href={badge.url}>{badge.text}</a>\n            </Badge>\n          )}\n\n          <h1 className=\"max-w-5xl text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl\">\n            {title}\n          </h1>\n\n          <p className=\"max-w-3xl text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n\n          {buttons && buttons.length > 0 && (\n            <div className=\"grid w-full grid-cols-1 gap-4 sm:w-fit sm:grid-cols-2\">\n              {buttons.map((btn) => (\n                <Button\n                  key={btn.text}\n                  size=\"lg\"\n                  variant={btn.variant ?? \"default\"}\n                  className=\"w-full\"\n                  asChild\n                >\n                  <a href={btn.url}>\n                    {btn.text}\n                    {btn.icon}\n                  </a>\n                </Button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {img && (\n          <div className=\"mt-6 aspect-video w-full bg-muted/30 md:mt-16\">\n            <img\n              src={img}\n              alt={title}\n              width={1000}\n              height={1000}\n              className=\"size-full rounded-md object-cover\"\n            />\n          </div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default Hero02;\n",
      "type": "registry:component",
      "target": "components/hero-02.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/hero-02.webp",
    "imageDark": "/r/previews/hero-02-dark.webp",
    "prose": {
      "about": "Hero 02 is a centered hero section with a subtle grid background pattern, a bold headline, a subtitle, primary and secondary CTA buttons, and a full-width product screenshot below. Built with shadcn/ui and Tailwind CSS, it uses a centered single-column layout that works at any viewport width. The grid background is rendered via CSS and adds visual depth without any images or external assets. Dark mode is fully supported.",
      "whenToUse": [
        "App landing pages where a centered layout feels more balanced than a two-column split",
        "SaaS homepages where the product screenshot is the main visual focus",
        "Situations where you want a single, unambiguous primary CTA without a competing column",
        "Products with a wide dashboard or app screenshot that benefits from full-width display"
      ],
      "notes": "The grid background is a pure CSS pattern — no SVG or image file required. Adjust the grid color via the CSS variable in the component to match your brand."
    }
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}