andika/membership-fe
3
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kayela
2025-12-18 16:34:14 -06:00
parent a9bdd1d0a6
commit 1d4ed96dc9
8 changed files with 401 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PublicNavbar.js
View File

@@ -72,7 +72,7 @@ const PublicNavbar = () => {
return ( return (
<> <>
{/* Top Header - Auth Actions */} {/* 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"> <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'> <div className='flex gap-4 sm:gap-6'>

195
src/index.css
View File

@@ -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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { body {
margin: 0; 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",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
sans-serif; -webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
} }
code { 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 { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 280 47% 27%; --foreground: 280 47% 27%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 280 47% 27%; --card-foreground: 280 47% 27%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 280 47% 27%; --popover-foreground: 280 47% 27%;
--primary: 280 47% 27%; --primary: 280 47% 27%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
--secondary: 268 33% 89%; --secondary: 268 33% 89%;
--secondary-foreground: 280 47% 27%; --secondary-foreground: 280 47% 27%;
--muted: 268 43% 95%; --muted: 268 43% 95%;
--muted-foreground: 268 35% 47%; --muted-foreground: 268 35% 47%;
--accent: 17 100% 73%; --accent: 17 100% 73%;
--accent-foreground: 280 47% 27%; --accent-foreground: 280 47% 27%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 268 33% 89%; --border: 268 33% 89%;
--input: 268 33% 89%; --input: 268 33% 89%;
--ring: 268 35% 47%; --ring: 268 35% 47%;
--chart-1: 268 36% 46%; --chart-1: 268 36% 46%;
--chart-2: 17 100% 73%; --chart-2: 17 100% 73%;
--chart-3: 268 33% 89%; --chart-3: 268 33% 89%;
--chart-4: 280 44% 29%; --chart-4: 280 44% 29%;
--chart-5: 268 35% 47%; --chart-5: 268 35% 47%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 0 0% 3.9%; --background: 0 0% 3.9%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 0 0% 3.9%; --card: 0 0% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%; --popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 0 0% 9%; --primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%; --secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%; --muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%; --muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%; --accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
--chart-2: 160 60% 45%; --chart-2: 160 60% 45%;
--chart-3: 30 80% 55%; --chart-3: 30 80% 55%;
--chart-4: 280 65% 60%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
} }
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
@layer base { @layer base {
[data-debug-wrapper="true"] { [data-debug-wrapper="true"] {
display: contents !important; display: contents !important;
} }
[data-debug-wrapper="true"] > * { [data-debug-wrapper="true"] > * {
margin-left: inherit; margin-left: inherit;
margin-right: inherit; margin-right: inherit;
margin-top: inherit; margin-top: inherit;
margin-bottom: inherit; margin-bottom: inherit;
padding-left: inherit; padding-left: inherit;
padding-right: inherit; padding-right: inherit;
padding-top: inherit; padding-top: inherit;
padding-bottom: inherit; padding-bottom: inherit;
column-gap: inherit; column-gap: inherit;
row-gap: inherit; row-gap: inherit;
gap: inherit; gap: inherit;
border-left-width: inherit; border-left-width: inherit;
border-right-width: inherit; border-right-width: inherit;
border-top-width: inherit; border-top-width: inherit;
border-bottom-width: inherit; border-bottom-width: inherit;
border-left-style: inherit; border-left-style: inherit;
border-right-style: inherit; border-right-style: inherit;
border-top-style: inherit; border-top-style: inherit;
border-bottom-style: inherit; border-bottom-style: inherit;
border-left-color: inherit; border-left-color: inherit;
border-right-color: inherit; border-right-color: inherit;
border-top-color: inherit; border-top-color: inherit;
border-bottom-color: inherit; border-bottom-color: inherit;
} }
} }

277
src/pages/BecomeMember.js
View File

@@ -14,22 +14,20 @@ const BecomeMember = () => {
const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`; const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`;
const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.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 ( return (
<div className="min-h-screen bg-gray-50 relative"> <div className="min-h-screen bg-gray-50 relative">
<PublicNavbar /> <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 */} {/* 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 <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]" 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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -46,7 +44,7 @@ const BecomeMember = () => {
</div> </div>
{/* Annual Administrative Fees Section */} {/* 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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img <img
@@ -73,158 +71,159 @@ const BecomeMember = () => {
</div> </div>
{/* Membership Process Section */} {/* 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 <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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Membership Process Membership Process
</h2> </h2>
<p <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" }} 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: Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
</p> </p>
</div> </div>
</div>
{/* Step 1 */}
<div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8"> {/* Step 1 */}
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center"> <div className="max-w-[1340px] mx-auto px-6 mb-2 ">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<img <div className="w-24 h-24 sm:w-32 z-40 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
src={imgIconAdminFee2} <img
alt="Step 1 Icon" src={imgIconAdminFee2}
className="w-full h-full object-contain" 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>
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8"> </div>
<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]" {/* Arrow Down Icon */}
style={{ fontFamily: "'Poppins', sans-serif" }} <Arrow />
>
Step 1: Application & Email Confirmation {/* Step 2 */}
</h3> <div className="max-w-[1340px] mx-auto px-6 mb-2">
<p <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]" <div className="w-24 h-24 z-40 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }} <img
> src={imgIconAdminFee3}
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. alt="Step 2 Icon"
</p> 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> </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 */} {/* 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 <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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Ready to Join Us? Ready to Join Us?
</h2> </h2>
<Link to="/register"> <Link to="/register">
<Button <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" }} style={{ fontFamily: "'Inter', sans-serif" }}
> >
Register Now! Register Now!

189
src/pages/BoardOfDirectors.js
View File

@@ -12,24 +12,78 @@ const BoardOfDirectors = () => {
]; ];
const boardMembers = [ 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 ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <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"> <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 LOAF Board of Directors 2025
</h1> </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{' '} 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"> <a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
info@loaftx.org info@loaftx.org
@@ -37,74 +91,71 @@ const BoardOfDirectors = () => {
</p> </p>
</div> </div>
</section> </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 */} {/* Board Members Grid */}
<section className="py-12"> <DirectorCards title="Board Of Directors" members={boardMembers} />
<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">
<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> </section>
{/* Join the Board 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 Join the Board of Directors
</h2> </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> </p>
<Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg"> {/* card */}
<ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
<li> <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Nominations are due by November 1. Nomination Form:{' '} <li>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer" Nominations are due by November 1. Nomination Form:{' '}
className="text-[#664fa3] underline hover:text-[#48286e] transition-colors"> <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
Click Here className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
</a> Click Here
</li> </a>
<li>Nominees must have been a member for at least 1 year and current with their dues.</li> </li>
<li>Officer positions are only available to current directors.</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>Each director shall serve a 2 year term.</li> <li>Officer positions are only available to current directors.</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>Each director shall serve a 2-year term.</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> <li>The time commitment is approximately 1–2 hours per week.</li>
</ol>
</Card> <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> </div>
</section> </section>
</main> </main>

36
src/pages/ContactUs.js
View File

@@ -10,7 +10,7 @@ import { Checkbox } from '../components/ui/checkbox';
import { Mail, MapPin, Loader2 } from 'lucide-react'; import { Mail, MapPin, Loader2 } from 'lucide-react';
import api from '../utils/api'; import api from '../utils/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { PiMapTrifoldBold } from "react-icons/pi";
const ContactUs = () => { const ContactUs = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: '', firstName: '',
@@ -103,8 +103,8 @@ const ContactUs = () => {
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
{/* Contact Form */} {/* 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 Contact Form
</h1> </h1>
@@ -120,7 +120,7 @@ const ContactUs = () => {
name="firstName" name="firstName"
value={formData.firstName} value={formData.firstName}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -134,7 +134,7 @@ const ContactUs = () => {
name="lastName" name="lastName"
value={formData.lastName} value={formData.lastName}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -152,7 +152,7 @@ const ContactUs = () => {
type="email" type="email"
value={formData.email} value={formData.email}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -168,7 +168,7 @@ const ContactUs = () => {
name="subject" name="subject"
value={formData.subject} value={formData.subject}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -184,7 +184,7 @@ const ContactUs = () => {
name="message" name="message"
value={formData.message} value={formData.message}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -226,21 +226,21 @@ const ContactUs = () => {
<div className="space-y-6"> <div className="space-y-6">
{/* Message Card */} {/* Message Card */}
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white"> <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. If you have questions, or are interested in joining, we would love hearing from you.
</p> </p>
</Card> </Card>
{/* Email 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="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>
<div> <div>
<a <a
href="mailto:info@loaftx.org" 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" }} style={{ fontFamily: "'Inter', sans-serif" }}
> >
info@loaftx.org info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
</Card> </Card>
{/* Address 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="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>
<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 LOAF
</p> </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 /> P.O. Box 7207<br />
Houston, Texas 77248-7207 Houston, Texas 77248-7207
</p> </p>

6
src/pages/Donate.js
View File

@@ -55,10 +55,10 @@ const Donate = () => {
}; };
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen ]">
<PublicNavbar /> <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 */} {/* Hero Section */}
<section className="py-12"> <section className="py-12">
<div className="max-w-4xl mx-auto text-center"> <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" }}> <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Donate Donate
</h1> </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 We really appreciate your donations. You can make your donation online
or send a check by mail. or send a check by mail.
</p> </p>

8
src/pages/MissionValues.js
View File

@@ -11,10 +11,10 @@ const MissionValues = () => {
<PublicNavbar /> <PublicNavbar />
<main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 py-8 sm:py-12 md:py-20"> <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) */} {/* 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" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Mission LOAF Mission
@@ -29,7 +29,7 @@ const MissionValues = () => {
</Card> </Card>
{/* Right Card - Values */} {/* 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" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Values LOAF Values

31
src/pages/Resources.js
View File

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