{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-banner",
  "title": "Cta Banner",
  "description": "The full-bleed navy call-to-action band, with split or centred layout and the accent CTA hover nudge.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/backdrop",
    "@nx-ui/button",
    "@nx-ui/section",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/cta-banner.tsx",
      "content": "import { ArrowRight } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Backdrop } from \"@/components/blocks/marketing/backdrop\"\nimport { Eyebrow } from \"@/components/blocks/marketing/section\"\n\n/**\n * CtaBanner — the full-bleed navy call-to-action band that closes a landing\n * page. A decorative brand `Backdrop`, an eyebrow + display headline + body on\n * the left, and up to two CTAs on the right (the primary uses the accent\n * variant with the `.cta-arrow` hover nudge).\n *\n * `layout=\"split\"` (default) puts the copy and CTAs side by side; `\"centered\"`\n * stacks them centred.\n */\n\ntype Cta = { label: string; href: string }\n\ninterface CtaBannerProps {\n  eyebrow?: string\n  title: string\n  body?: string\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  layout?: \"split\" | \"centered\"\n  className?: string\n}\n\nfunction CtaBanner({\n  eyebrow = \"See it on your own project\",\n  title,\n  body,\n  primaryCta = { label: \"Book a demo\", href: \"#\" },\n  secondaryCta,\n  layout = \"split\",\n  className,\n}: CtaBannerProps) {\n  const centered = layout === \"centered\"\n  return (\n    <section\n      data-slot=\"cta-banner\"\n      className={cn(\n        \"relative isolate overflow-hidden bg-brand-600\",\n        className\n      )}\n    >\n      <Backdrop tone=\"brand\" placement=\"panel\" />\n      <div className=\"mx-auto w-full max-w-container px-4 py-20 md:px-8 md:py-24\">\n        <div\n          className={cn(\n            \"flex flex-col gap-8\",\n            centered\n              ? \"items-center text-center\"\n              : \"items-start md:flex-row md:items-center md:justify-between\"\n          )}\n        >\n          <div\n            className={cn(\"flex max-w-2xl flex-col gap-4\", centered && \"items-center\")}\n          >\n            {eyebrow ? <Eyebrow onBrand>{eyebrow}</Eyebrow> : null}\n            <h2 className=\"text-display-sm font-semibold tracking-tight text-white md:text-display-lg\">\n              {title}\n            </h2>\n            {body ? <p className=\"text-lg text-white/80\">{body}</p> : null}\n          </div>\n          <div\n            className={cn(\n              \"flex flex-col gap-3 sm:flex-row\",\n              centered ? \"justify-center\" : \"md:flex-col\"\n            )}\n          >\n            <Button\n              variant=\"accent\"\n              size=\"xl\"\n              className=\"cta-arrow\"\n              nativeButton={false}\n              render={<a href={primaryCta.href} />}\n            >\n              <span data-text>{primaryCta.label}</span>\n              <ArrowRight data-icon />\n            </Button>\n            {secondaryCta ? (\n              <Button\n                variant=\"secondary-on-brand\"\n                size=\"xl\"\n                nativeButton={false}\n                render={<a href={secondaryCta.href} />}\n              >\n                <span data-text>{secondaryCta.label}</span>\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { CtaBanner }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/cta-banner.tsx"
    }
  ],
  "type": "registry:block"
}