From a9bdd1d0a69c63c3c162d782d91202b9abcd810e Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Thu, 18 Dec 2025 12:02:32 -0600
Subject: [PATCH] Refactor layout and styling for PublicFooter, PublicNavbar,
 History, Landing, and MissionValues components for improved responsiveness
 and visual consistency

---
 src/components/PublicFooter.js |  10 +-
 src/components/PublicNavbar.js | 213 +++++++++++++++++----------------
 src/pages/History.js           |  12 +-
 src/pages/Landing.js           |   4 +-
 src/pages/MissionValues.js     |  20 ++--
 5 files changed, 130 insertions(+), 129 deletions(-)

diff --git a/src/components/PublicFooter.js b/src/components/PublicFooter.js
index 13e8056..9e07bea 100644
--- a/src/components/PublicFooter.js
+++ b/src/components/PublicFooter.js
@@ -9,11 +9,11 @@ const PublicFooter = () => {
     <>
       {/* Main Footer */}
       <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
-        <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-40 items-center text-left md:justify-between w-full max-w-7xl mx-auto">
+        <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
           <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
             <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
           </div>
-          <nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 md:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
+          <nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 sm:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
 
             <div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto  sm:min-w-[163px]">
               <div className="pb-2 lg:pb-4">
@@ -32,15 +32,15 @@ const PublicFooter = () => {
               <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-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
-              <div className="pb-4 w-full flex justify-center sm:justify-start md:justify-center lg:justify-start">
+            <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
+              <div className="pb-4 w-full flex justify-center lg:justify-start">
                 <Link to="/donate" className="block">
                   <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                     Donate
                   </Button>
                 </Link>
               </div>
-              <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF is supported by<br />the Hollyfield Foundation
               </p>
             </div>
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 4c81289..29ab0e1 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -72,125 +72,128 @@ const PublicNavbar = () => {
   return (
     <>
       {/* Top Header - Auth Actions */}
-      <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'>
+      <div className='sticky top-0 inset-x-0 z-40'>
 
+        <header className="bg-gradient-to-r flex-wrap 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" }}
+            >
+              {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-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
+              style={{ fontFamily: "'Montserrat', sans-serif" }}
+            >
+              Donate
+            </Button>
+          </Link>
+        </header>
+
+        {/* Main Header - Navigation */}
+        <header className=" 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>
+
+          {/* Mobile Menu Button */}
           <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" }}
+            onClick={() => setIsMobileMenuOpen(true)}
+            className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+            aria-label="Open menu"
           >
-            {user ? 'Logout' : 'Login'}
+            <Menu className="size-14" />
           </button>
-          {!user && (
+
+          {/* Desktop Navigation */}
+          <nav className="hidden lg:flex gap-6 items-center">
             <Link
-              to="/register"
-              className="text-white text-base font-medium hover:opacity-80 transition-opacity"
+              to="/#welcome"
+              className={getDesktopLinkClasses('/#welcome')}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
-              Register
+              Welcome
             </Link>
-          )}
-        </div>
-        <Link to="/donate">
-          <Button
-            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
-          </Button>
-        </Link>
-      </header>
-
-      {/* Main Header - Navigation */}
-      <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>
-
-        {/* Mobile Menu Button */}
-        <button
-          onClick={() => setIsMobileMenuOpen(true)}
-          className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
-          aria-label="Open menu"
-        >
-          <Menu className="size-14" />
-        </button>
-
-        {/* Desktop Navigation */}
-        <nav className="hidden lg:flex gap-6 items-center">
-          <Link
-            to="/#welcome"
-            className={getDesktopLinkClasses('/#welcome')}
-            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-          >
-            Welcome
-          </Link>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <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>
-            </DropdownMenuTrigger>
-            <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"
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <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" }}>
-                  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: "'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: "'Nunito Sans', sans-serif" }}>
-                  Board of Directors
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Link
-            to={user ? "/dashboard" : "/become-a-member"}
-            className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
-            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-          >
-            {user ? 'Dashboard' : 'Become a Member'}
-          </Link>
-          {!user && (
+                  About Us
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <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: "'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: "'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: "'Nunito Sans', sans-serif" }}>
+                    Board of Directors
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Link
-              to="/login"
-              className={getDesktopLinkClasses('/login')}
+              to={user ? "/dashboard" : "/become-a-member"}
+              className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
-              Members Only
+              {user ? 'Dashboard' : 'Become a Member'}
             </Link>
-          )}
-          <Link
-            to="/resources"
-            className={getDesktopLinkClasses('/resources')}
-            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-          >
-            Resources
-          </Link>
-          <Link
-            to="/contact-us"
-            className={getDesktopLinkClasses('/contact-us')}
-            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-          >
-            Contact Us
-          </Link>
-        </nav>
-      </header>
+            {!user && (
+              <Link
+                to="/login"
+                className={getDesktopLinkClasses('/login')}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                Members Only
+              </Link>
+            )}
+            <Link
+              to="/resources"
+              className={getDesktopLinkClasses('/resources')}
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Resources
+            </Link>
+            <Link
+              to="/contact-us"
+              className={getDesktopLinkClasses('/contact-us')}
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Contact Us
+            </Link>
+          </nav>
+        </header>
 
+      </div>
       {/* Mobile Menu Drawer */}
       {isMobileMenuOpen && (
         <div className="fixed inset-0 z-50 lg:hidden">
diff --git a/src/pages/History.js b/src/pages/History.js
index c1ab273..0af839e 100644
--- a/src/pages/History.js
+++ b/src/pages/History.js
@@ -9,7 +9,7 @@ import { LuArrowDown } from "react-icons/lu";
 const CardSection = ({ children, className = '', arrow = true }) => (
   <section className={` ${className}`}>
     <div className="max-w-7xl mx-auto">
-      <Card className="p-14 bg-white rounded-2xl">
+      <Card className="p-14 bg-white rounded-3xl">
         {children}
       </Card>
     </div>
@@ -49,14 +49,14 @@ const History = () => {
       <main className="bg-gradient-to-br from-[#F9FAFB] to-[#DCD7EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
         {/* Hero Section */}
         <section className="py-12">
-          <div className="max-w-3xl mx-auto flex justify-between ">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4"
+          <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#48286e] "
               style={{ fontFamily: "'Poppins', sans-serif" }}>
               History of LOAF
             </h1>
-            <div className="flex items-center justify-center gap-2 text-[#48286e]">
-              <Pen className="h-5 w-5" />
-              <p className="text-md" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="flex items-center justify-center gap-6 text-[#48286e]">
+              <Pen className="size-7" />
+              <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 By Arden Eversmeyer
               </p>
             </div>
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index b7979e7..427e1cf 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -15,7 +15,7 @@ const Landing = () => {
   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] md:max-w-none lg:max-w-[363px]">
+    <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-none lg:max-w-[363px]">
       <div className="absolute -top-20 md:-top-40  flex justify-center w-full">
         <img
           src={iconSrc}
@@ -110,7 +110,7 @@ const Landing = () => {
       </section>
 
       {/* Feature Cards Section */}
-      <section className="bg-gradient-to-b pb-20 from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col md:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
+      <section className="bg-gradient-to-b pb-20 from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
         {infoCardData.map((card) => (
           <InfoCard key={card.infoTitle} {...card} />
         ))}
diff --git a/src/pages/MissionValues.js b/src/pages/MissionValues.js
index 06ff904..68ecf3d 100644
--- a/src/pages/MissionValues.js
+++ b/src/pages/MissionValues.js
@@ -10,33 +10,31 @@ const MissionValues = () => {
     <div className="min-h-screen bg-white">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-16">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex md:flex-row flex-col gap-10">
             {/* Left Card - Mission (Purple Gradient) */}
-            <Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-8 rounded-2xl shadow-lg">
+            <Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  md:flex-1">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Mission
               </h2>
-              <p className="text-white text-lg text-center leading-relaxed"
+              <p className="text-white text-xl text-center leading-relaxed"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
-                LOAF's mission is to alleviate isolation and enrich the lives of lesbians
-                over the age of 50 by providing several social networking events every month
-                in Houston and the surrounding areas.
+                LOAF’s mission is to alleviate isolation and enrich the lives of lesbians over the age of 50 by providing several social networking events every month in Houston and the surrounding areas.
               </p>
               <div className="flex justify-center mb-6">
-                <img src={loafLogo} alt="LOAF Logo" className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-64 lg:h-64 object-contain" />
+                <img src={loafLogo} alt="LOAF Logo" className="size-32 sm:size-40 md:size-64 lg:size-96 object-contain" />
               </div>
             </Card>
 
             {/* Right Card - Values */}
-            <Card className="bg-white p-8 rounded-2xl shadow-lg">
+            <Card className="bg-white p-16 rounded-2xl shadow-lg md:flex-1 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Values
               </h2>
-              <ol className="list-decimal list-inside space-y-3 text-lg text-[#48286e]"
+              <ol className="list-decimal list-inside space-y-8 text-lg text-[#48286e]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
                 <li>Social support for lesbians.</li>