ErrorComponent

eduaid_web/src/App.js

@@ -5,7 +5,7 @@ import Question_Type from "./pages/Question_Type";
 import Text_Input from "./pages/Text_Input";
 import Output from "./pages/Output";
 import Previous from "./pages/Previous";
-
+import Error404 from "./pages/Error404";
 function App() {
   return (
     <BrowserRouter>
@@ -15,6 +15,7 @@ function App() {
         <Route path="/input" element={<Text_Input />} />
         <Route path="/output" element={<Output />} />
         <Route path="/history" element={<Previous />} />
+        <Route path="*" element={<Error404/>} />
       </Routes>
     </BrowserRouter>
   );

eduaid_web/src/pages/Error404.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import "../index.css";
+const Erorr404 = () => {
+    const router = useNavigate()
+    const [countdown, setCountdown] = useState(5);
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setCountdown((prev) => prev - 1);
+        }, 1000);
+
+        const redirect = setTimeout(() => {
+            router('/')
+        }, 5000);
+
+        return () => {
+            clearInterval(timer);
+            clearTimeout(redirect);
+        };
+    }, []);
+
+    return (
+        <div className="min-h-screen flex items-center justify-center  popup bg-[#02000F] bg-custom-gradient">
+            <div className="text-center p-8 bg-gray-600 rounded-lg shadow-xl max-w-md border border-gray-700 hover:bg-gray-900">
+                <h1 className="text-6xl font-bold text-blue-400 mb-4">404</h1>
+                <h2 className="text-2xl font-semibold text-gray-200 mb-4">Page Not Found</h2>
+                <p className="text-gray-300 mb-6">
+                    Oops! The page you're looking for doesn't exist.
+                </p>
+                <p className="text-gray-400 hover:text-blue-400 cursor-pointer" onClick={()=>{
+                    router('/')
+                }}>
+                    Redirecting to home page in <span className="text-blue-400">{countdown}</span> seconds...
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Erorr404;