Add 404 Page

src/app/layout.tsx

@@ -1,5 +1,3 @@
-// TODO: Add 404 page
-
 import type { Metadata } from 'next'
 
 import Footer from '@/components/footer'

src/app/not-found.tsx

@@ -0,0 +1,30 @@
+import { buttonVariants } from '@/components/ui/button'
+import Content from '@/components/ui/content'
+import Heading from '@/components/ui/heading'
+import { LINK } from '@/types/enums/Link'
+import { cn } from '@/utils'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="relative h-full bg-ghost pt-header dark:bg-dark">
+      <Image
+        alt="Background"
+        className="-z-5 object-cover object-center"
+        fill
+        sizes="100vw"
+        src="/hero-bg.svg"
+      />
+      <Content className="relative flex h-full flex-col items-center justify-center gap-3 text-center md:gap-5">
+        <Heading>Page Not Found</Heading>
+        <p className="text-lg md:text-xl">
+          The page you were looking for does not exists.
+        </p>
+        <Link className={cn(buttonVariants())} href={LINK.index}>
+          Return Home
+        </Link>
+      </Content>
+    </div>
+  )
+}

src/components/sections/hero/hero.tsx

@@ -27,7 +27,7 @@ const Hero: FC<HeroProps> = ({ className, ...props }) => {
         src="/hero-bg.svg"
       />
       <Content
-        className="z-5 relative flex flex-col items-center justify-center text-center"
+        className="relative flex flex-col items-center justify-center text-center"
         size="tight"
       >
         <article>