Merge pull request #88 from divine7022/enhance-footer

Added an Animation to the footer to  enhance UI.

Author: dlebauer

package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@docusaurus/core": "^3.5.2",
     "@docusaurus/preset-classic": "^3.5.2",
+    "@dotlottie/player-component": "^2.7.12",
+    "@lottiefiles/dotlottie-wc": "^0.4.6",
     "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^8.1.0",
     "clsx": "^1.1.1",

src/css/custom.css

@@ -31,6 +31,15 @@ html[data-theme="dark"] {
   border-radius: 15px !important;
 }
 
+html, body {
+  overflow-x: hidden; 
+}
+
+html, body {
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+
 /* Footer */
 
 html[data-theme="dark"] .footer {
@@ -221,3 +230,4 @@ html[data-theme="light"] .footer-logo-text {
   color: rgb(70, 203, 174);
   text-decoration: none !important;
 }
+

src/theme/Footer.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import styles from "./Footer.module.css";
+import FooterLayout from "@theme-original/Footer";
+import { useLocation } from "@docusaurus/router";
+
+const Footer = () => {
+  const location = useLocation();
+  const isHomePage = location.pathname === "/";
+
+  useEffect(() => {
+    import("@dotlottie/player-component");
+  }, []);
+
+  useEffect(() => {
+    const navbar = document.querySelector(".navbar"); 
+    const footer = document.querySelector(".footerContainer");
+
+    if (!navbar || !footer || !isHomePage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          navbar.style.backgroundColor = "#61AE9D"; 
+        } else {
+          navbar.style.backgroundColor = "";
+        }
+      },
+      { threshold: 1 }
+    );
+
+    observer.observe(footer);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div className={`footerContainer ${ isHomePage ? styles.footerContainer : ""}`}>
+      <FooterLayout />
+      {isHomePage && (
+        <div className={styles.lottieContainer}>
+          <dotlottie-player
+            src="https://lottie.host/f466ad48-fde8-452a-aca8-2d153e8969ff/l92UT8AOsP.lottie"
+            background="transparent"
+            speed="1"
+            loop
+            autoplay
+          ></dotlottie-player>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Footer;

src/theme/Footer.module.css

@@ -0,0 +1,22 @@
+
+.lottieContainer {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden !important; 
+}
+
+.lottieContainer dotlottie-player {
+  width: 100vw !important; 
+  height: auto !important; 
+  max-height: 500px !important; 
+}
+
+.footerContainer {
+  --ifm-footer-background-color: #61AE9D;
+}
+
+.footerContainer .footer {
+  --ifm-footer-background-color: #61AE9D; 
+}