Adding a not found page

src/App.tsx

@@ -7,17 +7,20 @@ import './index.css';
 import MainRoutes from './containers/Routes';
 import LandingPage from './pages/Home';
 import { TraineesProvider } from './hook/useTraineesData';
+import NotFound from './components/NotFoundPage';
 
 function App() {
   return (
     <div className="min-h-screen">
+
       <TicketsProvider>
         <TraineesProvider>
           <Router>
             <ScrollToTop>
               <Routes>
                 <Route path="/" element={<LandingPage />} />
                 <Route path="/*" element={<MainRoutes />} />
+                <Route path="*" element={<NotFound />} />
               </Routes>
             </ScrollToTop>
           </Router>

src/components/NotFoundPage.tsx

@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound=() => {
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-red-600">404</h1>
+        <p className="text-lg text-gray-700 mt-4">Page not found</p>
+        <Link to="/" className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+          Go Back Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

src/containers/DashRoutes.tsx

@@ -7,6 +7,7 @@ import PrivateRoute from '../utils/PrivateRoute';
 import Square from '../Skeletons/Square';
 import MenuProvider, { MenuContext } from '../hook/menuProvider';
 import CheckRole from '../utils/CheckRoles';
+import NotFound from '../components/NotFoundPage';
 
 const Dashboard = React.lazy(() => import('../pages/Dashboard'));
 const Settings = React.lazy(() => import('../pages/Settings'));
@@ -166,6 +167,7 @@ function DashRoutes() {
             <Route path="/team-cards" element={<ManagersCards />} />
             <Route path="/teams/cards" element={<CoordinatorCards />} />
             <Route path="/ttl-trainees" element={<TtlTraineeDashboard />} />
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </Suspense>
       </main>

src/containers/Routes.tsx

@@ -41,6 +41,7 @@ import ProtectedRoutes from '../ProtectedRoute';
 import RemoveTokenPage from '../utils/RemoveTokenPage';
 import PrivateRoute from '../utils/PrivateRoute'
 import CalendarConfirmation from '../components/CalendarConfirmation';
+import NotFound from '../components/NotFoundPage';
 
 function MainRoutes() {
   return (
@@ -170,7 +171,7 @@ function MainRoutes() {
             }>
             </Route>
           </Route>
-          <Route path="*" element={<Error />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </Suspense>
     </div>