4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1599,/** * CtaBand — the closing call to action. * * a11y: `variant="primary"` inverts the band, so it pairs `--primary` with * `--primary-foreground` rather than reaching for an arbitrary tint. That is the * one colour pair the token layer guarantees at 4.5:1 in every preset and both * modes, and `scripts/check-contrast.ts` keeps it that way. * * Dependencies: react, @/lib/types, @/lib/utils, * @/components/ui/container, @/components/ui/cta-group, @/components/ui/eyebrow, * @/components/ui/heading, @/components/ui/section. */ import type { ElementType, ReactNode } from "react" import type { CtaItem, HeadingLevel, LinkComponent, StackSlotProps, } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { Container } from "@/components/ui/container" import { CtaGroup } from "@/components/ui/cta-group" import { Eyebrow } from "@/components/ui/eyebrow" import { Heading } from "@/components/ui/heading" import { Section } from "@/components/ui/section" export interface CtaBandProps extends StackSlotProps { title: string description?: string eyebrow?: ReactNode actions?: CtaItem[] link?: LinkComponent note?: ReactNode /** * `muted` and `card` sit inside the container. `primary` uses the primary colour as the * background. */ variant?: "muted" | "card" | "primary" | "plain" /** `center` stacks everything; `split` puts the buttons beside the copy. */ layout?: "center" | "split" headingLevel?: HeadingLevel as?: "section" | "div" spacing?: "sm" | "md" | "lg" | "none" className?: string id?: string } const surfaces = { muted: "bg-muted text-foreground", card: "bg-card text-card-foreground border", primary: "bg-primary text-primary-foreground", plain: "", } as const export function CtaBand({ title, description, eyebrow, actions, link, note, variant = "muted", layout = "center", stackAs, blockAs, headingLevel = 2, as = "section", spacing = "md", className, id, }: CtaBandProps) { const Stack = (stackAs ?? "div") as ElementType const Block = (blockAs ?? "div") as ElementType const titleId = id ? `${id}-title` : slugId(title) const inverted = variant === "primary" const centered = layout === "center" return (

{eyebrow ? ( {eyebrow} ) : null} {title} {description ? (

{description}

) : null} {actions?.length ? ( ({ ...action, // Primary and ghost both vanish on an inverted band; // these variants bring their own surface. variant: action.variant ?? (index === 0 ? "secondary" : "outline"), })) : actions } link={link} size="lg" align={centered ? "center" : "start"} stackOnMobile /> {note ? (

{note}

) : null} ) : null}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/container.json","https://facadeui.dev/r/cta-group.json","https://facadeui.dev/r/eyebrow.json","https://facadeui.dev/r/heading.json","https://facadeui.dev/r/section.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/cta-band.tsx","content":"$50","type":"registry:component","target":"components/sections/cta-band.tsx"}],"className":"h-[70svh] min-h-80"}]]}]