feat: add NotFound component and route for handling 404 errors

Author: cak

src/app/router.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from "react-router";
 import LoadingPage from "@/components/LoadingPage";
 
 import { Suspense, lazy } from "react";
+import NotFound from "@/components/NotFound";
 
 const SplashRoute = lazy(() =>
   import("../features/splash/Splash").then((module) => ({
@@ -132,6 +133,7 @@ export default function AppRouter() {
           </Suspense>
         }
       />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }

src/components/NotFound.tsx

@@ -0,0 +1,60 @@
+import { Link } from "react-router";
+import { useMemo } from "react";
+import { HTHeader } from "./HTHeader";
+import { HTFooter } from "./HTFooter";
+
+const messages = [
+  "404: This path is off the grid. It either got wiped or never existed.",
+  "Dead link detected. The resource you’re probing isn’t here.",
+  "Nothing to see here—this route’s a ghost in the machine.",
+  "Page not found. Either it’s been moved, or it was just a rumor.",
+  "You’ve reached a null sector. No data lives at this address.",
+  "Invalid opcode. This page cannot be executed.",
+  "Access denied: target not in scope.",
+  "Glitch in the system. That page never compiled.",
+];
+
+export default function NotFound() {
+  const message = useMemo(
+    () => messages[Math.floor(Math.random() * messages.length)],
+    []
+  );
+
+  return (
+    <div className="min-h-dvh flex flex-col">
+      <HTHeader />
+
+      <main id="main" className="flex-1 flex items-center justify-center px-6">
+        <div className="text-center">
+          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-gray-100">
+            404 — Page not found
+          </h1>
+          <p className="mt-4 text-gray-400">{message}</p>
+
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <Link
+              to="/conferences"
+              className="rounded-md border border-gray-700 px-4 py-2
+                         text-gray-200 hover:bg-gray-800
+                         focus:outline-none focus:ring-2 focus:ring-indigo-400
+                         transition-colors"
+            >
+              Browse Conferences
+            </Link>
+            <Link
+              to="/"
+              className="rounded-md border border-gray-700 px-4 py-2
+                         text-gray-200 hover:bg-gray-800
+                         focus:outline-none focus:ring-2 focus:ring-indigo-400
+                         transition-colors"
+            >
+              Home
+            </Link>
+          </div>
+        </div>
+      </main>
+
+      <HTFooter />
+    </div>
+  );
+}