Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

biswajit-sarkar-007/footer-enhancemnet/issue#90 #179

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+111 −48
Open

biswajit-sarkar-007/footer-enhancemnet/issue#90 #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
424b776
Website Revamp: Enhance footer design with hover effects, animations,…
Oct 14, 2024
107182e
Website Revamp: Enhance footer design with hover effects, animations,…
Oct 15, 2024
f6504e9
enhanced navbar in logo with proper hover and added animation and sty…
Oct 21, 2024
692adad
Merge branch 'main' into biswajit-sarkar-007/footer-enhancement/issue#90
biswajit-sarkar-007 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ input[type="color"]::-webkit-color-swatch {
left: 0;
right: 0;
bottom: 0;
background-color: blue;
transition: background-color 0.4s;
border-radius: 34px;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
Expand All @@ -100,17 +103,55 @@ input[type="color"]::-webkit-color-swatch {
transition: opacity 0.4s ease-in-out;
}



.filter-white {
filter: brightness(0) invert(1);
}

.filter-black {
filter: brightness(0);
}
.hover-underline-animation {
position: relative;
cursor: pointer;
}

.hover-underline-animation::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: currentColor;
transition: width 0.3s ease;
}

.hover-underline-animation:hover::after {
width: 100%;
}

.hover-underline-animation {
position: relative;
cursor: pointer;
}

.hover-underline-animation::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: currentColor;
transition: width 0.3s ease;
}

.hover-underline-animation:hover::after {
width: 100%;
}

.slider.round {
border-radius: 34px; /* Match with the switch */
.slider.round {
border-radius: 34px;
/* Match with the switch */
Expand All @@ -124,6 +165,16 @@ input[type="color"]::-webkit-color-swatch {
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: light-blue;
}

input:checked + .slider:before {
transform: translateX(26px); /* Move circle on toggle */
transition: .4s;
border-radius: 50%;
}
Expand Down
104 changes: 58 additions & 46 deletions components/ui/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,102 +8,114 @@ import { LuBookMinus } from 'react-icons/lu';
import { GrBusinessService } from "react-icons/gr";
import { FaBusinessTime } from "react-icons/fa";



const Footer = () => {
return (
<footer className="bg-neutral-900 text-white py-10 px-4 w-full">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h2 className="text-xl font-semibold mb-4">DesignDesk</h2>
<p className="text-gray-400 mb-4">
DesignDesk is a collaborative web application for <span className="hidden md:inline">interface design,</span> <span className="md:hidden">interface</span> design, with real-time collaboration features.
</p>
<div className="flex space-x-4">
<Link href="https://twitter.com/figmak" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white">
<FaSquareXTwitter size={24} />
</div>
</Link>
<Link href="https://www.instagram.com/figma/" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white">
<FaInstagram size={24} />
</div>
</Link>
<Link href="https://www.linkedin.com/company/figma" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white">
<FaLinkedin size={24} />
</div>
</Link>
</div>
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
{/* First Section */}
<div className="flex flex-col">
<h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-purple-500">
DesignDesk
</h2> {/* Added hover scale and color change */}
<p className="text-gray-400 mb-6">
DesignDesk is a collaborative web application for interface design, with real-time collaboration features.
</p>
<div className="flex space-x-6 mt-auto">
<Link href="https://twitter.com/figmak" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
<FaSquareXTwitter size={24} />
</div>
</Link>
<Link href="https://www.instagram.com/figma/" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
<FaInstagram size={24} />
</div>
</Link>
<Link href="https://www.linkedin.com/company/figma" target="_blank" rel="noopener noreferrer">
<div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
<FaLinkedin size={24} />
</div>
</Link>
</div>

</div>

<div>
<h2 className="text-xl font-semibold mb-4">Product</h2>
<ul className="space-y-2">
{/* Second Section */}
<div className="flex flex-col">
<h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-pink-500">
Product
</h2> {/* Added hover scale and color change */}
<ul className="space-y-4">
<li>
<Link href="/features">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<GrBusinessService className="mr-2" size={20} />
Features
<span className="hover-underline-animation">Features</span>
</div>
</Link>
</li>
<li>
<Link href="/pricing">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<GiPriceTag className="mr-2" size={20} />
Pricing
<span className="hover-underline-animation">Pricing</span>
</div>
</Link>
</li>
<li>
<Link href="/community">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<AiOutlineUsergroupAdd className="mr-2" size={20} />
Community
<span className="hover-underline-animation">Community</span>
</div>
</Link>
</li>
<li>
<Link href="/support">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<MdQuestionAnswer className="mr-2" size={20} />
Support
<span className="hover-underline-animation">Support</span>
</div>
</Link>
</li>
</ul>
</div>

<div>
<h2 className="text-xl font-semibold mb-4">Contact</h2>
<ul className="space-y-2">
{/* Third Section */}
<div className="flex flex-col">
<h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-blue-500">
Contact
</h2> {/* Added hover scale and color change */}
<ul className="space-y-4">
<li>
<Link href="/faq">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<MdQuestionAnswer className="mr-2" size={20} />
FAQ
<span className="hover-underline-animation">FAQ</span>
</div>
</Link>
</li>
<li>
<Link href="/contact">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<MdEmail className="mr-2" size={20} />
Contact Us
<span className="hover-underline-animation">Contact Us</span>
</div>
</Link>
</li>
<li>
<Link href="/careers">
<div className="flex items-center text-gray-400 hover:text-white">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<FaBusinessTime className="mr-2" size={20} />
Careers
<span className="hover-underline-animation">Careers</span>
</div>
</Link>
</li>
<li>
<Link href="/blog">
<div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
<LuBookMinus className="mr-2" size={20} />
<span className="hover-underline-animation">Blog</span>
<Link href="/blogs">
<div className="flex items-center text-gray-400 hover:text-white">
<LuBookMinus className="mr-2" size={20} />
Expand Down Expand Up @@ -138,7 +150,7 @@ const Footer = () => {
</div>
</div>


<div className="mt-8 mb-1 border-t border-gray-700 pt-3 text-center text-gray-500">
<div className="mt-4 mb-1 border-t start-0 z-21 border-gray-700 pt-3 text-center text-gray-500">
<div>&copy; {new Date().getFullYear()} DesignDesk. All rights reserved.</div>
</div>
Expand Down
Loading