Merge pull request #39 from TartejBrothers/Updates

Updated: Footer

src/components/footer.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./styles/footer.css";
 import logo from "./assests/icons/logo.png";
 import arrowsubmit from "./assests/icons/arrowsubmit.svg";
@@ -7,7 +7,28 @@ import email from "./assests/icons/email.png";
 import twitter from "./assests/icons/twitter.svg";
 import linkedin from "./assests/icons/linkedin.svg";
 import instagram from "./assests/icons/instagram.svg";
-export default function footer() {
+
+export default function Footer() {
+  useEffect(() => {
+    const listItems = document.querySelectorAll(".footerwork ul li");
+
+    const handleMouseEnter = (item) => {
+      item.style.animation = "none";
+      setTimeout(() => {
+        item.style.animation = "slideUp 1s forwards";
+      }, 0);
+    };
+
+    listItems.forEach((item) => {
+      const enterHandler = () => handleMouseEnter(item);
+      item.addEventListener("mouseenter", enterHandler);
+
+      return () => {
+        item.removeEventListener("mouseenter", enterHandler);
+      };
+    });
+  }, []);
+
   return (
     <div>
       <div className="footerwork" id="contact">

src/components/styles/footer.css

@@ -43,9 +43,9 @@
 }
 .footerworkright {
   display: flex;
-  gap: 20px;
-  width: 60%;
-  justify-content: center;
+
+  width: 70%;
+  justify-content: space-evenly;
   align-items: flex-start;
 }
 .footerworkleft {
@@ -80,6 +80,9 @@
   gap: 10px;
   margin-bottom: 15px;
 }
+.footerwork ul li:hover {
+  animation: slideUp 0.8s forwards;
+}
 .footerwork ul li img {
   width: 18px;
 }