255 lines
11 KiB
JavaScript
255 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
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({});
|
|
|
|
const toggleAccordion = (categoryIndex, resourceIndex) => {
|
|
const key = `${categoryIndex}-${resourceIndex}`;
|
|
setOpenAccordions(prev => ({
|
|
...prev,
|
|
[key]: !prev[key]
|
|
}));
|
|
};
|
|
|
|
const isOpen = (categoryIndex, resourceIndex) => {
|
|
const key = `${categoryIndex}-${resourceIndex}`;
|
|
return openAccordions[key] || false;
|
|
};
|
|
|
|
const categories = [
|
|
{
|
|
title: 'General LGBTQ+',
|
|
icon: <FaFlag />,
|
|
resources: [
|
|
{
|
|
name: 'SPRY (Seniors Preparing for Rainbow Years)',
|
|
description: 'Social and recreational activities, health and wellness education plus drop-in center',
|
|
location: 'Law Harrington Senior Center, 2222 Cleburne St, Houston, TX 77004',
|
|
contact: 'Fred Reninger',
|
|
phone: '(713) 485-5056',
|
|
email: '[email protected]',
|
|
link: 'https://montrosecenter.org/services/seniors/'
|
|
},
|
|
{
|
|
name: 'SAGE - Advocacy and Services for LGBTQ Elders',
|
|
description: 'SageCents program offering financial management assistance in retirement',
|
|
link: 'https://www.sageusa.org/'
|
|
},
|
|
{
|
|
name: 'Houston LGBTQ+ Chamber of Commerce',
|
|
description: 'Member directory to support inclusive businesses advocating for LGBTQ+ community',
|
|
link: 'https://www.houstonlgbtchamber.com'
|
|
},
|
|
{
|
|
name: 'AARP',
|
|
description: 'News, finance, wellness topics for lesbian, gay, bisexual, transgender, queer community',
|
|
link: 'https://www.aarp.org/home-family/voices/lgbtq/'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Healthcare',
|
|
icon: <FaHeartbeat />,
|
|
resources: [
|
|
{
|
|
name: 'LHI (Lesbian Health Initiative)',
|
|
description: 'Eliminates healthcare barriers, helps find LGBTQ+ friendly providers and insurance assistance',
|
|
link: 'https://montrosecenter.org/services/gender-services/lhi/'
|
|
},
|
|
{
|
|
name: 'Legacy Community Health',
|
|
description: 'Full-service healthcare system with 50+ Texas Gulf Coast locations offering primary care, pediatrics, behavioral health, HIV/AIDS care, dental, vision services',
|
|
link: 'https://www.legacycommunityhealth.org/'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Food Assistance',
|
|
icon: <FaUtensils />,
|
|
resources: [
|
|
{
|
|
name: 'Meals on Wheels',
|
|
description: 'Home-delivered meals for seniors',
|
|
link: 'https://www.mealsonwheelsamerica.org/find-meals'
|
|
},
|
|
{
|
|
name: 'Senior Services (United Way)',
|
|
description: 'Referral services for senior assistance programs',
|
|
link: 'https://referral.unitedwayhouston.org/'
|
|
},
|
|
{
|
|
name: 'Food Pantries',
|
|
description: 'Directory of food pantries in the Houston area',
|
|
link: 'https://referral.unitedwayhouston.org/MatchList.aspx?k;;0;;N;0;2448611;Food%20Pantries;Food%20Pantries;Partial'
|
|
},
|
|
{
|
|
name: '211 Texas/United Way Helpline',
|
|
description: 'Free, confidential helpline for utility, rent, housing, benefits, food, childcare assistance',
|
|
link: 'https://unitedwayhouston.org/what-we-do/211-texas-united-way-helpline/'
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<PublicNavbar />
|
|
|
|
<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-[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
|
|
</h1>
|
|
|
|
</section>
|
|
|
|
{/* Resources Grid */}
|
|
<section className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
|
|
{categories.map((category, categoryIndex) => (
|
|
<div key={categoryIndex} className="space-y-6">
|
|
{/* Category Title */}
|
|
<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>
|
|
|
|
{/* Resources Accordions */}
|
|
<div className="space-y-4">
|
|
{category.resources.map((resource, resourceIndex) => {
|
|
const isExpanded = isOpen(categoryIndex, resourceIndex);
|
|
|
|
return (
|
|
<div key={resourceIndex} className="overflow-hidden ">
|
|
{/* Accordion Button */}
|
|
<button
|
|
onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
|
|
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' : ''}`}
|
|
/>
|
|
</button>
|
|
|
|
{/* Accordion Content */}
|
|
<div
|
|
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-b-2xl rounded-t-none border-none ">
|
|
{/* Description */}
|
|
<p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{resource.description}
|
|
</p>
|
|
|
|
{/* Additional Details */}
|
|
<div className="space-y-3">
|
|
{/* Location */}
|
|
{resource.location && (
|
|
<div className="flex items-start gap-2 text-[#664fa3]">
|
|
<MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
|
|
<span className="text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{resource.location}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Contact */}
|
|
{resource.contact && (
|
|
<div className="text-[#664fa3]">
|
|
<p className="text-sm font-medium mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Contact: {resource.contact}
|
|
</p>
|
|
<div className="flex flex-col gap-1 ml-0">
|
|
{resource.phone && (
|
|
<div className="flex items-center gap-2">
|
|
<Phone className="size-4" />
|
|
<a
|
|
href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
|
|
className="text-sm hover:text-[#48286e] transition-colors"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
{resource.phone}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{resource.email && (
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="h-4 w-4" />
|
|
<a
|
|
href={`mailto:${resource.email}`}
|
|
className="text-sm hover:text-[#48286e] transition-colors"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
|
>
|
|
{resource.email}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Website Link */}
|
|
{resource.link && (
|
|
<a
|
|
href={resource.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-[#ff9e77] hover:text-[#e88a63] font-medium transition-colors mt-2"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Visit Website
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Additional Help Section */}
|
|
<section className="max-w-4xl mx-auto mt-16">
|
|
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-xl text-center">
|
|
<h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Need Additional Support?
|
|
</h3>
|
|
<p className="text-white text-lg mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
If you need help finding resources or have questions about the services listed above, please don't hesitate to reach out.
|
|
</p>
|
|
<a
|
|
href="mailto:support@loaf.org"
|
|
className="inline-block bg-white text-[#48286e] px-8 py-3 rounded-full font-semibold hover:bg-[#f1eef9] transition-colors shadow-lg"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Contact Us
|
|
</a>
|
|
</Card>
|
|
</section>
|
|
</main>
|
|
|
|
<PublicFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Resources;
|