spb/ai-atlas

1import { Search } from 'lucide-react';2import type { Metadata } from 'next';3import Link from 'next/link';4import { Container, Note } from '@/components/ui/section';5import { PUBLIC_API_BASE, routes } from '@/lib/site';67export const metadata: Metadata = { title: 'Not found', robots: { index: false } };89/** 404 for the whole site (and for entity pages whose slug/type does not resolve). Search is the way back. */10export default function NotFound() {11  const btn = 'inline-flex h-11 items-center border border-rule px-3.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink';12  return (13    <Container className="py-16 md:py-24">14      <p className="eyebrow">404 · Not on the map</p>15      <h1 className="display mt-2 text-3xl md:text-5xl">We have no record at this address.</h1>16      <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-ink-2">17        The entity may have been merged into another record (its old slug then redirects), renamed by its source, or never crawled. Nothing is invented to fill the gap — search the atlas instead.18      </p>19      <form action="/search" method="get" role="search" className="mt-6 flex max-w-xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">20        <label htmlFor="nf-q" className="sr-only">Search AI Atlas</label>21        <Search className="my-auto ml-3 size-4 shrink-0 text-ink-3" aria-hidden />22        <input id="nf-q" name="q" type="search" placeholder="Search models, companies, papers, benchmarks…" className="h-11 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" spellCheck={false} />23        <button type="submit" className="bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">Search</button>24      </form>25      <div className="mt-6 flex flex-wrap gap-2 text-sm">26        <Link href={routes.home()} className={btn}>Home</Link>27        <Link href={routes.models()} className={btn}>Models</Link>28        <Link href={routes.explore()} className={btn}>Explore all types</Link>29        <Link href={routes.changes()} className={btn}>Changes</Link>30      </div>31      <Note className="mt-8 max-w-xl">32        Canonical URLs are <span className="mono">/models/&lt;slug&gt;</span>, <span className="mono">/companies/&lt;slug&gt;</span>, <span className="mono">/papers/&lt;slug&gt;</span>… — a slug under the wrong type is a 404, not a duplicate page. Programmatic lookup: <a href={`${PUBLIC_API_BASE}/search/suggest?q=claude`} className="link mono">{PUBLIC_API_BASE.replace(/^https?:\/\/www\./, '')}/search/suggest?q=…</a>33      </Note>34    </Container>35  );36}37