From eee26cf10824c4b35580fe1b6a54864224b5dfec Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 16 Dec 2025 23:14:20 -0600
Subject: [PATCH] Refactor PublicFooter and PublicNavbar for improved
 responsiveness and styling; add InfoCard component to Landing page for better
 content organization

---
 src/components/PublicFooter.js |  58 ++++++------
 src/components/PublicNavbar.js | 161 ++++++++++++++++++++++-----------
 src/pages/Landing.js           | 105 ++++++++++++---------
 3 files changed, 200 insertions(+), 124 deletions(-)

diff --git a/src/components/PublicFooter.js b/src/components/PublicFooter.js
index 2d9737e..60e9c15 100644
--- a/src/components/PublicFooter.js
+++ b/src/components/PublicFooter.js
@@ -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>
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 7e6606b..a14a78a 100644
--- a/src/components/PublicNavbar.js
+++ b/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">
-        <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>
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 310bcdd..5dc3d8a 100644
--- a/src/pages/Landing.js
+++ b/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">
-        <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">
+      <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-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
@@ -55,54 +110,22 @@ const Landing = () => {
 
       {/* 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-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]">
-          <img src={iconMeetGreet} alt="Meet and Greet" 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" }}>
-              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>
+        {infoCardData.map((card) => (
+          <InfoCard key={card.infoTitle} {...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>