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

31
src/pages/Resources.js
View File

@@ -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>
@@ -123,27 +126,29 @@ const Resources = () => {
const isExpanded = isOpen(categoryIndex, resourceIndex);
return (
<div key={resourceIndex} className="overflow-hidden">
<div key={resourceIndex} className="overflow-hidden ">
{/* Accordion Button */}
<button
onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
className="w-full bg-[#664fa3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-full flex items-center justify-between transition-all shadow-lg hover:shadow-xl"
className={`w-full bg-gradient-to-tr from-[#48286E] to-[#664FA3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
}
>
<span className="text-lg font-semibold text-left" style={{ fontFamily: "'Inter', sans-serif" }}>
{resource.name}
</span>
<ChevronDown
className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''
}`}
className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300
${isExpanded ? 'rotate-180' : ''}`}
/>
</button>
{/* Accordion Content */}
<div
className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100 mt-3' : 'max-h-0 opacity-0'
className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
}`}
>
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
<Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
{/* Description */}
<p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{resource.description}
@@ -170,7 +175,7 @@ const Resources = () => {
<div className="flex flex-col gap-1 ml-0">
{resource.phone && (
<div className="flex items-center gap-2">
<Phone className="h-4 w-4" />
<Phone className="size-4" />
<a
href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
className="text-sm hover:text-[#48286e] transition-colors"