Refactor BecomeMember, BoardOfDirectors, ContactUs, Donate, MissionValues, and Resources pages for improved layout, styling, and accessibility; update component structure and enhance responsiveness.

src/components/PublicNavbar.js

@@ -72,7 +72,7 @@ const PublicNavbar = () => {
   return (
     <>
       {/* Top Header - Auth Actions */}
-      <div className='sticky top-0 inset-x-0 z-40'>
+      <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'>

src/index.css

@@ -1,11 +1,14 @@
+@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:
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -13,8 +16,8 @@ body {
 }
 
 code {
-    font-family:
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+    monospace;
 }
 
 @layer base {

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="relative bg-gray-50 pt-20 px-6 pb-16">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+        <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,27 +71,35 @@ const BecomeMember = () => {
       </div>
 
       {/* Membership Process Section */}
-      <div className="relative bg-gray-50 py-16">
+      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] ">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+        {/* 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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+            <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"
@@ -118,14 +124,12 @@ const BecomeMember = () => {
         </div>
 
         {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
+        <Arrow />
-        <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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+            <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"
@@ -150,14 +154,11 @@ const BecomeMember = () => {
         </div>
 
         {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
+        <Arrow />
-        <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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+            <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"
@@ -182,14 +183,12 @@ const BecomeMember = () => {
         </div>
 
         {/* Arrow Down Icon */}
-      <div className="flex justify-center mb-8">
+        <Arrow />
-        <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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
+            <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"
@@ -212,19 +211,19 @@ const BecomeMember = () => {
             </div>
           </div>
         </div>
-
+      </div>
       {/* CTA Section */}
-      <div className="relative bg-gray-50 py-16">
+      <div className="relative bg-gray-50 py-16 ">
-        <div className="max-w-7xl mx-auto px-6 text-center">
+        <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',
+    { name: 'Danita Cole' },
-    'Roxanne Cherico',
+    { name: 'Roxanne Cherico' },
-    'Lucretia Copeland',
+    { name: 'Lucretia Copeland' },
-    'Julie Fischer'
+    { 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">
+      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb]  pt-8 sm:pt-10 md:pt-12">
-        {/* Hero Section with Contact */}
+        {/* Hero Section  */}
-        <section className="bg-gradient-to-r from-[#664fa3] to-[#48286e] py-8 rounded-2xl mb-12">
+        <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,57 +91,28 @@ 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 */}
-        <section className="py-12">
+          <DirectorCards title="Officers" members={officers} />
-          <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 */}
-        <section className="py-12 bg-gray-50 rounded-2xl">
+          <DirectorCards title="Board Of Directors" members={boardMembers} />
-          <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">
+        <section className="py-12 bg-white mt-12 ">
-          <div className="max-w-4xl mx-auto">
+          {/* content containter */}
-            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <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" }}>
+            <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
+              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.
-              to know if you are thinking about serving on the Board of Directors.
             </p>
-            <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg">
+            {/* 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:{' '}
@@ -96,13 +121,39 @@ const BoardOfDirectors = () => {
                       Click Here
                     </a>
                   </li>
-                <li>Nominees must have been a member for at least 1 year and current with their dues.</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 1-2 hours per week.</li>
+                  <li>Each director shall serve a 2-year term.</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>The time commitment is approximately 1–2 hours per week.</li>
-                <li>We are a fun group, and we would love for you to join us in providing this service for our community.</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>

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">
+            <Card className="p-8 bg-white rounded-2xl">
-              <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <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">
+                  <div className="flex items-center justify-center flex-shrink-0">
-                    <Mail className="h-6 w-6 text-[#664fa3]" />
+                    <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">
+                  <div className="flex items-center justify-center flex-shrink-0">
-                    <MapPin className="h-6 w-6 text-[#664fa3]" />
+                    <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,10 +55,10 @@ 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">
@@ -68,7 +68,7 @@ const Donate = () => {
             <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>

src/pages/MissionValues.js

@@ -11,10 +11,10 @@ const MissionValues = () => {
       <PublicNavbar />
 
       <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
-        <div className="max-w-7xl mx-auto">
+        <div className="max-w-[1400px] mx-auto">
-          <div className="flex md:flex-row flex-col gap-10">
+          <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-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  md:flex-1">
+            <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
@@ -29,7 +29,7 @@ const MissionValues = () => {
             </Card>
 
             {/* Right Card - Values */}
-            <Card className="bg-white p-16 rounded-2xl shadow-lg md:flex-1 ">
+            <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

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" }}>
+          <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" 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" }}>
             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"