64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T6403,"use client"; import { Fragment, useEffect, useRef, useState, useSyncExternalStore } from "react"; import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"; /** * TestimonialCarousel — one large quote at a time. * * Words rise into place with a soft blur-in, the old quote slides away in the * direction of travel, and a hairline progress bar along the bottom edge runs * the autoplay clock (it pauses on hover, on focus, while dragging, off-screen * and in a hidden tab). Pick a quote from the avatar row, use the arrow * buttons or the arrow keys, or swipe and drag. Each quote can carry a * company wordmark (drawn as inline SVG) and a score chip. Respects * prefers-reduced-motion (calm fades, no autoplay). No dependencies beyond * React. */ export type Testimonial = { quote: string; name: string; role: string; /** Company name. Drawn as a small inline-SVG wordmark above the quote. */ company?: string; /** 0 to 5. Shown as a star chip. */ score?: number; /** Optional avatar image URL (https or a site path). Initials are used otherwise. */ avatar?: string; }; export type TestimonialCarouselProps = { testimonials: Testimonial[]; autoAdvance?: boolean; interval?: number; /** "inherit" (default) is transparent and takes the page's text colour; "dark" paints an OLED card, "light" a white one. */ tone?: "inherit" | "dark" | "light"; /** A #rrggbb colour used for the progress bar, the stars and the active ring. */ accent?: string; /** Replaces the default width cap (max-w-sm). */ className?: string; /** Accessible name of the carousel. */ label?: string; }; const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; const HEX = /^#[0-9a-fA-F]{6}$/; const DEFAULT_ACCENT = "#ffb86b"; const SWIPE_PX = 56; const IMG_OK = /^(https?:\/\/|\/(?![/\\]))/; const CM = (pct: number) => "color-mix(in srgb, currentColor " + pct + "%, transparent)"; const RING_MASK: CSSProperties = { padding: 1, WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", maskComposite: "exclude", }; const TONES = { inherit: { surface: "transparent", line: CM(16), chipLine: CM(18), ink: "currentColor", muted: CM(62), track: CM(10), wash: CM(7), shadow: "none", btn: "tcar-btn", chip: "", focus: "", }, dark: { surface: "#0b0c0e", line: "rgba(255,255,255,0.12)", chipLine: "rgba(255,255,255,0.14)", ink: "#f4f5f7", muted: "rgba(255,255,255,0.58)", track: "rgba(255,255,255,0.07)", wash: "rgba(255,255,255,0.07)", shadow: "0 40px 80px -40px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.04) inset", btn: "bg-white/[0.05] text-white/60 hover:bg-white/10 hover:text-white focus-visible:!outline-white/80", chip: "bg-white/[0.06]", focus: "focus-visible:!outline-white/80 ", }, light: { surface: "#ffffff", line: "rgba(10,12,16,0.12)", chipLine: "rgba(10,12,16,0.12)", ink: "#0b0c0e", muted: "rgba(10,12,16,0.6)", track: "rgba(10,12,16,0.07)", wash: "rgba(10,12,16,0.045)", shadow: "0 1px 2px rgba(10,12,16,0.05), 0 24px 48px -28px rgba(10,12,16,0.22)", btn: "bg-black/[0.04] text-black/55 hover:bg-black/[0.08] hover:text-black focus-visible:!outline-black/70", chip: "bg-black/[0.04]", focus: "focus-visible:!outline-black/70 ", }, } as const; const CSS = [ ".tcar-btn{background:" + CM(6) + ";color:" + CM(66) + "}", ".tcar-btn:hover{background:" + CM(13) + ";color:currentColor}", ".tcar-inh :focus-visible{outline:2px solid currentColor!important;outline-offset:2px!important}", ".tcar-slide{grid-area:1/1;min-width:0}", ".tcar-slide[data-state=idle]{visibility:hidden}", ".tcar-slide[data-state=active]{animation:tcar-in 640ms " + EASE + " both}", ".tcar-slide[data-state=leaving]{animation:tcar-out 340ms cubic-bezier(0.5,0,1,1) both;pointer-events:none}", ".tcar-slide[data-state=active] .tcar-w{animation:tcar-w 780ms " + EASE + " both;animation-delay:var(--tc-d,0ms)}", ".tcar-slide[data-state=active] .tcar-meta{animation:tcar-up 640ms " + EASE + " both;animation-delay:var(--tc-d,0ms)}", ".tcar-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:0 50%;animation:tcar-prog 3200ms linear both}", "@keyframes tcar-in{from{opacity:0;transform:translate3d(calc(var(--tc-o,1)*30px),0,0)}to{opacity:1;transform:none}}", "@keyframes tcar-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(calc(var(--tc-o,1)*-30px),0,0)}}", "@keyframes tcar-w{from{opacity:0;transform:translate3d(0,0.5em,0);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}", "@keyframes tcar-up{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}", "@keyframes tcar-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}", "@keyframes tcar-fade{from{opacity:0}to{opacity:1}}", "@keyframes tcar-fadeout{from{opacity:1}to{opacity:0}}", "@media (prefers-reduced-motion:reduce){", ".tcar-slide[data-state=active]{animation:tcar-fade 220ms ease both}", ".tcar-slide[data-state=leaving]{animation:tcar-fadeout 160ms ease both}", ".tcar-slide[data-state] .tcar-w,.tcar-slide[data-state] .tcar-meta{animation:none!important}", ".tcar-track{transition:none!important}", "}", ].join("\n"); function subscribeMotion(cb: () => void) { const m = window.matchMedia("(prefers-reduced-motion: reduce)"); m.addEventListener("change", cb); return () => m.removeEventListener("change", cb); } /** True when the visitor asked for reduced motion. False on the server. */ function useReducedMotion(): boolean { return useSyncExternalStore( subscribeMotion, () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, () => false, ); } function hashOf(s: string): number { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) >>> 0; return h; } function rgba(hex: string, a: number): string { const n = parseInt(hex.slice(1), 16); return "rgba(" + ((n >> 16) & 255) + "," + ((n >> 8) & 255) + "," + (n & 255) + "," + a + ")"; } function initialsOf(name: string): string { const parts = name.replace(/[^\p{L}\p{N}\s]/gu, " ").split(/\s+/).filter(Boolean); const a = parts[0]?.[0] ?? "?"; const b = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : ""; return (a + b).toUpperCase(); } /** Six invented marks. The company name picks one, plus a type treatment. */ function Mark({ seed }: { seed: number }) { const common = { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true } as const; switch (seed % 6) { case 0: return ( ); case 1: return ( ); case 2: return ( ); case 3: return ( ); case 4: return ( ); default: return ( ); } } function Wordmark({ name }: { name: string }) { const h = hashOf(name); const look = (h >> 3) % 3; const type = look === 0 ? "text-[15px] font-semibold tracking-[-0.02em]" : look === 1 ? "text-[11px] font-semibold uppercase tracking-[0.2em]" : "text-[15px] font-bold lowercase tracking-[-0.03em]"; return ( {name} ); } function Star({ color }: { color: string }) { return ( ); } function Avatar({ t, tone }: { t: Testimonial; tone: "dark" | "light" }) { const h = hashOf(t.name) % 360; const bg = tone === "dark" ? "linear-gradient(140deg, hsl(" + h + " 62% 58%), hsl(" + ((h + 48) % 360) + " 58% 32%))" : "linear-gradient(140deg, hsl(" + h + " 78% 84%), hsl(" + ((h + 48) % 360) + " 70% 68%))"; const src = t.avatar && IMG_OK.test(t.avatar) ? t.avatar : null; return ( {src ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( initialsOf(t.name) )} ); } type Nav = { i: number; prev: number; dir: number; n: number }; /** * A quote carousel: soft word-by-word reveal, directional slide, avatar picker, * autoplay with a hairline progress bar, swipe and keyboard. */ export function TestimonialCarousel({ testimonials, autoAdvance = true, interval = 3200, tone = "inherit", accent = DEFAULT_ACCENT, className, label = "Testimonials", }: TestimonialCarouselProps) { const len = testimonials.length; const T = tone === "light" ? TONES.light : tone === "dark" ? TONES.dark : TONES.inherit; const acc = HEX.test(accent) ? accent : DEFAULT_ACCENT; const reduced = useReducedMotion(); const [nav, setNav] = useState

({ i: 0, prev: -1, dir: 1, n: 0 }); const [userPaused, setUserPaused] = useState(false); const [hover, setHover] = useState(false); const [focused, setFocused] = useState(false); const [dragging, setDragging] = useState(false); const [inView, setInView] = useState(true); const [tabVisible, setTabVisible] = useState(true); const rootRef = useRef(null); const trackRef = useRef(null); const drag = useRef<{ id: number; x: number; k: number; dx: number; moving: boolean } | null>(null); const cur = nav.i < len ? nav.i : 0; const prevIdx = nav.prev >= 0 && nav.prev < len && nav.prev !== cur ? nav.prev : -1; const go = (delta: number) => { if (len < 2) return; setNav((s) => { const from = s.i < len ? s.i : 0; return { i: (from + delta + len) % len, prev: from, dir: delta >= 0 ? 1 : -1, n: s.n + 1 }; }); }; const goTo = (j: number) => { if (j === cur || j < 0 || j >= len) return; setNav((s) => ({ i: j, prev: s.i < len ? s.i : 0, dir: j > cur ? 1 : -1, n: s.n + 1 })); }; // Drop the leaving slide once its exit has played. useEffect(() => { if (nav.prev < 0) return; const n = nav.n; const id = setTimeout(() => setNav((s) => (s.n === n ? { ...s, prev: -1 } : s)), 700); return () => clearTimeout(id); }, [nav.n, nav.prev]); // Sleep the autoplay clock off-screen and in a hidden tab. useEffect(() => { const el = rootRef.current; if (!el) return; const io = new IntersectionObserver((es) => { const e = es[es.length - 1]; if (e) setInView(e.isIntersecting); }); io.observe(el); const vis = () => setTabVisible(document.visibilityState !== "hidden"); document.addEventListener("visibilitychange", vis); return () => { io.disconnect(); document.removeEventListener("visibilitychange", vis); }; }, []); const wants = autoAdvance && !reduced && len > 1; const running = wants && !userPaused; const holding = hover || focused || dragging || !inView || !tabVisible; const ms = Math.max(1000, interval); const onKeyDown = (e: ReactKeyboardEvent) => { if (e.key === "ArrowRight") { e.preventDefault(); go(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); } else if (e.key === "Home" && len > 1) { e.preventDefault(); goTo(0); } else if (e.key === "End" && len > 1) { e.preventDefault(); goTo(len - 1); } }; const moveLight = (e: ReactPointerEvent) => { if (e.pointerType === "touch") return; const el = e.currentTarget; const r = el.getBoundingClientRect(); const k = el.offsetWidth / (r.width || 1); el.style.setProperty("--tc-mx", ((e.clientX - r.left) * k).toFixed(1) + "px"); el.style.setProperty("--tc-my", ((e.clientY - r.top) * k).toFixed(1) + "px"); el.style.setProperty("--tc-lit", "1"); }; const onDown = (e: ReactPointerEvent) => { if (len < 2 || (e.pointerType === "mouse" && e.button !== 0)) return; const r = e.currentTarget.getBoundingClientRect(); drag.current = { id: e.pointerId, x: e.clientX, k: e.currentTarget.offsetWidth / (r.width || 1), dx: 0, moving: false }; }; const onMove = (e: ReactPointerEvent) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; d.dx = (e.clientX - d.x) * d.k; if (!d.moving && Math.abs(d.dx) > 6) { d.moving = true; e.currentTarget.setPointerCapture(e.pointerId); setDragging(true); } if (d.moving) trackRef.current?.style.setProperty("--tc-dx", (d.dx * 0.5).toFixed(1) + "px"); }; const endDrag = (e: ReactPointerEvent, commit: boolean) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; drag.current = null; if (!d.moving) return; trackRef.current?.style.setProperty("--tc-dx", "0px"); setDragging(false); if (commit && Math.abs(d.dx) >= SWIPE_PX) go(d.dx < 0 ? 1 : -1); }; if (len === 0) return null; const ring = (on: boolean): CSSProperties => ({ boxShadow: tone === "inherit" ? (on ? "0 0 0 2px " + acc : "none") : on ? "0 0 0 2px " + T.surface + ", 0 0 0 3.5px " + acc : "0 0 0 2px " + T.surface, }); return ( <>

e.currentTarget.style.setProperty("--tc-lit", "0")} onPointerEnter={(e) => { if (e.pointerType !== "touch") setHover(true); }} onPointerOut={(e) => { if (e.pointerType !== "touch" && !e.currentTarget.contains(e.relatedTarget as Node | null)) setHover(false); }} onFocus={() => setFocused(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocused(false); }} className={"@container relative w-full " + (tone === "inherit" ? "tcar-inh " : "") + (className ?? "max-w-sm")} style={{ borderRadius: 20, padding: 1, boxShadow: T.shadow, ...(tone === "inherit" ? {} : { color: T.ink }), }} >

endDrag(e, true)} onPointerCancel={(e) => endDrag(e, false)} onDragStart={(e) => e.preventDefault()} >

{testimonials.map((t, idx) => { const state = idx === cur ? "active" : idx === prevIdx ? "leaving" : "idle"; const words = ("“" + t.quote + "”").split(/\s+/); const metaDelay = Math.min(words.length * 24, 520) + 140; return (

{t.company || typeof t.score === "number" ? (

{t.company ? ( ) : ( )} {typeof t.score === "number" ? ( {Math.max(0, Math.min(5, t.score)).toFixed(1)} Rated {Math.max(0, Math.min(5, t.score)).toFixed(1)} out of 5 ) : null}

) : null}

{words.map((w, wi) => ( {w} {" "} ))}

{t.name} · , {t.role}

); })}

{len > 1 ? (

{testimonials.map((t, idx) => { const on = idx === cur; return ( ); })}

{wants ? ( ) : null} {([-1, 1] as const).map((d) => ( ))}

) : null}

{running ? ( <> go(1)} /> ) : null}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/testimonial-carousel.tsx","content":"$65","type":"registry:component","target":"components/viberdy/testimonial-carousel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]