Update Responsive and Contact Us page and function
This commit is contained in:
Koncept Kit
251
src/pages/Resources.js
Normal file
251
src/pages/Resources.js
Normal file
@@ -0,0 +1,251 @@
|
||||
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';
|
||||
|
||||
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+',
|
||||
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',
|
||||
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',
|
||||
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-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" }}>
|
||||
Tap or click on each purple tab below to open and read its contents
|
||||
</p>
|
||||
</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 */}
|
||||
<h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', 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-[#664fa3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-full flex items-center justify-between transition-all shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<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 mt-3' : 'max-h-0 opacity-0'
|
||||
}`}
|
||||
>
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
|
||||
{/* 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="h-4 w-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;
|
||||
Reference in New Issue
Block a user