Refactor code structure for improved readability and maintainability

Fixed images and styling for Landing page

package.json

@@ -83,6 +83,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@eslint/js": "9.23.0",
+    "@tailwindcss/typography": "^0.5.19",
     "autoprefixer": "^10.4.20",
     "eslint": "9.23.0",
     "eslint-plugin-import": "2.31.0",

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>

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-50'>
 
+        <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">

src/index.css

@@ -1,115 +1,118 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body {
-    margin: 0;
-    font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-        sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family:
-        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 
 @layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 280 47% 27%;
-        --card: 0 0% 100%;
-        --card-foreground: 280 47% 27%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 280 47% 27%;
-        --primary: 280 47% 27%;
-        --primary-foreground: 0 0% 100%;
-        --secondary: 268 33% 89%;
-        --secondary-foreground: 280 47% 27%;
-        --muted: 268 43% 95%;
-        --muted-foreground: 268 35% 47%;
-        --accent: 17 100% 73%;
-        --accent-foreground: 280 47% 27%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 268 33% 89%;
-        --input: 268 33% 89%;
-        --ring: 268 35% 47%;
-        --chart-1: 268 36% 46%;
-        --chart-2: 17 100% 73%;
-        --chart-3: 268 33% 89%;
-        --chart-4: 280 44% 29%;
-        --chart-5: 268 35% 47%;
-        --radius: 0.5rem;
-    }
-    .dark {
-        --background: 0 0% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 0 0% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 0 0% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 0 0% 9%;
-        --secondary: 0 0% 14.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 0 0% 14.9%;
-        --muted-foreground: 0 0% 63.9%;
-        --accent: 0 0% 14.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 14.9%;
-        --input: 0 0% 14.9%;
-        --ring: 0 0% 83.1%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-    }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 280 47% 27%;
+    --card: 0 0% 100%;
+    --card-foreground: 280 47% 27%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 280 47% 27%;
+    --primary: 280 47% 27%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 268 33% 89%;
+    --secondary-foreground: 280 47% 27%;
+    --muted: 268 43% 95%;
+    --muted-foreground: 268 35% 47%;
+    --accent: 17 100% 73%;
+    --accent-foreground: 280 47% 27%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 268 33% 89%;
+    --input: 268 33% 89%;
+    --ring: 268 35% 47%;
+    --chart-1: 268 36% 46%;
+    --chart-2: 17 100% 73%;
+    --chart-3: 268 33% 89%;
+    --chart-4: 280 44% 29%;
+    --chart-5: 268 35% 47%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
-    body {
-        @apply bg-background text-foreground;
-    }
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 @layer base {
-    [data-debug-wrapper="true"] {
-        display: contents !important;
-    }
+  [data-debug-wrapper="true"] {
+    display: contents !important;
+  }
 
-    [data-debug-wrapper="true"] > * {
-        margin-left: inherit;
-        margin-right: inherit;
-        margin-top: inherit;
-        margin-bottom: inherit;
-        padding-left: inherit;
-        padding-right: inherit;
-        padding-top: inherit;
-        padding-bottom: inherit;
-        column-gap: inherit;
-        row-gap: inherit;
-        gap: inherit;
-        border-left-width: inherit;
-        border-right-width: inherit;
-        border-top-width: inherit;
-        border-bottom-width: inherit;
-        border-left-style: inherit;
-        border-right-style: inherit;
-        border-top-style: inherit;
-        border-bottom-style: inherit;
-        border-left-color: inherit;
-        border-right-color: inherit;
-        border-top-color: inherit;
-        border-bottom-color: inherit;
-    }
+  [data-debug-wrapper="true"] > * {
+    margin-left: inherit;
+    margin-right: inherit;
+    margin-top: inherit;
+    margin-bottom: inherit;
+    padding-left: inherit;
+    padding-right: inherit;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    column-gap: inherit;
+    row-gap: inherit;
+    gap: inherit;
+    border-left-width: inherit;
+    border-right-width: inherit;
+    border-top-width: inherit;
+    border-bottom-width: inherit;
+    border-left-style: inherit;
+    border-right-style: inherit;
+    border-top-style: inherit;
+    border-bottom-style: inherit;
+    border-left-color: inherit;
+    border-right-color: inherit;
+    border-top-color: inherit;
+    border-bottom-color: inherit;
+  }
 }

src/pages/BecomeMember.js

@@ -14,22 +14,20 @@ const BecomeMember = () => {
   const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`;
   const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.png`;
 
+  const Arrow = ({ ...props }) => (
+    <div className="flex justify-center mb-2">
+      <ArrowDown className="size-8 text-[#4f378a] font-bold" strokeWidth={2} />
+    </div>
+  );
   return (
     <div className="min-h-screen bg-gray-50 relative">
       <PublicNavbar />
 
-      {/* Decorative shooting star element */}
-      <div className="hidden lg:block absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
-        <img
-          src={imgShootingStar}
-          alt=""
-          className="w-full h-full object-contain"
-        />
-      </div>
+
 
       {/* Hero Section */}
-      <div className="relative bg-gray-50 pt-20 pb-24">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+      <div className="relative bg-gray-50 pt-20 px-6 pb-16">
+        <div className="max-w-7xl mx-auto text-center">
           <h1
             className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -46,7 +44,7 @@ const BecomeMember = () => {
       </div>
 
       {/* Annual Administrative Fees Section */}
-      <div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
+      <div className="max-w-[1340px] z-10 mx-auto px-6 mb-12 sm:mb-16">
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
           <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
             <img
@@ -73,158 +71,159 @@ const BecomeMember = () => {
       </div>
 
       {/* Membership Process Section */}
-      <div className="relative bg-gray-50 py-16">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] ">
+        {/* Decorative shooting star element */}
+        <div className="hidden lg:block absolute left-0 top-64  w-[195px] h-[1130px] pointer-events-none opacity-50">
+          <img
+            src={imgShootingStar}
+            alt=""
+            className="w-full h-full z-20 object-contain"
+          />
+        </div>
+        <div className="max-w-7xl mx-auto px-6 mb-24 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Membership Process
           </h2>
           <p
-            className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
           </p>
         </div>
-      </div>
 
-      {/* Step 1 */}
-      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
-        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
-          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
-            <img
-              src={imgIconAdminFee2}
-              alt="Step 1 Icon"
-              className="w-full h-full object-contain"
-            />
+
+        {/* Step 1 */}
+        <div className="max-w-[1340px] mx-auto px-6 mb-2 ">
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
+            <div className="w-24 h-24 sm:w-32 z-40 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+              <img
+                src={imgIconAdminFee2}
+                alt="Step 1 Icon"
+                className="w-full  h-full object-contain"
+              />
+            </div>
+            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+              <h3
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                style={{ fontFamily: "'Poppins', sans-serif" }}
+              >
+                Step 1: Application & Email Confirmation
+              </h3>
+              <p
+                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
+              >
+                Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
+              </p>
+            </div>
           </div>
-          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
-            <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
-              style={{ fontFamily: "'Poppins', sans-serif" }}
-            >
-              Step 1: Application & Email Confirmation
-            </h3>
-            <p
-              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
-              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
-            >
-              Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
-            </p>
+        </div>
+
+        {/* Arrow Down Icon */}
+        <Arrow />
+
+        {/* Step 2 */}
+        <div className="max-w-[1340px] mx-auto px-6 mb-2">
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
+            <div className="w-24 h-24 z-40 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+              <img
+                src={imgIconAdminFee3}
+                alt="Step 2 Icon"
+                className="w-full h-full object-contain"
+              />
+            </div>
+            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+              <h3
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                style={{ fontFamily: "'Poppins', sans-serif" }}
+              >
+                Step 2: Attend an event and meet us!
+              </h3>
+              <p
+                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
+              >
+                You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Arrow Down Icon */}
+        <Arrow />
+        {/* Step 3 */}
+        <div className="max-w-[1340px] mx-auto px-6 mb-2">
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
+            <div className="w-24 h-24 z-40  sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+              <img
+                src={imgIconAdminFee4}
+                alt="Step 3 Icon"
+                className="w-full h-full object-contain"
+              />
+            </div>
+            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+              <h3
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                style={{ fontFamily: "'Poppins', sans-serif" }}
+              >
+                Step 3: Login and pay the annual fee
+              </h3>
+              <p
+                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
+              >
+                Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Arrow Down Icon */}
+        <Arrow />
+
+        {/* Step 4 - With Gradient Background */}
+        <div className="max-w-[1340px] mx-auto px-6 mb-2">
+          <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
+            <div className="w-24 h-24 z-40 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+              <img
+                src={imgIconAdminFee5}
+                alt="Step 4 Icon"
+                className="w-full h-full object-contain"
+              />
+            </div>
+            <div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+              <h3
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                style={{ fontFamily: "'Poppins', sans-serif" }}
+              >
+                Step 4: Welcome to LOAF!
+              </h3>
+              <p
+                className="text-base sm:text-lg font-medium text-white leading-[1.6]"
+                style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
+              >
+                Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon!
+              </p>
+            </div>
           </div>
         </div>
       </div>
-
-      {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
-        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
-      </div>
-
-      {/* Step 2 */}
-      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
-        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
-          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
-            <img
-              src={imgIconAdminFee3}
-              alt="Step 2 Icon"
-              className="w-full h-full object-contain"
-            />
-          </div>
-          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
-            <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
-              style={{ fontFamily: "'Poppins', sans-serif" }}
-            >
-              Step 2: Attend an event and meet us!
-            </h3>
-            <p
-              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
-              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
-            >
-              You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
-        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
-      </div>
-
-      {/* Step 3 */}
-      <div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
-        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
-          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
-            <img
-              src={imgIconAdminFee4}
-              alt="Step 3 Icon"
-              className="w-full h-full object-contain"
-            />
-          </div>
-          <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
-            <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
-              style={{ fontFamily: "'Poppins', sans-serif" }}
-            >
-              Step 3: Login and pay the annual fee
-            </h3>
-            <p
-              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
-              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
-            >
-              Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
-        <ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
-      </div>
-
-      {/* Step 4 - With Gradient Background */}
-      <div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
-        <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
-          <div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
-            <img
-              src={imgIconAdminFee5}
-              alt="Step 4 Icon"
-              className="w-full h-full object-contain"
-            />
-          </div>
-          <div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
-            <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
-              style={{ fontFamily: "'Poppins', sans-serif" }}
-            >
-              Step 4: Welcome to LOAF!
-            </h3>
-            <p
-              className="text-base sm:text-lg font-medium text-white leading-[1.6]"
-              style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
-            >
-              Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon!
-            </p>
-          </div>
-        </div>
-      </div>
-
       {/* CTA Section */}
-      <div className="relative bg-gray-50 py-16">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+      <div className="relative bg-gray-50 py-16 ">
+        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-12 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-[#48286e]  leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Ready to Join Us?
           </h2>
           <Link to="/register">
             <Button
-              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-base sm:text-lg font-medium tracking-[-0.09px] h-auto"
+              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Register Now!

src/pages/BoardOfDirectors.js

@@ -12,24 +12,78 @@ const BoardOfDirectors = () => {
   ];
 
   const boardMembers = [
-    'Danita Cole',
-    'Roxanne Cherico',
-    'Lucretia Copeland',
-    'Julie Fischer'
+    { name: 'Danita Cole' },
+    { name: 'Roxanne Cherico' },
+    { name: 'Lucretia Copeland' },
+    { name: 'Julie Fischer' }
   ];
 
+
+  const DirectorCards = ({ title, members }) => {
+    return (
+      <section className=" w-full">
+        <div className="mx-auto bg-white rounded-3xl p-10 shadow-lg h-full">
+          {title && (
+            <h2
+              className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
+              style={{ fontFamily: "'Poppins', sans-serif" }}
+            >
+              {title}
+            </h2>
+          )}
+
+          <div className="grid grid-col-span-1 lg:grid-cols-2  gap-5 w-full">
+            {members.map((member, index) => {
+              const { name, title } =
+                typeof member === "string"
+                  ? { name: member, title: "" }
+                  : member;
+
+              return (
+                <Card
+                  key={`${name}-${index}`}
+                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  className="bg-[#eeebf4] text-[#48286e] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
+                >
+                  <div className="min-h-16">
+                    <p className="text-xl font-bold text-[#48286e]">
+                      {name}
+                    </p>
+
+                    {title && (
+                      <p className="text-xl mt-2 font-semibold">
+                        {title}
+                      </p>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+    );
+  };
+
   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">
-        {/* Hero Section with Contact */}
-        <section className="bg-gradient-to-r from-[#664fa3] to-[#48286e] py-8 rounded-2xl mb-12">
+      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb]  pt-8 sm:pt-10 md:pt-12">
+        {/* Hero Section  */}
+        <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
           <div className="max-w-5xl mx-auto text-center px-8">
-            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[#48286e] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               LOAF Board of Directors 2025
             </h1>
-            <p className="text-white text-lg mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+
+          </div>
+        </section>
+        {/* Contact Info */}
+        <section className="flex justify-center mt-4 mb-8">
+          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[#664fa3] to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
+
+            <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
               For any questions or inquiries please email us at{' '}
               <a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
                 info@loaftx.org
@@ -37,74 +91,71 @@ const BoardOfDirectors = () => {
             </p>
           </div>
         </section>
+        {/* Board Members Section */}
+        <section className='  flex lg:flex-row flex-col gap-10 items-stretch mt-8 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 pb-12'>
+          {/* Officers Grid */}
+          <DirectorCards title="Officers" members={officers} />
 
-        {/* Officers Grid */}
-        <section className="py-12">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Officers
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {officers.map((officer, index) => (
-                <Card key={index} className="bg-[#eeebf4] p-6 text-center rounded-xl shadow-md hover:shadow-lg transition-shadow">
-                  <h3 className="text-xl font-bold text-[#48286e] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    {officer.name}
-                  </h3>
-                  <p className="text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    {officer.title}
-                  </p>
-                </Card>
-              ))}
-            </div>
-          </div>
-        </section>
+          {/* Board Members Grid */}
+          <DirectorCards title="Board Of Directors" members={boardMembers} />
 
-        {/* Board Members Grid */}
-        <section className="py-12 bg-gray-50 rounded-2xl">
-          <div className="max-w-6xl mx-auto px-8">
-            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Board of Directors
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {boardMembers.map((member, index) => (
-                <Card key={index} className="bg-[#eeebf4] p-6 text-center rounded-xl shadow-md hover:shadow-lg transition-shadow">
-                  <h3 className="text-xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    {member}
-                  </h3>
-                </Card>
-              ))}
-            </div>
-          </div>
         </section>
 
         {/* Join the Board Section */}
-        <section className="py-12">
-          <div className="max-w-4xl mx-auto">
-            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <section className="py-12 bg-white mt-12 ">
+          {/* content containter */}
+          <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
+            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
               Join the Board of Directors
             </h2>
-            <p className="text-xl text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Our elections take place at our December holiday social. Here are some things
-              to know if you are thinking about serving on the Board of Directors.
+            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
             </p>
-            <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg">
-              <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <li>
-                  Nominations are due by November 1. Nomination Form:{' '}
-                  <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
-                    className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
-                    Click Here
-                  </a>
-                </li>
-                <li>Nominees must have been a member for at least 1 year and current with their dues.</li>
-                <li>Officer positions are only available to current directors.</li>
-                <li>Each director shall serve a 2 year term.</li>
-                <li>The time commitment is 1-2 hours per week.</li>
-                <li>The tasks that directors perform depend on individual interests, skills, and time available.</li>
-                <li>Directors must attend Board meetings which are held the second Thursday of each month at 6:30pm via Zoom.</li>
-                <li>We are a fun group, and we would love for you to join us in providing this service for our community.</li>
-              </ol>
-            </Card>
+            {/* card */}
+              <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
+                <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <li>
+                    Nominations are due by November 1. Nomination Form:{' '}
+                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
+                      className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
+                      Click Here
+                    </a>
+                  </li>
+                  <li>Nominees must have been a member for at least 1 year, however it is possible to be elected prior to 1 year, but start the term on the 1 year anniversary.</li>
+                  <li>Officer positions are only available to current directors.</li>
+
+                  <li>Each director shall serve a 2-year term.</li>
+
+                  <li>The time commitment is approximately 1–2 hours per week.</li>
+
+                  <li>
+                    The tasks that directors perform depend on individual interests. Recent
+                    tasks include researching how to obtain an extra PO Box key, ordering
+                    Welcome Team name tags, taking pictures at events, researching new venues
+                    for holiday socials, and monitoring Facebook posts. For more information
+                    about director duties, see Article 2 of the bylaws in the Members Only
+                    section of the website:&nbsp;
+                    <a
+                      href="https://loaftx.org/bylaws/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#48286e] underline"
+                    >
+                      https://loaftx.org/bylaws/
+                    </a>
+                  </li>
+
+                  <li>
+                    Directors must attend Board meetings held on the second Thursday of each
+                    month at 6:30pm via Zoom.
+                  </li>
+
+                  <li>
+                    We are a fun group, and we would love for you to join us in providing this
+                    service for our community.
+                  </li>
+                </ol>
+              </Card>
           </div>
         </section>
       </main>

src/pages/ContactUs.js

@@ -10,7 +10,7 @@ import { Checkbox } from '../components/ui/checkbox';
 import { Mail, MapPin, Loader2 } from 'lucide-react';
 import api from '../utils/api';
 import { toast } from 'sonner';
-
+import { PiMapTrifoldBold } from "react-icons/pi";
 const ContactUs = () => {
   const [formData, setFormData] = useState({
     firstName: '',
@@ -103,8 +103,8 @@ const ContactUs = () => {
         <div className="max-w-7xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
             {/* Contact Form */}
-            <Card className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
-              <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Card className="p-8 bg-white rounded-2xl">
+              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Contact Form
               </h1>
 
@@ -120,7 +120,7 @@ const ContactUs = () => {
                       name="firstName"
                       value={formData.firstName}
                       onChange={handleChange}
-                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                      className="border-2 border-[#ddd8eb] bg-[#eaedf4] focus:border-[#664fa3] rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
@@ -134,7 +134,7 @@ const ContactUs = () => {
                       name="lastName"
                       value={formData.lastName}
                       onChange={handleChange}
-                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                      className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
@@ -152,7 +152,7 @@ const ContactUs = () => {
                     type="email"
                     value={formData.email}
                     onChange={handleChange}
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -168,7 +168,7 @@ const ContactUs = () => {
                     name="subject"
                     value={formData.subject}
                     onChange={handleChange}
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -184,7 +184,7 @@ const ContactUs = () => {
                     name="message"
                     value={formData.message}
                     onChange={handleChange}
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
+                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -226,21 +226,21 @@ const ContactUs = () => {
             <div className="space-y-6">
               {/* Message Card */}
               <Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white">
-                <p className="text-xl leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   If you have questions, or are interested in joining, we would love hearing from you.
                 </p>
               </Card>
 
               {/* Email Card */}
-              <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
+              <Card className="p-6 bg-white rounded-2xl">
                 <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
-                    <Mail className="h-6 w-6 text-[#664fa3]" />
+                  <div className="flex items-center justify-center flex-shrink-0">
+                    <Mail className="size-12 text-[#664fa3]" />
                   </div>
                   <div>
                     <a
                       href="mailto:info@loaftx.org"
-                      className="text-[#664fa3] text-xl font-semibold hover:text-[#48286e] transition-colors"
+                      className="text-[#865edf] text-xl font-semibold hover:text-[#48286e] transition-colors"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
               </Card>
 
               {/* Address Card */}
-              <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
+              <Card className="p-6 bg-white rounded-2xl ">
                 <div className="flex items-start gap-4">
-                  <div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0">
-                    <MapPin className="h-6 w-6 text-[#664fa3]" />
+                  <div className="flex items-center justify-center flex-shrink-0">
+                    <PiMapTrifoldBold className="size-12 text-[#664fa3]" />
                   </div>
                   <div>
-                    <p className="text-[#48286e] text-lg font-semibold mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <p className="text-[#48286e] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       LOAF
                     </p>
-                    <p className="text-[#664fa3] text-base leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-[#48286e] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       P.O. Box 7207<br />
                       Houston, Texas 77248-7207
                     </p>

src/pages/Donate.js

@@ -55,117 +55,131 @@ const Donate = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen">
       <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-bl from-[#F9FAFB] to-[#DDD8EB] 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-4xl mx-auto text-center">
+          <div className="max-w-4xl mx-auto text-center h-full">
             <div className="flex justify-center mb-4">
               <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
             </div>
             <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Donate
             </h1>
-            <p className="text-xl text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-xl text-[#48286e] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
               We really appreciate your donations. You can make your donation online
               or send a check by mail.
             </p>
           </div>
         </section>
 
-        {/* Donation Amount Buttons */}
-        <section className="py-12">
-          <div className="max-w-4xl mx-auto">
-            <Card className="p-8 bg-white rounded-2xl shadow-lg">
-              <div className="flex items-center gap-4 mb-6">
-                <CreditCard className="w-12 h-12 text-[#664fa3]" />
-                <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Select Your Donation Amount
-                </h2>
-              </div>
+        {/* Columns */}
+        <div className="py-12">
+          <div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 lg:max-h-[450px]'>
 
-              {/* Donation Buttons Grid */}
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-                {[25, 50, 100, 250].map(amount => (
-                  <Button
-                    key={amount}
-                    onClick={() => handleDonateAmount(amount * 100)}
-                    disabled={processingAmount === amount * 100}
-                    className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
-                  >
-                    {processingAmount === amount * 100 ? (
-                      <Loader2 className="h-6 w-6 animate-spin" />
-                    ) : (
-                      `$${amount}`
-                    )}
-                  </Button>
-                ))}
-              </div>
-
-              {/* Custom Amount Button */}
-              <Button
-                onClick={() => setCustomAmountDialogOpen(true)}
-                disabled={processingAmount !== null}
-                className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
-              >
-                <Heart className="h-6 w-6" />
-                Donate Any Amount
-              </Button>
-
-              <p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                Secure donation processing powered by Stripe
-              </p>
-            </Card>
-          </div>
-        </section>
-
-        {/* Alternative Payment Methods */}
-        <section className="py-12">
-          <div className="max-w-6xl mx-auto">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              {/* Mail Check */}
-              <Card className="p-8 bg-white rounded-2xl shadow-lg">
-                <Mail className="w-12 h-12 text-[#664fa3] mb-4" />
-                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Mail a Check
-                </h3>
-                <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Our mailing address for checks:<br />
-                  <span className="font-semibold">LOAF</span><br />
-                  P.O. Box 7207<br />
-                  Houston, Texas 77248-7207
-                </p>
-              </Card>
-
-              {/* Zelle */}
-              <Card className="p-8 bg-white rounded-2xl shadow-lg">
-                <div className="mb-4">
-                  <img src={zelleLogo} alt="Zelle" className="h-32" onError={(e) => e.target.style.display = 'none'} />
+          {/* Donation Amount Buttons */}
+          <section className="flex flex-col h-full">
+            <div className="mx-auto flex-1 w-full h-full">
+              <Card className="p-8 bg-white rounded-3xl w-full h-full content-center">
+                <div className="flex items-center gap-4 mb-6">
+                  <CreditCard className="size-24 text-[#664fa3]" />
+                  <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Select Your Donation Amount
+                  </h2>
                 </div>
-                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Pay with Zelle
-                </h3>
-                <p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  If your bank allows the use of Zelle, please feel free to send money to:
+
+                {/* Donation Buttons Grid */}
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                  {[25, 50, 100, 250].map(amount => (
+                    <Button
+                      key={amount}
+                      onClick={() => handleDonateAmount(amount * 100)}
+                      disabled={processingAmount === amount * 100}
+                      className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
+                    >
+                      {processingAmount === amount * 100 ? (
+                        <Loader2 className="h-6 w-6 animate-spin" />
+                      ) : (
+                        `$${amount}`
+                      )}
+                    </Button>
+                  ))}
+                </div>
+
+                {/* Custom Amount Button */}
+                <Button
+                  onClick={() => setCustomAmountDialogOpen(true)}
+                  disabled={processingAmount !== null}
+                  className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
+                >
+                  <Heart className="h-6 w-6" />
+                  Donate Any Amount
+                </Button>
+
+                <p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Secure donation processing powered by Stripe
                 </p>
-                <a href="mailto:LOAFHoustonTX@gmail.com"
-                  className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
-                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  LOAFHoustonTX@gmail.com
-                </a>
               </Card>
             </div>
+          </section>
+
+          {/* Alternative Payment Methods */}
+          <section className="flex flex-col">
+            <div className="max-w-6xl mx-auto w-full">
+              <div className="flex flex-col gap-8 w-full">
+                {/* Mail Check */}
+                <Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
+                  <Mail className="size-24 text-[#664fa3]" />
+
+                  <div>
+                    <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      Mail a Check
+                    </h3>
+                    <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Our mailing address for checks:<br />
+                      <span className="font-semibold">LOAF</span><br />
+                      P.O. Box 7207<br />
+                      Houston, Texas 77248-7207
+                    </p>
+                  </div>
+                </Card>
+
+                {/* Zelle */}
+                <Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
+                  <div className="w-44">
+                    <img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
+                  </div>
+
+                  <div>
+                    <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      Pay with Zelle
+                    </h3>
+                    <p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      If your bank allows the use of Zelle, please feel free to send money to:
+                    </p>
+                    <a href="mailto:LOAFHoustonTX@gmail.com"
+                      className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      LOAFHoustonTX@gmail.com
+                    </a>
+                  </div>
+                </Card>
+              </div>
+            </div>
+          </section>
+
           </div>
-        </section>
+        </div>
+        {/* Columns end */}
       </main>
 
       <PublicFooter />
 
       {/* Custom Amount Dialog */}
       <Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
-        <DialogContent className="sm:max-w-[450px] bg-white rounded-2xl">
+        <DialogContent className="sm:max-w-[450px] bg-white rounded-3xl">
           <DialogHeader>
             <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Enter Donation Amount

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>

src/pages/Landing.js

@@ -7,15 +7,15 @@ import PublicFooter from '../components/PublicFooter';
 
 const Landing = () => {
   // LOAF brand assets (local)
-  const taglineImage = `${process.env.PUBLIC_URL}/tagline-image.png`;
+  const taglineImage = `${process.env.PUBLIC_URL}/web_elements_tagline.png`;
   const shootingStar = `${process.env.PUBLIC_URL}/shooting_star_2.png`;
   const iconMeetGreet = `${process.env.PUBLIC_URL}/icon-meet-greet.png`;
   const iconSocials = `${process.env.PUBLIC_URL}/icon-socials.png`;
   const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
   const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
-
+  const friendships = `${process.env.PUBLIC_URL}/friendships.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}
@@ -75,10 +75,17 @@ const Landing = () => {
       <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="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">
+      <section className="relative bg-gradient-to-b from-[#48286e] to-[#664fa3]  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 w-full">
+        {/* Friendships background image */}
+        <div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem]  lg:-top-32">
+          <img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15  max-w-full max-h-full object-contain" />
+        </div>
+        {/* Blur Overlay */}
+        <div className="absolute inset-0 z-[1] bg-white/5 backdrop-blur-xs"></div>
+        {/* Left column Loaf Image */}
+        <div className="relative z-10 lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[530px] lg:flex-shrink-0">
           <div className="flex flex-col gap-6 items-center">
-            <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[334px] h-auto object-contain" />
+            <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[370px] 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,8 +98,9 @@ const Landing = () => {
             LOAF is supported by the Hollyfield Foundation
           </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-[330px] md:max-w-[483px] h-auto object-contain" />
+        {/*  Right Column Loaf Tagline */}
+        <div className="relative z-10 py-8 md:py-12  lg:py-16 flex items-center justify-center w-full lg:max-w-[815px] h-auto">
+          <img src={taglineImage} alt="LOAF Tagline" className="relative z-10 w-full h-auto object-cover" />
         </div>
       </section>
 
@@ -110,7 +118,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} />
         ))}

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-[1400px] mx-auto">
+          <div className="flex md:flex-row flex-col gap-10 items-stretch">
             {/* 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  flex-1 w-full md:w-1/2 ">
               <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 flex-1  w-full md:w-1/2 ">
               <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>

src/pages/PrivacyPolicy.js

@@ -7,242 +7,190 @@ export default function PrivacyPolicy() {
   return (
     <>
       <PublicNavbar />
-      <div className="min-h-screen bg-[#F8F7FB]">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12">
-          {/* Header */}
-          <div className="mb-8">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
-              style={{ fontFamily: "'Inter', sans-serif" }}>
-              Privacy Policy
-            </h1>
-            <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+      <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
+        <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
+          <header className="border-b pb-6">
+            <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{fontFamily: 'Poppins'}}>
               LOAFers, Inc. Website Privacy Policy
-            </p>
-          </div>
+            </h1>
+          </header>
 
-          {/* Content */}
-          <div className="bg-white rounded-lg border border-[#ddd8eb] p-6 sm:p-8 md:p-10 space-y-8">
-
-            {/* Introduction */}
-            <section>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and governs data collection and usage. The Company's application is a Membership request, Membership online profile, and Consent to receive eNewsletters. By using the Company application, you consent to the data practices described in the statement.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  We reserve the right to change this policy at any given time, of which you will be promptly updated. If you want to make sure that you are up to date with the latest changes, we advise you to frequently visit this page.
-                </p>
-              </div>
+          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+            <section className="mt-8">
+              <p>
+                This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and
+                governs data collection and usage. The Company&apos;s application is a Membership request, Membership online
+                profile, and Consent to receive eNewsletters. By using the Company application, you consent to the data
+                practices described in the statement.
+              </p>
+              <p>
+                We reserve the right to change this policy at any given time, of which you will be promptly updated. If
+                you want to make sure that you are up to date with the latest changes, we advise you to frequently visit
+                this page.
+              </p>
             </section>
 
-            {/* Section 1: What User Data We Collect */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>💻</span> What User Data We Collect
+            <section id="user-data" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">What User Data We Collect</h2>
+              <p>When you visit the Site, we may collect the following data:</p>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>Your IP address.</li>
+                <li>Your contact information and email address.</li>
+              </ul>
+
+              <p>When you apply for membership, we collect the following data:</p>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>First and last name</li>
+                <li>Mailing address</li>
+                <li>Email</li>
+                <li>Phone number</li>
+                <li>Birthday</li>
+              </ul>
+
+              <p>If you choose to pay your membership administrative fee online, we have access to:</p>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>Partial credit card information</li>
+              </ul>
+
+              <p>You may also choose to provide the following:</p>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>Partners name</li>
+                <li>Photo</li>
+                <li>Self-bio</li>
+                <li>Consent to receive our eNewsletter</li>
+                <li>Consent to display an online profile visible only to membership</li>
+              </ul>
+            </section>
+
+            <section id="why-collect" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Why We Collect Your Data</h2>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>
+                  To send you announcement emails containing the information about our events and information we think you
+                  will find interesting.
+                </li>
+                <li>To contact you to fill out surveys about our membership</li>
+                <li>To customize our blog according to your online behavior and personal preferences.</li>
+              </ul>
+            </section>
+
+            <section id="third-parties" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Sharing Information with Third Parties</h2>
+              <p>The Company does not sell, rent, or lease personal data to third parties.</p>
+              <p>
+                The Company may share data with trusted partners to help perform statistical analysis, provide customer
+                support.
+              </p>
+              <p>
+                The Company uses Stripe to process online payments at which time users would no longer be governed by the
+                Company&apos;s Privacy Policy.
+              </p>
+              <p>The Company may disclose your personal information, without notice, if required to do so by law.</p>
+            </section>
+
+            <section id="safeguarding" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Safeguarding and Securing the Data</h2>
+              <p>
+                LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all
+                in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest
+                technologies and software, which help us safeguard all the information we collect online.
+              </p>
+            </section>
+
+            <section id="cookies" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Our Cookie Policy</h2>
+              <p>
+                Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your
+                online behavior (analyze web traffic, web pages you visit and spend the most time on).
+              </p>
+              <p>
+                The data we collect by using cookies is used to customize our blog to your needs. After we use the data
+                for statistical analysis, the data is completely removed from our systems.
+              </p>
+              <p>
+                Please note that cookies don&apos;t allow us to gain control of your computer in any way. They are strictly
+                used to monitor which pages you find useful and which you do not so that we can provide a better
+                experience for you.
+              </p>
+              <p>
+                If you want to disable cookies, you can do it by accessing the settings of your internet browser. You can
+                visit{" "}
+                <a className="" href="https://www.internetcookies.com">
+                  https://www.internetcookies.com
+                </a>
+                , which contains comprehensive information on how to do this on a wide variety of browsers and devices.
+              </p>
+            </section>
+
+            <section id="other-sites" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Links to Other Websites</h2>
+              <p>
+                Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held
+                responsible for your data and privacy protection. Visiting those websites is not governed by this privacy
+                policy agreement. Make sure to read the privacy policy documentation of the website you go to from our
+                website.
+              </p>
+            </section>
+
+            <section id="restricting" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+                Restricting the Collection of your Personal Data
               </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  When you visit the Site, we may collect the following data:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li>Your <strong>IP address</strong></li>
-                  <li>Your <strong>contact information and email address</strong></li>
-                </ul>
-
-                <p className="text-gray-700 leading-relaxed mt-4">
-                  When you apply for membership, we collect the following data:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li><strong>First and last name</strong></li>
-                  <li><strong>Mailing address</strong></li>
-                  <li><strong>Email</strong></li>
-                  <li><strong>Phone number</strong></li>
-                  <li><strong>Birthday</strong></li>
-                </ul>
-
-                <p className="text-gray-700 leading-relaxed mt-4">
-                  If you choose to pay your membership administrative fee online, we have access to:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li><strong>Partial credit card information</strong></li>
-                </ul>
-
-                <p className="text-gray-700 leading-relaxed mt-4">
-                  You may also choose to provide the following:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li><strong>Partner's name</strong></li>
-                  <li><strong>Photo</strong></li>
-                  <li><strong>Self-bio</strong></li>
-                  <li><strong>Consent to receive our eNewsletter</strong></li>
-                  <li><strong>Consent to display an online profile visible only to membership</strong></li>
-                </ul>
-              </div>
+              <p>
+                At some point, you might wish to restrict the use and collection of your personal data. You can achieve
+                this by doing the following:
+              </p>
+              <ul className="list-disc pl-6 space-y-1">
+                <li>Log in to your online profile and make any changes you wish to your profile information.</li>
+                <li>
+                  If you have already agreed to share your information with us, feel free to contact us via email and we
+                  will be more than happy to change this for you.
+                </li>
+              </ul>
             </section>
 
-            {/* Section 2: Why We Collect Your Data */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🎯</span> Why We Collect Your Data
-              </h2>
-              <div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li>To send you announcement emails containing the information about our events and information we think you will find interesting.</li>
-                  <li>To contact you to fill out surveys about our membership.</li>
-                  <li>To customize our blog according to your online behavior and personal preferences.</li>
-                </ul>
-              </div>
+            <section id="children" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Children Under Thirteen</h2>
+              <p>The Company does not knowingly collect information from children under the age of 13.</p>
             </section>
 
-            {/* Section 3: Sharing Information with Third Parties */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🤝</span> Sharing Information with Third Parties
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company does not sell, rent, or lease personal data to third parties.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company may share data with trusted partners to help perform statistical analysis, provide customer support.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company uses <strong>Stripe</strong> to process online payments at which time users would no longer be governed by the Company's Privacy Policy.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company may disclose your personal information, without notice, if required to do so by law.
+            <section id="changes" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Changes to this Statement</h2>
+              <p>
+                The Company may make changes to this Policy. When this occurs the effective date of this policy will be
+                updated.
+              </p>
+            </section>
+
+            <section id="contact" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Contact Information</h2>
+              <p>If you have any question, please contact LOAFers, Inc. at:</p>
+              <div className="not-prose mt-4">
+                <p className="font-semibold mb-2">LOAFers, Inc.</p>
+                <p className="">PO BOX 7207</p>
+                <p className="">Houston, TX 77248-7207</p>
+                <p className="mt-3">Or</p>
+                <p className="mt-3">
+                  <a className="" href="mailto:info@loaftx.org">
+                    info@loaftx.org
+                  </a>
                 </p>
               </div>
             </section>
-
-            {/* Section 4: Safeguarding and Securing the Data */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🔒</span> Safeguarding and Securing the Data
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest technologies and software, which help us safeguard all the information we collect online.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 5: Our Cookie Policy */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🍪</span> Our Cookie Policy
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your online behavior (analyze web traffic, web pages you visit and spend the most time on).
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  The data we collect by using cookies is used to customize our blog to your needs. After we use the data for statistical analysis, the data is completely removed from our systems.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  Please note that cookies don't allow us to gain control of your computer in any way. They are strictly used to monitor which pages you find useful and which you do not so that we can provide a better experience for you.
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  If you want to disable cookies, you can do it by accessing the settings of your internet browser. You can visit{' '}
-                  <a href="https://www.internetcookies.com" target="_blank" rel="noopener noreferrer" className="text-[#664fa3] hover:text-[#422268] font-semibold">
-                    https://www.internetcookies.com
-                  </a>, which contains comprehensive information on how to do this on a wide variety of browsers and devices.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 6: Links to Other Websites */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🔗</span> Links to Other Websites
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held responsible for your data and privacy protection. Visiting those websites is not governed by this privacy policy agreement. Make sure to read the privacy policy documentation of the website you go to from our website.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 7: Restricting the Collection of your Personal Data */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🚫</span> Restricting the Collection of your Personal Data
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  At some point, you might wish to restrict the use and collection of your personal data. You can achieve this by doing the following:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li>Log in to your online profile and make any changes you wish to your profile information.</li>
-                  <li>If you have already agreed to share your information with us, feel free to contact us via email and we will be more than happy to change this for you.</li>
-                </ul>
-              </div>
-            </section>
-
-            {/* Section 8: Children Under Thirteen */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>👶</span> Children Under Thirteen
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company does not knowingly collect information from children under the age of 13.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 9: Changes to this Statement */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>🗓️</span> Changes to this Statement
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  The Company may make changes to this Policy. When this occurs the effective date of this policy will be updated.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 10: Contact Information */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                <span>📧</span> Contact Information
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  If you have any questions, please contact LOAFers, Inc. at:
-                </p>
-                <div className="bg-[#F8F7FB] p-4 rounded-lg border border-[#ddd8eb]">
-                  <p className="font-semibold text-gray-800">LOAFers, Inc.</p>
-                  <p className="text-gray-700">PO Box 7207</p>
-                  <p className="text-gray-700">Houston, TX 77248-7207</p>
-                  <p className="text-gray-700 mt-2">
-                    Email: <a href="mailto:info@loaftx.org" className="text-[#664fa3] hover:text-[#422268] font-semibold">info@loaftx.org</a>
-                  </p>
-                </div>
-              </div>
-            </section>
-          </div>
-
-          {/* Back to Home Link */}
-          <div className="mt-8 text-center">
-            <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span>←</span> Back to Home
-            </Link>
           </div>
         </div>
-      </div>
+
+        {/* Back to Home Link */}
+        <div className="mt-8 text-center">
+          <Link
+            to="/"
+            className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+          >
+            <span>←</span> Back to Home
+          </Link>
+        </div>
+      </main>
       <PublicFooter />
     </>
   );

src/pages/Resources.js

@@ -4,6 +4,7 @@ import PublicFooter from '../components/PublicFooter';
 import { Card } from '../components/ui/card';
 import { ChevronDown, ExternalLink, Phone, Mail, MapPin } from 'lucide-react';
 
+import { FaFlag, FaHeartbeat, FaUtensils } from "react-icons/fa";
 const Resources = () => {
   const [openAccordions, setOpenAccordions] = useState({});
 
@@ -23,6 +24,7 @@ const Resources = () => {
   const categories = [
     {
       title: 'General LGBTQ+',
+      icon: <FaFlag />,
       resources: [
         {
           name: 'SPRY (Seniors Preparing for Rainbow Years)',
@@ -52,6 +54,7 @@ const Resources = () => {
     },
     {
       title: 'Healthcare',
+      icon: <FaHeartbeat />,
       resources: [
         {
           name: 'LHI (Lesbian Health Initiative)',
@@ -67,6 +70,7 @@ const Resources = () => {
     },
     {
       title: 'Food Assistance',
+      icon: <FaUtensils />,
       resources: [
         {
           name: 'Meals on Wheels',
@@ -99,12 +103,10 @@ const Resources = () => {
       <main className="bg-gradient-to-b from-white via-[#f1eef9] to-[#e8e0f5] px-6 py-16">
         {/* Header Section */}
         <section className="max-w-7xl mx-auto mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-[#48286e] text-center mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
-            Resources
-          </h1>
-          <p className="text-xl text-[#48286e] text-center max-w-3xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
             Tap or click on each purple tab below to open and read its contents
-          </p>
+          </h1>
+
         </section>
 
         {/* Resources Grid */}
@@ -113,7 +115,8 @@ const Resources = () => {
             {categories.map((category, categoryIndex) => (
               <div key={categoryIndex} className="space-y-6">
                 {/* Category Title */}
-                <h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <div className="flex justify-center text-4xl text-[#664ea2]">{category.icon}</div>
+                <h2 className="text-[32px] leading-6 font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   {category.title}
                 </h2>
 
@@ -123,27 +126,29 @@ const Resources = () => {
                     const isExpanded = isOpen(categoryIndex, resourceIndex);
 
                     return (
-                      <div key={resourceIndex} className="overflow-hidden">
+                      <div key={resourceIndex} className="overflow-hidden ">
                         {/* Accordion Button */}
                         <button
                           onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
-                          className="w-full bg-[#664fa3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-full flex items-center justify-between transition-all shadow-lg hover:shadow-xl"
+                          className={`w-full bg-gradient-to-tr from-[#48286E] to-[#664FA3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
+
+                          }
                         >
                           <span className="text-lg font-semibold text-left" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {resource.name}
                           </span>
                           <ChevronDown
-                            className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''
-                              }`}
+                            className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 
+                              ${isExpanded ? 'rotate-180' : ''}`}
                           />
                         </button>
 
                         {/* Accordion Content */}
                         <div
-                          className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100 mt-3' : 'max-h-0 opacity-0'
+                          className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
                             }`}
                         >
-                          <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
+                          <Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
                             {/* Description */}
                             <p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {resource.description}
@@ -170,7 +175,7 @@ const Resources = () => {
                                   <div className="flex flex-col gap-1 ml-0">
                                     {resource.phone && (
                                       <div className="flex items-center gap-2">
-                                        <Phone className="h-4 w-4" />
+                                        <Phone className="size-4" />
                                         <a
                                           href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
                                           className="text-sm hover:text-[#48286e] transition-colors"

src/pages/TermsOfService.js

@@ -2,316 +2,606 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import PublicNavbar from '../components/PublicNavbar';
 import PublicFooter from '../components/PublicFooter';
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
 
 export default function TermsOfService() {
   return (
     <>
       <PublicNavbar />
-      <div className="min-h-screen bg-[#F8F7FB]">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12">
-          {/* Header */}
-          <div className="mb-8">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
-              style={{ fontFamily: "'Inter', sans-serif" }}>
+      <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
+        <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
+          {/* Title */}
+          <header className="border-b pb-6">
+            <h1 className="text-3xl sm:text-4xl font-bold tracking-tight ">
               Terms of Service
             </h1>
-            <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Last Updated: January 2025
+            <p className="mt-3 text-sm">
+              <span className="font-medium">Last updated March 23, 2025</span>
             </p>
-          </div>
+          </header>
 
-          {/* Content */}
-          <div className="bg-white rounded-lg border border-[#ddd8eb] p-6 sm:p-8 md:p-10 space-y-8">
-
-            {/* Section 1: Agreement to Terms */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                1. Agreement to Terms
+          {/* Body */}
+          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+            {/* AGREEMENT */}
+            <section aria-labelledby="agreement" className="mt-8">
+              <h2 id="agreement" className="text-xl sm:text-2xl text-[#48286E] font-bold ">
+                AGREEMENT TO OUR LEGAL TERMS
               </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  These Terms of Service constitute a legally binding agreement made between you, whether personally or on behalf of an entity ("you") and LOAFers, Inc. ("Company", "we", "us", or "our"), concerning your access to and use of the https://loaftx.org website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto (collectively, the "Site").
-                </p>
-                <p className="text-gray-700 leading-relaxed">
-                  You agree that by accessing the Site, you have read, understood, and agree to be bound by all of these Terms of Service. If you do not agree with all of these Terms of Service, then you are expressly prohibited from using the Site and you must discontinue use immediately.
+
+              <p>
+                We are LOAFers, Inc. ("Company," "we," "us," "our").
+              </p>
+
+              <p>
+                We operate, as well as any other related products and services that refer or link to these legal terms
+                (the "Legal Terms") (collectively, the "Services").
+              </p>
+
+              <p>
+                You can contact us by email at{" "}
+                <a className="" href="mailto:info@loaftx.com">
+                  info@loaftx.com
+                </a>{" "}
+                or by mail to PO Box 7207, Houston, TX 77249, United States.
+              </p>
+
+              <p>
+                These Legal Terms constitute a legally binding agreement made between you, whether personally or on behalf
+                of an entity ("you"), and LOAFers, Inc., concerning your access to and use of the Services. You agree that
+                by accessing the Services, you have read, understood, and agreed to be bound by all of these Legal Terms.{" "}
+                <strong>
+                  IF YOU DO NOT AGREE WITH ALL OF THESE LEGAL TERMS, THEN YOU ARE EXPRESSLY PROHIBITED FROM USING THE
+                  SERVICES AND YOU MUST DISCONTINUE USE IMMEDIATELY.
+                </strong>
+              </p>
+
+              <p>
+                Supplemental terms and conditions or documents that may be posted on the Services from time to time are
+                hereby expressly incorporated herein by reference. We reserve the right, in our sole discretion, to make
+                changes or modifications to these Legal Terms at any time and for any reason. We will alert you about any
+                changes by updating the "Last updated" date of these Legal Terms, and you waive any right to receive
+                specific notice of each such change. It is your responsibility to periodically review these Legal Terms to
+                stay informed of updates. You will be subject to, and will be deemed to have been made aware of and to have
+                accepted, the changes in any revised Legal Terms by your continued use of the Services after the date such
+                revised Legal Terms are posted. We recommend that you print a copy of these Legal Terms for your records.
+              </p>
+            </section>
+
+            {/* TABLE OF CONTENTS */}
+            <section aria-labelledby="toc" className="text-[#48286E]">
+              <h2 id="toc" className="text-lg sm:text-xl font-bold text-[#48286E] m-0">
+                TABLE OF CONTENTS
+              </h2>
+
+              <ol className="mt-4 list-decimal no-prose text-[#48286E] pl-5 space-y-1">
+                <li><a className="text-[#48286E]" href="#our-services">OUR SERVICES</a></li>
+                <li><a className="text-[#48286E]" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
+                <li><a className="text-[#48286E]" href="#user-representations">USER REPRESENTATIONS</a></li>
+                <li><a className="text-[#48286E]" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
+                <li><a className="text-[#48286E]" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
+                <li><a className="text-[#48286E]" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
+                <li><a className="text-[#48286E]" href="#services-management">SERVICES MANAGEMENT</a></li>
+                <li><a className="text-[#48286E]" href="#term-termination">TERM AND TERMINATION</a></li>
+                <li><a className="text-[#48286E]" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
+                <li><a className="text-[#48286E]" href="#governing-law">GOVERNING LAW</a></li>
+                <li><a className="text-[#48286E]" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
+                <li><a className="text-[#48286E]" href="#corrections">CORRECTIONS</a></li>
+                <li><a className="text-[#48286E]" href="#disclaimer">DISCLAIMER</a></li>
+                <li><a className="text-[#48286E]" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
+                <li><a className="text-[#48286E]" href="#indemnification">INDEMNIFICATION</a></li>
+                <li><a className="text-[#48286E]" href="#user-data">USER DATA</a></li>
+                <li><a className="text-[#48286E]" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
+                <li><a className="text-[#48286E]" href="#miscellaneous">MISCELLANEOUS</a></li>
+                <li><a className="text-[#48286E]" href="#contact-us">CONTACT US</a></li>
+              </ol>
+            </section>
+
+            {/* 1. OUR SERVICES */}
+            <section id="our-services" className="scroll-mt-24">
+              <h2 className="text-xl text-[#48286E] sm:text-2xl font-bold ">1. OUR SERVICES</h2>
+              <p>
+                The information provided when using the Services is not intended for distribution to or use by any person
+                or entity in any jurisdiction or country where such distribution or use would be contrary to law or
+                regulation or which would subject us to any registration requirement within such jurisdiction or country.
+                Accordingly, those persons who choose to access the Services from other locations do so on their own
+                initiative and are solely responsible for compliance with local laws, if and to the extent local laws are
+                applicable.
+              </p>
+            </section>
+
+            {/* 2. INTELLECTUAL PROPERTY RIGHTS */}
+            <section id="ipr" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E] ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
+
+              <h3 className="text-lg font-semibold ">Our intellectual property</h3>
+              <p>
+                We are the owner or the licensee of all intellectual property rights in our Services, including all source
+                code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics
+                in the Services (collectively, the "Content"), as well as the trademarks, service marks, and logos
+                contained therein (the "Marks"). Our Content and Marks are protected by copyright and trademark laws (and
+                various other intellectual property rights and unfair competition laws) and treaties around the world. The
+                Content and Marks are provided in or through the Services "AS IS" for your personal, non-commercial use or
+                internal business purpose only.
+              </p>
+
+              <h3 className="text-lg font-semibold text-[#48286E]">Your use of our Services</h3>
+              <p>
+                Subject to your compliance with these Legal Terms, including the "PROHIBITED ACTIVITIES" section below, we
+                grant you a non-exclusive, non-transferable, revocable license to:
+              </p>
+
+              <ul className="list-disc pl-6 space-y-1">
+                <li>access the Services; and</li>
+                <li>
+                  download or print a copy of any portion of the Content to which you have properly gained access, solely
+                  for your personal, non-commercial use or internal business purpose.
+                </li>
+              </ul>
+
+              <p>
+                Except as set out in this section or elsewhere in our Legal Terms, no part of the Services and no Content
+                or Marks may be copied, reproduced, aggregated, republished, uploaded, posted, publicly displayed, encoded,
+                translated, transmitted, distributed, sold, licensed, or otherwise exploited for any commercial purpose
+                whatsoever, without our express prior written permission. If you wish to make any use of the Services,
+                Content, or Marks other than as set out in this section or elsewhere in our Legal Terms, please address
+                your request to:{" "}
+                <a className="" href="mailto:loafhoustontx@gmail.com">
+                  loafhoustontx@gmail.com
+                </a>
+                .
+              </p>
+
+              <p>
+                If we ever grant you the permission to post, reproduce, or publicly display any part of our Services or
+                Content, you must identify us as the owners or licensors of the Services, Content, or Marks and ensure that
+                any copyright or proprietary notice appears or is visible on posting, reproducing, or displaying our
+                Content. We reserve all rights not expressly granted to you in and to the Services, Content, and Marks. Any
+                breach of these Intellectual Property Rights will constitute a material breach of our Legal Terms and your
+                right to use our Services will terminate immediately.
+              </p>
+
+              <h3 className="text-lg font-semibold text-[#48286E]">Your submissions</h3>
+              <p>
+                Please review this section and the "PROHIBITED ACTIVITIES" section carefully prior to using our Services to
+                understand the (a) rights you give us and (b) obligations you have when you post or upload any content
+                through the Services.
+              </p>
+
+              <p>
+                <strong>Submissions:</strong> By directly sending us any question, comment, suggestion, idea, feedback, or
+                other information about the Services ("Submissions"), you agree to assign to us all intellectual property
+                rights in such Submission. You agree that we shall own this Submission and be entitled to its unrestricted
+                use and dissemination for any lawful purpose, commercial or otherwise, without acknowledgment or
+                compensation to you.
+              </p>
+
+              <p>
+                <strong>
+                  You are responsible for what you post or upload: By sending us Submissions through any part of the
+                  Services you:
+                </strong>
+              </p>
+
+              <ul className="list-disc pl-6 space-y-2">
+                <li>
+                  confirm that you have read and agree with our "PROHIBITED ACTIVITIES" and will not post, send, publish,
+                  upload, or transmit through the Services any Submission that is illegal, harassing, hateful, harmful,
+                  defamatory, obscene, bullying, abusive, discriminatory, threatening to any person or group, sexually
+                  explicit, false, inaccurate, deceitful, or misleading;
+                </li>
+                <li>to the extent permissible by applicable law, waive any and all moral rights to any such Submission;</li>
+                <li>
+                  warrant that any such Submission are original to you or that you have the necessary rights and licenses
+                  to submit such Submissions and that you have full authority to grant us the above-mentioned rights in
+                  relation to your Submissions; and
+                </li>
+                <li>warrant and represent that your Submissions do not constitute confidential information.</li>
+              </ul>
+
+              <p>
+                You are solely responsible for your Submissions and you expressly agree to reimburse us for any and all
+                losses that we may suffer because of your breach of (a) this section, (b) any third party’s intellectual
+                property rights, or (c) applicable law.
+              </p>
+            </section>
+
+            {/* 3. USER REPRESENTATIONS */}
+            <section id="user-representations" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold ">3. USER REPRESENTATIONS</h2>
+              <p>By using the Services, you represent and warrant that:</p>
+              <ol className="list-decimal pl-6 space-y-1">
+                <li>you have the legal capacity and you agree to comply with these Legal Terms;</li>
+                <li>you are not a minor in the jurisdiction in which you reside;</li>
+                <li>you will not access the Services through automated or non-human means, whether through abot, script or otherwise;</li>
+                <li>you will not use the Services for any illegal or unauthorized purpose; and</li>
+                <li>your use of the Services will not violate any applicable law or regulation.</li>
+              </ol>
+              <p>
+                If you provide any information that is untrue, inaccurate, not current, or incomplete, we have the right to
+                suspend or terminate your account and refuse any and all current or future use of the Services (or any
+                portion thereof).
+              </p>
+            </section>
+
+            {/* 4. PROHIBITED ACTIVITIES */}
+            <section id="prohibited-activities" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">4. PROHIBITED ACTIVITIES</h2>
+
+              <p>
+                You may not access or use the Services for any purpose other than that for which we make the Services
+                available. The Services may not be used in connection with any commercial endeavors except those that are
+                specifically endorsed or approved by us. As a user of the Services, you agree not to:
+              </p>
+
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Systematically retrieve data or other content from the Services to create or compile, directly or indirectly, a collection, compilation, database, or directory without written permission from us.</li>
+                <li>Trick, defraud, or mislead us and other users, especially in any attempt to learn sensitive account information such as user passwords.</li>
+                <li>Circumvent, disable, or otherwise interfere with security-related features of the Services, including features that prevent or restrict the use or copying of any Content or enforce limitations on the use of the Services and/or the Content contained therein.</li>
+                <li>Disparage, tarnish, or otherwise harm, in our opinion, us and/or the Services.</li>
+                <li>Use any information obtained from the Services to harass abuse or harm another person.</li>
+                <li>Make improper use of our support services or submit false reports ofabuse or misconduct.</li>
+                <li>Use the Services in a manner inconsistent with any applicable laws or regulations.</li>
+                <li>Engage in unauthorized framing of or linking to the Services.</li>
+                <li>Upload or transmit (or attempt to upload or to transmit) viruses, Trojan horses, or other material, including excessive use of capital letters and spamming (continuous posting of repetitive text), that interferes with any party’s uninterrupted use and enjoyment of the Services or modifies, impairs, disrupts, alters, or interferes with the use, features, functions, operation, or maintenance of the Services.</li>
+                <li>Engage in any automated use of the system, such as using scripts to send comments or messages, or using any data mining, robots, or similar data gathering and extraction tools.</li>
+                <li>Delete the copyright or other proprietary rights notice from any Content.</li>
+                <li>Attempt to impersonate another user or person or use the username of another user.</li>
+                <li>Upload or transmit (or attempt to upload or to transmit) any material that acts as a passive or active information collection or transmission mechanism, including without limitation, clear graphics interchange formats ("gifs"), 1×1 pixels, web bugs, cookies, or other similar devices (sometimes referred to as "spyware" or "passive collection mechanisms" or "pcms").</li>
+                <li>Interfere with, disrupt, or create an undue burden on the Services or the networks or services connected to the Services.</li>
+                <li>Harass, annoy, intimidate, or threaten any of our employees or agents engaged in providing any portion of the Services to you.</li>
+                <li>Attempt to bypass any measures of the Services designed to prevent or restrict access to the Services, or any portion of the Services.</li>
+                <li>Copy or adapt the Services' software, including but not limited to Flash, PHP, HTML, JavaScript, or other code.</li>
+                <li>Except as permitted by applicable law, decipher, decompile, disassemble, or reverse engineer any of the software comprising or in any way making up a part of the Services.</li>
+                <li>Except as may be the result of standard search engine or Internet browser usage, use, launch, develop, or distribute any automated system, including without limitation, any spider, robot, cheat utility, scraper, or offline reader that accesses the Services, or use or launch any unauthorized script or other software.</li>
+                <li>Use a buying agent or purchasing agent to make purchases on the Services.</li>
+                <li>Make any unauthorized use of the Services, including collecting usernames and/or email addresses of users by electronic or other means for the purpose of sending unsolicited email, or creating user accounts by automated means or under false pretenses.</li>
+                <li>Use the Services as part of any effort to compete with us or otherwise use the Services and/or the Content for any revenue-generating endeavor or commercial enterprise.</li>
+              </ul>
+            </section>
+
+            {/* 5. USER GENERATED CONTRIBUTIONS */}
+            <section id="ugc" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">5. USER GENERATED CONTRIBUTIONS</h2>
+              <p>
+                The Services does not offer users to submit or post content. We may provide you with the opportunity to
+                create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials
+                to us or on the Services, including but not limited to text, writings, video, audio, photographs, graphics,
+                comments, suggestions, or personal information or other material (collectively, "Contributions").
+                Contributions may be viewable by other users of the Services and through third-party websites. When you
+                create or make available any Contributions, you thereby represent and warrant that:
+              </p>
+            </section>
+
+            {/* 6. CONTRIBUTION LICENSE */}
+            <section id="contribution-license" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">6. CONTRIBUTION LICENSE</h2>
+              <p>
+                You and Services agree that we may access, store, process, and use any information and personal data that
+                you provide and your choices (including settings).
+              </p>
+              <p>
+                By submitting suggestions or other feedback regarding the Services, you agree that we can use and share
+                such feedback for any purpose without compensation to you.
+              </p>
+              <p>
+                We do not assert any ownership over your Contributions. You retain full ownership of all of your
+                Contributions and any intellectual property rights, or other proprietary rights associated with your
+                Contributions. We are not liable for any statements or representations in your Contributions provided by
+                you in any area on the Services. You are solely responsible for your Contributions to the Services and you
+                expressly agree to exonerate us from any and all responsibility and to refrain from any legal action
+                against us regarding your Contributions.
+              </p>
+            </section>
+
+            {/* 7. SERVICES MANAGEMENT */}
+            <section id="services-management" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">7. SERVICES MANAGEMENT</h2>
+              <p>
+                We reserve the right, but not the obligation, to: (1) monitor the Services for violations of these Legal
+                Terms; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or
+                these Legal Terms, including without limitation, reporting such user to law enforcement authorities; (3) in
+                our sole discretion and without limitation, refuse, restrict access to, limit the availability of, or
+                disable (to the extent technologically feasible) any of your Contributions or any portion thereof; (4) in
+                our sole discretion and without limitation, notice, or liability, to remove from the Services or otherwise
+                disable all files and content that are excessive in size or are in any way burdensome to our systems; and
+                (5) otherwise manage the Services in a manner designed to protect our rights and property and to
+                facilitate the proper functioning of the Services.
+              </p>
+            </section>
+
+            {/* 8. TERM AND TERMINATION */}
+            <section id="term-termination" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">8. TERM AND TERMINATION</h2>
+              <p>
+                These Legal Terms shall remain in full force and effect while you use the Services.{" "}
+                <strong>
+                  WITHOUT LIMITING ANY OTHER PROVISION OF THESE LEGAL TERMS, WE RESERVE THE RIGHT TO, IN OUR SOLE
+                  DISCRETION AND WITHOUT NOTICE OR LIABILITY, DENY ACCESS TO AND USE OF THE SERVICES (INCLUDING BLOCKING
+                  CERTAIN IP ADDRESSES), TO ANY PERSON FOR ANY REASON OR FOR NO REASON, INCLUDING WITHOUT LIMITATION FOR
+                  BREACH OF ANY REPRESENTATION, WARRANTY, OR COVENANT CONTAINED IN THESE LEGAL TERMS OR OF ANY APPLICABLE
+                  LAW OR REGULATION. WE MAY TERMINATE YOUR USE OR PARTICIPATION IN THE SERVICES OR DELETE ANY CONTENT OR
+                  INFORMATION THAT YOU POSTED AT ANY TIME, WITHOUT WARNING, IN OUR SOLE DISCRETION.
+                </strong>
+              </p>
+              <p>
+                If we terminate or suspend your account for any reason, you are prohibited from registering and creating a
+                new account under your name, a fake or borrowed name, or the name of any third party, even if you may be
+                acting on behalf of the third party. In addition to terminating or suspending your account, we reserve the
+                right to take appropriate legal action, including without limitation pursuing civil, criminal, and
+                injunctive redress.
+              </p>
+            </section>
+
+            {/* 9. MODIFICATIONS AND INTERRUPTIONS */}
+            <section id="modifications" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">9. MODIFICATIONS AND INTERRUPTIONS</h2>
+              <p>
+                We reserve the right to change, modify, or remove the contents of the Services at any time or for any
+                reason at our sole discretion without notice. However, we have no obligation to update any information on
+                our Services. We will not be liable to you or any third party for any modification, price change,
+                suspension, or discontinuance of the Services.
+              </p>
+              <p>
+                We cannot guarantee the Services will be available at all times. We may experience hardware, software, or
+                other problems or need to perform maintenance related to the Services, resulting in interruptions, delays,
+                or errors. We reserve the right to change, revise, update, suspend, discontinue, or otherwise modify the
+                Services at any time or for any reason without notice to you.
+              </p>
+              <p>
+                You agree that we have no liability whatsoever for any loss, damage, or inconvenience caused by your
+                inability to access or use the Services during any downtime or discontinuance of the Services. Nothing in
+                these Legal Terms will be construed to obligate us to maintain and support the Services or to supply any
+                corrections, updates, or releases in connection therewith.
+              </p>
+            </section>
+
+            {/* 10. GOVERNING LAW */}
+            <section id="governing-law" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">10. GOVERNING LAW</h2>
+              <p>
+                These Legal Terms shall be governed by and defined following the laws of Texas. LOAFers, Inc. and yourself
+                irrevocably consent that the courts of Houston shall have exclusive jurisdiction to resolve any dispute
+                which may arise in connection with these Legal Terms.
+              </p>
+            </section>
+
+            {/* 11. DISPUTE RESOLUTION */}
+            <section id="dispute-resolution" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">11. DISPUTE RESOLUTION</h2>
+
+              <h3 className="text-lg font-semibold ">Informal Negotiations</h3>
+              <p>
+                To expedite resolution and control the cost of any dispute, controversy, or claim related to these Legal
+                Terms (each a "Dispute" and collectively, the "Disputes") brought by either you or us (individually, a
+                "Party" and collectively, the "Parties"), the Parties agree to first attempt to negotiate any Dispute
+                (except those Disputes expressly provided below) informally for at least ___60_____ days before initiating
+                arbitration. Such informal negotiations commence upon written notice from one Party to the other Party.
+              </p>
+
+              <h3 className="text-lg font-semibold text-[#48286E]">Binding Arbitration</h3>
+              <p>
+                Any dispute arising out of or in connection with these Legal Terms, including any question regarding its
+                existence, validity, or termination, shall be referred to and finally resolved by the Disputy Resolution
+                Center of Harris County{" "}
+                <a
+                  className=""
+                  href="https://drc.harriscountytx.gov/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  https://drc.harriscountytx.gov/
+                </a>
+              </p>
+
+              <h3 className="text-lg font-semibold text-[#48286E]">Restrictions</h3>
+              <p>
+                The Parties agree that any arbitration shall be limited to the Dispute between the Parties individually.
+                To the full extent permitted by law, (a) no arbitration shall be joined with any other proceeding; (b)
+                there is no right or authority for any Dispute to be arbitrated on a class-action basis or to utilize class
+                action procedures; and (c) there is no right or authority for any Dispute to be brought in a purported
+                representative capacity on behalf of the general public or any other persons.
+              </p>
+
+              <h3 className="text-lg font-semibold text-[#48286E]">Exceptions to Informal Negotiations and Arbitration</h3>
+              <p>
+                The Parties agree that the following Disputes are not subject to the above provisions concerning informal
+                negotiations binding arbitration: (a) any Disputes seeking to enforce or protect, or concerning the validity
+                of, any of the intellectual property rights of a Party; (b) any Dispute related to, or arising from,
+                allegations of theft, piracy, invasion of privacy, or unauthorized use; and (c) any claim for injunctive
+                relief.
+              </p>
+              <p>
+                If this provision is found to be illegal or unenforceable, then neither Party will elect to arbitrate any
+                Dispute falling within that portion of this provision found to be illegal or unenforceable and such Dispute
+                shall be decided by a court of competent jurisdiction within the courts listed for jurisdiction above, and
+                the Parties agree to submit to the personal jurisdiction of that court.
+              </p>
+            </section>
+
+            {/* 12. CORRECTIONS */}
+            <section id="corrections" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">12. CORRECTIONS</h2>
+              <p>
+                There may be information on the Services that contains typographical errors, inaccuracies, or omissions,
+                including descriptions, pricing, availability, and various other information. We reserve the right to
+                correct any errors, inaccuracies, or omissions and to change or update the information on the Services at
+                any time, without prior notice.
+              </p>
+            </section>
+
+            {/* 13. DISCLAIMER */}
+            <section id="disclaimer" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">13. DISCLAIMER</h2>
+              <p className="font-semibold">
+                THE SERVICES ARE PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SERVICES WILL
+                BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR
+                IMPLIED, IN CONNECTION WITH THE SERVICES AND YOUR USE THEREOF, INCLUDING, WITHOUT LIMITATION, THE IMPLIED
+                WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+              </p>
+              <p className="font-semibold">
+                WE MAKE NO WARRANTIES OR REPRESENTATIONS ABOUT THE ACCURACY OR COMPLETENESS OF THE SERVICES' CONTENT OR THE
+                CONTENT OF ANY WEBSITES OR MOBILE APPLICATIONS LINKED TO THE SERVICES AND WE WILL ASSUME NO LIABILITY OR
+                RESPONSIBILITY FOR ANY (1) ERRORS, MISTAKES, OR INACCURACIES OF CONTENT AND MATERIALS, (2) PERSONAL INJURY
+                OR PROPERTY DAMAGE, OF ANY NATURE WHATSOEVER, RESULTING FROM YOUR ACCESS TO AND USE OF THE SERVICES, (3)
+                ANY UNAUTHORIZED ACCESS TO OR USE OF OUR SECURE SERVERS AND/OR ANY AND ALL PERSONAL INFORMATION AND/OR
+                FINANCIAL INFORMATION STORED THEREIN, (4) ANY INTERRUPTION OR CESSATION OF TRANSMISSION TO OR FROM THE
+                SERVICES, (5) ANY BUGS, VIRUSES, TROJAN HORSES, OR THE LIKE WHICH MAY BE TRANSMITTED TO OR THROUGH THE
+                SERVICES BY ANY THIRD PARTY, AND/OR (6) ANY ERRORS OR OMISSIONS IN ANY CONTENT AND MATERIALS OR FOR ANY LOSS
+                OR DAMAGE OF ANY KIND INCURRED AS A RESULT OF THE USE OF ANY CONTENT POSTED, TRANSMITTED, OR OTHERWISE MADE
+                AVAILABLE VIA THE SERVICES.
+              </p>
+              <p className="font-semibold">
+                WE DO NOT WARRANT, ENDORSE, GUARANTEE, OR ASSUME RESPONSIBILITY FOR ANY PRODUCT OR SERVICE ADVERTISED OR
+                OFFERED BY A THIRD PARTY THROUGH THE SERVICES, ANY HYPERLINKED WEBSITE, OR ANY WEBSITE OR MOBILE APPLICATION
+                FEATURED IN ANY BANNER OR OTHER ADVERTISING, AND WE WILL NOT BE A PARTY TO OR IN ANY WAY BE RESPONSIBLE FOR
+                MONITORING ANY TRANSACTION BETWEEN YOU AND ANY THIRD-PARTY PROVIDERS OF PRODUCTS OR SERVICES. AS WITH THE
+                PURCHASE OF A PRODUCT OR SERVICE THROUGH ANY MEDIUM OR IN ANY ENVIRONMENT, YOU SHOULD USE YOUR BEST
+                JUDGMENT AND EXERCISE CAUTION WHERE APPROPRIATE.
+              </p>
+            </section>
+
+            {/* 14. LIMITATIONS OF LIABILITY */}
+            <section id="limitations-liability" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">14. LIMITATIONS OF LIABILITY</h2>
+              <p className="font-semibold">
+                IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY
+                DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST
+                PROFIT, LOST REVENUE, LOSS OF DATA, OR OTHER DAMAGES ARISING FROM YOUR USE OF THE SERVICES, EVEN IF WE HAVE
+                BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+              </p>
+              <p className="font-semibold">
+                NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, OUR LIABILITY TO YOU FOR ANY CAUSE WHATSOEVER
+                AND REGARDLESS OF THE FORM OF THE ACTION, WILL AT ALL TIMES BE LIMITED TO THE LESSER OF THE AMOUNT PAID, IF
+                ANY, BY YOU TO US OR .
+              </p>
+              <p className="font-semibold">
+                CERTAIN US STATE LAWS AND INTERNATIONAL LAWS DO NOT ALLOW LIMITATIONS ON IMPLIED WARRANTIES OR THE
+                EXCLUSION OR LIMITATION OF CERTAIN DAMAGES. IF THESE LAWS APPLY TO YOU, SOME OR ALL OF THE ABOVE
+                DISCLAIMERS OR LIMITATIONS MAY NOT APPLY TO YOU, AND YOU MAY HAVE ADDITIONAL RIGHTS.
+              </p>
+            </section>
+
+            {/* 15. INDEMNIFICATION */}
+            <section id="indemnification" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">15. INDEMNIFICATION</h2>
+              <p>
+                You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of
+                our respective officers, agents, partners, and employees, from and against any loss, damage, liability,
+                claim, or demand, including reasonable attorneys’ fees and expenses, made by any third party due to or
+                arising out of: (1) use of the Services; (2) breach of these Legal Terms; (3) any breach of your
+                representations and warranties set forth in these Legal Terms; (4) your violation of the rights of a third
+                party, including but not limited to intellectual property rights; or (5) any overt harmful act toward any
+                other user of the Services with whom you connected via the Services.
+              </p>
+              <p>
+                Notwithstanding the foregoing, we reserve the right, at your expense, to assume the exclusive defense and
+                control of any matter for which you are required to indemnify us, and you agree to cooperate, at your
+                expense, with our defense of such claims. We will use reasonable efforts to notify you of any such claim,
+                action, or proceeding which is subject to this indemnification upon becoming aware of it.
+              </p>
+            </section>
+
+            {/* 16. USER DATA */}
+            <section id="user-data" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">16. USER DATA</h2>
+              <p>
+                We will maintain certain data that you transmit to the Services for the purpose of managing the performance
+                of the Services, as well as data relating to your use of the Services. Although we perform regular routine
+                backups of data, you are solely responsible for all data that you transmit or that relates to any activity
+                you have undertaken using the Services. You agree that we shall have no liability to you for any loss or
+                corruption of any such data, and you hereby waive any right of action against us arising from any such loss
+                or corruption of such data.
+              </p>
+            </section>
+
+            {/* 17. ELECTRONIC COMMUNICATIONS */}
+            <section id="electronic-comms" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+                17. ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES
+              </h2>
+              <p>
+                Visiting the Services, sending us emails, and completing online forms constitute electronic communications.
+                You consent to receive electronic communications, and you agree that all agreements, notices, disclosures,
+                and other communications we provide to you electronically, via email and on the Services, satisfy any legal
+                requirement that such communication be in writing.
+              </p>
+              <p className="font-semibold">
+                YOU HEREBY AGREE TO THE USE OF ELECTRONIC SIGNATURES, CONTRACTS, ORDERS, AND OTHER RECORDS, AND TO
+                ELECTRONIC DELIVERY OF NOTICES, POLICIES, AND RECORDS OF TRANSACTIONS INITIATED OR COMPLETED BY US OR VIA
+                THE SERVICES.
+              </p>
+              <p>
+                You hereby waive any rights or requirements under any statutes, regulations, rules, ordinances, or other
+                laws in any jurisdiction which require an original signature or delivery or retention of non-electronic
+                records, or to payments or the granting of credits by any means other than electronic means.
+              </p>
+            </section>
+
+            {/* 18. MISCELLANEOUS */}
+            <section id="miscellaneous" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">18. MISCELLANEOUS</h2>
+              <p>
+                These Legal Terms and any policies or operating rules posted by us on the Services or in respect to the
+                Services constitute the entire agreement and understanding between you and us. Our failure to exercise or
+                enforce any right or provision of these Legal Terms shall not operate as a waiver of such right or
+                provision.
+              </p>
+              <p>
+                These Legal Terms operate to the fullest extent permissible by law. We may assign any or all of our rights
+                and obligations to others at any time. We shall not be responsible or liable for any loss, damage, delay,
+                or failure to act caused by any cause beyond our reasonable control.
+              </p>
+              <p>
+                If any provision or part of a provision of these Legal Terms is determined to be unlawful, void, or
+                unenforceable, that provision or part of the provision is deemed severable from these Legal Terms and does
+                not affect the validity and enforceability of any remaining provisions.
+              </p>
+              <p>
+                There is no joint venture, partnership, employment or agency relationship created between you and us as a
+                result of these Legal Terms or use of the Services. You agree that these Legal Terms will not be construed
+                against us by virtue of having drafted them. You hereby waive any and all defenses you may have based on
+                the electronic form of these Legal Terms and the lack of signing by the parties hereto to execute these
+                Legal Terms.
+              </p>
+            </section>
+
+            {/* 19. CONTACT US */}
+            <section id="contact-us" className="scroll-mt-24">
+              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">19. CONTACT US</h2>
+              <p>
+                In order to resolve a complaint regarding the Services or to receive further information regarding use of
+                the Services, please contact us at:
+              </p>
+
+              <div className="not-prose mt-4 ">
+                <p className="font-semibold  mb-2">LOAFers, Inc.</p>
+                <p className="">PO Box 7207</p>
+                <p className="">Houston, TX 77249</p>
+                <p className="">United States</p>
+                <p className="mt-3">
+                  <a className="" href="mailto:info@loaftx.org">
+                    info@loaftx.org
+                  </a>
                 </p>
               </div>
             </section>
-
-            {/* Section 2: Intellectual Property Rights */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                2. Intellectual Property Rights
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  Unless otherwise indicated, the Site is our proprietary property and all source code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics on the Site (collectively, the "Content") and the trademarks, service marks, and logos contained therein (the "Marks") are owned or controlled by us or licensed to us, and are protected by copyright and trademark laws and various other intellectual property rights and unfair competition laws of the United States, foreign jurisdictions, and international conventions.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 3: User Representations */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                3. User Representations
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  By using the Site, you represent and warrant that:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li>All registration information you submit will be true, accurate, current, and complete</li>
-                  <li>You will maintain the accuracy of such information and promptly update such registration information as necessary</li>
-                  <li>You have the legal capacity and you agree to comply with these Terms of Service</li>
-                  <li>You are not under the age of 13</li>
-                  <li>Not a minor in the jurisdiction in which you reside, or if a minor, you have received parental permission to use the Site</li>
-                  <li>You will not access the Site through automated or non-human means</li>
-                  <li>You will not use the Site for any illegal or unauthorized purpose</li>
-                  <li>Your use of the Site will not violate any applicable law or regulation</li>
-                </ul>
-              </div>
-            </section>
-
-            {/* Section 4: Prohibited Activities */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                4. Prohibited Activities
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  You may not access or use the Site for any purpose other than that for which we make the Site available. The Site may not be used in connection with any commercial endeavors except those that are specifically endorsed or approved by us. As a user of the Site, you agree not to:
-                </p>
-                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
-                  <li>Systematically retrieve data or other content from the Site to create or compile, directly or indirectly, a collection, compilation, database, or directory without written permission from us</li>
-                  <li>Make any unauthorized use of the Site, including collecting usernames and/or email addresses of users by electronic or other means for the purpose of sending unsolicited email, or creating user accounts by automated means or under false pretenses</li>
-                  <li>Circumvent, disable, or otherwise interfere with security-related features of the Site</li>
-                  <li>Engage in unauthorized framing of or linking to the Site</li>
-                  <li>Trick, defraud, or mislead us and other users, especially in any attempt to learn sensitive account information such as user passwords</li>
-                  <li>Make improper use of our support services or submit false reports of abuse or misconduct</li>
-                  <li>Engage in any automated use of the system, such as using scripts to send comments or messages</li>
-                  <li>Interfere with, disrupt, or create an undue burden on the Site or the networks or services connected to the Site</li>
-                </ul>
-              </div>
-            </section>
-
-            {/* Section 5: User Generated Contributions */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                5. User Generated Contributions
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  The Site may invite you to chat, contribute to, or participate in blogs, message boards, online forums, and other functionality, and may provide you with the opportunity to create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials to us or on the Site.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 6: Contribution License */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                6. Contribution License
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  By posting your Contributions to any part of the Site, you automatically grant, and you represent and warrant that you have the right to grant, to us an unrestricted, unlimited, irrevocable, perpetual, non-exclusive, transferable, royalty-free, fully-paid, worldwide right, and license to host, use, copy, reproduce, disclose, sell, resell, publish, broadcast, retitle, archive, store, cache, publicly perform, publicly display, reformat, translate, transmit, excerpt (in whole or in part), and distribute such Contributions.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 7: Submissions */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                7. Submissions
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  You acknowledge and agree that any questions, comments, suggestions, ideas, feedback, or other information regarding the Site ("Submissions") provided by you to us are non-confidential and shall become our sole property.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 8: Site Management */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                8. Site Management
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  We reserve the right, but not the obligation, to: (1) monitor the Site for violations of these Terms of Service; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or these Terms of Service; (3) refuse, restrict access to, limit the availability of, or disable (to the extent technologically feasible) any of your Contributions; (4) remove from the Site or otherwise disable all files and content that are excessive in size or are in any way burdensome to our systems.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 9: Term and Termination */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                9. Term and Termination
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  These Terms of Service shall remain in full force and effect while you use the Site. Without limiting any other provision of these Terms of Service, we reserve the right to, in our sole discretion and without notice or liability, deny access to and use of the Site to any person for any reason or for no reason.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 10: Modifications and Interruptions */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                10. Modifications and Interruptions
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  We reserve the right to change, modify, or remove the contents of the Site at any time or for any reason at our sole discretion without notice. We also reserve the right to modify or discontinue all or part of the Site without notice at any time.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 11: Governing Law */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                11. Governing Law
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  These Terms of Service and your use of the Site are governed by and construed in accordance with the laws of the State of Texas applicable to agreements made and to be entirely performed within the State of Texas, without regard to its conflict of law principles.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 12: Dispute Resolution */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                12. Dispute Resolution
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  Any legal action of whatever nature brought by either you or us shall be commenced or prosecuted in the state and federal courts located in Harris County, Texas, and the parties hereby consent to, and waive all defenses of lack of personal jurisdiction and forum non conveniens with respect to venue and jurisdiction in such state and federal courts.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 13: Corrections */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                13. Corrections
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  There may be information on the Site that contains typographical errors, inaccuracies, or omissions that may relate to the Site, including descriptions, pricing, availability, and various other information. We reserve the right to correct any errors, inaccuracies, or omissions and to change or update the information on the Site at any time, without prior notice.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 14: Disclaimer */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                14. Disclaimer
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  The Site is provided on an as-is and as-available basis. You agree that your use of the Site and our services will be at your sole risk. To the fullest extent permitted by law, we disclaim all warranties, express or implied, in connection with the Site and your use thereof.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 15: Limitations of Liability */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                15. Limitations of Liability
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  In no event will we or our directors, employees, or agents be liable to you or any third party for any direct, indirect, consequential, exemplary, incidental, special, or punitive damages, including lost profit, lost revenue, loss of data, or other damages arising from your use of the Site.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 16: Indemnification */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                16. Indemnification
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of our respective officers, agents, partners, and employees, from and against any loss, damage, liability, claim, or demand, including reasonable attorneys' fees and expenses, made by any third party due to or arising out of your use of the Site or breach of these Terms of Service.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 17: User Data */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                17. User Data
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  We will maintain certain data that you transmit to the Site for the purpose of managing the Site, as well as data relating to your use of the Site. Although we perform regular routine backups of data, you are solely responsible for all data that you transmit or that relates to any activity you have undertaken using the Site.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 18: Electronic Communications */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                18. Electronic Communications, Transactions, and Signatures
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  Visiting the Site, sending us emails, and completing online forms constitute electronic communications. You consent to receive electronic communications, and you agree that all agreements, notices, disclosures, and other communications we provide to you electronically, via email and on the Site, satisfy any legal requirement that such communication be in writing.
-                </p>
-              </div>
-            </section>
-
-            {/* Section 19: Contact Us */}
-            <section>
-              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
-                19. Contact Us
-              </h2>
-              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <p className="text-gray-700 leading-relaxed">
-                  In order to resolve a complaint regarding the Site or to receive further information regarding use of the Site, please contact us at:
-                </p>
-                <div className="bg-[#F8F7FB] p-4 rounded-lg border border-[#ddd8eb]">
-                  <p className="font-semibold text-gray-800">LOAFers, Inc.</p>
-                  <p className="text-gray-700">PO Box 7207</p>
-                  <p className="text-gray-700">Houston, TX 77249</p>
-                  <p className="text-gray-700 mt-2">
-                    Email: <a href="mailto:info@loaftx.org" className="text-[#664fa3] hover:text-[#422268] font-semibold">info@loaftx.org</a>
-                  </p>
-                </div>
-              </div>
-            </section>
-          </div>
-
-          {/* Back to Home Link */}
-          <div className="mt-8 text-center">
-            <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
-              style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span>←</span> Back to Home
-            </Link>
           </div>
         </div>
-      </div>
+        {/* Back to Home Link */}
+        <div className="mt-8 text-center">
+          <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <span>←</span> Back to Home
+          </Link>
+        </div>
+      </main>
       <PublicFooter />
     </>
+
   );
 }
+
+
+

tailwind.config.js

@@ -1,82 +1,85 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ["class"],
-    content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./public/index.html"
-  ],
-  theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
-  },
-  plugins: [require("tailwindcss-animate")],
+	darkMode: ["class"],
+	content: [
+		"./src/**/*.{js,jsx,ts,tsx}",
+		"./public/index.html"
+	],
+	theme: {
+		extend: {
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			colors: {
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))'
+				},
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))'
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))'
+				},
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				chart: {
+					'1': 'hsl(var(--chart-1))',
+					'2': 'hsl(var(--chart-2))',
+					'3': 'hsl(var(--chart-3))',
+					'4': 'hsl(var(--chart-4))',
+					'5': 'hsl(var(--chart-5))'
+				}
+			},
+			keyframes: {
+				'accordion-down': {
+					from: {
+						height: '0'
+					},
+					to: {
+						height: 'var(--radix-accordion-content-height)'
+					}
+				},
+				'accordion-up': {
+					from: {
+						height: 'var(--radix-accordion-content-height)'
+					},
+					to: {
+						height: '0'
+					}
+				}
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out'
+			}
+		}
+	},
+	plugins: [
+		require("tailwindcss-animate"),
+		require("@tailwindcss/typography")
+	],
 };