Skip to content

Redesigned Footer Section for Improved UI, Alignment, and Responsiveness #14

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

Merged
merged 3 commits into from
Aug 3, 2025
Merged

Redesigned Footer Section for Improved UI, Alignment, and Responsiveness #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8f0f91c
Footer added
milan-deori Aug 2, 2025
03c479b
Merge branch 'main' of https://github.com/coder-writes/devTinder-fron…
milan-deori Aug 3, 2025
7dd3348
Resolved merge conflict
milan-deori Aug 3, 2025
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
1 change: 0 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,4 @@
"globals": "^16.2.0",
"vite": "^7.0.0"
}
}
}
187 changes: 123 additions & 64 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,128 @@
import { motion as Motion } from 'framer-motion';
import { FaFacebookF, FaTwitter, FaInstagram, FaLinkedin, FaGithub } from 'react-icons/fa';
import { MdEmail, MdPhone, MdLocationOn } from 'react-icons/md';
import Logo from '../assets/code-svgrepo-com.svg';

const Footer = () => (
<Motion.footer
className="w-full py-2 px-2 sm:py-3 sm:px-4 bg-gradient-to-r from-[#232526] to-[#414345] text-white shadow-inner mt-auto"
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.7, type: 'spring' }}
>
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
<Motion.div
className="flex items-center gap-2"
initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<img
src="https://img.icons8.com/ios-filled/32/ffffff/source-code.png"
alt="DevTinder Logo"
className="w-8 h-8"
/>
<span className="font-semibold text-lg tracking-tight">DevTinder</span>
</Motion.div>
<Motion.div
className="flex flex-wrap gap-3 sm:gap-5 text-xs sm:text-sm justify-center"
initial={{ opacity: 0, x: 30 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3, duration: 0.5 }}
>
<a
href="https://github.com/coder-writes"
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#ff512f] transition-colors duration-200"
>
GitHub
</a>
<a
href="/privacy"
className="hover:text-[#ff512f] transition-colors duration-200"
>
Privacy
</a>
<a
href="/terms"
className="hover:text-[#ff512f] transition-colors duration-200"
>
Terms
</a>
<a
href="/contact"
className="hover:text-[#ff512f] transition-colors duration-200"
>
Contact
</a>
</Motion.div>
</div>
<Motion.div
className="text-center text-[10px] sm:text-xs text-gray-400 mt-2 sm:mt-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 0.5 }}
const Footer = () => {
const currentYear = new Date().getFullYear();

return (
<Motion.footer
className="w-fit py-7 bg-gradient-to-r from-[#232526] to-[#414345] text-white shadow-inner "
initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.7, type: 'spring' }}
>
&copy; {new Date().getFullYear()} DevTinder. Made with <span className="text-[#ff512f]">♥</span> for developers.
</Motion.div>
</Motion.footer>
);
<div className="max-w-fit mx-auto px-25 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-24 text-sm text-center sm:text-left">

{/* Logo & About */}
<div >
<div className="flex items-center justify-center sm:justify-start gap-3 mb-4 ml-3">
<img src={Logo} alt="DevTinder Logo" className="w-12 h-12 object-cover " />
<span className="text-2xl font-extrabold hover:underline transition-all duration-300 cursor-pointer">DevTinder</span>
</div>
<p className="text-gray-300 text-lg">
Connect. Collaborate. Code. Your perfect coding partner awaits.
</p>
</div>

{/* Contact Info */}
<div>
<h3 className=" font-extrabold mb-4 text-2xl hover:underline transition-all duration-300 cursor-pointer">Contact</h3>
<ul className="space-y-3 text-gray-200 text-lg">
<li className="flex items-center justify-center sm:justify-start gap-2">
<MdPhone className="text-[#ff512f]" /> +91 123 456 7890
</li>
<li className="flex items-center justify-center sm:justify-start gap-2 ">
<MdEmail className="text-[#ff512f]" /> devtinder@example.com
</li>
<li className="flex items-center justify-center sm:justify-start gap-2 ">
<MdLocationOn className="text-[#ff512f]" /> India
</li>
</ul>

</div>

{/* Quick Links */}
<div className='text-center sm:text-left'>
<h3 className="text-2xl font-extrabold mb-4 hover:underline transition-all duration-300 cursor-pointer">Quick Links</h3>
<ul className="space-y-3 text-gray-200 text-lg flex flex-col items-center sm:items-start ml-5">
<li>
<a href="/" className="hover:bg-gradient-to-r hover:from-[#ff512f] hover:to-[#dd2476] hover:text-transparent hover:bg-clip-text transition">
Home
</a>
</li>
<li>
<a href="/signup" className="hover:bg-gradient-to-r hover:from-[#ff512f] hover:to-[#dd2476] hover:text-transparent hover:bg-clip-text transition">
Signup
</a>
</li>
<li>
<a href="/login" className="hover:bg-gradient-to-r hover:from-[#ff512f] hover:to-[#dd2476] hover:text-transparent hover:bg-clip-text transition">
Login
</a>
</li>
<li>
<a href="/about" className="hover:bg-gradient-to-r hover:from-[#ff512f] hover:to-[#dd2476] hover:text-transparent hover:bg-clip-text transition">
About Us
</a>
</li>
</ul>

</div>

{/* Newsletter */}
<div className="text-center">
<h3 className="text-2xl font-bold mb-4 text-white ">Subscribe for Updates</h3>

<input
type="email"
placeholder="Enter your email"
className="w-full p-2 rounded-md bg-transparent text-white placeholder-gray-300 border border-white focus:outline-none focus:ring-2 focus:ring-[#ff4d4d] transition duration-200"
/>

<button className="mt-5 w-full bg-gradient-to-r from-[#ff512f] to-[#dd2476] hover:brightness-110 transition-all rounded-md py-2 font-semibold text-lg text-white shadow-md">
Subscribe
</button>

{/* Social Media Icons */}
<div className="flex justify-center gap-5 mt-8 text-white text-2xl">
{[
{ icon: <FaGithub />, label: "GitHub", link: "https://github.com/coder-writes" },
{ icon: <FaFacebookF />, label: "Facebook", link: "#" },
{ icon: <FaTwitter />, label: "Twitter", link: "https://x.com/risshi_codes" },
{ icon: <FaInstagram />, label: "Instagram", link: "#" },
{ icon: <FaLinkedin />, label: "LinkedIn", link: "https://www.linkedin.com/in/rishi-verma-sde/" },
].map((item, index) => (
<a
key={index}
href={item.link}
aria-label={item.label}
className="p-3 border border-white rounded-full transition-all duration-300 hover:text-white hover:bg-gradient-to-r from-[#ff512f] to-[#dd2476] shadow-lg"
>
{item.icon}
</a>
))}
</div>

</div>



</div>

{/* Bottom Area */}
<div className="mt-5 pt-5 border-t-2 border-gray-600 px-6 flex flex-col sm:flex-row justify-center items-center text-lg text-gray-200">
<p className="text-center">
&copy; {currentYear} <span className="font-bold text-white">DevTinder</span>. Made with <span className="text-[#ff512f] text-lg">♥</span> for Developers.
</p>
</div>
<div className="text-center text-gray-300 mt-2">
<p className="text-md">All rights reserved.</p>
</div>
</Motion.footer>
);
};

export default Footer;