{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-02",
  "title": "CTA 02",
  "description": "CTA card with an app or device mockup image, headline, and action button. Use it to close a landing page with a visually driven conversion prompt that showcases your product in context.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "https://magicui.design/r/iphone.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/cta-02/cta.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Iphone } from \"@/components/ui/iphone\";\n\ninterface Cta02Props {\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 Cta02 = ({\n  title = \"Ship faster. Build better.\",\n  description = \"Production-ready shadcn/ui blocks for your next project.\",\n  buttons = [\n    {\n      text: \"Get started now\",\n      url: \"#\",\n      icon: <ArrowUpRight className=\"size-4\" />,\n    },\n    { text: \"View Docs\", url: \"#\", variant: \"outline\" },\n  ],\n  img = \"https://www.shadcnship.com/images/image-preview.webp\",\n  className,\n}: Cta02Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <Card className=\"grid items-center gap-8 p-8 pb-0 shadow-none md:grid-cols-3\">\n      <div className=\"flex flex-col gap-2 text-center md:col-span-2 md:text-left\">\n        <h2 className=\"text-4xl font-medium lg:text-5xl\">{title}</h2>\n        <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n        {buttons && buttons.length > 0 && (\n          <div className=\"mt-2 flex flex-col gap-4 sm:flex-row md:mb-8\">\n            {buttons.map((btn, i) => (\n              <Button\n                key={i}\n                size=\"lg\"\n                variant={btn.variant ?? \"default\"}\n                asChild\n              >\n                <a href={btn.url}>\n                  {btn.text} {btn.icon}\n                </a>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n      <div className=\"hiddedn max-h-60 self-end overflow-hidden md:block\">\n        <Iphone src={img ?? undefined} />\n      </div>\n    </Card>\n  </section>\n);\n\nexport default Cta02;\n",
      "type": "registry:component",
      "target": "components/cta-02.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/cta-02.webp",
    "imageDark": "/r/previews/cta-02-dark.webp",
    "prose": {
      "about": "CTA 02 is a full-width card with a device or app mockup image on one side and a headline and single action button on the other. Built with shadcn/ui Card and Next.js Image, it uses the product visual to do the selling and keeps the copy minimal. The layout is responsive: on mobile the image stacks above the text; on desktop both sit side by side within the card.",
      "whenToUse": [
        "Page-closing CTAs for products with a strong, recognizable product interface worth showing",
        "Mobile app landing pages where a device frame mockup reinforces the native experience",
        "Products where the product screenshot itself is the most compelling selling argument",
        "Situations where you want a closing CTA that feels different from the hero — visual-first rather than copy-first"
      ],
      "notes": "Use a device frame mockup generator or Figma template to create a polished app-in-frame image. A raw screenshot without a device frame looks unfinished in this layout."
    }
  },
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}