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

src/components/Navbar.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Button } from './ui/button';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Menu, X } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,6 +13,7 @@ import {
 const Navbar = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // LOAF logo (local)
   const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
@@ -24,8 +25,8 @@ const Navbar = () => {
 
   return (
     <>
-      {/* Top Header - Member Actions */}
+      {/* Top Header - Member Actions (Desktop Only) */}
-      <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">
+      <header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
         {user && (
           <span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Welcome, {user.first_name}
@@ -65,7 +66,9 @@ const Navbar = () => {
         <Link to="/dashboard">
           <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>
-        <nav className="flex gap-6 sm:gap-8 md:gap-10 items-center">
+
+        {/* Desktop Navigation */}
+        <nav className="hidden lg:flex gap-6 sm:gap-8 md:gap-10 items-center">
           <Link
             to="/"
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
@@ -154,7 +157,211 @@ const Navbar = () => {
             Profile
           </Link>
         </nav>
+
+        {/* Mobile Hamburger Button */}
+        <button
+          onClick={() => setIsMobileMenuOpen(true)}
+          className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+          aria-label="Open menu"
+        >
+          <Menu className="h-6 w-6" />
+        </button>
       </header>
+
+      {/* Mobile Menu Drawer */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setIsMobileMenuOpen(false)}
+          />
+
+          {/* Drawer */}
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[#664fa3] to-[#48286e] shadow-2xl flex flex-col">
+            {/* Header */}
+            <div className="flex items-center justify-between p-6 border-b border-white/20">
+              <div className="flex items-center gap-3">
+                <img src={loafLogo} alt="LOAF" className="h-10 w-10 object-contain" />
+                <span className="text-white font-semibold text-lg" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  LOAF
+                </span>
+              </div>
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+                aria-label="Close menu"
+              >
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+
+            {/* User Info */}
+            {user && (
+              <div className="px-6 py-4 border-b border-white/20">
+                <p className="text-white text-sm opacity-90" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  Welcome,
+                </p>
+                <p className="text-white font-semibold text-base" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  {user.first_name} {user.last_name}
+                </p>
+              </div>
+            )}
+
+            {/* Navigation Links */}
+            <nav className="flex-1 overflow-y-auto py-6 px-4">
+              <div className="space-y-2">
+                <Link
+                  to="/"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Home
+                </Link>
+
+                {/* About Us Section */}
+                <div className="space-y-1">
+                  <p className="px-4 py-2 text-white/70 text-sm font-semibold uppercase tracking-wider" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    About Us
+                  </p>
+                  <Link
+                    to="/about/history"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    style={{ fontFamily: "'Poppins', sans-serif" }}
+                  >
+                    History
+                  </Link>
+                  <Link
+                    to="/about/mission-values"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    style={{ fontFamily: "'Poppins', sans-serif" }}
+                  >
+                    Mission and Values
+                  </Link>
+                  <Link
+                    to="/about/board"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    style={{ fontFamily: "'Poppins', sans-serif" }}
+                  >
+                    Board of Directors
+                  </Link>
+                </div>
+
+                <Link
+                  to="/dashboard"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Dashboard
+                </Link>
+
+                <Link
+                  to="/events"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  data-testid="mobile-events-nav-button"
+                >
+                  Events
+                </Link>
+
+                <Link
+                  to="/members/calendar"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Calendar
+                </Link>
+
+                <Link
+                  to="/members/directory"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Directory
+                </Link>
+
+                <Link
+                  to="/members/gallery"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Gallery
+                </Link>
+
+                <Link
+                  to="/members/newsletters"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                >
+                  Documents
+                </Link>
+
+                <Link
+                  to="/profile"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  data-testid="mobile-profile-nav-button"
+                >
+                  Profile
+                </Link>
+              </div>
+            </nav>
+
+            {/* Footer Actions */}
+            <div className="p-4 border-t border-white/20 space-y-3">
+              {user?.role === 'admin' && (
+                <Link
+                  to="/admin"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  <Button
+                    className="w-full bg-white/20 hover:bg-white/30 text-white rounded-lg"
+                    style={{ fontFamily: "'Poppins', sans-serif" }}
+                  >
+                    Admin Panel
+                  </Button>
+                </Link>
+              )}
+
+              <Link
+                to="/donate"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                <Button
+                  className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
+                  style={{ fontFamily: "'Montserrat', sans-serif" }}
+                >
+                  Donate
+                </Button>
+              </Link>
+
+              <Button
+                onClick={() => {
+                  setIsMobileMenuOpen(false);
+                  handleLogout();
+                }}
+                variant="outline"
+                className="w-full border-2 border-white/30 text-white hover:bg-white/10 rounded-lg"
+                style={{ fontFamily: "'Poppins', sans-serif" }}
+                data-testid="mobile-logout-button"
+              >
+                Logout
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 };

src/components/PublicFooter.js

@@ -8,61 +8,63 @@ const PublicFooter = () => {
   return (
     <>
       {/* 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] px-20 border-t border-[rgba(0,0,0,0.1)] py-4 md:py-[35px] flex items-center justify-center">
-        <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-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-[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" />
           </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 sm:px-4 px-2 flex-col sm:flex-row gap-32 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-col gap-2 w-full sm:w-auto sm:min-w-[163px] hidden sm:flex">
-              <div className="pb-4">
+              <div className="">
-                <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: "'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/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: "'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" }}>Board of Directors</Link>
             </div>
-            <div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
+            <div className="hidden sm:flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
-              <div className="pb-4">
+              <div className="">
-                <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', 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="/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 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  justify-center  w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px] text-center">
-              <div className="pb-4 w-full">
+              <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" }}>
+              <div className=' w-full flex justify-center '>
-                LOAF is supported by<br />the Hollyfield Foundation
+                <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left  w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              </p>
+                  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>

src/components/PublicNavbar.js

@@ -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">
+      <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">
-        <button
+        <div className='flex gap-4 sm:gap-6'>
-          onClick={handleAuthAction}
+
-          className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
+          <button
-          style={{ fontFamily: "'Poppins', sans-serif" }}
+            onClick={handleAuthAction}
-        >
+            className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
-          {user ? 'Logout' : 'Login'}
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-        </button>
-        {!user && (
-          <Link
-            to="/register"
-            className="text-white text-base font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
           >
-            Register
+            {user ? 'Logout' : 'Login'}
-          </Link>
+          </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"
+            className={getDesktopLinkClasses('/#welcome')}
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            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"
+              <button
-                style={{ fontFamily: "'Poppins', sans-serif" }}>
+                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"
+            className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            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"
+              className={getDesktopLinkClasses('/login')}
-              style={{ fontFamily: "'Poppins', sans-serif" }}
+              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"
+            className={getDesktopLinkClasses('/resources')}
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            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"
+            className={getDesktopLinkClasses('/contact-us')}
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            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"
+                className={getMobileLinkClasses('/#welcome')}
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                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"
+                  className={getMobileSubLinkClasses('/about/history')}
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  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"
+                  className={getMobileSubLinkClasses('/about/mission-values')}
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  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"
+                  className={getMobileSubLinkClasses('/about/board')}
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  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"
+                className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                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"
+                  className={getMobileLinkClasses('/login')}
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  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"
+                className={getMobileLinkClasses('/resources')}
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                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"
+                className={getMobileLinkClasses('/contact-us')}
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                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>

src/pages/Landing.js

@@ -14,13 +14,68 @@ const Landing = () => {
   const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
   const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
 
+  const InfoCard = ({ iconSrc, infoTitle, description }) => (
+    <Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-[363px]">
+      <div className="absolute -top-52 flex justify-center w-full">
+        <img
+          src={iconSrc}
+          alt={infoTitle}
+          className="w-full max-w-[330px] h-auto aspect-[10/9] object-contain"
+        />
+      </div>
+      <div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
+        <h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          {infoTitle}
+        </h5>
+        {description}
+      </div>
+    </Card>
+  );
+
+  const infoCardData = [
+    {
+      iconSrc: iconMeetGreet,
+      infoTitle: 'Meet and Greet',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
+          with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
+          take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
+          <a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
+        </p>
+      ),
+    },
+    {
+      iconSrc: iconSocials,
+      infoTitle: 'Socials',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
+          social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
+          games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
+          something for everyone.
+        </p>
+      ),
+    },
+    {
+      iconSrc: iconActive,
+      infoTitle: 'Active LOAFers',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
+          hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
+          through the botanic gardens or the Arboretum.
+        </p>
+      ),
+    },
+  ];
   return (
     <div className="min-h-screen bg-white">
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 md:py-12 lg:py-0 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
+      <section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
-        <div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
+        <div className="py-20 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
           <div className="flex flex-col gap-6 items-center">
             <img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" />
           </div>
@@ -41,7 +96,7 @@ const Landing = () => {
       </section>
 
       {/* About Section */}
-      <section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 pb-0 flex flex-col gap-6 sm:gap-8">
+      <section id="about" className="bg-gradient-to-b pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col gap-6 sm:gap-8">
         <div className="flex flex-col items-center pt-12">
           <h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
@@ -54,55 +109,23 @@ const Landing = () => {
       </section>
 
       {/* Feature Cards Section */}
-      <section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-start justify-center">
+      <section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-stretch justify-center">
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
+        {infoCardData.map((card) => (
-          <img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
+          <InfoCard key={card.infoTitle} {...card} />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
+        ))}
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Meet and Greet
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
-              <a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
-            </p>
-          </div>
-        </Card>
-
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
-          <img src={iconSocials} alt="Socials" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Socials
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past social events include, bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is something for everyone.
-            </p>
-          </div>
-        </Card>
-
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
-          <img src={iconActive} alt="Active LOAFers" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Active LOAFers
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included, hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling through the botanic gardens or the Arboretum.
-            </p>
-          </div>
-        </Card>
       </section>
 
       {/* CTA Section */}
       <section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
         <div className="flex flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
           <Link to="/register" className="w-full sm:w-auto">
-            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors">
+            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-3
+            py-7 text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors ">
               Become a Member
             </Button>
           </Link>
           <div className="flex-1 flex items-center justify-center">
-            <h4 className="text-white text-2xl sm:text-3xl md:text-4xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h4 className="text-white text-3xl  font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
               No matter your age or ability, there is something for everyone.
             </h4>
           </div>