From 5644ec418bafe414e8ba06bc8a88cc221fe965b9 Mon Sep 17 00:00:00 2001
From: Pratibha666 <pratibha.yadav1128@gmail.com>
Date: Mon, 13 Jan 2025 20:32:35 +0530
Subject: [PATCH] hover effect on social media icons

---
 package.json            |  5 -----
 src/componets/footer.js | 24 ++++++++++++++++++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a90c085..6ec8c5a 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
-
-
     "@dotlottie/react-player": "^1.6.19",
-
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@eslint/config-array": "^0.19.1",
@@ -36,9 +33,7 @@
     "glob": "^11.0.0",
     "gsap": "^3.12.5",
     "lottie-react": "^2.4.0",
-
     "openai": "^4.78.0",
-
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-locomotive-scroll": "^0.2.2",
diff --git a/src/componets/footer.js b/src/componets/footer.js
index f028651..2f534d9 100644
--- a/src/componets/footer.js
+++ b/src/componets/footer.js
@@ -95,22 +95,38 @@ const SocialIcons = styled.div`
 
 const SocialIcon = styled(motion.a)`
   color: #fffbeb;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   text-decoration: none;
   padding: 0.5rem;
   border-radius: 50%;
-  transition: color 0.3s ease;
+  transition: color 0.3s ease, transform 0.3s ease;
 
   &:hover {
-    color: #fbbf24;
     transform: scale(1.2);
   }
 
+  &[href*="facebook.com"]:hover {
+    color: #3b5998; /* Facebook Blue */
+  }
+
+  &[href*="twitter.com"]:hover {
+    color: #1da1f2; /* Twitter Blue */
+  }
+
+  &[href*="instagram.com"]:hover {
+    color: #e4405f; /* Instagram Pink */
+  }
+
+  &[href*="linkedin.com"]:hover {
+    color: #0077b5; /* LinkedIn Blue */
+  }
+
   @media (max-width: 768px) {
     font-size: 1.3rem;
   }
 `;
 
+
 function Footer() {
   return (
     <FooterContainer>
@@ -135,7 +151,7 @@ function Footer() {
             aria-label="Twitter"
             role="link"
           >
-            <i className="fa-brands fa-x-twitter"></i> {/* Updated Twitter icon */}
+            <i className="fab fa-twitter"></i> {/* Updated Twitter icon */}
           </SocialIcon>
           <SocialIcon
             href="https://instagram.com"