feat:not_found_page

src/layout.tsx

@@ -5,10 +5,12 @@ import { VerifyRoute } from "./components/auth/verifyRoute";
 import { SocketLayout } from "./components/socketLayout";
 import PrivateChat from "./pages/privateChat";
 import GroupChat from "./pages/groupChat";
-import { PrivacyPolicy } from "./pages/privacyPolicy";
 import AiChat from "./pages/aiChat";
 import { PeerLayout } from "./components/peerLayout";
 import { CallLayout } from "./components/callLayout";
+import { lazy } from "react";
+const NotFound = lazy(() => import("./pages/404"));
+const PrivacyPolicy = lazy(() => import("./pages/privacyPolicy"));
 
 const Layout = () => {
   return (
@@ -25,6 +27,7 @@ const Layout = () => {
                   <Route path="/chat/ai" element={<AiChat />} />
                   <Route path="/chat/:id" element={<PrivateChat />} />
                   <Route path="/group/:id" element={<GroupChat />} />
+                  <Route path="*" element={<NotFound />} />
                 </Route>
               </Route>
             </Route>

src/pages/404/index.tsx

@@ -0,0 +1,28 @@
+import { useNavigate } from "react-router-dom";
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-r from-gray-900 via-black to-gray-900 flex items-center justify-center px-4">
+      <div className="max-w-lg w-full text-center">
+        <h1 className="text-9xl font-extrabold text-white tracking-widest">
+          404
+        </h1>
+        <button className="mt-5" onClick={() => navigate("/")}>
+          <span className="relative inline-block text-sm font-medium text-white group active:text-opacity-75">
+            <span className="absolute inset-0 transition-transform translate-x-0.5 translate-y-0.5 bg-white opacity-[0.1] group-hover:translate-y-0 group-hover:translate-x-0"></span>
+            <span className="relative block px-8 py-3 bg-black border border-current">
+              Go Home
+            </span>
+          </span>
+        </button>
+        <p className="text-white text-xl font-medium mt-8">
+          Oops! The page you're looking for doesn't exist.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

src/pages/privacyPolicy/index.tsx

@@ -1,4 +1,4 @@
-export const PrivacyPolicy = () => {
+ const PrivacyPolicy = () => {
   return (
     <div className="p-12 flex flex-col gap-3">
       <h1>Privacy Policy</h1>
@@ -28,3 +28,5 @@ export const PrivacyPolicy = () => {
     </div>
   );
 };
+
+export default PrivacyPolicy;