Skip to content

Commit

Permalink
Merge pull request #495 from aslams2020/HoverEffects
Browse files Browse the repository at this point in the history 
✔️Added Interactive Smooth "Hover Effects" to The Links in Footer
  • Loading branch information
@Ultimateutkarsh11
Ultimateutkarsh11 authored Jul 25, 2024
2 parents ef61a97 + 5896a4c commit 3b7cefc
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 22 deletions.
45 changes: 23 additions & 22 deletions frontend/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BsFilePost } from 'react-icons/bs';
import { FaHome, FaGithub, FaEnvelope, FaInfoCircle, FaTools, FaLock, FaFileAlt, FaCookieBite } from 'react-icons/fa';
import logo from "../assets/favicon.png";
import { FaRegHandshake } from "react-icons/fa6";
import "../styles/Footer.css";

const Footer = () => {
const isLoggedIn = useRecoilValue(loggedInState);
Expand All @@ -19,7 +20,7 @@ const Footer = () => {
<div className="flex items-center sm:w-full">
<Link to="/app" className="flex items-center gap-2">
<img src={logo} className="h-8" alt="Styleshare Logo" />
<span className="ml-4 text-2xl font-semibold whitespace-nowrap text-white ">
<span className="ml-4 text-2xl font-semibold whitespace-nowrap text-white">
StyleShare
</span>
</Link>
Expand All @@ -31,67 +32,67 @@ const Footer = () => {
</div>
<div className='md:w-3/4 md:flex'>
<div className='md:w-1/3'>
<p className='text-gray-200 font-bold mt-8 md:mt-0'>Company</p>
<p className='text-gray-200 font-bold mt-8 md:mt-0 section-title'>Company</p>
<ul className='text-gray-300 py-4'>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to='/app/about' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to='/app/about' className='flex items-center gap-2 link-hover'>
<FaInfoCircle />
About Us
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to='/app/contact-us' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to='/app/contact-us' className='flex items-center gap-2 link-hover'>
<FaEnvelope />
Contact Us
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<a href='/admin' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<a href='/admin' className='flex items-center gap-2 link-hover'>
<FaTools />
Admin Dashboard
</a>
</li>
</ul>
</div>
<div className='md:w-1/3'>
<p className='text-gray-200 font-bold'>Quick Links</p>
<p className='text-gray-200 font-bold section-title'>Quick Links</p>
<ul className='text-gray-300 py-4 cursor-pointer'>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link className='flex items-center gap-2' to='/app/posts'>
<li className='py-1 cursor-pointer'>
<Link className='flex items-center gap-2 link-hover' to='/app/posts'>
<BsFilePost size={20} />
Posts
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link className='flex items-center gap-2' to={isLoggedIn ? '/app/profile' : '/app/signin'}>
<li className='py-1 cursor-pointer'>
<Link className='flex items-center gap-2 link-hover' to={isLoggedIn ? '/app/profile' : '/app/signin'}>
<CgProfile size={20} />
Profile
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to="/app/contributors" className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to="/app/contributors" className='flex items-center gap-2 link-hover'>
<FaRegHandshake size={20} /> Our Contributors
</Link>
</li>
</ul>
</div>
<div className='md:w-1/3'>
<p className='text-gray-200 font-bold'>Legal</p>
<p className='text-gray-200 font-bold section-title'>Legal</p>
<ul className='text-gray-300 py-4 cursor-pointer'>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to='/app/policy#privacy-policy' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to='/app/policy#privacy-policy' className='flex items-center gap-2 link-hover'>
<FaLock />
Privacy Policy
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to='/app/policy#terms-and-conditions' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to='/app/policy#terms-and-conditions' className='flex items-center gap-2 link-hover'>
<FaFileAlt />
Terms and Conditions
</Link>
</li>
<li className='py-1 cursor-pointer hover:text-[#2563EB]'>
<Link to='/app/policy#cookie-policy' className='flex items-center gap-2'>
<li className='py-1 cursor-pointer'>
<Link to='/app/policy#cookie-policy' className='flex items-center gap-2 link-hover'>
<FaCookieBite />
Cookie Policy
</Link>
Expand Down
55 changes: 55 additions & 0 deletions frontend/src/styles/Footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@

.link-hover {
position: relative;
color: #ffffff;
text-decoration: none;
transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.link-hover::after {
content: '';
position: absolute;
width: 0;
height: 2px;
display: block;
margin-top: 26px;
background: hsl(221, 83%, 53%);
transition: 0.3s ease;
}

.link-hover:hover {
color: linear-gradient(
135deg,
#fc25f5,
#000b88) !important;
text-shadow: 1px 1px 1px rgb(184, 255, 253), 0 0 0.2em #fc25f5, 0 0 0.2em blue;
transform: scale(1.01);
}

.section-title {
position: relative;
color: #ffffff;
transition: color 0.3s ease-in-out;
}

.section-title::after {
content: '';
position: absolute;
width: 0;
height: 2px;
display: block;
margin-top: 5px;
left: 0;
background: linear-gradient(to right, rgb(199, 217, 255), rgb(5, 26, 101));
transition: width 0.5s ease;
}

.section-title:hover::after {
width:28%;
left: 0;
}

.section-title:hover {
color: #ffffff;
text-shadow: 1px 1px 2px rgba(5, 165, 160, 0.707), 0 0 1em blue, 0 0 0.2em blue;
}

0 comments on commit 3b7cefc

Please sign in to comment.