From 29a5aaf4cbc4d263525260e30febf81ece61f3bf Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Thu, 22 May 2025 01:33:10 +0200
Subject: [PATCH] add 404 and 500 page

---
 src/components/Welcome.astro            | 205 ------------------------
 src/layouts/website/WebsiteLayout.astro |   2 +-
 src/pages/404.astro                     |  14 ++
 src/pages/500.astro                     |  12 ++
 4 files changed, 27 insertions(+), 206 deletions(-)
 delete mode 100644 src/components/Welcome.astro
 create mode 100644 src/pages/404.astro
 create mode 100644 src/pages/500.astro

diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index 4785ba0..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,205 +0,0 @@
----
-import astroLogo from '@assets/astro.svg';
-import background from '@assets/background.svg';
----
-
-<div id="container">
-  <img id="background" src={background.src} alt="" fetchpriority="high" />
-  <main>
-    <section id="hero">
-      <a href="https://astro.build"><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a>
-      <h1>
-        To get started, open the <code><pre>src/pages</pre></code> directory in your project.
-      </h1>
-      <section id="links">
-        <a class="button" href="https://docs.astro.build">Read our docs</a>
-        <a href="https://astro.build/chat"
-          >Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
-            ><path
-              fill="currentColor"
-              d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
-            ></path></svg
-          >
-        </a>
-      </section>
-    </section>
-  </main>
-
-  <a href="https://astro.build/blog/astro-5/" id="news" class="box">
-    <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
-      ><path
-        d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
-        fill="#111827"></path></svg
-    >
-    <h2>What's New in Astro 5.0?</h2>
-    <p>
-      From content layers to server islands, click to learn more about the new features and improvements in Astro 5.0
-    </p>
-  </a>
-</div>
-
-<style>
-  #background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    filter: blur(100px);
-  }
-
-  #container {
-    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
-    height: 100%;
-  }
-
-  main {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  #hero {
-    display: flex;
-    align-items: start;
-    flex-direction: column;
-    justify-content: center;
-    padding: 16px;
-  }
-
-  h1 {
-    font-size: 22px;
-    margin-top: 0.25em;
-  }
-
-  #links {
-    display: flex;
-    gap: 16px;
-  }
-
-  #links a {
-    display: flex;
-    align-items: center;
-    padding: 10px 12px;
-    color: #111827;
-    text-decoration: none;
-    transition: color 0.2s;
-  }
-
-  #links a:hover {
-    color: rgb(78, 80, 86);
-  }
-
-  #links a svg {
-    height: 1em;
-    margin-left: 8px;
-  }
-
-  #links a.button {
-    color: white;
-    background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-    box-shadow:
-      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
-      inset 0 -2px 0 rgba(0, 0, 0, 0.24);
-    border-radius: 10px;
-  }
-
-  #links a.button:hover {
-    color: rgb(230, 230, 230);
-    box-shadow: none;
-  }
-
-  pre {
-    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-    font-weight: normal;
-    background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin: 0;
-  }
-
-  h2 {
-    margin: 0 0 1em;
-    font-weight: normal;
-    color: #111827;
-    font-size: 20px;
-  }
-
-  p {
-    color: #4b5563;
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: -0.006em;
-    margin: 0;
-  }
-
-  code {
-    display: inline-block;
-    background:
-      linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
-      linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 6px 8px;
-  }
-
-  .box {
-    padding: 16px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 16px;
-    border: 1px solid white;
-  }
-
-  #news {
-    position: absolute;
-    bottom: 16px;
-    right: 16px;
-    max-width: 300px;
-    text-decoration: none;
-    transition: background 0.2s;
-    backdrop-filter: blur(50px);
-  }
-
-  #news:hover {
-    background: rgba(255, 255, 255, 0.55);
-  }
-
-  @media screen and (max-height: 368px) {
-    #news {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-    #container {
-      display: flex;
-      flex-direction: column;
-    }
-
-    #hero {
-      display: block;
-      padding-top: 10%;
-    }
-
-    #links {
-      flex-wrap: wrap;
-    }
-
-    #links a.button {
-      padding: 14px 18px;
-    }
-
-    #news {
-      right: 16px;
-      left: 16px;
-      bottom: 2.5rem;
-      max-width: 100%;
-    }
-
-    h1 {
-      line-height: 1.5;
-    }
-  }
-</style>
diff --git a/src/layouts/website/WebsiteLayout.astro b/src/layouts/website/WebsiteLayout.astro
index b487945..7f5e657 100644
--- a/src/layouts/website/WebsiteLayout.astro
+++ b/src/layouts/website/WebsiteLayout.astro
@@ -15,7 +15,7 @@ const { title, description, footer = true } = Astro.props;
 ---
 
 <BaseLayout title={title} description={description} viewTransition>
-  <main class="min-h-[calc(100vh-3.5rem)] h-full w-full">
+  <main class="min-h-[calc(100vh-3.5rem)] h-full w-full relative">
     <slot />
   </main>
   <nav>
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..ef0d1f5
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,14 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+---
+
+<WebsiteLayout title="Seite nicht gefunden">
+  <div class="flex flex-col justify-center items-center gap-4 h-full w-full absolute">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">404: Seite nicht gefunden</h1>
+    <p class="flex gap-2 text-center">
+      Es wurde keine Seite unter der URL <code class="contents mx-1 md:block md:my-0 md:whitespace-pre"
+        >{Astro.url.pathname}</code
+      > gefunden.
+    </p>
+  </div>
+</WebsiteLayout>
diff --git a/src/pages/500.astro b/src/pages/500.astro
new file mode 100644
index 0000000..3b090f4
--- /dev/null
+++ b/src/pages/500.astro
@@ -0,0 +1,12 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+---
+
+<WebsiteLayout title="Interner Server Fehler">
+  <div class="flex flex-col justify-center items-center gap-4 h-full w-full absolute">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">500: Interner Server Fehler</h1>
+    <p class="flex gap-2 text-center">
+      Es ist ein unerwarteter interner Server Fehler aufgetreten. Bitte versuche deine Anfrage erneut.
+    </p>
+  </div>
+</WebsiteLayout>