Feat: Add 404 page and fix nav and mobile nav color

src/components/common/Error404/Error404.jsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import styles from "./Error404.module.css";
+
+const Error404 = () => {
+  return (
+    <div className={styles.error404}>
+      <Image
+        src="/images/404-sad.png"
+        width={600}
+        height={400}
+        alt="cat crying"
+      />
+      <p className="text-lg md:text-xl xl:text-2xl 2xl:text-3xl">
+        404. Page Not Found.
+      </p>
+    </div>
+  );
+};
+
+export default Error404;

src/components/common/Error404/Error404.module.css

@@ -0,0 +1,12 @@
+.error404 {
+  @apply flex flex-col gap-y-4 justify-center items-center basis-full;
+
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+@media (min-width: 768px) {
+  .error404 {
+    min-height: calc(100vh - 108px);
+  }
+}

src/components/common/Error404/index.js

@@ -0,0 +1 @@
+export { default } from "./Error404";

src/components/common/MobileNav/MobileNav.module.css

@@ -1,11 +1,11 @@
 .mobileNav__button {
-  @apply w-12 h-12 fixed top-4 right-4 p-3 border-2 border-black rounded-full bg-white cursor-pointer select-none z-[100];
+  @apply w-12 h-12 fixed top-4 right-4 p-3 border-2 border-black rounded-full text-black bg-white cursor-pointer select-none z-[100];
 
   -webkit-tap-highlight-color: transparent;
 }
 
 .mobileNav__nav {
-  @apply flex flex-col justify-center items-center gap-y-5 fixed top-0 w-screen border-l-2 border-black text-2xl bg-white z-[99] duration-200;
+  @apply flex flex-col justify-center items-center gap-y-5 fixed top-0 w-screen border-l-2 border-black text-2xl text-black bg-white z-[99] duration-200;
 
   transition-property: left;
   height: 100vh;

src/components/common/Navbar/Navbar.jsx

@@ -10,7 +10,7 @@ const navigationList = [
 const Navbar = () => {
   return (
     <div className="hidden justify-between items-center border-t-2 border-b-2 border-black bg-white text-3xl font-bold md:flex">
-      <Link href="/" className="ml-6 mr-12">
+      <Link href="/" className="ml-6 mr-12 text-black">
         HFz
       </Link>
       <nav className="flex items-center">

src/pages/404.jsx

@@ -0,0 +1,7 @@
+import Error404 from "@/components/common/Error404";
+
+const NotFound = () => {
+  return <Error404 />;
+};
+
+export default NotFound;