feat(pages): add 404 page

src/components/widgets/Navbar.astro

@@ -35,7 +35,7 @@ const navItems = [
                         <li class=" transition-all hover:-translate-y-[2px]">
                             <a
                                 href={item.link}
-                                class="text-neutral-300 hover:text-[#fbc119]"
+                                class="hover:text-hyroGold text-neutral-300"
                             >
                                 {item.name}
                             </a>

src/pages/404.astro

@@ -0,0 +1,47 @@
+---
+import Container from "../components/atoms/Container.astro";
+import Navbar from "../components/widgets/Navbar.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    <Navbar />
+    <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
+        WRONG TURN?
+    </h1>
+
+    <Container>
+        <main class="text-2xl text-white">
+            <p class="mb-4">
+                We're sorry, but it looks like the page you were trying to visit
+                has been misplaced. It's not entirely clear where it's gone, but
+                we suspect it may have gotten lost in the vast expanse of the
+                internet.
+            </p>
+
+            <p class="mb-4">
+                We've searched high and low, but alas, we can't seem to find it.
+                It's possible that it's hiding behind a particularly stubborn
+                firewall, or maybe it's taking a much-needed vacation on a
+                remote server farm.
+            </p>
+
+            <p class="mb-4">
+                Despite our best efforts, we just can't seem to locate the page
+                you were looking for. We apologize for any inconvenience this
+                may have caused.
+            </p>
+
+            <p class="mb-4">
+                In the meantime, why not take a look around our <a
+                    class="text-hyroGold"
+                    href="/">homepage</a
+                > and see if you can find something else that piques your interest?
+                Who knows, you might just stumble upon something even better than
+                what you were originally looking for.
+            </p>
+
+            <p>Thanks for stopping by, and we hope to see you again soon!</p>
+        </main>
+    </Container>
+</Layout>

tailwind.config.cjs

@@ -6,6 +6,7 @@ module.exports = {
             colors: {
                 dark: "#0D0D0D",
                 gray: "#131313",
+                hyroGold: "#fbc119",
             },
             dropShadow: {
                 yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],