feat: fallback pages

client/src/pages/forbiddenPage/ForbiddenPage.tsx

@@ -0,0 +1,18 @@
+import forbiddenImage from "../../assets/images/forbidden.png";
+import { Button } from "../../components/ui/button/Button.tsx";
+import { NavLink } from "react-router-dom";
+
+export const ForbiddenPage = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 h-dvh w-full">
+      <img src={forbiddenImage} alt="forbidden" />
+      <h1 className="text-light-100 text-[25px]">Access Denied</h1>
+      <h3 className="text-[18px] text-gray-400">
+        You do not have permission to visit this page!
+      </h3>
+      <Button as={NavLink} to={"/"} className="mt-6">
+        Go home
+      </Button>
+    </div>
+  );
+};

client/src/pages/notFoundPage/NotFoundPage.tsx

@@ -0,0 +1,19 @@
+import notFound from "../../assets/images/notFound.png";
+import { Button } from "../../components/ui/button/Button.tsx";
+import { NavLink } from "react-router-dom";
+
+export const NotFoundPage = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 h-dvh w-full">
+      <img src={notFound} alt="notFound" />
+      <h1 className="text-light-100 text-[25px]">Something is wrong</h1>
+      <h3 className="text-[18px] text-gray-400">
+        The page you are looking was moved, removed, renamed, or might never
+        exist!
+      </h3>
+      <Button as={NavLink} to={"/"} className="mt-6">
+        Go home
+      </Button>
+    </div>
+  );
+};

client/src/router/router.tsx

@@ -12,11 +12,13 @@ import { RoleIndexRedirect } from "./RoleIndexRedirect.tsx";
 import { teacherPrivateRoutes } from "./routesVariables/teacherPrivateRoutes.tsx";
 import { VideoCallPage } from "../pages/videoCall/VideoCallPage.tsx";
 import { moderatorPrivateRoutes } from "./routesVariables/moderatorPrivateRoutes.tsx";
+import { ForbiddenPage } from "../pages/forbiddenPage/ForbiddenPage.tsx";
+import { NotFoundPage } from "../pages/notFoundPage/NotFoundPage.tsx";
 
 export const router = createBrowserRouter([
   {
     element: <RootLayout />,
-    errorElement: <div>Page not found</div>,
+    errorElement: <NotFoundPage />,
     children: [
       {
         element: <AuthLayout />,
@@ -76,7 +78,7 @@ export const router = createBrowserRouter([
         ),
       },
 
-      { path: "/forbidden", element: <div>403 Forbidden</div> },
+      { path: "/forbidden", element: <ForbiddenPage /> },
     ],
   },
 ]);