From 2b73da55de80dbd5af1346a431bc5a4229c410a4 Mon Sep 17 00:00:00 2001
From: Thanaphom Hirunyathon <sqoulo11@gmail.com>
Date: Sat, 20 Jan 2024 15:40:31 +0700
Subject: [PATCH] feat: 404 page (#12)

* feat: 404 page

* refactor: add layout

* fix: leftover white space

* chore: format
---
 src/pages/404.astro | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/pages/404.astro

diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..4b3da0d
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,43 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="404" description="404">
+  <main>
+    <div
+      class="flex min-h-screen w-screen flex-col items-center justify-center bg-primary px-[12%] md:px-0"
+    >
+      <div
+        class="stroke-width-2 flex flex-row justify-center text-9xl font-medium text-primary md:text-[16rem]"
+      >
+        <div class="stroke-white">4</div>
+        <div class="stroke-yellow">0</div>
+        <div class="stroke-white">4</div>
+      </div>
+
+      <div class="mt-6 text-center text-2xl text-[#807F7E] md:text-5xl">
+        Page that you are looking not found
+      </div>
+
+      <a href="/">
+        <div
+          class="mt-10 cursor-pointer rounded border-[1px] border-white px-4 py-2 text-xl font-medium text-white md:px-8 md:py-4 md:text-4xl"
+        >
+          Homepage
+        </div>
+      </a>
+    </div>
+  </main>
+</Layout>
+
+<style>
+  .stroke-width-2 {
+    -webkit-text-stroke-width: 2px;
+  }
+  .stroke-white {
+    -webkit-text-stroke-color: var(--white, #fff);
+  }
+  .stroke-yellow {
+    -webkit-text-stroke-color: var(--Yellow, #fdc648);
+  }
+</style>