{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-01",
  "title": "Hero 01",
  "description": "Two-column hero section with an announcement badge, headline, subtitle, and primary/secondary CTA buttons. Place it as the first section of your landing page to immediately communicate your product value and drive sign-ups.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/hero-01/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 Hero01Props {\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 Hero01 = ({\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-4.webp\",\n  className,\n}: Hero01Props) => {\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=\"flex flex-col gap-8 lg:flex-row lg:items-center\">\n          <div className=\"flex flex-1 flex-col items-center gap-4 text-center lg:items-start lg:text-left\">\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            <h1 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl\">\n              {title}\n            </h1>\n            <p className=\"max-w-md text-muted-foreground md:text-lg\">\n              {description}\n            </p>\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          {img && (\n            <div className=\"w-full overflow-hidden rounded-lg bg-muted lg:aspect-square lg:flex-1\">\n              <img\n                src={img}\n                alt={title}\n                width={800}\n                height={600}\n                className=\"size-full object-cover\"\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Hero01;\n",
      "type": "registry:component",
      "target": "components/hero-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/hero-01.webp",
    "imageDark": "/r/previews/hero-01-dark.webp",
    "prose": {
      "about": "Hero 01 is a two-column hero section built with shadcn/ui and Tailwind CSS for Next.js 15 landing pages. The left column holds an announcement badge, a large headline, a subtitle, and two CTA buttons (primary and secondary). The right column displays a product screenshot or image placeholder. The layout is fully responsive: it stacks vertically on mobile and splits into two equal columns on desktop. Both light and dark modes are supported out of the box through shadcn/ui's theming system.",
      "whenToUse": [
        "SaaS product landing pages where you need a clear value proposition above the fold",
        "Startup homepages that require a headline + screenshot layout",
        "Marketing pages where you want two CTAs — one primary (sign up) and one secondary (learn more)",
        "Any Next.js 15 App Router project that needs a polished first section in minutes"
      ],
      "notes": "Swap the placeholder image for a real product screenshot by replacing the src prop on the Image component. The announcement badge text and CTA labels are props — no need to modify component internals.",
      "faqs": [
        {
          "question": "Does Hero 01 ship with a real product screenshot?",
          "answer": "No, it ships with a placeholder image. Replace the src prop on the Image component with your own screenshot before shipping."
        },
        {
          "question": "Can I use a single CTA instead of two?",
          "answer": "Yes. The secondary button is a separate prop — omit it and the layout collapses to one CTA without additional changes."
        },
        {
          "question": "Does it support dark mode automatically?",
          "answer": "Yes. It uses shadcn/ui's theming system, so it inherits your project's light/dark tokens with no extra configuration."
        }
      ]
    }
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}