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

Refactor PublicFooter and PublicNavbar for improved responsiveness and styling; add InfoCard component to Landing page for better content organization

Browse Source
This commit is contained in:
kayela
2025-12-16 23:14:20 -06:00
parent ac850d65d3
commit eee26cf108
3 changed files with 200 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/PublicFooter.js
View File

@@ -8,61 +8,63 @@ const PublicFooter = () => {
return (
<>
{/* Main Footer */}
<footer className="bg-[#644c9f] px-f sm:px-8 border-t border-[rgba(0,0,0,0.1)] py-12 md:py-20 flex items-center justify-center min-h-[420px]">
<div className=" 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="w-32 sm:w-40 md:w-48 lg:w-[232px] flex-shrink-0">
<footer className="bg-[#644c9f] px-20 border-t border-[rgba(0,0,0,0.1)] py-4 md:py-[35px] flex items-center justify-center">
<div className=" flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-30 items-center justify-around w-full max-w-7xl">
<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" />
</div>
<nav className="flex sm:px-4 px-2 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">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>About</p>
<nav className="flex sm:px-4 px-2 flex-col sm:flex-row gap-32 items-start justify-center w-full lg:w-auto">
<div className="flex-col gap-2 w-full sm:w-auto sm:min-w-[163px] hidden sm:flex">
<div className="">
<p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppinss Sans', 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: "'Inter', 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: "'Inter', 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/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">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Connect</p>
<div className="hidden sm:flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
<div className="">
<p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppins Sans', 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: "'Inter', 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="/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="/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 justify-center w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px] text-center">
<div className="pb-4 w-full flex ">
<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 style={{ fontFamily: "'Nunito Sans', sans-serif" }} className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-14 py-6 text-[19px] leading-6 sm:text-lg font-semibold ">
Donate
</Button>
</Link>
</div>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
<div className=' w-full flex justify-center '>
<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>
</div>
</nav>
</div>
</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-16 py-5">
<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">
<a href="/#terms" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
<a href="/#terms" 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
</a>
<a href="/#privacy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
<a href="/#privacy" 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
</a>
</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.
</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{' '}
<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
</a>
</p>

161
src/components/PublicNavbar.js
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Button } from './ui/button';
import { useAuth } from '../context/AuthContext';
import { ChevronDown, Menu, X } from 'lucide-react';
@@ -13,8 +13,23 @@ import {
const PublicNavbar = () => {
const { user, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Helper function to check if a path is active
const isActive = (path) => {
if (path.includes('#')) {
// For hash links like /#welcome
return location.pathname + location.hash === path || location.hash === path.replace('/', '');
}
return location.pathname === path || location.pathname.startsWith(path + '/');
};
// Check if any About Us sub-page is active
const isAboutActive = () => {
return location.pathname.startsWith('/about');
};
// LOAF logo (local)
const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
@@ -27,29 +42,59 @@ const PublicNavbar = () => {
}
};
// Active and inactive link styles for desktop
const getDesktopLinkClasses = (path) => {
const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
if (isActive(path)) {
return `${baseClasses} text-[#ff9e77] hover:text-[#ff8c64] `;
}
return `${baseClasses} text-white hover:opacity-80`;
};
// Active and inactive link styles for mobile
const getMobileLinkClasses = (path) => {
const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-white hover:bg-[#48286e]`;
};
// Active and inactive link styles for mobile sub-items (About Us)
const getMobileSubLinkClasses = (path) => {
const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
};
return (
<>
{/* Top Header - Auth Actions */}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
<button
onClick={handleAuthAction}
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
</button>
{!user && (
<Link
to="/register"
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<div className='flex gap-4 sm:gap-6'>
<button
onClick={handleAuthAction}
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
</Link>
)}
{user ? 'Logout' : 'Login'}
</button>
{!user && (
<Link
to="/register"
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
</Link>
)}
</div>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -58,7 +103,7 @@ const PublicNavbar = () => {
</header>
{/* Main Header - Navigation */}
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<header className="sticky top-0 inset-x-0 z-40 bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<Link to="/">
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
@@ -73,18 +118,21 @@ const PublicNavbar = () => {
</button>
{/* Desktop Navigation */}
<nav className="hidden lg:flex gap-10 items-center">
<nav className="hidden lg:flex gap-6 items-center">
<Link
to="/#welcome"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getDesktopLinkClasses('/#welcome')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Welcome
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
<button
className={`${isAboutActive()
? "text-[#ff9e77] hover:text-[#ff8c64]"
: "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
About Us
<ChevronDown className="h-4 w-4" />
</button>
@@ -92,19 +140,19 @@ const PublicNavbar = () => {
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors
</Link>
</DropdownMenuItem>
@@ -112,31 +160,31 @@ const PublicNavbar = () => {
</DropdownMenu>
<Link
to={user ? "/dashboard" : "/become-a-member"}
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Dashboard' : 'Become a Member'}
</Link>
{!user && (
<Link
to="/login"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getDesktopLinkClasses('/login')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Members Only
</Link>
)}
<Link
to="/resources"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getDesktopLinkClasses('/resources')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Resources
</Link>
<Link
to="/contact-us"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getDesktopLinkClasses('/contact-us')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Contact Us
</Link>
@@ -156,7 +204,7 @@ const PublicNavbar = () => {
<div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
{/* Header */}
<div className="flex justify-between items-center p-6 border-b border-[#48286e]">
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Menu
</span>
<button
@@ -173,38 +221,41 @@ const PublicNavbar = () => {
<Link
to="/#welcome"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileLinkClasses('/#welcome')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Welcome
</Link>
{/* About Us Section */}
<div className="space-y-2">
<p className="text-white text-base font-semibold px-4 py-2" style={{ fontFamily: "'Poppins', sans-serif" }}>
<p
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[#ff9e77]' : 'text-white'}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
About Us
</p>
<Link
to="/about/history"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileSubLinkClasses('/about/history')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
History
</Link>
<Link
to="/about/mission-values"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileSubLinkClasses('/about/mission-values')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Mission and Values
</Link>
<Link
to="/about/board"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileSubLinkClasses('/about/board')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Board of Directors
</Link>
@@ -213,8 +264,8 @@ const PublicNavbar = () => {
<Link
to={user ? "/dashboard" : "/become-a-member"}
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Dashboard' : 'Become a Member'}
</Link>
@@ -223,8 +274,8 @@ const PublicNavbar = () => {
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileLinkClasses('/login')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Members Only
</Link>
@@ -233,8 +284,8 @@ const PublicNavbar = () => {
<Link
to="/resources"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileLinkClasses('/resources')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Resources
</Link>
@@ -242,8 +293,8 @@ const PublicNavbar = () => {
<Link
to="/contact-us"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
className={getMobileLinkClasses('/contact-us')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Contact Us
</Link>
@@ -256,7 +307,7 @@ const PublicNavbar = () => {
setIsMobileMenuOpen(false);
}}
className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
</button>
@@ -265,7 +316,7 @@ const PublicNavbar = () => {
to="/register"
onClick={() => setIsMobileMenuOpen(false)}
className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
</Link>