Merge pull request #13 from EdTract/12-issue-in-the-footer

Enhance Footer Links and Styling for Better User Interaction

Author: Programmer-RD-AI

src/components/Footer.jsx

@@ -7,6 +7,7 @@ import {
   FaInstagram,
   FaLinkedinIn,
 } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 export default function Footer() {
   return (
@@ -16,17 +17,31 @@ export default function Footer() {
           <Col md={4}>
             <h5>Company</h5>
             <ul className="list-unstyled">
-              <li>About Us</li>
-              <li>Careers</li>
-              <li>Contact Us</li>
+              <li>
+                <Link to="/about" className="footer-link">
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact" className="footer-link">
+                  Contact Us
+                </Link>
+              </li>
             </ul>
           </Col>
           <Col md={4}>
             <h5>Quick Links</h5>
             <ul className="list-unstyled">
-              <li>Home</li>
-              <li>Services</li>
-              <li>Blog</li>
+              <li>
+                <Link to="/" className="footer-link">
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link to="/signup" className="footer-link">
+                  Sign Up
+                </Link>
+              </li>
             </ul>
           </Col>
           <Col md={4}>

src/styles/components/Footer.css

@@ -7,6 +7,9 @@
 .footer h5 {
     color: #f8f9fa;
     margin-bottom: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
 .footer ul {
@@ -18,6 +21,17 @@
     margin-bottom: 10px;
 }
 
+.footer .footer-link {
+    color: #f8f9fa;
+    text-decoration: none;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.footer .footer-link:hover {
+    color: #007bff;
+    transform: translateX(5px);
+}
+
 .footer .social-icons {
     display: flex;
     justify-content: space-around;
@@ -27,11 +41,12 @@
 .footer .social-icon {
     color: #f8f9fa;
     font-size: 20px;
-    transition: color 0.3s ease;
+    transition: color 0.3s ease, transform 0.3s ease;
 }
 
 .footer .social-icon:hover {
     color: #007bff;
+    transform: scale(1.2);
 }
 
 .footer p {