Merge pull request #52 from SatyaJaiss/main

Enhanced the UI of the footer
Vin205 · Oct 5, 2024 · a6187a2 · a6187a2
2 parents 4666db0 + 849b94f
commit a6187a2
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-redux": "^9.1.2",
     "react-responsive-carousel": "^3.2.23",

diff --git a/src/Footer.js b/src/Footer.js
@@ -1,27 +1,33 @@
 import React from 'react';
 import './footer.css';
+import { FaInstagram, FaLinkedin, FaTwitter, FaGithub } from 'react-icons/fa';
 
 function Footer() {
   return (
     <footer>
       <div className="footer-content">
-        <h3 className="footer-title">Ready to Elevate Your Future?</h3>
-        <p className="footer-description">
-          Dive into our resources for education, career opportunities, and financial assistance. Unlock your potential with us!
-        </p>
-        <div className="footer-buttons">
-          <button className="btn btn-light" id="explore-education">Explore Education</button>
-          <button className="btn btn-light">Start Your Career</button>
-          <button className="btn btn-light">Learn About Grants</button>
+        <div className="footer-main">
+          <h3 className="footer-title">Ready to Elevate Your Future?</h3>
+          <p className="footer-description">
+            Dive into our resources for education, career opportunities, and financial assistance. Unlock your potential with us!
+          </p>
+          <div className="footer-buttons">
+            <button className="btn btn-light" id="explore-education">Explore Education</button>
+            <button className="btn btn-light">Start Your Career</button>
+            <button className="btn btn-light">Learn About Grants</button>
+          </div>
+        </div>
+        <div className="footer-socials">
+          <h4>Socials</h4>
+          <div className="social-icons">
+            <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer"><FaInstagram /></a>
+            <a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer"><FaLinkedin /></a>
+            <a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer"><FaTwitter /></a>
+            <a href="https://www.github.com" target="_blank" rel="noopener noreferrer"><FaGithub /></a>
+          </div>
         </div>
       </div>
       <hr />
-      <div className="social-links">
-        <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer">Instagram</a>
-        <a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a>
-        <a href="https://www.twitter.com" target="_blank" rel="noopener noreferrer">Twitter</a>
-        <a href="https://www.github.com" target="_blank" rel="noopener noreferrer">GitHub</a>
-      </div>
       <p className="copyright">&copy; 2024 Edu@enyanjyoti. All rights reserved.</p>
     </footer>
   );

diff --git a/src/footer.css b/src/footer.css
@@ -5,19 +5,147 @@ footer {
   padding: 60px 80px;
   border-top: 5px solid #1565C0;
   text-align: left;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(-45deg, #2B4B77, #3D6DA3, #1565C0, #4A73B5);
+  background-size: 400% 400%;
+  animation: gradientBG 5s ease-in-out infinite;
+}
+
+/* Add a subtle background pattern */
+footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(30deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(150deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(30deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3),
+                    linear-gradient(150deg, #3D6DA3 12%, transparent 12.5%, transparent 87%, #3D6DA3 87.5%, #3D6DA3);
+  background-size: 80px 140px;
+  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
+  opacity: 0.1;
+  z-index: 0;
 }
 
 .footer-content {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: flex-start;
+  gap: 40px;
+  position: relative;
+  z-index: 1;
+}
+
+.footer-main {
+  flex: 1;
+}
+
+.footer-socials {
+  text-align: right;
+}
+
+.footer-socials h4 {
+  font-size: 28px; /* Increased from 24px */
+  margin-bottom: 20px; /* Slightly increased from 15px */
+  font-weight: 600; /* Added for emphasis */
+  color: #ffffff; /* Ensuring high contrast */
+  text-transform: uppercase; /* Optional: adds more emphasis */
+  letter-spacing: 1px; /* Optional: improves readability for uppercase text */
+  animation: float 3s ease-in-out infinite;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: flex-end;
   gap: 20px;
 }
 
+.social-icons a {
+  color: #e0e7ff;
+  font-size: 24px;
+  transition: color 0.3s ease, transform 0.3s ease;
+  display: inline-block;
+  position: relative;
+}
+
+.social-icons a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: #FFD700;
+  visibility: hidden;
+  transform: scaleX(0);
+  transition: all 0.3s ease-in-out;
+}
+
+.social-icons a:hover::after {
+  visibility: visible;
+  transform: scaleX(1);
+}
+
+.social-icons a:hover {
+  color: #ffffff;
+  transform: scale(1.2) rotate(5deg);
+}
+
+.copyright {
+  text-align: center;
+  margin-top: 40px;
+  font-size: 14px;
+  color: #b0c7e1;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.copyright::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.5s;
+}
+
+.copyright:hover::before {
+  left: 100%;
+}
+
+.copyright:hover {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.footer-main, .footer-socials {
+  animation: fadeIn 0.8s ease-out;
+}
+
+.footer-main {
+  animation-delay: 0.2s;
+}
+
+.footer-socials {
+  animation-delay: 0.4s;
+}
+
 .footer-title {
   font-size: 32px; /* Increased font size for better visibility */
   font-weight: 700;
   margin-bottom: 5px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .footer-description {
@@ -43,22 +171,48 @@ footer {
   font-size: 16px;
   font-weight: 600;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for a modern look */
-  transition: transform 0.3s ease, background 0.3s ease; /* Smooth transition */
+  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-.btn-light {
-  background-color: #5678B3; /* Lighter button style */
-  color: #ffffff;
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: all 0.6s;
+}
+
+.btn:hover::before {
+  left: 100%;
 }
 
 .btn:hover {
   background-color: #4A73B5; /* Darker shade on hover */
   transform: translateY(-3px); /* Lift effect */
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+  color: #FFD700; /* Gold color on hover */
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+}
+
+.btn-light {
+  background-color: #5678B3; /* Lighter button style */
+  color: #ffffff;
 }
 
 hr {
   margin: 30px 0;
-  border-color: #b0c7e1; /* Subtle separator */
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, #b0c7e1, transparent);
 }
 
 .social-links {
@@ -80,8 +234,14 @@ hr {
   text-decoration: underline;
 }
 
-.copyright {
-  margin-top: 40px;
-  font-size: 14px;
-  color: #b0c7e1; /* Light gray for muted text */
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
 }