{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-05",
  "title": "CTA 05",
  "description": "A centered CTA with a fanned stack of rotated photos, badge, contrast title, and pill button",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/cta-05/cta.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface StackImage {\n  src: string;\n  alt?: string;\n}\n\ninterface Cta05Props {\n  images?: [StackImage, StackImage, StackImage];\n  badge?: { text: string };\n  title?: React.ReactNode;\n  button?: { text: string; url?: string };\n  className?: string;\n}\n\nconst defaultImages: [StackImage, StackImage, StackImage] = [\n  {\n    src: \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n  },\n  {\n    src: \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n  },\n  {\n    src: \"https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp\",\n  },\n];\n\n// Fanned stack: left tilted back, center raised, right tilted forward on top\nconst stackClasses = [\n  \"-translate-x-[60%] translate-y-4 -rotate-12\",\n  \"-translate-y-2 -rotate-2 z-10\",\n  \"translate-x-[55%] translate-y-3 rotate-10 z-20\",\n];\n\nconst Cta05 = ({\n  images = defaultImages,\n  badge = { text: \"Production-ready components\" },\n  title = (\n    <>\n      Ship faster. Build better.{\" \"}\n      <span className=\"text-muted-foreground\">\n        Production-ready shadcn/ui blocks for your next project.\n      </span>\n    </>\n  ),\n  button = { text: \"Get started now\", url: \"#\" },\n  className,\n}: Cta05Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"flex flex-col items-center text-center\">\n      {/* Fanned photo stack */}\n      <div className=\"relative flex h-56 w-full items-center justify-center md:h-72\">\n        {images.map((image, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"absolute size-40 overflow-hidden rounded-3xl border-6 border-background shadow-2xl md:size-52\",\n              stackClasses[index],\n            )}\n          >\n            <img\n              src={image.src}\n              alt={image.alt ?? \"\"}\n              className=\"size-full object-cover\"\n            />\n          </div>\n        ))}\n      </div>\n\n      {/* Reference badge */}\n      {badge && (\n        <Badge variant=\"secondary\" className=\"mt-8 border border-border py-1\">\n          {badge.text}\n        </Badge>\n      )}\n\n      {/* Two-line title with strong/soft contrast */}\n      <h2 className=\"mt-4 max-w-2xl text-2xl leading-snug font-medium tracking-tight md:text-3xl\">\n        {title}\n      </h2>\n\n      {/* Pill button */}\n      {button && (\n        <Button size=\"lg\" className=\"mt-6 rounded-full\" asChild>\n          <a href={button.url}>\n            {button.text}\n            <ArrowRight className=\"size-4\" />\n          </a>\n        </Button>\n      )}\n    </div>\n  </section>\n);\n\nexport default Cta05;\nexport type { Cta05Props, StackImage };\n",
      "type": "registry:component",
      "target": "components/cta-05.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/cta-05.webp",
    "imageDark": "/r/previews/cta-05-dark.webp"
  },
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}