{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-05",
  "title": "Hero 05",
  "description": "Minimal full-screen centered hero with headline, subtitle, and CTA buttons on a clean background. Use it as a distraction-free entry point for products that rely on strong copy rather than visuals.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "avatar"
  ],
  "files": [
    {
      "path": "src/registry/blocks/hero-05/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\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\ninterface Hero05Props {\n  badge?: {\n    text: string;\n    avatars?: string[];\n  };\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  className?: string;\n}\n\nconst Hero05 = ({\n  badge = {\n    text: \"Trusted by developers\",\n    avatars: [\n      \"https://www.shadcnship.com/images/avatars/avatar-1.webp\",\n      \"https://www.shadcnship.com/images/avatars/avatar-2.webp\",\n      \"https://www.shadcnship.com/images/avatars/avatar-3.webp\",\n    ],\n  },\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  className,\n}: Hero05Props) => {\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 items-center gap-4 text-center\">\n          {badge && (\n            <Badge\n              variant=\"secondary\"\n              className=\"gap-2 border border-border px-4 py-1\"\n            >\n              {badge.avatars && badge.avatars.length > 0 && (\n                <div className=\"flex -space-x-2\">\n                  {badge.avatars.map((avatar, i) => (\n                    <Avatar\n                      key={`avatar-${i}`}\n                      className=\"size-5 border-2 border-background\"\n                    >\n                      <AvatarImage src={avatar} />\n                      <AvatarFallback>U</AvatarFallback>\n                    </Avatar>\n                  ))}\n                </div>\n              )}\n              <span>{badge.text}</span>\n            </Badge>\n          )}\n\n          <h1 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl\">\n            {title}\n          </h1>\n\n          <p className=\"max-w-2xl 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      </div>\n    </section>\n  );\n};\n\nexport default Hero05;\n",
      "type": "registry:component",
      "target": "components/hero-05.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/hero-05.webp",
    "imageDark": "/r/previews/hero-05-dark.webp",
    "prose": {
      "about": "Hero 05 is a minimal, full-screen centered hero section with a bold headline, a short subtitle, and two CTA buttons on a clean background. There are no images, no decorative elements, and no sidebars — just typography and actions. Built entirely with shadcn/ui Button components and Tailwind CSS utility classes. It renders as a full-viewport-height section that centers its content both horizontally and vertically.",
      "whenToUse": [
        "Products where the copy is the product — developer tools, writing apps, or API services",
        "Landing pages where a distraction-free first impression is more effective than a screenshot",
        "Situations where load performance is critical and images would slow the page",
        "Minimalist brand identities that rely on strong typography rather than visuals"
      ],
      "notes": "Because this hero has no image, the headline carries all the weight. Write a specific, benefit-driven headline rather than a generic tagline."
    }
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}