From e3118f4d68c4dca178123af61123dc524057a671 Mon Sep 17 00:00:00 2001
From: colinislit <colin@ikbenlit.nl>
Date: Mon, 17 Nov 2025 19:47:41 +0100
Subject: [PATCH] feat: Speedrun-themed 404 page toevoegen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Voegt een 404 not-found pagina toe met speedrun/gaming thema:
- Humoristische boodschap: "Je bent iets te snel voor onze speedrun"
- Status display in terminal-style met NOT_FOUND, IN_PROGRESS, SOON™
- Teal accent kleur consistent met design system
- CTA's naar homepage en /login
- Easter egg hint naar timeline routes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/not-found.tsx | 62 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 app/not-found.tsx

diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..597fe1b
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,62 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white flex items-center justify-center px-4">
+      <div className="max-w-2xl w-full text-center">
+        {/* 404 met speedrun styling */}
+        <div className="mb-8">
+          <h1 className="text-9xl font-bold text-teal-600 mb-2">404</h1>
+          <div className="h-1 w-32 bg-teal-600 mx-auto mb-6"></div>
+        </div>
+
+        {/* Speedrun-themed message */}
+        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
+          Je bent iets te snel voor onze speedrun
+        </h2>
+
+        <p className="text-xl text-slate-600 mb-8 max-w-xl mx-auto">
+          Deze feature is nog niet gebouwd. Blijkbaar heb je een snellere route gevonden dan wij verwacht hadden.
+          Respect voor de optimalisatie! 🏃‍♂️
+        </p>
+
+        {/* Stats box - speedrun style */}
+        <div className="bg-slate-900 text-white rounded-lg p-6 mb-8 max-w-md mx-auto">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-slate-400">Status:</span>
+            <span className="text-teal-400 font-mono">NOT_FOUND</span>
+          </div>
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-slate-400">Build Progress:</span>
+            <span className="text-yellow-400 font-mono">IN_PROGRESS</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-slate-400">ETA:</span>
+            <span className="text-teal-400 font-mono">SOON™</span>
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Link
+            href="/"
+            className="inline-block px-8 py-3 bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-lg transition-colors"
+          >
+            ← Terug naar de start
+          </Link>
+          <Link
+            href="/login"
+            className="inline-block px-8 py-3 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg border-2 border-slate-300 transition-colors"
+          >
+            Probeer het prototype
+          </Link>
+        </div>
+
+        {/* Easter egg */}
+        <p className="text-sm text-slate-400 mt-12">
+          <span className="font-mono">Tip:</span> Probeer de bekende routes in de timeline. Die werken wél.
+        </p>
+      </div>
+    </div>
+  )
+}