feat: add 404 page matching app design system

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-14 19:54:14 +02:00
parent 85c40cf56e
commit 52b8348203
1 changed files with 31 additions and 0 deletions
@@ -0,0 +1,31 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = { title: '404 · World Cup' }
+
+export default function NotFound() {
+  return (
+    <div className="max-w-[1200px] mx-auto px-7 py-20 flex flex-col items-center text-center">
+      <div
+        className="pitch-grid rounded-2xl px-12 py-16 w-full max-w-lg"
+        style={{
+          background: 'linear-gradient(145deg,#0a1a0e 0%,#0d2416 100%)',
+          border: '1px solid rgba(34,197,94,0.2)',
+        }}
+      >
+        <div className="font-['Bebas_Neue'] text-[120px] text-[#22c55e] leading-none">
+          404
+        </div>
+        <p className="text-[#6abf7a] text-lg mt-2 mb-8">
+          This page doesn&apos;t exist.
+        </p>
+        <Link
+          href="/"
+          className="inline-block font-['Bebas_Neue'] text-xl tracking-[0.1em] text-[#040d08] bg-[#22c55e] px-8 py-3 rounded-xl hover:bg-[#4ade80] transition-colors"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  )
+}