sofa/app/(pages)/people/[id]/not-found.tsx

import Link from "next/link";

export default function PersonNotFound() {
  return (
    <div className="flex flex-col items-center gap-6 py-24 text-center">
      <h1
        className="animate-stagger-item font-display text-[6rem] leading-[0.85] tracking-tight text-foreground/[0.06] sm:text-[8rem]"
        style={{ "--stagger-index": 0 } as React.CSSProperties}
      >
        404
      </h1>

      <div
        className="animate-stagger-item -mt-4 space-y-2"
        style={{ "--stagger-index": 1 } as React.CSSProperties}
      >
        <h2 className="font-display text-2xl tracking-tight sm:text-3xl">
          Person not found
        </h2>
        <p className="mx-auto max-w-sm text-sm leading-relaxed text-muted-foreground">
          The person you&apos;re looking for doesn&apos;t exist or may have been
          removed from the database.
        </p>
      </div>

      <div
        className="animate-stagger-item flex items-center gap-3"
        style={{ "--stagger-index": 2 } as React.CSSProperties}
      >
        <Link
          href="/explore"
          className="group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-lg bg-primary px-5 text-sm font-medium text-primary-foreground transition-shadow hover:shadow-lg hover:shadow-primary/20"
        >
          <span className="relative z-10">Explore titles</span>
          <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
        </Link>
        <Link
          href="/dashboard"
          className="inline-flex h-10 items-center justify-center rounded-lg border border-border px-5 text-sm font-medium transition-colors hover:border-primary/40 hover:bg-primary/5"
        >
          Dashboard
        </Link>
      </div>
    </div>
  );
}