fix: updated not found page

plugins/docusaurus-tailwindcss-loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "docusaurus-tailwindcss-loader",
+  "version": "1.0.0",
+  "description": "A Docusaurus plugin to load TailwindCSS",
+  "main": "index.js",
+  "peerDependencies": {
+    "postcss-import": "^14.0.2",
+    "tailwindcss": "^3.0.1",
+    "postcss-preset-env": "^7.4.1"
+  }
+}

src/components/NotFoundPage.js

@@ -0,0 +1,38 @@
+import React from "react";
+import error from "/static/img/error404.png";
+
+const NotFoundPage = () => {
+  return (
+    // `notfound-wrapper` ensures the page takes up enough vertical space
+    // so the footer (and social icons) remain in place and are not pushed down.
+    <main className="notfound-wrapper margin-vert--xl container">
+      <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,19 +1,111 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
+import {translate} from "@docusaurus/Translate";
+import Link from "@docusaurus/Link";
 import {PageMetadata} from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+export default function NotFound() {
+  const [requestedUrl, setRequestedUrl] = useState("");
 
-export default function Index() {
   useEffect(() => {
-    window.location.href = "/docs/";
-  }, 2000);
-  [];
+    // capture the full URL client-side and trigger a redirect after 2s
+    if (typeof window !== "undefined") {
+      setRequestedUrl(window.location.href);
+      const id = setTimeout(() => {
+        window.location.href = "/docs/";
+      }, 2000);
+      return () => clearTimeout(id);
+    }
+    return undefined;
+  }, []);
 
   return (
     <>
-      <PageMetadata title="Redirecting..." />
-      <main className="margin-vert--xl container">
-        <div className="row">
-          <div className="col col--6 col--offset-3">
-            <h1 className="hero__title">Redirecting to home page...</h1>
+      <PageMetadata title="Page Not Found" />
+      <main
+        style={{
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          padding: "20px 0",
+        }}
+      >
+        <div className="container">
+          <div className="row">
+            <div className="col col--6 col--offset-3 text-center">
+              <div
+                style={{
+                  maxHeight: "100vh",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1rem",
+                }}
+              >
+                <img
+                  src={require("@site/static/img/error404.png").default}
+                  alt={translate({message: "404 - Page Not Found"})}
+                  style={{
+                    width: "380px",
+                    maxWidth: "100%",
+                    height: "auto",
+                    display: "block",
+                    margin: "0 auto",
+                  }}
+                />
+
+                <h1
+                  className="hero__title"
+                  style={{
+                    color: "var(--ifm-color-primary)",
+                    margin: "0.5rem 0",
+                    fontSize: "2rem",
+                  }}
+                >
+                  404: Page Not Found
+                </h1>
+
+                <p
+                  style={{
+                    color: "var(--ifm-color-emphasis-700)",
+                    margin: "0.5rem 0",
+                  }}
+                >
+                  We could not find what you were looking for.
+                  <br />
+                  The page you requested may have been moved or deleted.
+                </p>
+
+                {requestedUrl && (
+                  <p
+                    style={{
+                      color: "var(--ifm-color-emphasis-600)",
+                      margin: "0.25rem 0",
+                      fontSize: "0.9rem",
+                    }}
+                  >
+                    Requested URL: <code>{requestedUrl}</code>
+                  </p>
+                )}
+
+                <p
+                  style={{
+                    color: "var(--ifm-color-primary)",
+                    margin: "0.25rem 0",
+                    fontSize: "0.9rem",
+                  }}
+                >
+                  Redirecting to documentation...
+                </p>
+
+                <div style={{marginTop: "0.5rem"}}>
+                  <Link to="/docs/" className="button button--primary">
+                    Go to Documentation
+                  </Link>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </main>

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

@@ -0,0 +1,34 @@
+/* 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;
+  }
+}