50: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"] 51:T39eb,'use client'; import { useEffect, useRef, useState, useSyncExternalStore, type SVGProps } from 'react'; import { cn } from '@/lib/utils'; import { IconStar, FooterBar, type FooterSocial } from './footer-kit'; /** * Twelve customer marks, invented and drawn here rather than imported. * * A logo wall that ships with real companies in it looks convincing on this * page and is wrong in every install — whoever copies the block inherits * somebody else's trademarks and has to strip them before shipping. These are * drawn to the same register instead: one colour, `currentColor`, geometry * built from straight lines, rectangles and circles on a 24px grid so the set * stays optically consistent and crisp at 20px. Pass your own `customers` and * nothing else about the block changes. */ type MarkProps = SVGProps; function Mark({ children, ...props }: MarkProps & { children: React.ReactNode }) { return ( ); } export function MarkRidgeline(props: MarkProps) { return ( ); } export function MarkPostmark(props: MarkProps) { return ( ); } export function MarkCalla(props: MarkProps) { return ( ); } export function MarkHollowCreek(props: MarkProps) { return ( ); } export function MarkTessellate(props: MarkProps) { return ( ); } export function MarkBrightHarbour(props: MarkProps) { return ( ); } export function MarkNineYards(props: MarkProps) { return ( {[5, 12, 19].map((y) => [5, 12, 19].map((x) => ( )), )} ); } export function MarkStudioMono(props: MarkProps) { return ( ); } export function MarkNorthwind(props: MarkProps) { return ( ); } export function MarkCobalt(props: MarkProps) { return ( ); } export function MarkLinework(props: MarkProps) { return ( ); } export function MarkMeridian(props: MarkProps) { return ( ); } export const DEFAULT_CUSTOMERS: CustomerLogo[] = [ { name: 'Ridgeline', mark: MarkRidgeline }, { name: 'Postmark', mark: MarkPostmark }, { name: 'Calla', mark: MarkCalla }, { name: 'Hollow Creek', mark: MarkHollowCreek }, { name: 'Tessellate', mark: MarkTessellate }, { name: 'Bright Harbour', mark: MarkBrightHarbour }, { name: 'Nine Yards', mark: MarkNineYards }, { name: 'Studio Mono', mark: MarkStudioMono }, { name: 'Northwind', mark: MarkNorthwind }, { name: 'Cobalt', mark: MarkCobalt }, { name: 'Linework', mark: MarkLinework }, { name: 'Meridian', mark: MarkMeridian }, ]; const KEYFRAMES = ` @keyframes su-proof-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } @keyframes su-proof-cell { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } `; export type SocialProofFooterVariant = 'Marquee' | 'Grid'; export interface CustomerLogo { name: string; mark: React.ComponentType>; } export interface ProofStat { label: string; value: number; suffix?: string; } export interface SocialProofFooterProps { socials?: FooterSocial[]; brand: string; customers?: CustomerLogo[]; stats: ProofStat[]; /** Link columns. A logo wall with no navigation under it is a banner. */ groups?: { title: string; links: { label: string; href: string }[] }[]; eyebrow?: string; rating?: number; ratingSource?: string; links?: { label: string; href: string }[]; copyright?: string; /** Seconds for one full pass of the marquee. Longer is calmer. */ speed?: number; variant?: SocialProofFooterVariant; className?: string; } const REDUCED_MOTION = '(prefers-reduced-motion: reduce)'; function subscribeToMotionPreference(onChange: () => void) { const query = window.matchMedia(REDUCED_MOTION); query.addEventListener('change', onChange); return () => query.removeEventListener('change', onChange); } function usePrefersReducedMotion() { return useSyncExternalStore( subscribeToMotionPreference, () => window.matchMedia(REDUCED_MOTION).matches, () => false, ); } function useCountUp(target: number, run: boolean) { const reduced = usePrefersReducedMotion(); const [value, setValue] = useState(0); const frame = useRef(null); useEffect(() => { if (!run || reduced) return; const duration = 900; let start: number | null = null; function step(now: number) { if (start === null) start = now; const progress = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - progress, 3); setValue(target * eased); if (progress < 1) frame.current = requestAnimationFrame(step); } frame.current = requestAnimationFrame(step); return () => { if (frame.current !== null) cancelAnimationFrame(frame.current); }; }, [reduced, run, target]); return reduced && run ? target : value; } function StatValue({ stat, run }: { stat: ProofStat; run: boolean }) { const value = useCountUp(stat.value, run); const decimals = Number.isInteger(stat.value) ? 0 : 1; return ( {value.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals, })} {stat.suffix} ); } /** Mark plus wordmark, sized as one optical unit. */ function Logo({ logo, className }: { logo: CustomerLogo; className?: string }) { const Glyph = logo.mark; return ( {logo.name} ); } export function SocialProofFooter({ socials, brand, customers = DEFAULT_CUSTOMERS, stats, groups = [], eyebrow = 'Trusted by product teams', rating = 4.9, ratingSource = 'G2 · 214 reviews', links, copyright, speed = 42, variant = 'Marquee', className, }: SocialProofFooterProps) { const [run, setRun] = useState(false); const root = useRef(null); useEffect(() => { const node = root.current; if (!node) return; const observer = new IntersectionObserver( (entries) => { if (entries.some((entry) => entry.isIntersecting)) { setRun(true); observer.disconnect(); } }, { rootMargin: '0px 0px -10% 0px' }, ); observer.observe(node); return () => observer.disconnect(); }, []); /* The track is the list twice over, and the keyframe travels exactly -50%, so the seam lands where the second copy sits pixel-for-pixel on the first. */ const track = [...customers, ...customers]; return (