polish: add branded 404 page

This commit is contained in:
Zac Gaetano 2026-05-01 14:20:37 -04:00
parent f4b983cad2
commit 869ec1e6e9

54
src/app/not-found.tsx Normal file
View file

@ -0,0 +1,54 @@
import Link from "next/link";
import Image from "next/image";
export const metadata = {
title: "Page Not Found | Wild Dragon",
description: "The page you're looking for doesn't exist.",
robots: { index: false, follow: false },
};
export default function NotFound() {
return (
<main className="min-h-screen bg-primary flex flex-col items-center justify-center px-6 text-center">
<Link href="/" className="flex items-center gap-3 mb-16 opacity-60 hover:opacity-100 transition-opacity">
<Image
src="/images/dragon-mark.png"
alt="Wild Dragon"
width={28}
height={28}
className="brightness-0 invert"
/>
<span className="font-mono text-xs tracking-[0.2em] uppercase text-white">
Wild Dragon
</span>
</Link>
<p className="font-mono text-xs tracking-[0.25em] uppercase text-accent mb-6">
404
</p>
<h1 className="text-4xl md:text-5xl font-semibold text-white leading-tight mb-6">
Page not found.
</h1>
<p className="text-neutral-400 leading-relaxed max-w-md mb-12">
The page you&apos;re looking for doesn&apos;t exist or has been moved.
</p>
<div className="flex flex-col sm:flex-row items-center gap-4">
<Link
href="/"
className="px-8 py-3 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-colors duration-200"
>
Back to Home
</Link>
<Link
href="/#projects"
className="px-8 py-3 border border-neutral-700 text-neutral-400 text-sm font-medium rounded-md hover:border-neutral-500 hover:text-neutral-200 transition-colors duration-200"
>
View Projects
</Link>
</div>
</main>
);
}