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:Tf5f,"use client"; import { Badge7 } from "@/components/beste/component/badge7"; import { Button12 } from "@/components/beste/component/button12"; import { cn } from "@/lib/utils"; import Link from "next/link"; interface Badge { label: string; } interface ActionButton { label: string; href: string; } interface Cta69Labels { /** Repeated phrase scrolling across the backdrop */ marqueePhrase?: string; /** Short supporting line beneath the heading */ note?: string; /** Fine print sitting under the button */ footnote?: string; } interface Cta69Props { badge?: Badge; heading?: string; button?: ActionButton; labels?: Cta69Labels; className?: string; } export const cta69Demo: Cta69Props = { badge: { label: "Last word" }, heading: "Let's make something worth keeping.", button: { label: "Start the conversation", href: "https://beste.co", }, labels: { marqueePhrase: "Worth keeping", note: "No decks, no detours: one room, your problem, and a studio that ships.", footnote: "Booking two new partners for the autumn cycle.", }, }; /** * How many times the phrase is written into one half of the marquee. * * The loop is two identical halves slid by exactly half their width, so it only * reads as endless while a single half is wider than the screen. A short phrase * written once is not: it reaches the right edge and then drags a hole across * the section until the animation restarts. Repeating it is what closes that * hole, and eight is enough for a one-word phrase at this size. */ const REPEATS = 8; export function Cta69({ badge, heading, button, labels = {}, className }: Cta69Props) { const marqueePhrase = labels.marqueePhrase; // The separator lives inside the phrase rather than in padding between spans: // padding is only applied between elements, so it left one wide gap per copy // instead of the same small gap between every repeat. const marqueeLine = marqueePhrase ? `${marqueePhrase} · `.repeat(REPEATS) : ""; return (

{/* Giant scrolling backdrop */} {marqueePhrase && ( )} {/* Centered statement */}

{badge && } {heading && (

{heading}

)} {labels.note && (

{labels.note}

)} {button && (

)} {labels.footnote && (

{labels.footnote}

)}

); } 51:T5b3,import { cn } from "@/lib/utils"; /** Allowed wrapper styles, a fixed set, not arbitrary characters. */ type Badge7Bracket = "round" | "square" | "curly" | "angle" | "none"; const BRACKETS: Record = { round: ["(", ")"], square: ["[", "]"], curly: ["{", "}"], angle: ["<", ">"], none: ["", ""], }; type Tone = "muted" | "foreground" | "primary"; interface Badge7Props { /** Eyebrow label (rendered uppercase) */ label: string; /** Which characters wrap the label. Limited to the BRACKETS set. */ bracket?: Badge7Bracket; /** Label color */ tone?: Tone; /** Render rotated for vertical edge placement (e.g. along a hero side) */ vertical?: boolean; /** Additional classes merged onto the root */ className?: string; } const toneStyles: Record = { muted: "text-muted-foreground", foreground: "text-foreground", primary: "text-primary", }; export const badge7Demo: Badge7Props = { label: "About", }; export function Badge7({ label, bracket = "round", tone = "muted", vertical = false, className, }: Badge7Props) { const [open, close] = BRACKETS[bracket]; return ( {`${open}${label}${close}`} ); } 52:Tf2e,"use client"; import { Slot } from "@radix-ui/react-slot"; import { ArrowUpRight, type LucideIcon } from "lucide-react"; import * as React from "react"; import { cn } from "@/lib/utils"; type Tone = "dark" | "primary" | "outline"; interface Button12Props { /** Button label (rendered uppercase) */ label: string; /** * Compose the rendered element shadcn-style (radix asChild): your element * (e.g. a router Link) becomes the root and the button content is injected * as its children. Pass the element without children of its own. */ asChild?: boolean; /** The element to render when `asChild` is set (e.g. your framework's Link) */ children?: React.ReactElement; /** * Fallback link: renders a plain ``. Prefer `asChild` with your * framework's Link component for client-side navigation. */ href?: string; /** Seal icon (defaults to ArrowUpRight) */ icon?: LucideIcon; /** Surface tone: solid dark (default), solid primary, or bordered outline */ tone?: Tone; /** Click handler (used when there is no href and no asChild) */ onClick?: React.MouseEventHandler; /** Additional classes merged onto the button */ className?: string; } const toneStyles: Record = { dark: { pill: "bg-foreground text-background hover:bg-foreground/90", seal: "bg-background text-foreground", }, primary: { pill: "bg-primary text-primary-foreground hover:bg-primary/90", seal: "bg-primary-foreground text-primary", }, outline: { pill: "border bg-background text-foreground hover:bg-muted", seal: "bg-foreground text-background", }, }; export const button12Demo: Button12Props = { label: "Book an intro call", }; export function Button12({ label, asChild = false, children, href, icon: Icon = ArrowUpRight, tone = "dark", onClick, className, }: Button12Props) { const styles = toneStyles[tone]; const classes = cn( "group/button12 inline-flex w-fit cursor-pointer items-center gap-3 rounded-full py-2 pl-8 pr-2 text-base font-bold uppercase tracking-wider transition-colors", styles.pill, className ); const inner = ( <> {/* Label slides out the bottom while a copy drops in from the top */} {label} {/* Seal: icon exits the top-right corner as a copy enters from bottom-left */} ); if (asChild && React.isValidElement(children)) { return ( {React.cloneElement(children, undefined, inner)} ); } if (href) { return ( {inner} ); } return ( ); } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@beste-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/cta69/cta69.tsx","content":"$50","type":"registry:component","target":"components/beste/block/cta69.tsx"},{"path":"registry-components/badge7/badge7.tsx","content":"$51","type":"registry:component","target":"components/beste/component/badge7.tsx"},{"path":"registry-components/button12/button12.tsx","content":"$52","type":"registry:component","target":"components/beste/component/button12.tsx"}],"className":"h-[70svh] min-h-80"}]]}]