1import Link from 'next/link';2import { Search } from 'lucide-react';3import type { SiteStats } from '@/lib/queries/site';4import { fmtNum, fmtRelative } from '@/lib/format';56const EXAMPLES = ['1999 Charizard PSA 10', 'Rolex Daytona Panda', 'sealed Mario 64', 'first edition Harry Potter UK', 'Michael Jordan rookie PSA 10', 'LEGO Millennium Falcon retired'];78export function Hero({ stats }: { stats: SiteStats }) {9 return (10 <section className="pt-8 sm:pt-14">11 <div className="mx-auto max-w-3xl text-center">12 <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-subtle">RareIndex · Collectibles market intelligence</p>13 <h1 className="text-3xl font-semibold tracking-tight text-fg sm:text-5xl">The Global Market for Collectibles</h1>14 <p className="mx-auto mt-3 max-w-2xl text-sm leading-relaxed text-muted sm:text-base">Discover, price, track and analyze collectible assets across the world’s marketplaces and auction houses.</p>15 <form action="/search" role="search" className="mx-auto mt-6 flex max-w-2xl items-center gap-2">16 <label className="relative flex-1">17 <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtle" />18 <input name="q" type="search" autoComplete="off" placeholder="Search cards, watches, games, sneakers, LEGO, art…" className="h-12 w-full rounded-md border border-border bg-elevated pl-10 pr-3 text-[15px] text-fg shadow-card placeholder:text-subtle focus:border-border-strong focus:outline-none" aria-label="Search collectibles" />19 </label>20 <button type="submit" className="h-12 shrink-0 rounded-md bg-accent px-4 text-sm font-medium text-accent-fg hover:opacity-90">21 Search22 </button>23 </form>24 <ul className="mt-3 flex flex-wrap justify-center gap-1.5 text-[11px] text-muted">25 {EXAMPLES.map((e) => (26 <li key={e}>27 <Link href={`/search?q=${encodeURIComponent(e)}`} className="rounded-full border border-border px-2 py-0.5 hover:border-border-strong hover:text-fg">28 {e}29 </Link>30 </li>31 ))}32 </ul>33 </div>34 <dl className="mx-auto mt-8 grid max-w-4xl grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border text-center sm:grid-cols-5">35 {[36 ['Tracked assets', fmtNum(stats.assets)],37 ['Indexed sales', fmtNum(stats.sales)],38 ['Price observations', fmtNum(stats.observations)],39 ['Sources', fmtNum(stats.sources)],40 ['Last update', stats.lastUpdateAt ? fmtRelative(stats.lastUpdateAt) : '—'],41 ].map(([k, v]) => (42 <div key={k} className="bg-elevated px-3 py-3">43 <dt className="text-[10px] font-medium uppercase tracking-wider text-subtle">{k}</dt>44 <dd className="num mt-0.5 text-lg font-semibold text-fg">{v}</dd>45 </div>46 ))}47 </dl>48 </section>49 );50}51