Add pages/404.js

2026-04-26 21:37:48 +02:00
parent 0b5cdd92f8
commit f31158835e
1 changed files with 63 additions and 0 deletions
@@ -0,0 +1,63 @@
+import Link from 'next/link';
+import Head from 'next/head';
+import { useState, useEffect } from 'react';
+import { SITE_CONFIG } from '../config';
+
+export default function Custom404() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Server-side and Initial Client-side "Safe" Shell
+  if (!mounted) {
+    return (
+      <div className="min-h-screen bg-zinc-950 flex items-center justify-center">
+        <div className="animate-pulse text-zinc-800 font-black text-9xl">404</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-200 flex flex-col items-center justify-center p-8 font-sans" suppressHydrationWarning>
+      <Head>
+        <title>{`404 // ${SITE_CONFIG.title}`}</title>
+      </Head>
+
+      <div className="text-center space-y-6" suppressHydrationWarning>
+        <h1 className="text-9xl font-black text-zinc-800 selection:bg-none">404</h1>
+        
+        <div className="space-y-2" suppressHydrationWarning>
+          <h2 className="text-2xl font-bold text-white">Paste not found</h2>
+          <p className="text-zinc-500 max-w-xs mx-auto">
+            This paste may have expired, been burned, or never existed in the first place.
+          </p>
+        </div>
+
+        <div className="pt-4" suppressHydrationWarning>
+          <Link href="/">
+            <button className="bg-blue-600 px-8 py-3 rounded-lg font-bold hover:bg-blue-700 text-white shadow-lg transition-all active:scale-95 flex items-center gap-2 mx-auto">
+              <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                className="h-5 w-5" 
+                viewBox="0 0 20 20" 
+                fill="currentColor"
+              >
+                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+              </svg>
+              Back to Home
+            </button>
+          </Link>
+        </div>
+      </div>
+
+      <div 
+        className="absolute bottom-8 text-zinc-700 font-mono text-xs uppercase tracking-widest"
+        suppressHydrationWarning
+      >
+        {`${SITE_CONFIG.title} // Secure Protocol`}
+      </div>
+    </div>
+  );
+}