fix: 404 page and Redirection

Author: Iam-Karan-Suresh

src/components/NotFoundPage.js

@@ -0,0 +1,34 @@
+import React from "react";
+import error from "../../static/img/error404.png";
+
+const NotFoundPage = () => {
+  return (
+    <main className="container margin-vert--xl">
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <div className="text-center">
+            <img
+              src={error}
+              width={300}
+              height={300}
+              alt="404 Error"
+              style={{ margin: '0 auto' }}
+            />
+            <h1 className="hero__title">🐰 Oops! 🐰</h1>
+            <p className="hero__subtitle margin-vert--md">404 - Page Not Found</p>
+            <div className="margin-vert--lg">
+              <div className="loading-dots">
+                <span>Redirecting to documentation</span>
+                <span className="dot">.</span>
+                <span className="dot">.</span>
+                <span className="dot">.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default NotFoundPage;

src/theme/NotFound/Content/index.js

@@ -1,31 +1,27 @@
-import React from "react";
-import {translate} from "@docusaurus/Translate";
-import Link from "@docusaurus/Link";
+import React, { useEffect } from "react";
 import {PageMetadata} from "@docusaurus/theme-common";
+import {useLocation} from '@docusaurus/router';
+import NotFoundPage from "../../../components/NotFoundPage";
 
 export default function NotFound() {
+  const location = useLocation();
+  
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Check if we're already in the /docs path
+      const newPath = location.pathname.startsWith('/docs') 
+        ? '/docs/' 
+        : '/docs' + location.pathname;
+      window.location.href = newPath;
+    }, 1000); // Increased to 1 seconds to match animation
+
+    return () => clearTimeout(timer);
+  }, [location]);
+
   return (
     <>
-      <PageMetadata title="Page Not Found" />
-      <main className="container margin-vert--xl">
-        <div className="row">
-          <div className="col col--6 col--offset-3 text-center">
-            <h1 className="hero__title">404: Page Not Found</h1>
-            <p className="padding-vert--md">
-              We could not find what you were looking for.<br />
-              The page you requested may have been moved or deleted.
-            </p>
-            <div className="margin-vert--lg">
-              <Link to="/docs/" className="button button--primary margin-right--md">
-                Back to Homepage
-              </Link>
-              <Link to="/docs/search" className="button button--secondary">
-                Search Documentation
-              </Link>
-            </div>
-          </div>
-        </div>
-      </main>
+      <PageMetadata title="404: Page Not Found" />
+      <NotFoundPage />
     </>
   );
 }

src/theme/NotFound/Content/styles.module.css

@@ -0,0 +1,28 @@
+/* Loading dots animation */
+.loading-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 1.1rem;
+  color: var(--ifm-color-primary);
+}
+
+.dot {
+  animation: dotPulse 1.5s infinite;
+  opacity: 0;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.5s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 1s;
+}
+
+@keyframes dotPulse {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}