Minimal refactorization

src/pages/404.astro

@@ -1,29 +1,13 @@
 ---
-import Layout from "~/layouts/Empty.astro";
+import Layout from "~/layouts/BaseLayout.astro";
+import { SITE } from "~/config.mjs";
+import Error404 from "~/components/widgets/Error404.astro";
+
+const title = `Error 404 — ${SITE.name}`;
 ---
 
-<Layout title="Error 404 — AstroWind">
+<Layout meta={{ title }}>
   <main>
-    <section class="flex items-center h-full p-16">
-      <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
-        <div class="max-w-md text-center">
-          <h2
-            class="mb-8 font-extrabold text-9xl bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
-          >
-            <span class="sr-only">Error</span>404
-          </h2>
-          <p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
-          <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
-            But dont worry, you can find plenty of other things on our homepage.
-          </p>
-          <a
-            rel="noopener noreferrer"
-            href="./"
-            class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
-            >Back to homepage
-          </a>
-        </div>
-      </div>
-    </section>
+    <Error404 />
   </main>
 </Layout>