From 5ba3afc39346e101b0fcdfb0323c5597ec8b8ae3 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 25 Jan 2026 13:29:11 +0100
Subject: [PATCH] error pages

---
 app/[locale]/error.tsx     | 42 ++++++++++++++++++++++++++++------
 app/[locale]/not-found.tsx | 46 ++++++++++++++++++++++++++++++++++++++
 messages/de.json           |  9 +++++++-
 messages/en.json           |  9 +++++++-
 4 files changed, 97 insertions(+), 9 deletions(-)
 create mode 100644 app/[locale]/not-found.tsx

diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
index 93f9d82d..9fc662fa 100644
--- a/app/[locale]/error.tsx
+++ b/app/[locale]/error.tsx
@@ -3,7 +3,8 @@
 import * as Sentry from '@sentry/nextjs';
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
-import { Container, Button } from '@/components/ui';
+import { Container, Button, Heading } from '@/components/ui';
+import Scribble from '@/components/Scribble';
 
 export default function Error({
   error,
@@ -19,14 +20,41 @@ export default function Error({
   }, [error]);
 
   return (
-    <Container className="py-24 flex flex-col items-center justify-center text-center min-h-[60vh]">
-      <h2 className="text-3xl font-bold mb-4">{t('title')}</h2>
-      <p className="text-white/60 mb-8 max-w-md">
+    <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
+      {/* Industrial Background Element */}
+      <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
+        <span className="text-[20rem] font-bold select-none">500</span>
+      </div>
+
+      <div className="relative mb-8">
+        <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
+          500
+        </Heading>
+        <Scribble 
+          variant="underline" 
+          className="w-full h-6 -bottom-2 left-0 text-saturated/40" 
+        />
+      </div>
+
+      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4">
+        {t('title')}
+      </Heading>
+      
+      <p className="text-white/60 mb-10 max-w-md text-lg">
         {t('description')}
       </p>
-      <Button onClick={() => reset()}>
-        {t('tryAgain')}
-      </Button>
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <Button onClick={() => reset()} variant="saturated" size="lg">
+          {t('tryAgain')}
+        </Button>
+        <Button href="/" variant="outline" size="lg">
+          {t('goHome')}
+        </Button>
+      </div>
+
+      {/* Decorative Industrial Line */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-saturated/50 to-transparent" />
     </Container>
   );
 }
diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
new file mode 100644
index 00000000..ed0d56c9
--- /dev/null
+++ b/app/[locale]/not-found.tsx
@@ -0,0 +1,46 @@
+import { useTranslations } from 'next-intl';
+import { Container, Button, Heading } from '@/components/ui';
+import Scribble from '@/components/Scribble';
+
+export default function NotFound() {
+  const t = useTranslations('Error.notFound');
+
+  return (
+    <Container className="relative py-24 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
+      {/* Industrial Background Element */}
+      <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
+        <span className="text-[20rem] font-bold select-none">404</span>
+      </div>
+
+      <div className="relative mb-8">
+        <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
+          404
+        </Heading>
+        <Scribble 
+          variant="circle" 
+          className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40" 
+        />
+      </div>
+
+      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
+        {t('title')}
+      </Heading>
+      
+      <p className="text-white/60 mb-10 max-w-md text-lg">
+        {t('description')}
+      </p>
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <Button href="/" variant="accent" size="lg">
+          {t('cta')}
+        </Button>
+        <Button href="/contact" variant="outline" size="lg">
+          Contact Support
+        </Button>
+      </div>
+
+      {/* Decorative Industrial Line */}
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
+    </Container>
+  );
+}
diff --git a/messages/de.json b/messages/de.json
index e219e0e6..a78b7014 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -368,6 +368,13 @@
   "Error": {
     "title": "Etwas ist schief gelaufen!",
     "description": "Wir sind auf einen unerwarteten Fehler gestoßen. Unser Team wurde benachrichtigt und arbeitet an einer Lösung.",
-    "tryAgain": "Erneut versuchen"
+    "tryAgain": "Erneut versuchen",
+    "goHome": "Zurück zur Startseite",
+    "notFound": {
+      "title": "Verbindung unterbrochen",
+      "subtitle": "404 - Seite nicht gefunden",
+      "description": "Es scheint, als wäre das Kabel zu dieser Seite unterbrochen worden. Wir konnten die gesuchte Ressource nicht finden.",
+      "cta": "Zurück zur Sicherheit"
+    }
   }
 }
diff --git a/messages/en.json b/messages/en.json
index 6995be9a..5d931a06 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -368,6 +368,13 @@
   "Error": {
     "title": "Something went wrong!",
     "description": "We encountered an unexpected error. Our team has been notified and is working on a fix.",
-    "tryAgain": "Try again"
+    "tryAgain": "Try again",
+    "goHome": "Back to Home",
+    "notFound": {
+      "title": "Connection Lost",
+      "subtitle": "404 - Page Not Found",
+      "description": "It seems the cable to this page has been disconnected. We couldn't find the resource you were looking for.",
+      "cta": "Back to Safety"
+    }
   }
 }