From b421f19f72e52c4b5fddf564fb266df18f240ed8 Mon Sep 17 00:00:00 2001
From: Sidd-77 <siddharthsalunkhe2003@gmail.com>
Date: Wed, 25 Dec 2024 14:13:42 +0530
Subject: [PATCH] web 404 page

---
 apps/web/src/App.tsx            |  2 ++
 apps/web/src/pages/NotFound.tsx | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 apps/web/src/pages/NotFound.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 9110799..d7345fc 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -4,6 +4,7 @@ import Home from "./pages/Home";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import Chat from "./pages/Chat";
+import NotFoundPage from "./pages/NotFound";
 import { ProtectedRoute } from "./components/ProtectedRoute";
 
 export default function App() {
@@ -22,6 +23,7 @@ export default function App() {
               </ProtectedRoute>
             }
           />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </BrowserRouter>
     </NextUIProvider>
diff --git a/apps/web/src/pages/NotFound.tsx b/apps/web/src/pages/NotFound.tsx
new file mode 100644
index 0000000..2d2a165
--- /dev/null
+++ b/apps/web/src/pages/NotFound.tsx
@@ -0,0 +1,17 @@
+import { useLocation } from "react-router-dom";
+
+const NotFoundPage = () => {
+    const location = useLocation();
+
+    return (
+        <div style={{ textAlign: "center", padding: "2rem" }}>
+            <h1>404 - Page Not Found</h1>
+            <p>The page <strong>{location.pathname}</strong> does not exist.</p>
+            <a href="/" style={{ color: "blue", textDecoration: "underline" }}>
+                Go back to the homepage
+            </a>
+        </div>
+    );
+};
+
+export default NotFoundPage;