From 78b358e10fb5a4486755ec5ec14d0cd1e6d3b5ed Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Fri, 17 Apr 2026 23:05:01 +0200
Subject: [PATCH] ui: redesign 404 page with branded hero and dual CTAs

---
 src/routes/+error.svelte | 56 +++++++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index b3eb75d..55c7cde 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,27 +1,53 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { useTranslate } from '$lib/translations';
+  import Icon from '@iconify/svelte';
+  import '$lib/iconify-offline';
 
   const t = useTranslate();
   const status = $derived($page.status);
   const message = $derived($page.error?.message ?? '');
+  const isNotFound = $derived(status === 404);
 </script>
 
 <svelte:head>
-  <title>{status === 404 ? t('page_404_title') : `Fehler ${status}`}</title>
+  <title>{isNotFound ? t('page_404_title') : `Fehler ${status}`}</title>
+  <meta name="robots" content="noindex" />
 </svelte:head>
 
-<main class="mx-auto max-w-3xl px-4 py-12 text-center">
-  <h1 class="text-3xl font-bold text-zinc-900">{status}</h1>
-  {#if status === 404}
-    <p class="mt-2 text-zinc-600">{t('page_404_text')}</p>
-  {:else if message}
-    <p class="mt-2 text-zinc-600">{message}</p>
-  {/if}
-  <a
-    href="/"
-    class="mt-6 inline-block rounded bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800"
-  >
-    {t('page_404_back')}
-  </a>
-</main>
+<section class="bg-linear-to-br from-wald-700 via-wald-800 to-zinc-900 text-white">
+  <div class="container-custom py-20 md:py-28 text-center">
+    <div class="mx-auto inline-flex h-20 w-20 items-center justify-center rounded-full bg-white/10 backdrop-blur ring-1 ring-white/20">
+      <Icon
+        icon={isNotFound ? 'mdi:map-marker-question-outline' : 'mdi:alert-octagon-outline'}
+        class="h-10 w-10"
+      />
+    </div>
+    <p class="mt-6 text-7xl md:text-8xl font-extrabold tracking-tight">{status}</p>
+    <h1 class="mt-3 text-2xl md:text-3xl font-semibold">
+      {isNotFound ? t('page_404_title') : `Fehler ${status}`}
+    </h1>
+    {#if isNotFound}
+      <p class="mx-auto mt-4 max-w-xl text-base text-white/80">{t('page_404_text')}</p>
+    {:else if message}
+      <p class="mx-auto mt-4 max-w-xl text-base text-white/80">{message}</p>
+    {/if}
+
+    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+      <a
+        href="/"
+        class="inline-flex items-center gap-2 rounded-sm bg-white px-5 py-2.5 text-sm font-medium text-zinc-900 hover:bg-zinc-100 no-underline"
+      >
+        <Icon icon="mdi:home-outline" class="h-4 w-4" />
+        {t('page_404_back')}
+      </a>
+      <a
+        href="/posts/"
+        class="inline-flex items-center gap-2 rounded-sm border border-white/40 px-5 py-2.5 text-sm font-medium text-white hover:bg-white/10 no-underline"
+      >
+        <Icon icon="mdi:file-document-outline" class="h-4 w-4" />
+        Zu den Beiträgen
+      </a>
+    </div>
+  </div>
+</section>