polish: add branded 404 page
This commit is contained in:
parent
f4b983cad2
commit
869ec1e6e9
1 changed files with 54 additions and 0 deletions
54
src/app/not-found.tsx
Normal file
54
src/app/not-found.tsx
Normal 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're looking for doesn'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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue