andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Landing page fully mobile functional, History page moble and History page fixed. Footer and navbar changes

Browse Source
This commit is contained in:
kayela
2025-12-17 17:59:58 -06:00
parent 23163a7a2b
commit f7fef8572a
4 changed files with 271 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/PublicFooter.js
View File

@@ -8,37 +8,39 @@ const PublicFooter = () => {
return (
<>
{/* Main Footer */}
<footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 flex items-center justify-between">
<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-[180px] flex-shrink-0">
<footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2 lg:px-10 flex items-center justify-between">
<div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-40 items-center text-left md:justify-between w-full max-w-7xl mx-auto">
<div className="w-40 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" />
</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">
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[163px]">
<div className="pb-4">
<nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 md:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
<div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[163px]">
<div className="pb-2 lg:pb-4">
<p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
</div>
<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" }}>History</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: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
</div>
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
<div className="pb-4">
<div className="hidden md:flex flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[148px]">
<div className="pb-2 lg:pb-4">
<p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
</div>
<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: "'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: "'Nunito Sans', sans-serif" }}>Resources</Link>
</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="pb-4 w-full">
<div className="flex flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
<div className="pb-4 w-full flex justify-center sm:justify-start md:justify-center lg:justify-start">
<Link to="/donate" className="block">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-16 py-6 text-base sm:text-lg font-medium ">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
Donate
</Button>
</Link>
</div>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
</div>