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:T15cb,import { useId, type ComponentProps, type CSSProperties } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Action = { label: string; href: string }; export type CtaPosterProps = { /** Small mono labels across the top of the poster: left and right. */ kicker?: [string, string]; title?: string; description?: string; primaryAction?: Action; secondaryAction?: Action; footnote?: string; /** The poster field colour. Defaults to Devsloka blue; near-black (#0A0A0A) also works with the default text colour. */ accent?: string; /** Text and button colour on the field. Must pass contrast against `accent`. */ accentForeground?: string; /** The second ink, used only for the large circle in the composition. */ highlight?: string; } & ComponentProps<"section">; const DEFAULTS = { kicker: ["Plinth · Portfolio sites for architects", "No. 04 / Winter intake"] as [string, string], title: "Show the drawings, not the template.", description: "Plinth sets your plans, sections and site photos on a strict grid, at full resolution, with project data in the margin. Most studios publish their first twelve projects in an afternoon.", primaryAction: { label: "Start a 30-day trial", href: "#" }, secondaryAction: { label: "See studios using Plinth", href: "#" }, footnote: "No card needed. From €14 a month after the trial, billed per studio, not per seat.", accent: "#0A6EFF", accentForeground: "#FFFFFF", highlight: "#0A0A0A", }; // A fixed 5 x 5 grid of dots, computed once (no randomness, so markup is stable across renders). const DOTS = Array.from({ length: 25 }, (_, i) => ({ x: 36 + (i % 5) * 22, y: 36 + Math.floor(i / 5) * 22 })); export function CtaPoster({ kicker = DEFAULTS.kicker, title = DEFAULTS.title, description = DEFAULTS.description, primaryAction = DEFAULTS.primaryAction, secondaryAction = DEFAULTS.secondaryAction, footnote = DEFAULTS.footnote, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, highlight = DEFAULTS.highlight, className, style, ...props }: CtaPosterProps) { const headingId = useId(); return (

{kicker[0]} {kicker[1]}

{/* Composition: a disc cropped by the edge, a dot grid, three stepped bars and a punched hole. */}

{title}

{description}

{secondaryAction.label}

{footnote &&

{footnote}

}

); } 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":"@devsloka","registryDependencies":["button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/cta/cta-poster.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]