Refactor BecomeMember, BoardOfDirectors, ContactUs, Donate, MissionValues, and Resources pages for improved layout, styling, and accessibility; update component structure and enhance responsiveness.
This commit is contained in:
@@ -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'>
|
||||
|
||||
@@ -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:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
font-family: -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:
|
||||
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
@@ -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,27 +71,35 @@ 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="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">
|
||||
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
|
||||
</div>
|
||||
<Arrow />
|
||||
|
||||
{/* 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">
|
||||
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
|
||||
</div>
|
||||
|
||||
<Arrow />
|
||||
{/* 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">
|
||||
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
|
||||
</div>
|
||||
<Arrow />
|
||||
|
||||
{/* 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="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!
|
||||
|
||||
@@ -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,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">
|
||||
<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>
|
||||
<DirectorCards title="Officers" members={officers} />
|
||||
|
||||
{/* 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>
|
||||
<DirectorCards title="Board Of Directors" members={boardMembers} />
|
||||
|
||||
</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">
|
||||
{/* 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>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>
|
||||
|
||||
<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:
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="flex md:flex-row flex-col gap-10">
|
||||
<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-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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -127,23 +130,25 @@ const Resources = () => {
|
||||
{/* 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"
|
||||
|
||||
Reference in New Issue
Block a user