fix: add 404 page

src/main.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "@/context/Theme.tsx";
 import IndexPage from "./pages/IndexPage.tsx";
 import AppPage from "./pages/AppPage.tsx";
 import PrivacyPolicy from "./pages/PrivacyPolicy.tsx";
+import NotFound from "./pages/NotFound.tsx";
 
 import "./index.css";
 
@@ -18,6 +19,7 @@ createRoot(document.getElementById("root")!).render(
 					<Route path="/" element={<IndexPage />} />
 					<Route path="/app" element={<AppPage />} />
 					<Route path="/privacy-policy" element={<PrivacyPolicy />} />
+					<Route path="*" element={<NotFound />} />
 				</Routes>
 			</BrowserRouter>
 		</ThemeProvider>

src/pages/NotFound.tsx

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { Link } from "react-router";
+import { ChevronLeftIcon } from "lucide-react";
+
+import { ThemeContext } from "@/context/Theme";
+import { Button } from "@/components/ui/button";
+
+import BlockmaticLogo from "@/assets/blockmatic-icon.svg?react";
+import BlockmaticText from "@/assets/blockmatic-text.svg?react";
+
+function NotFound() {
+	const { isDark } = useContext(ThemeContext);
+
+	return (
+		<div className="absolute w-full h-full flex flex-col justify-center items-center">
+			<div className="flex gap-2 items-center">
+				<BlockmaticLogo className="h-8" fill={isDark ? "white" : "black"} />
+				<BlockmaticText className="h-3.5" fill={isDark ? "white" : "black"} />
+			</div>
+
+			<h1 className="font-bold text-8xl mt-2">404</h1>
+			<h2 className="text-xl mb-6">page not found</h2>
+
+			<Button variant="outline" asChild>
+				<Link to={{ pathname: "/" }}>
+					Go back
+					<ChevronLeftIcon className="!h-6 !w-6" />
+				</Link>
+			</Button>
+		</div>
+	);
+}
+
+export default NotFound;