fixed footer

This commit is contained in:
2025-12-17 13:24:38 -06:00
parent bebbba1ece
commit 4b0517b92c

View File

@@ -8,37 +8,37 @@ const PublicFooter = () => {
return ( return (
<> <>
{/* Main Footer */} {/* Main Footer */}
<footer className="bg-[#644c9f] px-4 sm:px-8 md:px-16 py-12 md:py-20 flex items-center justify-center min-h-[420px]"> <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 flex items-center justify-between">
<div className="border-t border-[rgba(0,0,0,0.1)] py-8 md:py-12 lg:py-20 flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-30 items-center justify-center w-full max-w-7xl"> <div className=" flex flex-col lg:flex-row gap-40 items-center justify-center w-full max-w-7xl">
<div className="w-32 sm:w-40 md:w-48 lg:w-[232px] flex-shrink-0"> <div className="w-32 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" /> <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
</div> </div>
<nav className="flex flex-col sm:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto"> <nav className="flex flex-col sm:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[163px]"> <div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[163px]">
<div className="pb-4"> <div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>About</p> <p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
</div>Imma get out. Yes. Exactly, I think. </div>
<Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>History</Link> <Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif", fontWeight: "500" }}>History</Link>
<Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Mission and Values</Link> <Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
<Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Board of Directors</Link> <Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif", fontWeight: "500" }}>Board of Directors</Link>
</div> </div>
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]"> <div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
<div className="pb-4"> <div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Connect</p> <p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
</div> </div>
<Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Become a Member</Link> <Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
<Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Contact Us</Link> <Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
<Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Resources</Link> <Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
</div> </div>
<div className="flex flex-col gap-2 items-center sm:items-start w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px]"> <div className="flex flex-col gap-2 items-center sm:items-start w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px]">
<div className="pb-4 w-full"> <div className="pb-4 w-full">
<Link to="/donate" className="block"> <Link to="/donate" className="block">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-6 py-3 text-base sm:text-lg font-medium w-full sm:w-[217px]"> <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-16 py-6 text-base sm:text-lg font-medium ">
Donate Donate
</Button> </Button>
</Link> </Link>
</div> </div>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Inter', sans-serif" }}> <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation LOAF is supported by<br />the Hollyfield Foundation
</p> </p>
</div> </div>
@@ -47,22 +47,22 @@ const PublicFooter = () => {
</footer> </footer>
{/* Bottom Footer */} {/* Bottom Footer */}
<footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-16 py-6 md:py-8"> <footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
<nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none"> <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
<Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}> <Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Terms of Service Terms of Service
</Link> </Link>
<Link to="/privacy-policy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}> <Link to="/privacy-policy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Privacy Policy Privacy Policy
</Link> </Link>
</nav> </nav>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Inter', sans-serif" }}> <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
© 2025 LOAF. All Rights Reserved. © 2025 LOAF. All Rights Reserved.
</p> </p>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Inter', sans-serif" }}> <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Designed and Managed by{' '} Designed and Managed by{' '}
<a href="https://konceptkit.com/" className="text-[#d1c3e9] underline hover:text-white transition-colors whitespace-nowrap"> <a href="https://konceptkit.com/" className=" text-white transition-colors whitespace-nowrap">
Koncept Kit Koncept Kit
</a> </a>
</p> </p>