From 2b4f6922854f95805f939f0b4400b0f3323cde01 Mon Sep 17 00:00:00 2001
From: Bhavy_Zala <zalabhavy2004@gmail.com>
Date: Sat, 27 Jul 2024 22:19:14 +0530
Subject: [PATCH] Added Hover Style and tilt on footer

---
 src/components/shared/Footer.jsx | 16 ++++++++++------
 src/css/Footer.css               | 21 +++++++++++++++++++++
 2 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 src/css/Footer.css

diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx
index f922034..46ae43e 100644
--- a/src/components/shared/Footer.jsx
+++ b/src/components/shared/Footer.jsx
@@ -3,6 +3,8 @@ import { NavLink } from "react-router-dom";
 import { Context } from "../../context/Context";
 import Visitors from "./Visitors";
 import { FaGithub, FaHome, FaInfoCircle, FaUser, FaSignInAlt, FaMusic, FaVideo, FaBook, FaNewspaper, FaQuestionCircle, FaRobot } from "react-icons/fa";
+import Tilt from 'react-parallax-tilt';
+import "../../css/Footer.css";
 
 const Footer = () => {
   const { isDarkMode } = useContext(Context);
@@ -13,10 +15,12 @@ const Footer = () => {
         <div className="row">
           <div className="col-md-6 d-flex">
             <figure className="figure">
-              <img src="logo.webp" height="200" alt="Chanakya Image" />
+              <Tilt>
+                <img src="logo.webp" height="200" alt="Chanakya Image" />
+              </Tilt>
               <figcaption className="figure-caption text-center">चाणक्य नीति</figcaption>
             </figure>
-            <div className="my-auto">
+            <div className="my-auto star-btn">
               <a href="https://github.com/Avdhesh-Varshney/chanakya-niti" target="_blank" rel="noopener noreferrer" className="text-white bg-dark p-2 rounded text-decoration-none d-inline-block">
                 <FaGithub className="me-2" /> Star Us ⭐
               </a>
@@ -27,10 +31,10 @@ const Footer = () => {
           <div className="col-md-3 m-auto">
             <h3 className="text-uppercase fw-bold">चाणक्य नीति</h3>
             <ul className="list-unstyled">
-              <li><NavLink to="/" className="text-decoration-none text-dark"><FaHome className="me-2" /> Home</NavLink></li>
-              <li><NavLink to="/about" className="text-decoration-none text-dark"><FaInfoCircle className="me-2" /> About</NavLink></li>
-              <li><NavLink to="/contributor" className="text-decoration-none text-dark"><FaUser className="me-2" /> Contributors</NavLink></li>
-              <li><NavLink to="/auth/login" className="text-decoration-none text-dark"><FaSignInAlt className="me-2" /> Login</NavLink></li>
+              <li className="list"><NavLink to="/" className="text-decoration-none text-dark"><FaHome className="me-2" /> Home</NavLink></li>
+              <li className="list"><NavLink to="/about" className="text-decoration-none text-dark"><FaInfoCircle className="me-2" /> About</NavLink></li>
+              <li className="list"><NavLink to="/contributor" className="text-decoration-none text-dark"><FaUser className="me-2" /> Contributors</NavLink></li>
+              <li className="list"><NavLink to="/auth/login" className="text-decoration-none text-dark"><FaSignInAlt className="me-2" /> Login</NavLink></li>
             </ul>
           </div>
 
diff --git a/src/css/Footer.css b/src/css/Footer.css
new file mode 100644
index 0000000..8001345
--- /dev/null
+++ b/src/css/Footer.css
@@ -0,0 +1,21 @@
+  .star-btn a {
+    transition: transform 0.3s, background-color 0.3s, color 0.3s; 
+  }
+  
+  .star-btn a:hover {
+    transform: scale(1.1); 
+  }
+  
+  .list-unstyled li {
+    margin-bottom: 0.5rem; 
+  }
+  
+  .list-unstyled li a {
+    transition: transform 0.3s ease-in-out; 
+    display: inline-block; 
+  }
+  
+  .list-unstyled li a:hover {
+    transform: scale(1.1); 
+  }
+  
\ No newline at end of file