diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 227a9c5..e7268f9 100644
--- a/src/components/Footer.jsx
+++ b/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() {
Company
- - About Us
- - Careers
- - Contact Us
+ -
+
+ About Us
+
+
+ -
+
+ Contact Us
+
+
Quick Links
- - Home
- - Services
- - Blog
+ -
+
+ Home
+
+
+ -
+
+ Sign Up
+
+
diff --git a/src/styles/components/Footer.css b/src/styles/components/Footer.css
index 031ba65..8aa7133 100644
--- a/src/styles/components/Footer.css
+++ b/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 {