{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-01",
  "title": "CTA 01",
  "description": "Horizontal call-to-action section with a heading, description, and primary/secondary CTA buttons. Use it at the end of landing page sections to nudge visitors toward sign-up or purchase at the right moment.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://shadcnship.com/r/social-icons.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/cta-01/cta.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { LogoIcon } from \"../social-icons/icons\";\n\ninterface Cta01Props {\n  title?: string;\n  description?: string;\n  logo?: React.ReactNode;\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 Cta01 = ({\n  title = \"Ship faster. Build better.\",\n  description = \"Production-ready shadcn/ui blocks for your next project.\",\n  logo = <LogoIcon className=\"size-16 dark:invert\" />,\n  buttons = [\n    {\n      text: \"Get started now\",\n      url: \"#\",\n      icon: <ArrowUpRight className=\"size-4\" />,\n    },\n  ],\n  className,\n}: Cta01Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"flex flex-col gap-8 overflow-hidden rounded-lg border p-8 lg:flex-row lg:items-center lg:p-16\">\n      {logo && logo}\n      <div className=\"flex flex-1 flex-col justify-center\">\n        <h2 className=\"text-3xl leading-tight font-medium tracking-tight md:text-4xl\">\n          {title}\n        </h2>\n        <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n      </div>\n      {buttons && buttons.length > 0 && (\n        <div className=\"flex flex-col gap-4 sm:flex-row\">\n          {buttons.map((btn, i) => (\n            <Button\n              key={i}\n              variant={btn.variant ?? \"default\"}\n              size=\"lg\"\n              asChild\n            >\n              <a href={btn.url}>\n                {btn.text} {btn.icon}\n              </a>\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  </section>\n);\n\nexport default Cta01;\n",
      "type": "registry:component",
      "target": "components/cta-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/cta-01.webp",
    "imageDark": "/r/previews/cta-01-dark.webp",
    "prose": {
      "about": "CTA 01 is a horizontal call-to-action banner with a headline, a short description, and two action buttons (primary and secondary) aligned on the same row. Built with Tailwind CSS flexbox, it adapts from a stacked mobile layout to an inline desktop layout. The section has no background image or decoration — it relies on contrast with the surrounding sections to draw attention. Both buttons are shadcn/ui Button components with configurable variants.",
      "whenToUse": [
        "End of a landing page section where you want to catch users before they scroll past without converting",
        "Between major content sections to re-engage visitors who are reading but haven't clicked yet",
        "Products where a soft secondary CTA (learn more, see demo) complements the primary conversion action",
        "Pages that need a conversion prompt without the visual weight of a full card or modal"
      ],
      "notes": "The secondary button should reduce friction, not compete with the primary. Use it for demo requests, documentation links, or video previews — not a second sign-up path.",
      "faqs": [
        {
          "question": "Does CTA 01 include a background image or illustration?",
          "answer": "No, it's intentionally plain — it relies on contrast with surrounding sections rather than decoration to draw attention."
        },
        {
          "question": "What should the secondary button link to?",
          "answer": "Something low-friction like a demo, documentation, or video preview — not a second sign-up path, which would compete with the primary CTA."
        },
        {
          "question": "Does it stack on mobile?",
          "answer": "Yes, the flexbox layout adapts from an inline row on desktop to a stacked column on mobile automatically."
        }
      ]
    }
  },
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}