Footer UI Update

src/componets/footer.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { Link } from 'react-router-dom';
+import React from "react";
+import styled from "styled-components";
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
 
-// Styled components for the footer (unchanged)
+// Styled components for the footer
 const FooterContainer = styled.footer`
-  background-color: #78350f;
+  background: linear-gradient(135deg, #5b2c1a, #8e5234);
   color: #fffbeb;
-  padding: 2rem 3rem 2rem;
+  padding: 1.5rem 2rem;
   text-align: center;
   position: relative;
   bottom: 0;
@@ -20,7 +20,7 @@ const FooterContent = styled.div`
   margin: 0 auto;
 
   p {
-    margin: 0.5rem 0;
+    margin: 0.2rem 0;
     font-size: 1rem;
     line-height: 1.5rem;
 
@@ -38,8 +38,8 @@ const FooterContent = styled.div`
 const InfoSection = styled.div`
   display: flex;
   justify-content: space-between;
-  margin-top: 1.3rem;
-  margin-bottom: 1.3rem;
+  margin: 2rem 0;
+  text-align: left;
 
   @media (max-width: 768px) {
     flex-direction: column;
@@ -54,39 +54,29 @@ const InfoColumn = styled.div`
   h3 {
     font-size: 1.2rem;
     margin-bottom: 1rem;
+    color: #ffd6a5;
   }
 
   p,
   a {
     font-size: 0.9rem;
-    color: rgb(255, 255, 255);
+    color: #fffbeb;
     text-decoration: none;
-    display: block;
     margin-bottom: 0.5rem;
+    display: block;
   }
 
   a:hover {
     color: #fbbf24;
-  }
-
-  @media (max-width: 768px) {
-    h3 {
-      font-size: 1.2rem;
-      margin-bottom: 0rem;
-    }
-
-    p {
-      font-size: 1rem;
-      margin: 0rem;
-    }
+    text-decoration: underline;
   }
 `;
 
 const SocialIcons = styled.div`
   display: flex;
   justify-content: center;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 
   @media (max-width: 768px) {
     gap: 1.2rem;
@@ -99,18 +89,25 @@ const SocialIcon = styled(motion.a)`
   text-decoration: none;
   padding: 0.5rem;
   border-radius: 50%;
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
 
   &:hover {
     color: #fbbf24;
-    transform: scale(1.2);
   }
 
   @media (max-width: 768px) {
     font-size: 1.3rem;
   }
 `;
 
+const Divider = styled.hr`
+  border: none;
+  height: 2px;
+  background: #ffd6a5;
+  margin: 2rem auto;
+  width: 80%;
+`;
+
 function Footer() {
   return (
     <FooterContainer>
@@ -123,49 +120,51 @@ function Footer() {
             rel="noopener noreferrer"
             whileHover={{ scale: 1.2 }}
             aria-label="Facebook"
-            role="link"
           >
-            <i className="fab fa-facebook-f"></i>
+            <i className="fab fa-facebook-f"></i> {/* Facebook icon */}
           </SocialIcon>
           <SocialIcon
-            href="https://twitter.com"
+            href="https://linkedin.com"
             target="_blank"
             rel="noopener noreferrer"
             whileHover={{ scale: 1.2 }}
-            aria-label="Twitter"
+            aria-label="LinkedIn"
             role="link"
           >
-            <i className="fa-brands fa-x-twitter"></i> {/* Updated Twitter icon */}
+            <i className="fab fa-linkedin-in"></i> {/* LinkedIn icon */}
           </SocialIcon>
           <SocialIcon
             href="https://instagram.com"
             target="_blank"
             rel="noopener noreferrer"
             whileHover={{ scale: 1.2 }}
             aria-label="Instagram"
-            role="link"
           >
-            <i className="fab fa-instagram"></i>
+            <i className="fab fa-instagram"></i> {/* Instagram icon */}
           </SocialIcon>
           <SocialIcon
-            href="https://linkedin.com"
+            href="https://github.com/Mujtabaa07/coffeeShop"
             target="_blank"
             rel="noopener noreferrer"
             whileHover={{ scale: 1.2 }}
-            aria-label="LinkedIn"
+            aria-label="GitHub"
             role="link"
           >
-            <i className="fab fa-linkedin-in"></i> {/* LinkedIn icon */}
+            <i className="fab fa-github"></i> {/* GitHub icon */}
           </SocialIcon>
         </SocialIcons>
 
+        {/* Divider */}
+        <Divider />
+
         {/* Informational Sections */}
         <InfoSection>
           <InfoColumn>
             <h3>About Us</h3>
             <p>
-              Founded in 2010, MsCafe is dedicated to serving the finest coffee with passion and
-              expertise. We source our beans from sustainable farms across the globe.
+              Founded in 2010, MsCafe is dedicated to serving the finest coffee
+              with passion and expertise. We source our beans from sustainable
+              farms across the globe.
             </p>
           </InfoColumn>
           <InfoColumn>
@@ -176,26 +175,29 @@ function Footer() {
             <Link to="/contact">Contact</Link>
             <Link to="/testimonial">Testimonial</Link>
           </InfoColumn>
-
           <InfoColumn>
             <h3>Contact Us</h3>
             <p>Email: contact@mscafe.com</p>
             <p>Phone: (123) 456-7890</p>
           </InfoColumn>
-
           <InfoColumn>
             <h3>Location</h3>
             <p>123 Coffee St, Bean Town, USA</p>
             <p>
-              <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer">
+              <a
+                href="https://www.google.com/maps"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 View on Map
               </a>
             </p>
           </InfoColumn>
         </InfoSection>
 
+        {/* Footer Text */}
         <p>&copy; {new Date().getFullYear()} MsCafe. All rights reserved.</p>
-        <p>Made with ♥ by Mscoder</p>
+        <p>Made with ♥ by MsCoder</p>
       </FooterContent>
     </FooterContainer>
   );