Files
sofa/app/(pages)/titles/[id]/not-found.tsx
T
jakeandClaude Opus 4.6 4773243cda Add error and not-found pages across all route segments
- app/not-found.tsx: root 404 with cinematic atmosphere
- app/global-error.tsx: self-contained global error boundary
- app/(pages)/error.tsx: authenticated error boundary with retry
- app/(pages)/not-found.tsx: authenticated 404 with navigation
- Upgrade existing title and person not-found pages for consistency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 18:23:56 -05:00

47 lines
1.8 KiB
TypeScript

import Link from "next/link";
export default function TitleNotFound() {
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">
Title not found
</h2>
<p className="mx-auto max-w-sm text-sm leading-relaxed text-muted-foreground">
The title 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>
);
}