minor update to not-found page

pages/not-found.tsx

@@ -1,22 +1,37 @@
-import React, { useEffect } from "react";
+import { useState } from "react";
+import logo from "@/public/HackRPI-logo-blue.png";
+import NextImg from "next/image";
+import NavBarLink from "@/components/nav-bar/nav-bar-link";
+import Footer from "@/components/footer/footer";
+import NavBar from "@/components/nav-bar/nav-bar";
+import "../app/globals.css";
 
-function NotFoundPage() {
-	useEffect(() => {
-		// This useEffect will only run on the client-side
-		console.log("Component mounted on the client-side");
-		return () => {
-			console.log("Component unmounted on the client-side");
-		};
-	}, []);
-
-	// Dynamically import Custom404 only on the client-side
-	const DynamicCustom404 = React.lazy(() => import("@/pages/404"));
+export default function Custom404() {
+	const [isHovered, setIsHovered] = useState(false);
 
 	return (
-		<React.Suspense fallback={<div>Loading...</div>}>
-			<DynamicCustom404 />
-		</React.Suspense>
+		<div className="flex flex-col items-start desktop:items-center justify-start">
+			<NavBar showOnScroll={false} />
+			<div className="error-message text-center mt-40">
+				<h1 className="text-4xl font-bold text-white">ERROR 404: No page found</h1>
+				<p>Click Image below to be transported back to the Home Page.</p>
+			</div>
+			<div className="mt-8 flex justify-center">
+				<NavBarLink href="/">
+					<NextImg
+						alt="HackRPI Logo"
+						aria-label="Home Page"
+						src={logo}
+						className={`w-36 transition duration-300 ease-in-out ${isHovered ? "transform scale-110" : ""}`}
+						onMouseEnter={() => setIsHovered(true)}
+						onMouseLeave={() => setIsHovered(false)}
+					/>
+				</NavBarLink>
+			</div>
+			<div className="mt-40"></div>
+			<div className="absolute bottom-0 w-full">
+				<Footer />
+			</div>
+		</div>
 	);
 }
-
-export default NotFoundPage;

tsconfig.json

@@ -22,6 +22,6 @@
 			"@/*": ["./*"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "pages/not-found.tsx"],
 	"exclude": ["node_modules"]
 }