added a animation in footer to enhance the ui

Author: divine7022

src/theme/Footer.js

@@ -0,0 +1,24 @@
+import React 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 === "/";
+  return (
+    <div>
+      <FooterLayout />
+      {isHomePage && (
+        <div className={styles.animatedFooterContainer}>
+          <div className={styles.footer_bg}>
+            <div className={styles.footer_bg_one}></div>
+            <div className={styles.footer_bg_two}></div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Footer;

src/theme/Footer.module.css

@@ -0,0 +1,57 @@
+ 
+html, body {
+  overflow-x: hidden;
+}
+
+.animatedFooterContainer {
+  position: relative;
+  margin-top: 0px;
+  padding-top: 50px;
+  
+}
+
+html[data-theme="light"] .animatedFooterContainer {
+background-color: #f5f6f7;
+}
+
+.footer_bg {
+  width: 100%;
+  height: 266px;
+  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") 
+      no-repeat center;
+  background-size: cover;
+}
+
+.footer_bg_one {
+  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0PYPxwT5ifToyP3SNZeQWfJEWrUENYA5IXM6sN5vLwAKvaJS1pQVu8mOFFUa_ET4JuHNTFAxKURFerJYHDUWXLXl1vDofYXuij45JZelYOjEFoCOn7E6Vxu0fwV7ACPzArcno1rYuVxGB7JY6G7__e4_KZW4lTYIaHSLVaVLzklZBLZnQw047oq5-Q/s16000/volks.gif") 
+      no-repeat center;
+  background-size: contain;
+  width: 330px;
+  height: 105px;
+  position: absolute;
+  bottom: 0;
+  animation: carMove 22s linear infinite;
+}
+
+.footer_bg_two {
+  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyLGwEUVwPK6Vi8xXMymsc-ZXVwLWyXhogZxbcXQYSY55REw_0D4VTQnsVzCrL7nsyjd0P7RVOI5NKJbQ75koZIalD8mqbMquP20fL3DxsWngKkOLOzoOf9sMuxlbyfkIBTsDw5WFUj-YJiI50yzgVjF8cZPHhEjkOP_PRTQXDHEq8AyWpBiJdN9SfQA/s16000/cyclist.gif") 
+      no-repeat center;
+  background-size: contain;
+  width: 88px;
+  height: 100px;
+  position: absolute;
+  bottom: 0;
+  animation: cyclistMove 30s linear infinite;
+}
+
+
+@keyframes carMove {
+  0% { left: -25%; }
+  100% { left: 100%; }
+}
+
+@keyframes cyclistMove {
+  0% { left: -25%; }
+  100% { left: 100%; }
+}
+