From f7fef8572a7fc66811f0a81b819b01ad647f0d34 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 17 Dec 2025 17:59:58 -0600
Subject: [PATCH] Landing page fully mobile functional, History page moble and
 History page fixed. Footer and navbar changes

---
 src/components/PublicFooter.js |  26 +-
 src/components/PublicNavbar.js |   2 +-
 src/pages/History.js           | 461 +++++++++++++++++----------------
 src/pages/Landing.js           |  33 +--
 4 files changed, 271 insertions(+), 251 deletions(-)

diff --git a/src/components/PublicFooter.js b/src/components/PublicFooter.js
index 037c9eb..13e8056 100644
--- a/src/components/PublicFooter.js
+++ b/src/components/PublicFooter.js
@@ -8,37 +8,39 @@ const PublicFooter = () => {
   return (
     <>
       {/* Main Footer */}
-      <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 flex items-center justify-between">
-        <div className=" flex flex-col lg:flex-row gap-40 items-center justify-center w-full max-w-7xl">
-          <div className="w-32 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
+      <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
+        <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-40 items-center text-left md:justify-between w-full max-w-7xl mx-auto">
+          <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
             <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
           </div>
-          <nav className="flex flex-col sm:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
-            <div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[163px]">
-              <div className="pb-4">
+          <nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 md:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
+
+            <div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto  sm:min-w-[163px]">
+              <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
               </div>
               <Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
               <Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
               <Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
             </div>
-            <div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
-              <div className="pb-4">
+            <div className="hidden md:flex flex-col gap-2 items-start text-left  w-full sm:w-auto sm:min-w-[148px]">
+              <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
               </div>
               <Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
               <Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
               <Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
             </div>
-            <div className="flex flex-col gap-2 items-center sm:items-start w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px]">
-              <div className="pb-4 w-full">
+
+            <div className="flex flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
+              <div className="pb-4 w-full flex justify-center sm:justify-start md:justify-center lg:justify-start">
                 <Link to="/donate" className="block">
-                  <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-16 py-6 text-base sm:text-lg font-medium ">
+                  <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                     Donate
                   </Button>
                 </Link>
               </div>
-              <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF is supported by<br />the Hollyfield Foundation
               </p>
             </div>
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index a14a78a..4c81289 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -114,7 +114,7 @@ const PublicNavbar = () => {
           className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
           aria-label="Open menu"
         >
-          <Menu className="h-6 w-6" />
+          <Menu className="size-14" />
         </button>
 
         {/* Desktop Navigation */}
diff --git a/src/pages/History.js b/src/pages/History.js
index c1c3bc3..c1ab273 100644
--- a/src/pages/History.js
+++ b/src/pages/History.js
@@ -4,6 +4,35 @@ import PublicFooter from '../components/PublicFooter';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { Pen } from 'lucide-react';
+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">
+        {children}
+      </Card>
+    </div>
+    {arrow && (<div className="flex text-2xl my-5 justify-center">
+      <LuArrowDown />
+    </div>)}
+    {!arrow && (
+      <div className="mb-12"></div>
+    )}
+  </section>
+);
+
+const Title = ({ children }) => (
+  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+    {children}
+  </h2>
+);
+
+const Paragragh = ({ children }) => (
+  <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+    {children}
+  </p>
+);
 
 const History = () => {
   const ardenCharlotteImg = `${process.env.PUBLIC_URL}/history-arden-charlotte.png`;
@@ -12,21 +41,22 @@ const History = () => {
   const part3Img = `${process.env.PUBLIC_URL}/history-part3.png`;
   const part7Img = `${process.env.PUBLIC_URL}/history-part7.png`;
 
+
   return (
     <div className="min-h-screen bg-white">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
+      <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-5xl mx-auto text-center">
+          <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"
               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-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 By Arden Eversmeyer
               </p>
             </div>
@@ -34,232 +64,219 @@ const History = () => {
         </section>
 
         {/* Part 1 - With Image */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <div className="flex flex-col md:flex-row gap-8 items-start">
-                <div className="md:w-1/3">
-                  <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
-                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    Arden Eversmeyer and Charlotte Avery
-                  </p>
-                </div>
-                <div className="md:w-2/3">
-                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Part 1
-                  </h2>
-                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    In 1985 my life partner of 33 years died. For many years we had been part of a large "friendship group" that got together for meals and games. After her death, I found myself on the edge of the group. I felt invisible. The group, composed primarily of couples, didn't know what to do with the single person they had suddenly become.
-                  </p>
-                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    When I moved to Houston in 1992, I again found myself isolated. I had friends, but not being "coupled" in a "couples world" left me on the outside. I was aware of my advancing age – I was 63 at the time - and I was sure that I was the only "old lesbian" in Houston. I checked out the Montrose bars, but to my dismay, found that older lesbians were non-existent; at least they didn't hang out in bars.
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 2 */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                Part 2
-              </h2>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
+        <CardSection>
+          <div className="flex flex-col md:flex-row gap-14 items-center">
+            <div className="md:w-1/3 ">
+              <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
+                className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
+              <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                Arden Eversmeyer and Charlotte Avery
               </p>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
+            </div>
+            <div className="md:w-2/3">
+              <Title>Part 1</Title>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                In 1985 my life partner of 33 years died. For many years we had been part of a large “friendship group”, many of whom had been together longer than we had. But I was the first to lose a partner. After a few months I began to feel the need to explore community. Already retired, the necessity of being closeted was gone. I soon discovered there was no group for mid-life an old lesbians in Houston, and began the search for such groups around the U.S.
               </p>
-              <ul className="list-disc ml-6 mt-4 space-y-2 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <li><strong>AGE OF PARTICIPANTS</strong> - we started off as LOAFF - Lesbians over Age Fifty-Five. The extra F stood for 55, which didn't work very well, so we changed to LOAF and lowered the age to 50.</li>
-                <li><strong>NAME FOR THE GROUP</strong> - LOAFF and then LOAF</li>
-                <li><strong>NUMBER OF EVENTS</strong> - Some of the early years we had events every Saturday afternoon, but as we aged, we cut back to one event each month, then we went to the current format of one event during the week, either afternoon or evening, and a weekend activity.</li>
-                <li><strong>TYPES OF EVENTS</strong> - We've had LOTS of different events. Some of the events we have had include: going to a museum, going to the symphony, seeing a play or movie together, going out to dinner, pot luck dinners, game nights, campfires, hiking, kayaking, and more.</li>
-              </ul>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 3 - With Image */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <div className="flex flex-col md:flex-row gap-8 items-start">
-                <div className="md:w-2/3">
-                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Part 3
-                  </h2>
-                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    We have never had a formal organization with by-laws and officers. We have operated on a consensus basis with the founders making most of the decisions. One of the early decisions we made was that we would not have any kind of formal membership. We wanted to be as inclusive as possible and not create any barriers to participation.
-                  </p>
-                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    We have always been self-supporting. We have never charged dues or asked for donations. Each person pays for their own meal or activity. We have never had a budget or a bank account. We have been able to operate this way because we have always kept our activities simple and inexpensive.
-                  </p>
-                </div>
-                <div className="md:w-1/3">
-                  <img src={part3Img} alt="LOAF Community"
-                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    LOAF Community
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 4 - With Image */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <div className="flex flex-col md:flex-row gap-8 items-start">
-                <div className="md:w-2/3">
-                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Part 4
-                  </h2>
-                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    Over the years, LOAF has been a place where women can be themselves, where they can talk about their lives and their experiences without fear of judgment. We have created a safe space for women to explore their sexuality and their identity as lesbians.
-                  </p>
-                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    Many women have told us that LOAF has been a lifeline for them, especially as they age and find themselves increasingly isolated. LOAF has provided a community and a sense of belonging that has been invaluable.
-                  </p>
-                </div>
-                <div className="md:w-1/3">
-                  <img src={pride1Img} alt="Pride Parade"
-                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-                  <img src={pride2Img} alt="Pride Parade"
-                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    LOAF at Pride
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 5 */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                Part 5
-              </h2>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                LOAF has also been a place where women can give back to the community. Many of our members have been active in various LGBTQ+ organizations and causes. We have marched in Pride parades, volunteered at LGBTQ+ events, and supported various LGBTQ+ initiatives.
+              <p className="text-md mb-4 text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                In April of 1987 I loaded my camper and headed for California. I started in San Diego, and worked my way up the coast to San Francisco finding and visiting senior LGBT groups. I came home with much information, and some suggestions about organizing. One fact that was consistent with all the groups was that if the group was for both men and women - the women dropped out. The recommendation was to start a group for women only.
               </p>
-              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                As we look to the future, we are committed to continuing to provide a welcoming and inclusive space for lesbians over 50. We know that there are many women out there who are looking for a community like ours, and we want to make sure that they know that LOAF is here for them.
-              </p>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 6 */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                Part 6
-              </h2>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                One of the things that has made LOAF special is the diversity of our members. We have women from all walks of life, all backgrounds, all races, all religions, and all political persuasions. What we have in common is our age and our sexual orientation.
-              </p>
-              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                We have learned so much from each other over the years. We have shared our stories, our wisdom, and our experiences. We have laughed together, cried together, and supported each other through good times and bad.
-              </p>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 7 - With Image */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <div className="flex flex-col md:flex-row gap-8 items-start">
-                <div className="md:w-1/3">
-                  <img src={part7Img} alt="LOAF Members"
-                    className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-                  <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    LOAF Members
-                  </p>
-                </div>
-                <div className="md:w-2/3">
-                  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Part 7
-                  </h2>
-                  <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    LOAF has evolved over the years, but our core mission has remained the same: to provide a welcoming and inclusive community for lesbians over 50. We have adapted to the changing times and the changing needs of our members, but we have never lost sight of what makes LOAF special.
-                  </p>
-                  <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    We are proud of what we have accomplished over the years, and we are excited about the future. We know that there will always be a need for a community like LOAF, and we are committed to being here for as long as we are needed.
-                  </p>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </section>
-
-        {/* Part 8 */}
-        <section className="py-12">
-          <div className="max-w-5xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                Part 8
-              </h2>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                As I reflect on the history of LOAF, I am filled with gratitude for all of the women who have been part of this community over the years. Each one of you has made LOAF what it is today, and I am so proud of what we have created together.
-              </p>
-              <p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                LOAF has been a place where we can be ourselves, where we can celebrate who we are, and where we can support each other through all of life's challenges. It has been a place of joy, laughter, friendship, and love.
-              </p>
-              <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                Thank you for being part of LOAF. Thank you for making this community what it is. And thank you for continuing to support LOAF into the future.
-              </p>
-            </Card>
-          </div>
-        </section>
-
-        {/* CTA Section */}
-        <section className="py-12 bg-[#48286e] rounded-2xl">
-          <div className="max-w-5xl mx-auto px-8">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  A Life Remembered
-                </h3>
-                <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
-                </p>
-                <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
-                  <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
-                    View Arden's Tribute
-                  </Button>
-                </a>
-              </Card>
-
-              <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  The Old Lesbian Oral Herstory Project
-                </h3>
-                <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
-                </p>
-                <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
-                  <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
-                    Learn More About OLOHP
-                  </Button>
-                </a>
-              </Card>
+              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
             </div>
           </div>
-        </section>
+        </CardSection>
+        {/* Arrow */}
+
+        {/* Part 2 */}
+        <CardSection >
+          <Title>Part 2</Title>
+          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
+          </p>
+          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
+          </p>
+          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <li>AGE OF PARTICIPANTS - We launched as LOAFF (Lesbians Over Age Fifty-Five) and quickly lowered the entry age to fifty so more women could join.</li>
+            <li>NAME FOR THE GROUP - The acronym began as LOAFF, then we streamlined it to the now-familiar LOAF.</li>
+            <li>AMOUNT OF STRUCTURING - Too many rules can smother a grassroots group, so we kept things loose and let participating women guide direction as needs evolved.</li>
+            <li>SAFE HAVEN FOR MEETINGS - Gatherings had to be in discreet, transit-accessible locations, scheduled during daylight (often Sundays) so closeted or non-driving members could attend comfortably.</li>
+            <li>NEWSLETTER - A monthly mailing went out before each month&apos;s end, highlighting news plus upcoming activities tailored to the community.</li>
+            <li>DUES - Contributions were set at $2 per month per woman, with a standing policy that anyone unable to pay was still welcome—unchanged since inception.</li>
+            <li>CREATIVE PUBLICITY - We produced flyers and placed them with LGBTQ+ organizations, counselors, and other allies, recognizing the women we hoped to reach wouldn&apos;t necessarily be found in bars and would arrive mostly via word of mouth.</li>
+
+          </ul>
+
+        </CardSection>
+
+        {/* Part 3 - With Image */}
+        <CardSection >
+          <div className="flex gap-14 flex-col min-w-2xl md:flex-row justify-center items-center">
+            <div className="">
+              <img src={part3Img} alt="LOAF Community"
+                className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
+
+            </div>
+            <div className="">
+              <Title>Part 3</Title>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                The first meeting of LOAF was the third Sunday of October 1987 at Womynspace. There were six women besides myself at that first meeting. attending were Betty Rudnick, Billie Carter, Josephine Jones, Sylvia Porter, Marjorie Fulp, and Charlotte Avery. Of those six women, only Sylvia Porter and Charlotte Avery are still alive.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                Much that we discussed that day is still the heart of the group today - decisions by consensus at monthly meetings and activities governed by needs and wishes of participating women. It was soon decided to make the age requirement for membership age 50, and we became LOAF.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                In 1989 member Jo Stewart, social worker at Methodist Hospital, started urging LOAF to incorporate as a non-profit. The work began in 1990 with Moore & Hunt (Debbie Hunt) as our Corporate Attorneys. Jo died of cancer in 1990. The work for application of our 501(c)3 was done by Floi Ewing, Arden&apos;s sister, and our non-profit status was granted in January 1991. Loaf incorporated as a social networking and support group without a membership roll to protect the anonymity of the women in LOAF.
+              </p>
+            </div>
+          </div>
+
+        </CardSection>
+
+        {/* Part 4 */}
+        <CardSection>
+          <div className=" ">
+            <Title>Part 4</Title>
+            <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              Third Sunday meeting places have changed over the years. We moved from Womynspace to Autrey House near Rice University. We were there from November 1987 until May 1990 when the new Bishop dis-invited all GLBT groups because of homophobia. We spent a couple months at Montrose Counseling Center (on Lovett), and then moved to the Metropolitan Multi- Service Center on W. Gray. We met there from August 1990 until January 1993. We left because the city started closing the centers on Sunday, and we were not willing to change our meeting day. From February through June we met at Inklings Book Store . In July we started our long occupancy with Houston Mission Church, and met there until the church dissolved in April 2001. We then met at the Hollyfield Center for seven months. From there we went to the GLBT Community Center on Hawthorne where we stayed until July 2003. Attendance was dropping off, and some of the women were not comfortable in a gay identified place. So Third Sunday Meetings moved to Charlotte and Arden&apos;s home - and we met there from August 2003 until April 2011. Membership had grown until the meetings had reached critical mass and parking was a problem. So a team of board members started researching for a new home. And on the third Sunday of May 2011 LOAF started meeting at the Montrose Counseling Center. A new era had started.
+            </p>
+          </div>
+        </CardSection>
+
+        {/* Part 5 - With Image */}
+        <CardSection >
+          <div className="flex gap-8 flex-col lg:flex-row justify-center items-center md:items-start">
+            <div className="flex flex-col gap-8 w-full lg:w-1/2">
+              <img src={pride1Img} alt="Pride Parade"
+                className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
+              <img src={pride2Img} alt="Pride Parade"
+                className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
+            </div>
+
+            <div className="w-full lg:w-1/2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Title>Part 5</Title>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" >
+                The activities of the monthly meetings were decided by the participating women. Rules were very limited, and decisions were made monthly by the women attending. We soon decided to set up a quarterly meeting schedule of pot-luck, speaker, and games. We followed this schedule for at least ten years. New ideas/programs were added as time allowed. Our first speaker was Pokey Anderson, an icon in the GLBT community. She provided much information about our history in Houston. We also decided to ask Deb Hunt to talk to us about documents, and she has done this periodically over the years. She spoke to us well before we decided to incorporate, and she then became our Corporate Attorney.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                In November 1988 we instituted our annual Benevolent Project. We collected items to contribute to Stone Soup Kitchen - a GLBT food pantry. We have done this every year since, and have contributed to groups such as Omega House, The Rose, Battered Women, local lesbian organizations, and some individuals.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                In June 1989 we entered our first Pride Parade. That year we had a convertible and a walking group. Several of the LOAF women participate with other groups in the parade, but we have participated every year since 1989. In 2010 we entered our first float and won a trophy for best representation of the theme.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                All of these decisions were made by the women at the Third Sunday meetings. There have never been rules instigated by the Board of Directors. Because many women don&apos;t want to attend meetings, we changed Third Sunday Meeting to Meet &apos;N Greet several years ago. And that is what we do - take care of any necessary business. But greet newcomers and socialize with our friends.
+              </p>
+            </div>
+          </div>
+
+        </CardSection>
+
+
+        {/* Part 6 */}
+        <CardSection >
+
+          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            Part 6
+          </h2>
+
+          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Socials have always been a big part of the activities for LOAF, and having a social as well as the monthly “Third Sunday” meeting was always on the calendar. Pot lucks topped the list for many years, and they were hosted by women in their homes. That is more difficult now because of the size of the membership. Bev and Sandy have hosted a potluck since 1995, and Eva Geer for several years.
+          </p>
+
+          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            The ice cream socials started in 1989. There are still women who have never cranked or eaten home made ice cream.The “picnic in the park” started in 2000. We have held picnics in a couple State Parks as well as Tom Bass Park in recent years.In 1988 we started attending the TUTS Broadway Musical at Miller Theater in July. We bring a snack supper and a chair and sit on the hill.In 2000 we started eating at Sudie's Catfish House in January. A breather from a busy party season, but a good way to connect.From 1987 to 1994 we had “Second Tuesday Dancing”. First at The Ranch, and then at Ms B&apos;s, it was our way to celebrate birthdays of the month. It was well attended.
+          </p>
+
+          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            From 1989 to 1993 we had a five day Thanksgiving camp-out at a State Park. We roasted turkey and women came for potluck on Thanksgiving Day.We had from 10 to 20 campers, and maybe 25 for dinner.We have had a Christmas party every year since 1987.We have had several Port of Houston tours on the Sam Houston; several Houston Zoo tours; museum tours; and out-of town tours for bluebonnets, miniature horses, and Blue Bell ice cream. And occasionally, for lack of inspiration for an event social, we simply met for lunch at a local restaurant.
+          </p>
+
+          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            LOAF has always been a social group. We have never had support groups or counseling. We are a place to meet other lesbians over fifty, make friends, and have fun.
+          </p>
+
+        </CardSection>
+
+        {/* Part 7 - With Image */}
+        <CardSection>
+
+          <div className="flex flex-col md:flex-row gap-8 items-center">
+            <div className="md:w-1/3">
+              <img src={part7Img} alt="LOAF Members"
+                className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
+
+            </div>
+            <div className="md:w-2/3">
+              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                Part 7
+              </h2>
+              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                The LOAF Library has been an important part of the offering to the women. It started about 1987 when Arden discovered there were books - both fiction and non-fiction - about lesbians. We had one bookstore then -” Wilde &apos;N Stein” - that had a limited selection of lesbian books. Then Arden discovered Womencraft Books, a mail order book company. This began the collection now in the library. Over the years women have donated books. At one time we took duplicate titles to our book stores (Inkilngs and Book Woman) and traded them for titles we didn&apos;t have on the shelf. When the last book store closed we started donating duplicate copies to HATCH, and they are building their library. We have a collection that includes feminist, fantasy/sci-fi, poetry, non-fiction, as well as fiction books. We have a collection of out-of-print periodicals, women&apos;s music, and a video library. We have some beautiful “coffee table” books. We have copies of many of the “pulp” books.
+              </p>
+              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                LOAF also was gifted with a beautiful pianola player piano and about 150 piano rolls. Marie Mariano donated it several years ago. It was in the “Allison” flood, and when it was restored Arden was told it was a beautiful instrument, and quite valuable.
+              </p>
+            </div>
+          </div>
+
+        </CardSection>
+
+        {/* Part 8 */}
+        <CardSection arrow={false} >
+
+          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            Part 8
+          </h2>
+          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            LOAF has become a unique organization in that it is the oldest lesbian organization in Houston, and the only one of its kind in Texas. Over the years there has been quite a bit of exposure and promotion for LOAF.
+          </p>
+          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            For 17 consecutive years, from 1987 to 2004, we had a Texas Lesbian Conference that rotated between Houston, San Antonio, Austin, and Dallas. LOAF presented workshops at five of these conferences. LOAF did a workshop at the National Lesbian Conference in Atlanta in 1991. We did a workshop at at the PFLAG “Healing the Hurt” conference in 1994. We did a program at the Silver Threads conference in St Petersburg, FL. We have done programs at three OLOC conferences. Charlotte and Arden participated in a live TV show about senior GLBT persons in Dallas. We participated in a documentary on GLBT seniors produced in Canada. And another documentary for Golden Threads at Cape Cod. We participated on a panel for the Women’s Studies Department at the University of Houston for their “Living archive” series. We have done several programs for the Women’s Group in Houston, and appeared on the After Hours radio show on KPFT several times.
+          </p>
+          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            All of these appearances are documented and part of the LOAF Archives located at the University of Houston Special Collections Library. One result of these workshops and programs has been the formation of similar groups for mid-life and old lesbians throughout the country. But most important is the connection with other lesbians of our generation and avoiding isolation..
+          </p>
+
+        </CardSection>
+
       </main>
 
+      {/* CTA Section */}
+      <section className="py-20 bg-[#48286e] mx-0">
+        <div className="max-w-7xl mx-auto px-8">
+          <div className="flex gap-8 md:flex-row flex-col">
+            <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
+              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                A Life Remembered
+              </h3>
+              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
+              </p>
+              <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
+                <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                  View Arden's Tribute
+                </Button>
+              </a>
+            </Card>
+
+            <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
+              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                The Old Lesbian Oral Herstory Project
+              </h3>
+              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
+              </p>
+              <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
+                <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                  Learn More About OLOHP
+                </Button>
+              </a>
+            </Card>
+          </div>
+        </div>
+      </section>
+
       <PublicFooter />
     </div>
   );
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 24af122..b7979e7 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -15,12 +15,12 @@ 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]">
-      <div className="absolute -top-52 flex justify-center w-full">
+    <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]">
+      <div className="absolute -top-20 md:-top-40  flex justify-center w-full">
         <img
           src={iconSrc}
           alt={infoTitle}
-          className="w-full max-w-[330px] h-auto aspect-[10/9] object-contain"
+          className=" w-40 md:w-64 lg: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">
@@ -69,15 +69,16 @@ const Landing = () => {
       ),
     },
   ];
+
   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-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="lg:py-20 py-7 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" />
+            <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[334px] h-auto object-contain" />
           </div>
           <div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
             <Link to="/register" className="w-full">
@@ -91,25 +92,25 @@ const Landing = () => {
           </p>
         </div>
         <div className="py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:w-[594px] h-auto">
-          <img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[483px] h-auto object-contain" />
+          <img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[330px] md:max-w-[483px] h-auto object-contain" />
         </div>
       </section>
 
       {/* About Section */}
-      <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" }}>
+      <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
+        <div className="flex flex-col items-center pt-4">
+          <h3 className="text-[#48286e] px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
           </h3>
         </div>
-        <p className="text-[rgba(0,0,0,0.55)] text-lg text-center font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <p className="text-[rgba(0,0,0,0.55)] text-lg lg:text-2xl text-center font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
           LOAF is Houston's social networking group for lesbians who are 50 years of age and older. LOAF hosts three main activities each month, Meet and Greets, Socials, and ActiveLOAFers. TheaterLOAFers coordinate events throughout the year.
         </p>
         <img src={shootingStar} alt="Decorative element" className="w-full h-[197px] object-contain" />
       </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-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 md: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} />
         ))}
@@ -117,15 +118,15 @@ const Landing = () => {
 
       {/* 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-3
-            py-7 text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors ">
+        <div className="flex flex-col-reverse md: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 flex items-center justify-center">
+            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full
+            py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
               Become a Member
             </Button>
           </Link>
           <div className="flex-1 flex items-center justify-center">
-            <h4 className="text-white text-3xl  font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h4 className="text-white  text-3xl px-4 font-bold text-center lg:text-left leading-normal max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
               No matter your age or ability, there is something for everyone.
             </h4>
           </div>