From 663c1cf2963f2acb55b8a5cc93a89e8a3007bbab Mon Sep 17 00:00:00 2001
From: saurabh-dev-vns <saurabhsahani0001@gmail.com>
Date: Fri, 11 Oct 2024 17:13:58 +0530
Subject: [PATCH] Added NotFound Page

---
 client/src/App.jsx                |  4 ++++
 client/src/component/NotFound.jsx | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 client/src/component/NotFound.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 9549a86..1b93f97 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -27,6 +27,7 @@ import { useAtom } from 'jotai';
 import { modeAtom } from './atom/Atom';
 import ForgotPassword from './component/forgotpass';
 import VerifyEmail from './component/Verify';
+import NotFound from './component/NotFound';
 // Main Layout Component
 const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
   const location = useLocation(); // Use location inside Router
@@ -123,7 +124,10 @@ function App() {
                 <Route exact path="/privacypolicy" element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path="/termofuse" element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path="/verify/:token" element={<VerifyEmail/>} />
+                {/* 404 Route */}
+                <Route exact path="*" element={<NotFound/>} /> 
               </Routes>
+                
             </Layout>
           </Router>
         </ProfileState>
diff --git a/client/src/component/NotFound.jsx b/client/src/component/NotFound.jsx
new file mode 100644
index 0000000..1df6141
--- /dev/null
+++ b/client/src/component/NotFound.jsx
@@ -0,0 +1,23 @@
+// src/components/NotFound.jsx
+
+import React from 'react';
+
+const NotFound = () => {
+  return (
+    <div className="flex flex-col items-center lg:top-8 lg:relative m-2 justify-center min-h-screen bg-white text-center">
+      <h1 className="text-6xl font-bold text-gray-800 mb-4">404</h1>
+      <p className="text-xl text-gray-600 mb-8">Oops! Page Not Found</p>
+      <p className="text-md text-gray-500 mb-4">
+        The page you are looking for might have been removed or is temporarily unavailable.
+      </p>
+      <a
+        href="/"
+        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition duration-300"
+      >
+        Go to Homepage
+      </a>
+    </div>
+  );
+};
+
+export default NotFound;