Add 404 Page Component

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>

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;