spb/rareindex

1import Link from 'next/link';2import type { SiteStats } from '@/lib/queries/site';3import { fmtNum, fmtRelative } from '@/lib/format';4import { HeroSearch } from '@/components/search/search-sheet';5import { StatStrip } from '@/components/ui/primitives';67const CHIPS = ['1999 Charizard PSA 10', 'Rolex Daytona 116500LN', 'LEGO 10179', 'Black Lotus Alpha', 'Super Mario 64 sealed', 'Amazing Spider-Man 300'];89export function Hero({ stats }: { stats: SiteStats }) {10  return (11    <section className="fade-up pt-6 sm:pt-12">12      <div className="mx-auto max-w-3xl text-center">13        <p className="t-label mb-3 flex items-center justify-center gap-2">14          <span className="live-dot inline-block h-1.5 w-1.5 rounded-full bg-gain" aria-hidden />15          Collectibles market intelligence16        </p>17        <h1 className="t-display text-fg">The Global Market for Collectibles</h1>18        <p className="mx-auto mt-3 max-w-xl text-[15px] leading-relaxed text-muted sm:text-base">Discover, price, track and analyze collectible assets across the world’s marketplaces and auction houses.</p>19        <div className="mt-6">20          <HeroSearch chips={CHIPS} />21        </div>22      </div>23      <StatStrip24        className="mx-auto mt-8 max-w-4xl"25        items={[26          { label: 'Tracked assets', value: fmtNum(stats.assets), href: '/explore' },27          { label: 'Indexed sales', value: fmtNum(stats.sales), href: '/sales' },28          { label: 'Price observations', value: fmtNum(stats.observations), href: '/explore?has=observations' },29          { label: 'Live listings', value: fmtNum(stats.activeListings), href: '/listings' },30          { label: 'Last update', value: stats.lastUpdateAt ? fmtRelative(stats.lastUpdateAt) : '—', sub: `${fmtNum(stats.sources)} sources · ${fmtNum(stats.connectors)} connectors` },31        ]}32      />33      <p className="mt-2 text-center text-[11px] text-subtle">34        Counts are live from the canonical tables · valuations carry confidence and sample size ·{' '}35        <Link href="/methodology" className="underline-offset-2 hover:text-fg hover:underline">36          methodology37        </Link>38      </p>39    </section>40  );41}42