"use client"; import Link from "next/link"; import { useRef, useState } from "react"; import { ArrowRightIcon } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { Badge } from "@/components/ui/badge"; import { buttonVariants } from "@/components/ui/button"; import { BrandFonts, BrandWordmark } from "@/lib/brand-typography"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { heroAnnouncement, heroCopy } from "./hero-data"; const springPress = "active:scale-[0.96] transition-transform"; const logoIconClass = "size-5 shrink-0 object-contain outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"; function getLogoDevUrl(domain: string) { const token = process.env.NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY; if (!token) return null; const params = new URLSearchParams({ token, size: "80", format: "png", retina: "true", fallback: "monogram", }); return `https://img.logo.dev/${domain}?${params}`; } export function HeroAnnouncement({ className, detail = heroAnnouncement.detail, label = heroAnnouncement.label, }: { className?: string; detail?: string; label?: string; }) { return (

{label} {detail}

); } export function HeroCtaRow({ className, primary = heroCopy.primaryCta, secondary = heroCopy.secondaryCta, }: { className?: string; primary?: { label: string; href: string }; secondary?: { label: string; href: string }; }) { return (

{primary.label} {secondary.label}

); } export function MotionShowcaseFrame({ children, className, label, }: { children: React.ReactNode; className?: string; label?: string; }) { return (

{label ? (

{label}

) : null} {children}

); } export function BlockStripChip({ label, pattern, }: { label: string; pattern: string; }) { return (

{label}

{pattern}

); } export function SwissRule({ className }: { className?: string }) { return

; } export function HeroInlineLogoStrip({ brands, className, label, }: { brands: readonly { name: string; domain: string }[]; className?: string; label: string; }) { const reduceMotion = useReducedMotion(); const listRef = useRef(null); const inView = useInView(listRef, motionViewport); const [focused, setFocused] = useState(null); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 6 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: { type: "spring" as const, duration: 0.35, bounce: 0 } }, }; return (

{label}

setFocused(null)} ref={listRef} variants={{ hidden: {}, visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 }, }, }} > {brands.map((brand) => { const src = getLogoDevUrl(brand.domain); const isFocused = focused === brand.domain; const dimmed = focused !== null && !isFocused; return ( setFocused((current) => (current === brand.domain ? null : current))} onFocus={() => setFocused(brand.domain)} onMouseEnter={() => setFocused(brand.domain)} transition={{ type: "spring", duration: 0.3, bounce: 0 }} type="button" > {src ? (

) : null} ); })}

); }