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

Update Responsive and Contact Us page and function

Browse Source
This commit is contained in:
Koncept Kit
2025-12-13 00:58:39 +07:00
parent 44f2be5d84
commit 12a32b7f3f
22 changed files with 936 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@@ -44,6 +44,8 @@ import MissionValues from './pages/MissionValues';
import BoardOfDirectors from './pages/BoardOfDirectors';
import Donate from './pages/Donate';
import DonationSuccess from './pages/DonationSuccess';
import Resources from './pages/Resources';
import ContactUs from './pages/ContactUs';
const PrivateRoute = ({ children, adminOnly = false }) => {
const { user, loading } = useAuth();
@@ -93,6 +95,12 @@ function App() {
<Route path="/about/mission-values" element={<MissionValues />} />
<Route path="/about/board" element={<BoardOfDirectors />} />
{/* Resources Page - Public Access */}
<Route path="/resources" element={<Resources />} />
{/* Contact Us Page - Public Access */}
<Route path="/contact-us" element={<ContactUs />} />
{/* Donation Page - Public Access */}
<Route path="/donate" element={<Donate />} />
<Route path="/donation-success" element={<DonationSuccess />} />

8
src/components/Navbar.js
View File

@@ -25,7 +25,7 @@ const Navbar = () => {
return (
<>
{/* Top Header - Member Actions */}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-16 py-4 flex justify-end items-center gap-6">
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
{user && (
<span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
Welcome, {user.first_name}
@@ -61,11 +61,11 @@ const Navbar = () => {
</header>
{/* Main Header - Member Navigation */}
<header className="bg-[#664fa3] px-16 py-2 flex justify-between items-center">
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<Link to="/dashboard">
<img src={loafLogo} alt="LOAF Logo" className="h-28 w-28 object-contain" />
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
<nav className="flex gap-10 items-center">
<nav className="flex gap-6 sm:gap-8 md:gap-10 items-center">
<Link
to="/"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"

72
src/components/PublicFooter.js
View File

@@ -8,37 +8,37 @@ const PublicFooter = () => {
return (
<>
{/* Main Footer */}
<footer className="bg-[#644c9f] px-16 py-0 flex items-center justify-center h-[420px]">
<div className="border-t border-[rgba(0,0,0,0.1)] py-20 flex gap-30 items-center justify-center flex-1">
<div className="w-[232px]">
<img src={loafLogo} alt="LOAF Logo" className="w-[232px] h-[232px] object-contain" />
<footer className="bg-[#644c9f] px-4 sm:px-8 md:px-16 py-12 md:py-20 flex items-center justify-center min-h-[420px]">
<div className="border-t border-[rgba(0,0,0,0.1)] py-8 md:py-12 lg:py-20 flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-30 items-center justify-center w-full max-w-7xl">
<div className="w-32 sm:w-40 md:w-48 lg:w-[232px] flex-shrink-0">
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
</div>
<nav className="flex gap-28 items-start justify-center w-[811px]">
<div className="flex flex-col gap-2 w-[163px]">
<nav className="flex flex-col sm:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[163px]">
<div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>About</p>
</div>
<Link to="/about/history" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>History</Link>
<Link to="/about/mission-values" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Mission and Values</Link>
<Link to="/about/board" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Board of Directors</Link>
<Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>History</Link>
<Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Mission and Values</Link>
<Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Board of Directors</Link>
</div>
<div className="flex flex-col gap-2 w-[148px]">
<div className="flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
<div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Connect</p>
</div>
<Link to="/become-a-member" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Become a Member</Link>
<a href="/#contact" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Contact Us</a>
<a href="/#resources" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Resources</a>
<Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Become a Member</Link>
<Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Contact Us</Link>
<Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Resources</Link>
</div>
<div className="flex flex-col gap-2 items-center w-[271px]">
<div className="flex flex-col gap-2 items-center sm:items-start w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px]">
<div className="pb-4 w-full">
<Link to="/donate">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-6 py-3 text-lg font-medium w-[217px]">
<Link to="/donate" className="block">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-6 py-3 text-base sm:text-lg font-medium w-full sm:w-[217px]">
Donate
</Button>
</Link>
</div>
<p className="text-[#ddd8eb] text-base font-medium text-center w-full" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center sm:text-left w-full" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
</div>
@@ -47,24 +47,26 @@ const PublicFooter = () => {
</footer>
{/* Bottom Footer */}
<footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-16 py-6 flex justify-between items-center h-[76px]">
<nav className="flex gap-8 items-center">
<a href="/#terms" className="text-[#c5b4e3] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>
Terms of Service
</a>
<a href="/#privacy" className="text-[#c5b4e3] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>
Privacy Policy
</a>
</nav>
<p className="text-[#c5b4e3] text-base font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
© 2025 LOAF. All Rights Reserved.
</p>
<p className="text-[#c5b4e3] text-base font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Designed and Managed by{' '}
<a href="https://konceptkit.com/" className="text-[#d1c3e9] underline hover:text-white transition-colors">
Koncept Kit
</a>
</p>
<footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-16 py-6 md:py-8">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
<nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
<a href="/#terms" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
Terms of Service
</a>
<a href="/#privacy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
Privacy Policy
</a>
</nav>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Inter', sans-serif" }}>
© 2025 LOAF. All Rights Reserved.
</p>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Inter', sans-serif" }}>
Designed and Managed by{' '}
<a href="https://konceptkit.com/" className="text-[#d1c3e9] underline hover:text-white transition-colors whitespace-nowrap">
Koncept Kit
</a>
</p>
</div>
</footer>
</>
);

170
src/components/PublicNavbar.js
View File

@@ -1,8 +1,8 @@
import React from 'react';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button } from './ui/button';
import { useAuth } from '../context/AuthContext';
import { ChevronDown } from 'lucide-react';
import { ChevronDown, Menu, X } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
@@ -13,6 +13,7 @@ import {
const PublicNavbar = () => {
const { user, logout } = useAuth();
const navigate = useNavigate();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// LOAF logo (local)
const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
@@ -29,7 +30,7 @@ const PublicNavbar = () => {
return (
<>
{/* Top Header - Auth Actions */}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-16 py-4 flex justify-end items-center gap-6">
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
<button
onClick={handleAuthAction}
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
@@ -57,11 +58,22 @@ const PublicNavbar = () => {
</header>
{/* Main Header - Navigation */}
<header className="bg-[#664fa3] px-16 py-2 flex justify-between items-center">
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<Link to="/">
<img src={loafLogo} alt="LOAF Logo" className="h-28 w-28 object-contain" />
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
<nav className="flex gap-10 items-center">
{/* Mobile Menu Button */}
<button
onClick={() => setIsMobileMenuOpen(true)}
className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
aria-label="Open menu"
>
<Menu className="h-6 w-6" />
</button>
{/* Desktop Navigation */}
<nav className="hidden lg:flex gap-10 items-center">
<Link
to="/#welcome"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
@@ -115,14 +127,14 @@ const PublicNavbar = () => {
</Link>
)}
<Link
to="/#resources"
to="/resources"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Resources
</Link>
<Link
to="/#contact"
to="/contact-us"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
@@ -130,6 +142,148 @@ const PublicNavbar = () => {
</Link>
</nav>
</header>
{/* Mobile Menu Drawer */}
{isMobileMenuOpen && (
<div className="fixed inset-0 z-50 lg:hidden">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm"
onClick={() => setIsMobileMenuOpen(false)}
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
{/* Header */}
<div className="flex justify-between items-center p-6 border-b border-[#48286e]">
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>
Menu
</span>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
aria-label="Close menu"
>
<X className="h-5 w-5" />
</button>
</div>
{/* Navigation Links */}
<nav className="flex flex-col p-6 space-y-4">
<Link
to="/#welcome"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Welcome
</Link>
{/* About Us Section */}
<div className="space-y-2">
<p className="text-white text-base font-semibold px-4 py-2" style={{ fontFamily: "'Poppins', sans-serif" }}>
About Us
</p>
<Link
to="/about/history"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
History
</Link>
<Link
to="/about/mission-values"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Mission and Values
</Link>
<Link
to="/about/board"
onClick={() => setIsMobileMenuOpen(false)}
className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Board of Directors
</Link>
</div>
<Link
to={user ? "/dashboard" : "/become-a-member"}
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{user ? 'Dashboard' : 'Become a Member'}
</Link>
{!user && (
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Members Only
</Link>
)}
<Link
to="/resources"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Resources
</Link>
<Link
to="/contact-us"
onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Contact Us
</Link>
{/* Auth Actions */}
<div className="pt-4 border-t border-[#48286e] space-y-2">
<button
onClick={() => {
handleAuthAction();
setIsMobileMenuOpen(false);
}}
className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
</button>
{!user && (
<Link
to="/register"
onClick={() => setIsMobileMenuOpen(false)}
className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Register
</Link>
)}
<Link
to="/donate"
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full"
>
<Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
Donate
</Button>
</Link>
</div>
</nav>
</div>
</div>
)}
</>
);
};

2
src/components/registration/RegistrationStep2.js
View File

@@ -128,7 +128,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
</p>
<div className="space-y-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{volunteerOptions.map((option) => (
<div key={option} className="flex items-center space-x-2">
<Checkbox

74
src/pages/BecomeMember.js
View File

@@ -19,7 +19,7 @@ const BecomeMember = () => {
<PublicNavbar />
{/* Decorative shooting star element */}
<div className="absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
<div className="hidden lg:block absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
<img
src={imgShootingStar}
alt=""
@@ -31,13 +31,13 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 pt-20 pb-24">
<div className="max-w-7xl mx-auto px-6 text-center">
<h1
className="text-[48px] font-bold text-[#48286e] 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" }}
>
Become a Member
</h1>
<p
className="text-[19px] font-medium text-[#48286e] max-w-[689px] mx-auto leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
@@ -46,24 +46,24 @@ const BecomeMember = () => {
</div>
{/* Annual Administrative Fees Section */}
<div className="max-w-[1340px] mx-auto px-6 mb-16">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<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={imgIconAdminFee1}
alt="Admin Fee Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-[#eeebf4] rounded-[25px] px-8 py-8">
<div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
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" }}
>
Annual Administrative Fees
</h3>
<p
className="text-[19px] font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
@@ -76,13 +76,13 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-6 text-center">
<h2
className="text-[40px] font-bold text-[#48286e] mb-8 leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-4xl 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-[19px] font-medium text-[#48286e] max-w-[689px] mx-auto leading-[1.6]"
className="text-base sm:text-lg 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:
@@ -91,24 +91,24 @@ const BecomeMember = () => {
</div>
{/* Step 1 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<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={imgIconAdminFee2}
alt="Step 1 Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-8 py-8">
<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-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
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-[19px] font-medium text-[#48286e] leading-[1.6]"
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 approved by an admin.
@@ -123,24 +123,24 @@ const BecomeMember = () => {
</div>
{/* Step 2 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<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-8 py-8">
<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-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
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-[19px] font-medium text-[#48286e] leading-[1.6]"
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).
@@ -155,24 +155,24 @@ const BecomeMember = () => {
</div>
{/* Step 3 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<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-8 py-8">
<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-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
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-[19px] font-medium text-[#48286e] leading-[1.6]"
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 approve your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -187,24 +187,24 @@ const BecomeMember = () => {
</div>
{/* Step 4 - With Gradient Background */}
<div className="max-w-[1340px] mx-auto px-6 mb-16">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<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-8 py-8">
<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-[32px] font-semibold text-white mb-5 leading-[1.49]"
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-[19px] font-medium text-white leading-[1.6]"
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!
@@ -217,14 +217,14 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-6 text-center">
<h2
className="text-[40px] font-bold text-[#48286e] mb-8 leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 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-16 py-6 text-[18px] font-medium tracking-[-0.09px] h-[50px]"
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"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Register Now!

10
src/pages/BoardOfDirectors.js
View File

@@ -22,11 +22,11 @@ const BoardOfDirectors = () => {
<div className="min-h-screen bg-white">
<PublicNavbar />
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
<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">
<div className="max-w-5xl mx-auto text-center px-8">
<h1 className="text-4xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white 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" }}>
@@ -41,7 +41,7 @@ const BoardOfDirectors = () => {
{/* Officers Grid */}
<section className="py-12">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
<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">
@@ -62,7 +62,7 @@ const BoardOfDirectors = () => {
{/* Board Members Grid */}
<section className="py-12 bg-gray-50 rounded-2xl">
<div className="max-w-6xl mx-auto px-8">
<h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
<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">
@@ -80,7 +80,7 @@ const BoardOfDirectors = () => {
{/* Join the Board Section */}
<section className="py-12">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
Join the Board of Directors
</h2>
<p className="text-xl text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

279
src/pages/ContactUs.js Normal file
View File

@@ -0,0 +1,279 @@
import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Textarea } from '../components/ui/textarea';
import { Checkbox } from '../components/ui/checkbox';
import { Mail, MapPin, Loader2 } from 'lucide-react';
import api from '../utils/api';
import { toast } from 'sonner';
const ContactUs = () => {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
subject: '',
message: '',
consent: false
});
const [loading, setLoading] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleConsentChange = (checked) => {
setFormData(prev => ({
...prev,
consent: checked
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
// Validation
if (!formData.firstName.trim()) {
toast.error('Please enter your first name');
return;
}
if (!formData.lastName.trim()) {
toast.error('Please enter your last name');
return;
}
if (!formData.email.trim()) {
toast.error('Please enter your email');
return;
}
if (!formData.subject.trim()) {
toast.error('Please enter a subject');
return;
}
if (!formData.message.trim()) {
toast.error('Please enter your message');
return;
}
if (!formData.consent) {
toast.error('Please consent to LOAF storing your information');
return;
}
setLoading(true);
try {
await api.post('/contact', {
first_name: formData.firstName,
last_name: formData.lastName,
email: formData.email,
subject: formData.subject,
message: formData.message
});
toast.success('Message sent successfully! We\'ll get back to you soon.');
// Reset form
setFormData({
firstName: '',
lastName: '',
email: '',
subject: '',
message: '',
consent: false
});
} catch (error) {
console.error('Failed to send message:', error);
toast.error(error.response?.data?.detail || 'Failed to send message. Please try again.');
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-white">
<PublicNavbar />
<main className="bg-gradient-to-b from-[#e8e0f5] to-[#f1eef9] px-6 py-16">
<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" }}>
Contact Form
</h1>
<form onSubmit={handleSubmit} className="space-y-6">
{/* First Name & Last Name */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
First Name <span className="text-red-500">*</span>
</Label>
<Input
id="firstName"
name="firstName"
value={formData.firstName}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
<div>
<Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Last Name <span className="text-red-500">*</span>
</Label>
<Input
id="lastName"
name="lastName"
value={formData.lastName}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
</div>
{/* Email */}
<div>
<Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Email <span className="text-red-500">*</span>
</Label>
<Input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
{/* Subject */}
<div>
<Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Subject <span className="text-red-500">*</span>
</Label>
<Input
id="subject"
name="subject"
value={formData.subject}
onChange={handleChange}
className="border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
{/* Message */}
<div>
<Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Your Message <span className="text-red-500">*</span>
</Label>
<Textarea
id="message"
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"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
{/* Consent Checkbox */}
<div className="flex items-start gap-3">
<Checkbox
id="consent"
checked={formData.consent}
onCheckedChange={handleConsentChange}
className="mt-1 border-2 border-[#ddd8eb] data-[state=checked]:bg-[#664fa3] data-[state=checked]:border-[#664fa3]"
/>
<Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
</Label>
</div>
{/* Submit Button */}
<Button
type="submit"
disabled={loading}
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{loading ? (
<>
<Loader2 className="h-5 w-5 animate-spin mr-2" />
Sending...
</>
) : (
'Submit'
)}
</Button>
</form>
</Card>
{/* Contact Information */}
<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" }}>
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">
<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>
<div>
<a
href="mailto:info@loaftx.org"
className="text-[#664fa3] text-xl font-semibold hover:text-[#48286e] transition-colors"
style={{ fontFamily: "'Inter', sans-serif" }}
>
info@loaftx.org
</a>
</div>
</div>
</Card>
{/* Address Card */}
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
<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>
<div>
<p className="text-[#48286e] text-lg font-semibold mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF
</p>
<p className="text-[#664fa3] text-base leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
P.O. Box 7207<br />
Houston, Texas 77248-7207
</p>
</div>
</div>
</Card>
</div>
</div>
</div>
</main>
<PublicFooter />
</div>
);
};
export default ContactUs;

4
src/pages/Donate.js
View File

@@ -58,14 +58,14 @@ const Donate = () => {
<div className="min-h-screen bg-white">
<PublicNavbar />
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
<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 */}
<section className="py-12">
<div className="max-w-4xl mx-auto text-center">
<div className="flex justify-center mb-4">
<img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
</div>
<h1 className="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
</h1>
<p className="text-xl text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

4
src/pages/DonationSuccess.js
View File

@@ -16,7 +16,7 @@ const DonationSuccess = () => {
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-6 py-20">
<div className="max-w-2xl mx-auto">
<Card className="p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
<Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
{/* Success Icon */}
<div className="flex justify-center mb-4">
<img
@@ -31,7 +31,7 @@ const DonationSuccess = () => {
</div>
{/* Title */}
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Thank You for Your Donation!
</h1>

2
src/pages/Events.js
View File

@@ -64,7 +64,7 @@ const Events = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
{events.map((event) => (
<Link to={`/events/${event.id}`} key={event.id}>
<Card

4
src/pages/History.js
View File

@@ -16,11 +16,11 @@ const History = () => {
<div className="min-h-screen bg-white">
<PublicNavbar />
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
<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 */}
<section className="py-12">
<div className="max-w-5xl mx-auto text-center">
<h1 className="text-5xl font-bold text-[#48286e] mb-4"
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4"
style={{ fontFamily: "'Poppins', sans-serif" }}>
History of LOAF
</h1>

40
src/pages/Landing.js
View File

@@ -19,31 +19,31 @@ const Landing = () => {
<PublicNavbar />
{/* Hero Section */}
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-16 py-0 flex gap-16 items-center justify-center">
<div className="py-10 flex flex-col gap-8 items-center justify-center w-[420px]">
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 md:py-12 lg:py-0 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
<div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
<div className="flex flex-col gap-6 items-center">
<img src={heroLoaf} alt="LOAF" className="w-[334px] h-[105px] object-contain" />
<img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" />
</div>
<div className="flex flex-col gap-4 items-center justify-center w-full">
<Link to="/register" className="w-full max-w-[339px]">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-full transition-colors">
<div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
<Link to="/register" className="w-full">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
Become a Member
</Button>
</Link>
</div>
<p className="text-white text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-white text-base sm:text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by the Hollyfield Foundation
</p>
</div>
<div className="py-16 flex items-center justify-center w-[594px] h-[636px]">
<img src={taglineImage} alt="LOAF Tagline" className="w-[483px] h-[297px] object-contain" />
<div className="py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:w-[594px] h-auto">
<img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[483px] h-auto object-contain" />
</div>
</section>
{/* About Section */}
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-16 pt-30 pb-0 flex flex-col gap-8">
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 pb-0 flex flex-col gap-6 sm:gap-8">
<div className="flex flex-col items-center pt-12">
<h3 className="text-[#48286e] text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF
</h3>
</div>
@@ -54,9 +54,9 @@ const Landing = () => {
</section>
{/* Feature Cards Section */}
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-16 py-30 flex gap-8 items-start justify-center">
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-start justify-center">
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconMeetGreet} alt="Meet and Greet" className="w-[300px] h-[270px] object-contain" />
<img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Meet and Greet
@@ -69,7 +69,7 @@ const Landing = () => {
</Card>
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconSocials} alt="Socials" className="w-[300px] h-[270px] object-contain" />
<img src={iconSocials} alt="Socials" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Socials
@@ -81,7 +81,7 @@ const Landing = () => {
</Card>
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconActive} alt="Active LOAFers" className="w-[300px] h-[270px] object-contain" />
<img src={iconActive} alt="Active LOAFers" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Active LOAFers
@@ -94,15 +94,15 @@ const Landing = () => {
</section>
{/* CTA Section */}
<section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-16 py-30 flex items-center justify-center">
<div className="flex gap-12 items-center justify-center h-[191px]">
<Link to="/register">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-[392px] transition-colors">
<section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
<div className="flex flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
<Link to="/register" className="w-full sm:w-auto">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors">
Become a Member
</Button>
</Link>
<div className="flex-1 flex items-center justify-center">
<h4 className="text-white text-4xl font-bold max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="text-white text-2xl sm:text-3xl md:text-4xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
No matter your age or ability, there is something for everyone.
</h4>
</div>

8
src/pages/MissionValues.js
View File

@@ -10,12 +10,12 @@ const MissionValues = () => {
<div className="min-h-screen bg-white">
<PublicNavbar />
<main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-16 py-16">
<main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-16">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Left Card - Mission (Purple Gradient) */}
<Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-8 rounded-2xl shadow-lg">
<h2 className="text-3xl 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" }}>
LOAF Mission
</h2>
@@ -26,13 +26,13 @@ const MissionValues = () => {
in Houston and the surrounding areas.
</p>
<div className="flex justify-center mb-6">
<img src={loafLogo} alt="LOAF Logo" className="w-64 h-64 object-contain" />
<img src={loafLogo} alt="LOAF Logo" className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-64 lg:h-64 object-contain" />
</div>
</Card>
{/* Right Card - Values */}
<Card className="bg-white p-8 rounded-2xl shadow-lg">
<h2 className="text-3xl 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" }}>
LOAF Values
</h2>

4
src/pages/Plans.js
View File

@@ -232,7 +232,7 @@ const Plans = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : plans.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-5xl mx-auto">
{plans.map((plan) => {
const minimumPrice = plan.minimum_price_cents || plan.price_cents || 3000;
const suggestedPrice = plan.suggested_price_cents || minimumPrice;
@@ -263,7 +263,7 @@ const Plans = () => {
<div className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Starting at
</div>
<div className="text-4xl font-bold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(minimumPrice)}
</div>
{suggestedPrice > minimumPrice && (

8
src/pages/Profile.js
View File

@@ -171,7 +171,7 @@ const Profile = () => {
<User className="h-6 w-6 text-[#664fa3]" />
Account Information
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<div>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
@@ -211,7 +211,7 @@ const Profile = () => {
Personal Information
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<div>
<Label htmlFor="first_name">First Name</Label>
<Input
@@ -261,7 +261,7 @@ const Profile = () => {
/>
</div>
<div className="grid md:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
<div>
<Label htmlFor="city">City</Label>
<Input
@@ -304,7 +304,7 @@ const Profile = () => {
Partner Information
</h2>
<div className="space-y-6">
<div className="grid md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<div>
<Label htmlFor="partner_first_name">Partner First Name</Label>
<Input

251
src/pages/Resources.js Normal file
View 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;

2
src/pages/VerifyEmail.js
View File

@@ -49,7 +49,7 @@ const VerifyEmail = () => {
<PublicNavbar />
<div className="max-w-2xl mx-auto px-6 py-20">
<Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg text-center">
<Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg text-center">
{status === 'loading' && (
<>
<Loader2 className="h-20 w-20 text-[#664fa3] mx-auto mb-6 animate-spin" />

22
src/pages/admin/AdminEvents.js
View File

@@ -131,7 +131,7 @@ const AdminEvents = () => {
return (
<>
{/* Header */}
<div className="mb-8 flex justify-between items-center">
<div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Management
@@ -156,7 +156,7 @@ const AdminEvents = () => {
</Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -188,7 +188,7 @@ const AdminEvents = () => {
/>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Start Date & Time *
@@ -254,13 +254,7 @@ const AdminEvents = () => {
</label>
</div>
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
<div className="flex flex-col-reverse sm:flex-row gap-3 pt-4">
<Button
type="button"
variant="outline"
@@ -269,6 +263,12 @@ const AdminEvents = () => {
>
Cancel
</Button>
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
</div>
</form>
</DialogContent>
@@ -281,7 +281,7 @@ const AdminEvents = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{events.map((event) => (
<Card
key={event.id}

4
src/pages/admin/AdminMembers.js
View File

@@ -100,7 +100,7 @@ const AdminMembers = () => {
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -129,7 +129,7 @@ const AdminMembers = () => {
{/* Filters */}
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Input

18
src/pages/admin/AdminPlans.js
View File

@@ -147,7 +147,7 @@ const AdminPlans = () => {
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -183,7 +183,7 @@ const AdminPlans = () => {
{/* Filters */}
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Input
@@ -212,7 +212,7 @@ const AdminPlans = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : filteredPlans.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredPlans.map((plan) => (
<Card
key={plan.id}
@@ -286,7 +286,7 @@ const AdminPlans = () => {
</div>
{/* Actions */}
<div className="flex gap-2 pt-4 border-t border-[#ddd8eb]">
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
<Button
onClick={() => handleEditPlan(plan)}
variant="outline"
@@ -350,16 +350,16 @@ const AdminPlans = () => {
{/* Delete Confirmation Dialog */}
{deleteDialogOpen && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<Card className="p-8 bg-white rounded-2xl max-w-md mx-4">
<h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<Card className="p-6 sm:p-8 bg-white rounded-2xl max-w-md w-full">
<h2 className="text-xl sm:text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Delete Plan
</h2>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm sm:text-base text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to delete "{planToDelete?.name}"? This action
will deactivate the plan and it won't be available for new subscriptions.
</p>
<div className="flex gap-4">
<div className="flex flex-col-reverse sm:flex-row gap-3 sm:gap-4">
<Button
onClick={() => setDeleteDialogOpen(false)}
variant="outline"

93
src/pages/admin/AdminSubscriptions.js
View File

@@ -314,7 +314,98 @@ const AdminSubscriptions = () => {
{/* Subscriptions Table */}
<Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
<div className="overflow-x-auto">
{/* Mobile Card View */}
<div className="md:hidden p-4 space-y-4">
{filteredSubscriptions.length > 0 ? (
filteredSubscriptions.map((sub) => (
<Card key={sub.id} className="p-4 border border-[#ddd8eb] bg-[#f9f5ff]/30">
<div className="space-y-3">
{/* Member Info */}
<div className="flex justify-between items-start border-b border-[#ddd8eb] pb-3">
<div className="flex-1">
<p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.user.email}
</p>
</div>
<Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
</div>
{/* Plan & Period */}
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<p className="text-xs text-[#664fa3] mb-1">Plan</p>
<p className="font-medium text-[#422268]">{sub.plan.name}</p>
<p className="text-xs text-[#664fa3]">{sub.plan.billing_cycle}</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Period</p>
<p className="text-[#422268]">
{new Date(sub.current_period_start).toLocaleDateString()} -
{new Date(sub.current_period_end).toLocaleDateString()}
</p>
</div>
</div>
{/* Pricing */}
<div className="grid grid-cols-3 gap-2 text-sm bg-white/50 p-3 rounded">
<div>
<p className="text-xs text-[#664fa3] mb-1">Base Fee</p>
<p className="font-medium text-[#422268]">
${(sub.base_fee_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Donation</p>
<p className="font-medium text-[#422268]">
${(sub.donation_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Total</p>
<p className="font-semibold text-[#422268]">
${(sub.total_cents / 100).toFixed(2)}
</p>
</div>
</div>
{/* Actions */}
<div className="flex gap-2 pt-2">
<Button
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="flex-1 text-[#664fa3] hover:bg-[#DDD8EB]"
>
<Edit className="h-4 w-4 mr-2" />
Edit
</Button>
{sub.status === 'active' && (
<Button
size="sm"
variant="outline"
onClick={() => handleCancelSubscription(sub.id)}
className="flex-1 text-red-600 hover:bg-red-50"
>
<XCircle className="h-4 w-4 mr-2" />
Cancel
</Button>
)}
</div>
</div>
</Card>
))
) : (
<div className="p-12 text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</div>
)}
</div>
{/* Desktop Table View */}
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-[#DDD8EB]/20 border-b border-[#ddd8eb]">