Agency: Not found

"use client";

import { notFound } from "./content";
import { ArrowLink, COLUMN, Reveal, Tiles } from "./kit";

/**
 * The template's not-found page: the code set large beside the studio's tile mark with its
 * vermilion tile missing, a line on what happened and the pages people usually want.
 */
export function NotFound() {
  return (
    <section aria-labelledby="not-found-title" className={`${COLUMN} pt-section-sm pb-group`}>
      <Reveal className="flex flex-col gap-pad-lg border-t border-line-subtle pt-pad-lg">
        <p aria-hidden className="flex items-center gap-pad-base font-display text-display-6xl font-medium tracking-display text-text-muted tabular-nums">
          <Tiles className="size-10 text-text-muted [--tessera-tile:transparent]" />
          {notFound.code}
        </p>
        <div className="flex max-w-2xl flex-col gap-pad-base">
          <h1 id="not-found-title" className="font-display text-display-4xl font-medium tracking-display text-balance text-text sm:text-display-5xl">
            {notFound.title}
          </h1>
          <p className="text-ui-md text-pretty text-text-secondary sm:text-ui-lg">{notFound.body}</p>
        </div>
        <ul className="flex flex-wrap gap-x-pad-lg gap-y-in">
          {notFound.links.map((link) => (
            <li key={link.href}>
              <ArrowLink href={link.href}>{link.label}</ArrowLink>
            </li>
          ))}
        </ul>
      </Reveal>
    </section>
  );
}