Change Not Found Page

src/app/not-found.tsx

@@ -1,8 +1,67 @@
+"use client";
+
+import Link from "next/link";
+
 export default function NotFound() {
     return (
-        <main style={{ padding: 24 }}>
-            <h1>Not Found</h1>
-            <p>Sorry, the page you are looking for does not exist.</p>
+        <main className="relative min-h-screen bg-white text-neutral-900">
+            {/* Subtle mono grid background */}
+            <div
+                aria-hidden
+                className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,#e5e5e5_1px,transparent_0)] [background-size:20px_20px]"
+            />
+
+            {/* Giant watermark 404 */}
+            <div
+                aria-hidden
+                className="pointer-events-none select-none absolute inset-0 -z-0 flex items-center justify-center"
+            >
+                <span className="text-[22vw] font-black leading-none text-neutral-100">404</span>
+            </div>
+
+            {/* Content */}
+            <section className="relative z-10 mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center px-6 text-center">
+                <p className="mb-2 text-xs uppercase tracking-[0.2em] text-neutral-500">Error</p>
+                <h1 className="text-5xl font-black tracking-tight sm:text-6xl md:text-7xl">
+          <span className="bg-gradient-to-b from-neutral-900 to-neutral-500 bg-clip-text text-transparent">
+            Page Not Found
+          </span>
+                </h1>
+                <p className="mt-4 max-w-xl text-sm leading-relaxed text-neutral-600">
+                    ขอโทษครับ ไม่พบหน้าที่คุณกำลังมองหา ลองกลับไปหน้าแรกหรือย้อนกลับไปหน้าก่อนหน้า
+                </p>
+
+                <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+                    <Link
+                        href="/"
+                        className="rounded-xl border border-neutral-900 bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2"
+                    >
+                        กลับหน้าแรก
+                    </Link>
+                    <button
+                        type="button"
+                        onClick={() => window.history.back()}
+                        className="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-800 transition hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2"
+                    >
+                        ย้อนกลับ
+                    </button>
+                </div>
+            </section>
+
+            {/* Footer (mono) */}
+            <footer className="absolute inset-x-0 bottom-4 z-10 mx-auto w-full max-w-3xl px-6">
+                <div className="flex items-center justify-between text-[11px] text-neutral-400">
+                    <span>© {new Date().getFullYear()} — EOP</span>
+                    <nav className="flex items-center gap-6">
+                        <Link href="/status" className="hover:text-neutral-700">
+                            Status
+                        </Link>
+                        <Link href="/support" className="hover:text-neutral-700">
+                            Support
+                        </Link>
+                    </nav>
+                </div>
+            </footer>
         </main>
     );
 }