feat(pages): add 404 page

This commit is contained in:
xHyroM 2023-01-06 23:27:40 +01:00
parent a066af027d
commit 50d58e5de1
3 changed files with 49 additions and 1 deletions

View file

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

47
src/pages/404.astro Normal file
View file

@ -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>

View file

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