Add custom 404 page

src/pages/404.astro

@@ -0,0 +1,41 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import LinkButton from "@components/LinkButton.astro";
+---
+
+<Layout title={`404 Not Found | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
+  <Header />
+
+  <main id="main-content">
+    <div class="not-found-wrapper">
+      <h1>404</h1>
+      <span>¯\_(ツ)_/¯</span>
+      <p>Page Not Found</p>
+      <LinkButton
+        href="/"
+        className="my-6 underline decoration-dashed underline-offset-8 text-lg"
+      >
+        Go back home
+      </LinkButton>
+    </div>
+  </main>
+
+  <Footer />
+</Layout>
+
+<style>
+  #main-content {
+    @apply max-w-3xl mx-auto flex-1 justify-center items-center flex;
+  }
+  .not-found-wrapper {
+    @apply flex flex-col items-center justify-center mb-14;
+  }
+  .not-found-wrapper h1 {
+    @apply font-bold text-9xl text-skin-accent;
+  }
+  .not-found-wrapper p {
+    @apply text-2xl sm:text-3xl mt-4;
+  }
+</style>