{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-04",
  "title": "Hero 04",
  "description": "A centered hero with multi-image cards below at varying heights",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/hero-04/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 HeroCard {\n  img: string;\n  title: string;\n  description: string;\n}\n\ninterface Hero04Props {\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  cards?: HeroCard[];\n  className?: string;\n}\n\nconst Hero04 = ({\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  cards = [\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n      title: \"50+ Ready-to-use Blocks\",\n      description:\n        \"Hero sections, feature grids, pricing tables and more. Everything you need to ship fast.\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n      title: \"Built with shadcn/ui\",\n      description:\n        \"Every block uses shadcn/ui components and Tailwind CSS. Fully accessible and customizable.\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp\",\n      title: \"Copy & Customize\",\n      description:\n        \"No lock-in. Copy the code directly into your project and make it your own.\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-3.webp\",\n      title: \"Ship Faster\",\n      description:\n        \"Stop building from scratch. Go from idea to production-ready landing page in minutes.\",\n    },\n  ],\n  className,\n}: Hero04Props) => {\n  return (\n    <section\n      className={cn(\n        \"relative w-full overflow-hidden py-16 md:pt-42\",\n        className,\n      )}\n    >\n      <div className=\"container mx-auto px-6\">\n        {/* Header */}\n        <div className=\"relative z-10 flex flex-col items-center gap-4 text-center\">\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 whitespace-pre-line 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\n        {/* Cards */}\n        <div className=\"mt-12 grid grid-cols-2 gap-3 md:mt-16 md:flex\">\n          {cards.map((card, index) => (\n            <div\n              key={index}\n              className=\"group relative aspect-square flex-1 overflow-hidden rounded-xl bg-muted/30 md:aspect-9/16\"\n            >\n              <img\n                src={card.img}\n                alt={card.title}\n                className=\"size-full object-cover\"\n              />\n              <div className=\"absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n              <div className=\"absolute right-0 bottom-0 left-0 translate-y-2 p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\">\n                <h3 className=\"font-medium text-white\">{card.title}</h3>\n                <p className=\"mt-1 line-clamp-2 text-xs text-white/70\">\n                  {card.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Hero04;\n",
      "type": "registry:component",
      "target": "components/hero-04.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/hero-04.webp",
    "imageDark": "/r/previews/hero-04-dark.webp"
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}