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

Compare commits

merge into: andika:main
Branches Tags
andika:main andika:dev andika:templates
...
pull from: andika:dev
Branches Tags
andika:dev andika:templates andika:main

26 Commits
main ... dev

Author SHA1 Message Date
Koncept Kit
33fc3a101d Fix runtime error 2025-12-20 18:46:07 +07:00
Koncept Kit
4093c1603e Fix runtime error 2025-12-20 18:40:57 +07:00
andika
035cc896df Merge pull request 'templates' (#5) from templates into dev 
Reviewed-on: #5
 2025-12-20 11:23:07 +00:00
kayela
8ffa97bcd1 Refactor code structure for improved readability and maintainability 
Fixed images and styling for Landing page
 2025-12-19 15:28:19 -06:00
kayela
b6d25cdab7 Fix max height utility class for responsive layout in Donate component 2025-12-19 13:36:56 -06:00
kayela
f3610282f2 Merge remote-tracking branch 'origin/dev' into templates 2025-12-19 13:29:31 -06:00
kayela
f1dd7fe75b Merge remote-tracking branch 'origin/main' into templates 2025-12-19 13:21:34 -06:00
kayela
37ccfe7767 Update Privacy Policy header to specify "LOAFers, Inc. Website Privacy Policy" and apply Poppins font style 2025-12-19 12:42:29 -06:00
kayela
93cd4c1316 Refactor Terms of Service page layout and content; add comprehensive legal terms sections and improve styling 2025-12-19 12:27:03 -06:00
kayela
a6656b1ff0 Refactor code structure for improved readability and maintainability 2025-12-19 11:59:52 -06:00
kayela
1d4ed96dc9 Refactor BecomeMember, BoardOfDirectors, ContactUs, Donate, MissionValues, and Resources pages for improved layout, styling, and accessibility; update component structure and enhance responsiveness. 2025-12-18 16:34:14 -06:00
kayela
a9bdd1d0a6 Refactor layout and styling for PublicFooter, PublicNavbar, History, Landing, and MissionValues components for improved responsiveness and visual consistency 2025-12-18 12:02:32 -06:00
andika
4848ec3942 Merge pull request 'templates' (#4) from templates into dev 
Reviewed-on: #4
 2025-12-18 10:34:29 +00:00
andika
41d2466cbf Merge pull request '- Profile Picture\' (#3) from main into dev 
Reviewed-on: #3
 2025-12-18 10:29:21 +00:00
kayela
f7fef8572a Landing page fully mobile functional, History page moble and History page fixed. Footer and navbar changes 2025-12-17 17:59:58 -06:00
kayela
23163a7a2b landing page fixes 2025-12-17 13:34:06 -06:00
kayela
4b0517b92c fixed footer 2025-12-17 13:24:38 -06:00
kayela
bebbba1ece fixed all instanced of changed PublicFooter name 2025-12-17 12:36:00 -06:00
kayela
5a46375212 fixed typo error 2025-12-17 12:33:50 -06:00
kayela
d683ec6b5b Copied PublicFooter from Main branch 2025-12-17 12:28:20 -06:00
kayela
03eb349f0e Add PublicFooter-kc component and update imports across pages 2025-12-17 12:11:24 -06:00
kayela
b842130b62 Merge branch 'main' into templates 2025-12-17 12:11:09 -06:00
kayela
eee26cf108 Refactor PublicFooter and PublicNavbar for improved responsiveness and styling; add InfoCard component to Landing page for better content organization 2025-12-16 23:14:20 -06:00
kayela-c
ac850d65d3 added padding when in moble mode 2025-12-13 13:03:57 -06:00
kayela-c
40a8930b93 added side padding to footer 2025-12-13 12:59:06 -06:00
kayela-c
4d80f9aca5 adjusting the padding for the footer and the 3rd column spacing 2025-12-13 12:57:05 -06:00
23 changed files with 2742 additions and 1467 deletions
Expand all files Collapse all files

17
.env.example Normal file
View File

@@ -0,0 +1,17 @@
# Server Configuration
PORT=3000
WDS_SOCKET_PORT=443
# Backend API URL
REACT_APP_BACKEND_URL=http://localhost:8000
# App Base Path Configuration
# Examples:
# - For root path: REACT_APP_BASENAME=
# - For subpath: REACT_APP_BASENAME=/membership
# - For production: REACT_APP_BASENAME=/membership
REACT_APP_BASENAME=
# Feature Flags
REACT_APP_ENABLE_VISUAL_EDITS=false
ENABLE_HEALTH_CHECK=false

1
.gitignore vendored
View File

@@ -2,6 +2,7 @@
# Environment # Environment
.env .env
.env.production
# dependencies # dependencies
/node_modules /node_modules

3
package.json
View File

@@ -53,9 +53,11 @@
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-hook-form": "^7.56.2", "react-hook-form": "^7.56.2",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-markdown": "^10.1.0",
"react-resizable-panels": "^3.0.1", "react-resizable-panels": "^3.0.1",
"react-router-dom": "^7.5.1", "react-router-dom": "^7.5.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"remark-gfm": "^4.0.1",
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwind-merge": "^3.2.0", "tailwind-merge": "^3.2.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
@@ -83,6 +85,7 @@
"@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@craco/craco": "^7.1.0", "@craco/craco": "^7.1.0",
"@eslint/js": "9.23.0", "@eslint/js": "9.23.0",
"@tailwindcss/typography": "^0.5.19",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "9.23.0", "eslint": "9.23.0",
"eslint-plugin-import": "2.31.0", "eslint-plugin-import": "2.31.0",

BIN
public/friendships.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

1
public/index.html
View File

@@ -25,7 +25,6 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>LOAF - Lesbians Over Age Fifty</title> <title>LOAF - Lesbians Over Age Fifty</title>
<script src="#"></script>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/shooting_star_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/web_elements_tagline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

6
src/App.js
View File

@@ -70,9 +70,13 @@ const PrivateRoute = ({ children, adminOnly = false }) => {
}; };
function App() { function App() {
// Read basename from environment variable (defaults to empty string for root path)
// Set REACT_APP_BASENAME in .env to use a subpath (e.g., "/membership")
const basename = process.env.REACT_APP_BASENAME || '';
return ( return (
<AuthProvider> <AuthProvider>
<BrowserRouter basename="/membership"> <BrowserRouter basename={basename}>
<Routes> <Routes>
<Route path="/" element={<Landing />} /> <Route path="/" element={<Landing />} />
<Route path="/register" element={<Register />} /> <Route path="/register" element={<Register />} />

54
src/components/PublicFooter.js
View File

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

312
src/components/PublicNavbar.js
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate, useLocation } from 'react-router-dom';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { useAuth } from '../context/AuthContext'; import { useAuth } from '../context/AuthContext';
import { ChevronDown, Menu, X } from 'lucide-react'; import { ChevronDown, Menu, X } from 'lucide-react';
@@ -13,8 +13,23 @@ import {
const PublicNavbar = () => { const PublicNavbar = () => {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Helper function to check if a path is active
const isActive = (path) => {
if (path.includes('#')) {
// For hash links like /#welcome
return location.pathname + location.hash === path || location.hash === path.replace('/', '');
}
return location.pathname === path || location.pathname.startsWith(path + '/');
};
// Check if any About Us sub-page is active
const isAboutActive = () => {
return location.pathname.startsWith('/about');
};
// LOAF logo (local) // LOAF logo (local)
const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`; const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
@@ -27,122 +42,158 @@ const PublicNavbar = () => {
} }
}; };
// Active and inactive link styles for desktop
const getDesktopLinkClasses = (path) => {
const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
if (isActive(path)) {
return `${baseClasses} text-[#ff9e77] hover:text-[#ff8c64] `;
}
return `${baseClasses} text-white hover:opacity-80`;
};
// Active and inactive link styles for mobile
const getMobileLinkClasses = (path) => {
const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-white hover:bg-[#48286e]`;
};
// Active and inactive link styles for mobile sub-items (About Us)
const getMobileSubLinkClasses = (path) => {
const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
}
return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
};
return ( return (
<> <>
{/* Top Header - Auth Actions */} {/* Top Header - Auth Actions */}
<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"> <div className='sticky top-0 inset-x-0 z-50'>
<button
onClick={handleAuthAction}
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
</button>
{!user && (
<Link
to="/register"
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Register
</Link>
)}
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
</Button>
</Link>
</header>
{/* Main Header - Navigation */} <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">
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center"> <div className='flex gap-4 sm:gap-6'>
<Link to="/">
<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>
{/* Mobile Menu Button */} <button
<button onClick={handleAuthAction}
onClick={() => setIsMobileMenuOpen(true)} className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}
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"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Welcome
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
About Us
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Board of Directors
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link
to={user ? "/dashboard" : "/become-a-member"}
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
{user ? 'Dashboard' : 'Become a Member'}
</Link>
{!user && (
<Link
to="/login"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Members Only {user ? 'Logout' : 'Login'}
</Link> </button>
)} {!user && (
<Link <Link
to="/resources" to="/register"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Resources Register
</Link>
)}
</div>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
</Button>
</Link> </Link>
<Link </header>
to="/contact-us"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Contact Us
</Link>
</nav>
</header>
{/* Main Header - Navigation */}
<header className=" bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<Link to="/">
<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>
{/* 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="size-14" />
</button>
{/* Desktop Navigation */}
<nav className="hidden lg:flex gap-6 items-center">
<Link
to="/#welcome"
className={getDesktopLinkClasses('/#welcome')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Welcome
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
className={`${isAboutActive()
? "text-[#ff9e77] hover:text-[#ff8c64]"
: "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
About Us
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link
to={user ? "/dashboard" : "/become-a-member"}
className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Dashboard' : 'Become a Member'}
</Link>
{!user && (
<Link
to="/login"
className={getDesktopLinkClasses('/login')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Members Only
</Link>
)}
<Link
to="/resources"
className={getDesktopLinkClasses('/resources')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Resources
</Link>
<Link
to="/contact-us"
className={getDesktopLinkClasses('/contact-us')}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Contact Us
</Link>
</nav>
</header>
</div>
{/* Mobile Menu Drawer */} {/* Mobile Menu Drawer */}
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<div className="fixed inset-0 z-50 lg:hidden"> <div className="fixed inset-0 z-50 lg:hidden">
@@ -156,7 +207,7 @@ const PublicNavbar = () => {
<div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto"> <div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
{/* Header */} {/* Header */}
<div className="flex justify-between items-center p-6 border-b border-[#48286e]"> <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" }}> <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Menu Menu
</span> </span>
<button <button
@@ -173,38 +224,41 @@ const PublicNavbar = () => {
<Link <Link
to="/#welcome" to="/#welcome"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className={getMobileLinkClasses('/#welcome')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Welcome Welcome
</Link> </Link>
{/* About Us Section */} {/* About Us Section */}
<div className="space-y-2"> <div className="space-y-2">
<p className="text-white text-base font-semibold px-4 py-2" style={{ fontFamily: "'Poppins', sans-serif" }}> <p
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[#ff9e77]' : 'text-white'}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
About Us About Us
</p> </p>
<Link <Link
to="/about/history" to="/about/history"
onClick={() => setIsMobileMenuOpen(false)} 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" className={getMobileSubLinkClasses('/about/history')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
History History
</Link> </Link>
<Link <Link
to="/about/mission-values" to="/about/mission-values"
onClick={() => setIsMobileMenuOpen(false)} 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" className={getMobileSubLinkClasses('/about/mission-values')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Mission and Values Mission and Values
</Link> </Link>
<Link <Link
to="/about/board" to="/about/board"
onClick={() => setIsMobileMenuOpen(false)} 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" className={getMobileSubLinkClasses('/about/board')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Board of Directors Board of Directors
</Link> </Link>
@@ -213,8 +267,8 @@ const PublicNavbar = () => {
<Link <Link
to={user ? "/dashboard" : "/become-a-member"} to={user ? "/dashboard" : "/become-a-member"}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
{user ? 'Dashboard' : 'Become a Member'} {user ? 'Dashboard' : 'Become a Member'}
</Link> </Link>
@@ -223,8 +277,8 @@ const PublicNavbar = () => {
<Link <Link
to="/login" to="/login"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className={getMobileLinkClasses('/login')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Members Only Members Only
</Link> </Link>
@@ -233,8 +287,8 @@ const PublicNavbar = () => {
<Link <Link
to="/resources" to="/resources"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className={getMobileLinkClasses('/resources')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Resources Resources
</Link> </Link>
@@ -242,8 +296,8 @@ const PublicNavbar = () => {
<Link <Link
to="/contact-us" to="/contact-us"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className={getMobileLinkClasses('/contact-us')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Contact Us Contact Us
</Link> </Link>
@@ -256,7 +310,7 @@ const PublicNavbar = () => {
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
}} }}
className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
{user ? 'Logout' : 'Login'} {user ? 'Logout' : 'Login'}
</button> </button>
@@ -265,7 +319,7 @@ const PublicNavbar = () => {
to="/register" to="/register"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors" className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Register Register
</Link> </Link>

195
src/index.css
View File

@@ -1,115 +1,118 @@
@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 base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { body {
margin: 0; margin: 0;
font-family: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
sans-serif; -webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; monospace;
} }
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 280 47% 27%; --foreground: 280 47% 27%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 280 47% 27%; --card-foreground: 280 47% 27%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 280 47% 27%; --popover-foreground: 280 47% 27%;
--primary: 280 47% 27%; --primary: 280 47% 27%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
--secondary: 268 33% 89%; --secondary: 268 33% 89%;
--secondary-foreground: 280 47% 27%; --secondary-foreground: 280 47% 27%;
--muted: 268 43% 95%; --muted: 268 43% 95%;
--muted-foreground: 268 35% 47%; --muted-foreground: 268 35% 47%;
--accent: 17 100% 73%; --accent: 17 100% 73%;
--accent-foreground: 280 47% 27%; --accent-foreground: 280 47% 27%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 268 33% 89%; --border: 268 33% 89%;
--input: 268 33% 89%; --input: 268 33% 89%;
--ring: 268 35% 47%; --ring: 268 35% 47%;
--chart-1: 268 36% 46%; --chart-1: 268 36% 46%;
--chart-2: 17 100% 73%; --chart-2: 17 100% 73%;
--chart-3: 268 33% 89%; --chart-3: 268 33% 89%;
--chart-4: 280 44% 29%; --chart-4: 280 44% 29%;
--chart-5: 268 35% 47%; --chart-5: 268 35% 47%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 0 0% 3.9%; --background: 0 0% 3.9%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 0 0% 3.9%; --card: 0 0% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%; --popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 0 0% 9%; --primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%; --secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%; --muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%; --muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%; --accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
--chart-2: 160 60% 45%; --chart-2: 160 60% 45%;
--chart-3: 30 80% 55%; --chart-3: 30 80% 55%;
--chart-4: 280 65% 60%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
} }
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
@layer base { @layer base {
[data-debug-wrapper="true"] { [data-debug-wrapper="true"] {
display: contents !important; display: contents !important;
} }
[data-debug-wrapper="true"] > * { [data-debug-wrapper="true"] > * {
margin-left: inherit; margin-left: inherit;
margin-right: inherit; margin-right: inherit;
margin-top: inherit; margin-top: inherit;
margin-bottom: inherit; margin-bottom: inherit;
padding-left: inherit; padding-left: inherit;
padding-right: inherit; padding-right: inherit;
padding-top: inherit; padding-top: inherit;
padding-bottom: inherit; padding-bottom: inherit;
column-gap: inherit; column-gap: inherit;
row-gap: inherit; row-gap: inherit;
gap: inherit; gap: inherit;
border-left-width: inherit; border-left-width: inherit;
border-right-width: inherit; border-right-width: inherit;
border-top-width: inherit; border-top-width: inherit;
border-bottom-width: inherit; border-bottom-width: inherit;
border-left-style: inherit; border-left-style: inherit;
border-right-style: inherit; border-right-style: inherit;
border-top-style: inherit; border-top-style: inherit;
border-bottom-style: inherit; border-bottom-style: inherit;
border-left-color: inherit; border-left-color: inherit;
border-right-color: inherit; border-right-color: inherit;
border-top-color: inherit; border-top-color: inherit;
border-bottom-color: inherit; border-bottom-color: inherit;
} }
} }

277
src/pages/BecomeMember.js
View File

@@ -14,22 +14,20 @@ const BecomeMember = () => {
const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`; const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`;
const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.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 ( return (
<div className="min-h-screen bg-gray-50 relative"> <div className="min-h-screen bg-gray-50 relative">
<PublicNavbar /> <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 */} {/* Hero Section */}
<div className="relative bg-gray-50 pt-20 pb-24"> <div className="relative bg-gray-50 pt-20 px-6 pb-16">
<div className="max-w-7xl mx-auto px-6 text-center"> <div className="max-w-7xl mx-auto text-center">
<h1 <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]" 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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -46,7 +44,7 @@ const BecomeMember = () => {
</div> </div>
{/* Annual Administrative Fees Section */} {/* 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="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 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img <img
@@ -73,158 +71,159 @@ const BecomeMember = () => {
</div> </div>
{/* Membership Process Section */} {/* Membership Process Section */}
<div className="relative bg-gray-50 py-16"> <div className="relative bg-gray-50 py-32 bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] ">
<div className="max-w-7xl mx-auto px-6 text-center"> {/* 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 <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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Membership Process Membership Process
</h2> </h2>
<p <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" }} 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: Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
</p> </p>
</div> </div>
</div>
{/* Step 1 */}
<div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8"> {/* Step 1 */}
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center"> <div className="max-w-[1340px] mx-auto px-6 mb-2 ">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<img <div className="w-24 h-24 sm:w-32 z-40 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
src={imgIconAdminFee2} <img
alt="Step 1 Icon" src={imgIconAdminFee2}
className="w-full h-full object-contain" alt="Step 1 Icon"
/> className="w-full h-full object-contain"
/>
</div>
<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-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-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 validated by an admin.
</p>
</div>
</div> </div>
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8"> </div>
<h3
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]" {/* Arrow Down Icon */}
style={{ fontFamily: "'Poppins', sans-serif" }} <Arrow />
>
Step 1: Application & Email Confirmation {/* Step 2 */}
</h3> <div className="max-w-[1340px] mx-auto px-6 mb-2">
<p <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]" <div className="w-24 h-24 z-40 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }} <img
> src={imgIconAdminFee3}
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 validated by an admin. alt="Step 2 Icon"
</p> className="w-full h-full object-contain"
/>
</div>
<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-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-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).
</p>
</div>
</div>
</div>
{/* Arrow Down Icon */}
<Arrow />
{/* Step 3 */}
<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 z-40 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-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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-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 validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
</p>
</div>
</div>
</div>
{/* Arrow Down Icon */}
<Arrow />
{/* Step 4 - With Gradient Background */}
<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 z-40 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-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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-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!
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Arrow Down Icon */}
<div className="flex justify-center mb-8">
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
</div>
{/* Step 2 */}
<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-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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-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).
</p>
</div>
</div>
</div>
{/* Arrow Down Icon */}
<div className="flex justify-center mb-8">
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
</div>
{/* Step 3 */}
<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-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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-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 validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
</p>
</div>
</div>
</div>
{/* Arrow Down Icon */}
<div className="flex justify-center mb-8">
<ArrowDown className="w-8 h-8 text-[#4f378a]" strokeWidth={2} />
</div>
{/* Step 4 - With Gradient Background */}
<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-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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-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!
</p>
</div>
</div>
</div>
{/* CTA Section */} {/* CTA Section */}
<div className="relative bg-gray-50 py-16"> <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 <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" }} style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Ready to Join Us? Ready to Join Us?
</h2> </h2>
<Link to="/register"> <Link to="/register">
<Button <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" }} style={{ fontFamily: "'Inter', sans-serif" }}
> >
Register Now! Register Now!

189
src/pages/BoardOfDirectors.js
View File

@@ -12,24 +12,78 @@ const BoardOfDirectors = () => {
]; ];
const boardMembers = [ const boardMembers = [
'Danita Cole', { name: 'Danita Cole' },
'Roxanne Cherico', { name: 'Roxanne Cherico' },
'Lucretia Copeland', { name: 'Lucretia Copeland' },
'Julie Fischer' { 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 ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <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-b from-[#f9fafb] to-[#ddd8eb] pt-8 sm:pt-10 md:pt-12">
{/* Hero Section with Contact */} {/* Hero Section */}
<section className="bg-gradient-to-r from-[#664fa3] to-[#48286e] py-8 rounded-2xl mb-12"> <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"> <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 LOAF Board of Directors 2025
</h1> </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{' '} 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"> <a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
info@loaftx.org info@loaftx.org
@@ -37,74 +91,71 @@ const BoardOfDirectors = () => {
</p> </p>
</div> </div>
</section> </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 */}
<DirectorCards title="Officers" members={officers} />
{/* Officers Grid */} {/* Board Members Grid */}
<section className="py-12"> <DirectorCards title="Board Of Directors" members={boardMembers} />
<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>
{/* 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>
</section> </section>
{/* Join the Board Section */} {/* Join the Board Section */}
<section className="py-12"> <section className="py-12 bg-white mt-12 ">
<div className="max-w-4xl mx-auto"> {/* content containter */}
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}> <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 Join the Board of Directors
</h2> </h2>
<p className="text-xl text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <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 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.
to know if you are thinking about serving on the Board of Directors.
</p> </p>
<Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg"> {/* card */}
<ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
<li> <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Nominations are due by November 1. Nomination Form:{' '} <li>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer" Nominations are due by November 1. Nomination Form:{' '}
className="text-[#664fa3] underline hover:text-[#48286e] transition-colors"> <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
Click Here className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
</a> Click Here
</li> </a>
<li>Nominees must have been a member for at least 1 year and current with their dues.</li> </li>
<li>Officer positions are only available to current directors.</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>Each director shall serve a 2 year term.</li> <li>Officer positions are only available to current directors.</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>Each director shall serve a 2-year term.</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>The time commitment is approximately 1–2 hours per week.</li>
</ol>
</Card> <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:&nbsp;
<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> </div>
</section> </section>
</main> </main>

36
src/pages/ContactUs.js
View File

@@ -10,7 +10,7 @@ import { Checkbox } from '../components/ui/checkbox';
import { Mail, MapPin, Loader2 } from 'lucide-react'; import { Mail, MapPin, Loader2 } from 'lucide-react';
import api from '../utils/api'; import api from '../utils/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { PiMapTrifoldBold } from "react-icons/pi";
const ContactUs = () => { const ContactUs = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: '', firstName: '',
@@ -103,8 +103,8 @@ const ContactUs = () => {
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
{/* Contact Form */} {/* Contact Form */}
<Card className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg"> <Card className="p-8 bg-white rounded-2xl">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}> <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
Contact Form Contact Form
</h1> </h1>
@@ -120,7 +120,7 @@ const ContactUs = () => {
name="firstName" name="firstName"
value={formData.firstName} value={formData.firstName}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -134,7 +134,7 @@ const ContactUs = () => {
name="lastName" name="lastName"
value={formData.lastName} value={formData.lastName}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -152,7 +152,7 @@ const ContactUs = () => {
type="email" type="email"
value={formData.email} value={formData.email}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -168,7 +168,7 @@ const ContactUs = () => {
name="subject" name="subject"
value={formData.subject} value={formData.subject}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -184,7 +184,7 @@ const ContactUs = () => {
name="message" name="message"
value={formData.message} value={formData.message}
onChange={handleChange} 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" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required required
/> />
@@ -226,21 +226,21 @@ const ContactUs = () => {
<div className="space-y-6"> <div className="space-y-6">
{/* Message Card */} {/* Message Card */}
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white"> <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. If you have questions, or are interested in joining, we would love hearing from you.
</p> </p>
</Card> </Card>
{/* Email 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="flex items-center gap-4">
<div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0"> <div className="flex items-center justify-center flex-shrink-0">
<Mail className="h-6 w-6 text-[#664fa3]" /> <Mail className="size-12 text-[#664fa3]" />
</div> </div>
<div> <div>
<a <a
href="mailto:info@loaftx.org" 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" }} style={{ fontFamily: "'Inter', sans-serif" }}
> >
info@loaftx.org info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
</Card> </Card>
{/* Address 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="flex items-start gap-4">
<div className="w-12 h-12 bg-[#e8e0f5] rounded-full flex items-center justify-center flex-shrink-0"> <div className="flex items-center justify-center flex-shrink-0">
<MapPin className="h-6 w-6 text-[#664fa3]" /> <PiMapTrifoldBold className="size-12 text-[#664fa3]" />
</div> </div>
<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 LOAF
</p> </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 /> P.O. Box 7207<br />
Houston, Texas 77248-7207 Houston, Texas 77248-7207
</p> </p>

180
src/pages/Donate.js
View File

@@ -55,117 +55,131 @@ const Donate = () => {
}; };
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen">
<PublicNavbar /> <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 */} {/* Hero Section */}
<section className="py-12"> <section className="py-12">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center h-full">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} /> <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
</div> </div>
<h1 className="text-3xl sm:text-4xl md: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 Donate
</h1> </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 We really appreciate your donations. You can make your donation online
or send a check by mail. or send a check by mail.
</p> </p>
</div> </div>
</section> </section>
{/* Donation Amount Buttons */} {/* Columns */}
<section className="py-12"> <div className="py-12">
<div className="max-w-4xl mx-auto"> <div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 lg:max-h-[450px]'>
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<div className="flex items-center gap-4 mb-6">
<CreditCard className="w-12 h-12 text-[#664fa3]" />
<h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
Select Your Donation Amount
</h2>
</div>
{/* Donation Buttons Grid */} {/* Donation Amount Buttons */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> <section className="flex flex-col h-full">
{[25, 50, 100, 250].map(amount => ( <div className="mx-auto flex-1 w-full h-full">
<Button <Card className="p-8 bg-white rounded-3xl w-full h-full content-center">
key={amount} <div className="flex items-center gap-4 mb-6">
onClick={() => handleDonateAmount(amount * 100)} <CreditCard className="size-24 text-[#664fa3]" />
disabled={processingAmount === amount * 100} <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50" Select Your Donation Amount
> </h2>
{processingAmount === amount * 100 ? (
<Loader2 className="h-6 w-6 animate-spin" />
) : (
`$${amount}`
)}
</Button>
))}
</div>
{/* Custom Amount Button */}
<Button
onClick={() => setCustomAmountDialogOpen(true)}
disabled={processingAmount !== null}
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
>
<Heart className="h-6 w-6" />
Donate Any Amount
</Button>
<p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Secure donation processing powered by Stripe
</p>
</Card>
</div>
</section>
{/* Alternative Payment Methods */}
<section className="py-12">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Mail Check */}
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<Mail className="w-12 h-12 text-[#664fa3] mb-4" />
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Mail a Check
</h3>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our mailing address for checks:<br />
<span className="font-semibold">LOAF</span><br />
P.O. Box 7207<br />
Houston, Texas 77248-7207
</p>
</Card>
{/* Zelle */}
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<div className="mb-4">
<img src={zelleLogo} alt="Zelle" className="h-32" onError={(e) => e.target.style.display = 'none'} />
</div> </div>
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Pay with Zelle {/* Donation Buttons Grid */}
</h3> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> {[25, 50, 100, 250].map(amount => (
If your bank allows the use of Zelle, please feel free to send money to: <Button
key={amount}
onClick={() => handleDonateAmount(amount * 100)}
disabled={processingAmount === amount * 100}
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
>
{processingAmount === amount * 100 ? (
<Loader2 className="h-6 w-6 animate-spin" />
) : (
`$${amount}`
)}
</Button>
))}
</div>
{/* Custom Amount Button */}
<Button
onClick={() => setCustomAmountDialogOpen(true)}
disabled={processingAmount !== null}
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
>
<Heart className="h-6 w-6" />
Donate Any Amount
</Button>
<p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Secure donation processing powered by Stripe
</p> </p>
<a href="mailto:LOAFHoustonTX@gmail.com"
className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAFHoustonTX@gmail.com
</a>
</Card> </Card>
</div> </div>
</section>
{/* Alternative Payment Methods */}
<section className="flex flex-col">
<div className="max-w-6xl mx-auto w-full">
<div className="flex flex-col gap-8 w-full">
{/* Mail Check */}
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
<Mail className="size-24 text-[#664fa3]" />
<div>
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Mail a Check
</h3>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our mailing address for checks:<br />
<span className="font-semibold">LOAF</span><br />
P.O. Box 7207<br />
Houston, Texas 77248-7207
</p>
</div>
</Card>
{/* Zelle */}
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
<div className="w-44">
<img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
</div>
<div>
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Pay with Zelle
</h3>
<p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If your bank allows the use of Zelle, please feel free to send money to:
</p>
<a href="mailto:LOAFHoustonTX@gmail.com"
className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAFHoustonTX@gmail.com
</a>
</div>
</Card>
</div>
</div>
</section>
</div> </div>
</section> </div>
{/* Columns end */}
</main> </main>
<PublicFooter /> <PublicFooter />
{/* Custom Amount Dialog */} {/* Custom Amount Dialog */}
<Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}> <Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
<DialogContent className="sm:max-w-[450px] bg-white rounded-2xl"> <DialogContent className="sm:max-w-[450px] bg-white rounded-3xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}> <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
Enter Donation Amount Enter Donation Amount

465
src/pages/History.js
View File

@@ -4,6 +4,35 @@ import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { Pen } from 'lucide-react'; import { Pen } from 'lucide-react';
import { LuArrowDown } from "react-icons/lu";
const CardSection = ({ children, className = '', arrow = true }) => (
<section className={` ${className}`}>
<div className="max-w-7xl mx-auto">
<Card className="p-14 bg-white rounded-3xl">
{children}
</Card>
</div>
{arrow && (<div className="flex text-2xl my-5 justify-center">
<LuArrowDown />
</div>)}
{!arrow && (
<div className="mb-12"></div>
)}
</section>
);
const Title = ({ children }) => (
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
{children}
</h2>
);
const Paragragh = ({ children }) => (
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
{children}
</p>
);
const History = () => { const History = () => {
const ardenCharlotteImg = `${process.env.PUBLIC_URL}/history-arden-charlotte.png`; const ardenCharlotteImg = `${process.env.PUBLIC_URL}/history-arden-charlotte.png`;
@@ -12,20 +41,21 @@ const History = () => {
const part3Img = `${process.env.PUBLIC_URL}/history-part3.png`; const part3Img = `${process.env.PUBLIC_URL}/history-part3.png`;
const part7Img = `${process.env.PUBLIC_URL}/history-part7.png`; const part7Img = `${process.env.PUBLIC_URL}/history-part7.png`;
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <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-br from-[#F9FAFB] to-[#DCD7EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
{/* Hero Section */} {/* Hero Section */}
<section className="py-12"> <section className="py-12">
<div className="max-w-5xl mx-auto text-center"> <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4" <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#48286e] "
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
History of LOAF History of LOAF
</h1> </h1>
<div className="flex items-center justify-center gap-2 text-[#48286e]"> <div className="flex items-center justify-center gap-6 text-[#48286e]">
<Pen className="h-5 w-5" /> <Pen className="size-7" />
<p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
By Arden Eversmeyer By Arden Eversmeyer
</p> </p>
@@ -34,232 +64,219 @@ const History = () => {
</section> </section>
{/* Part 1 - With Image */} {/* Part 1 - With Image */}
<section className="py-12"> <CardSection>
<div className="max-w-5xl mx-auto"> <div className="flex flex-col md:flex-row gap-14 items-center">
<Card className="p-8 bg-white rounded-2xl shadow-lg"> <div className="md:w-1/3 ">
<div className="flex flex-col md:flex-row gap-8 items-start"> <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
<div className="md:w-1/3"> className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery" <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} /> Arden Eversmeyer and Charlotte Avery
<p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Arden Eversmeyer and Charlotte Avery
</p>
</div>
<div className="md:w-2/3">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 1
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In 1985 my life partner of 33 years died. For many years we had been part of a large "friendship group" that got together for meals and games. After her death, I found myself on the edge of the group. I felt invisible. The group, composed primarily of couples, didn't know what to do with the single person they had suddenly become.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
When I moved to Houston in 1992, I again found myself isolated. I had friends, but not being "coupled" in a "couples world" left me on the outside. I was aware of my advancing age – I was 63 at the time - and I was sure that I was the only "old lesbian" in Houston. I checked out the Montrose bars, but to my dismay, found that older lesbians were non-existent; at least they didn't hang out in bars.
</p>
</div>
</div>
</Card>
</div>
</section>
{/* Part 2 */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 2
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
</p> </p>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> </div>
In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions. <div className="md:w-2/3">
<Title>Part 1</Title>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In 1985 my life partner of 33 years died. For many years we had been part of a large “friendship group”, many of whom had been together longer than we had. But I was the first to lose a partner. After a few months I began to feel the need to explore community. Already retired, the necessity of being closeted was gone. I soon discovered there was no group for mid-life an old lesbians in Houston, and began the search for such groups around the U.S.
</p> </p>
<ul className="list-disc ml-6 mt-4 space-y-2 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-md mb-4 text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<li><strong>AGE OF PARTICIPANTS</strong> - we started off as LOAFF - Lesbians over Age Fifty-Five. The extra F stood for 55, which didn't work very well, so we changed to LOAF and lowered the age to 50.</li> In April of 1987 I loaded my camper and headed for California. I started in San Diego, and worked my way up the coast to San Francisco finding and visiting senior LGBT groups. I came home with much information, and some suggestions about organizing. One fact that was consistent with all the groups was that if the group was for both men and women - the women dropped out. The recommendation was to start a group for women only.
<li><strong>NAME FOR THE GROUP</strong> - LOAFF and then LOAF</li>
<li><strong>NUMBER OF EVENTS</strong> - Some of the early years we had events every Saturday afternoon, but as we aged, we cut back to one event each month, then we went to the current format of one event during the week, either afternoon or evening, and a weekend activity.</li>
<li><strong>TYPES OF EVENTS</strong> - We've had LOTS of different events. Some of the events we have had include: going to a museum, going to the symphony, seeing a play or movie together, going out to dinner, pot luck dinners, game nights, campfires, hiking, kayaking, and more.</li>
</ul>
</Card>
</div>
</section>
{/* Part 3 - With Image */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<div className="flex flex-col md:flex-row gap-8 items-start">
<div className="md:w-2/3">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 3
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
We have never had a formal organization with by-laws and officers. We have operated on a consensus basis with the founders making most of the decisions. One of the early decisions we made was that we would not have any kind of formal membership. We wanted to be as inclusive as possible and not create any barriers to participation.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
We have always been self-supporting. We have never charged dues or asked for donations. Each person pays for their own meal or activity. We have never had a budget or a bank account. We have been able to operate this way because we have always kept our activities simple and inexpensive.
</p>
</div>
<div className="md:w-1/3">
<img src={part3Img} alt="LOAF Community"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF Community
</p>
</div>
</div>
</Card>
</div>
</section>
{/* Part 4 - With Image */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<div className="flex flex-col md:flex-row gap-8 items-start">
<div className="md:w-2/3">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 4
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Over the years, LOAF has been a place where women can be themselves, where they can talk about their lives and their experiences without fear of judgment. We have created a safe space for women to explore their sexuality and their identity as lesbians.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Many women have told us that LOAF has been a lifeline for them, especially as they age and find themselves increasingly isolated. LOAF has provided a community and a sense of belonging that has been invaluable.
</p>
</div>
<div className="md:w-1/3">
<img src={pride1Img} alt="Pride Parade"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<img src={pride2Img} alt="Pride Parade"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF at Pride
</p>
</div>
</div>
</Card>
</div>
</section>
{/* Part 5 */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 5
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF has also been a place where women can give back to the community. Many of our members have been active in various LGBTQ+ organizations and causes. We have marched in Pride parades, volunteered at LGBTQ+ events, and supported various LGBTQ+ initiatives.
</p> </p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
As we look to the future, we are committed to continuing to provide a welcoming and inclusive space for lesbians over 50. We know that there are many women out there who are looking for a community like ours, and we want to make sure that they know that LOAF is here for them.
</p>
</Card>
</div>
</section>
{/* Part 6 */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 6
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
One of the things that has made LOAF special is the diversity of our members. We have women from all walks of life, all backgrounds, all races, all religions, and all political persuasions. What we have in common is our age and our sexual orientation.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
We have learned so much from each other over the years. We have shared our stories, our wisdom, and our experiences. We have laughed together, cried together, and supported each other through good times and bad.
</p>
</Card>
</div>
</section>
{/* Part 7 - With Image */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<div className="flex flex-col md:flex-row gap-8 items-start">
<div className="md:w-1/3">
<img src={part7Img} alt="LOAF Members"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF Members
</p>
</div>
<div className="md:w-2/3">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 7
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF has evolved over the years, but our core mission has remained the same: to provide a welcoming and inclusive community for lesbians over 50. We have adapted to the changing times and the changing needs of our members, but we have never lost sight of what makes LOAF special.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
We are proud of what we have accomplished over the years, and we are excited about the future. We know that there will always be a need for a community like LOAF, and we are committed to being here for as long as we are needed.
</p>
</div>
</div>
</Card>
</div>
</section>
{/* Part 8 */}
<section className="py-12">
<div className="max-w-5xl mx-auto">
<Card className="p-8 bg-white rounded-2xl shadow-lg">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Part 8
</h2>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
As I reflect on the history of LOAF, I am filled with gratitude for all of the women who have been part of this community over the years. Each one of you has made LOAF what it is today, and I am so proud of what we have created together.
</p>
<p className="text-lg text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF has been a place where we can be ourselves, where we can celebrate who we are, and where we can support each other through all of life's challenges. It has been a place of joy, laughter, friendship, and love.
</p>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Thank you for being part of LOAF. Thank you for making this community what it is. And thank you for continuing to support LOAF into the future.
</p>
</Card>
</div>
</section>
{/* CTA Section */}
<section className="py-12 bg-[#48286e] rounded-2xl">
<div className="max-w-5xl mx-auto px-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
A Life Remembered
</h3>
<p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
</p>
<a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
<Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
View Arden's Tribute
</Button>
</a>
</Card>
<Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
The Old Lesbian Oral Herstory Project
</h3>
<p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
</p>
<a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
<Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
Learn More About OLOHP
</Button>
</a>
</Card>
</div> </div>
</div> </div>
</section> </CardSection>
{/* Arrow */}
{/* Part 2 */}
<CardSection >
<Title>Part 2</Title>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
</p>
<ul className="list-disc ml-6 mt-4 space-y-2 text-md text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<li>AGE OF PARTICIPANTS - We launched as LOAFF (Lesbians Over Age Fifty-Five) and quickly lowered the entry age to fifty so more women could join.</li>
<li>NAME FOR THE GROUP - The acronym began as LOAFF, then we streamlined it to the now-familiar LOAF.</li>
<li>AMOUNT OF STRUCTURING - Too many rules can smother a grassroots group, so we kept things loose and let participating women guide direction as needs evolved.</li>
<li>SAFE HAVEN FOR MEETINGS - Gatherings had to be in discreet, transit-accessible locations, scheduled during daylight (often Sundays) so closeted or non-driving members could attend comfortably.</li>
<li>NEWSLETTER - A monthly mailing went out before each month&apos;s end, highlighting news plus upcoming activities tailored to the community.</li>
<li>DUES - Contributions were set at $2 per month per woman, with a standing policy that anyone unable to pay was still welcome—unchanged since inception.</li>
<li>CREATIVE PUBLICITY - We produced flyers and placed them with LGBTQ+ organizations, counselors, and other allies, recognizing the women we hoped to reach wouldn&apos;t necessarily be found in bars and would arrive mostly via word of mouth.</li>
</ul>
</CardSection>
{/* Part 3 - With Image */}
<CardSection >
<div className="flex gap-14 flex-col min-w-2xl md:flex-row justify-center items-center">
<div className="">
<img src={part3Img} alt="LOAF Community"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
</div>
<div className="">
<Title>Part 3</Title>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The first meeting of LOAF was the third Sunday of October 1987 at Womynspace. There were six women besides myself at that first meeting. attending were Betty Rudnick, Billie Carter, Josephine Jones, Sylvia Porter, Marjorie Fulp, and Charlotte Avery. Of those six women, only Sylvia Porter and Charlotte Avery are still alive.
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Much that we discussed that day is still the heart of the group today - decisions by consensus at monthly meetings and activities governed by needs and wishes of participating women. It was soon decided to make the age requirement for membership age 50, and we became LOAF.
</p>
<p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In 1989 member Jo Stewart, social worker at Methodist Hospital, started urging LOAF to incorporate as a non-profit. The work began in 1990 with Moore & Hunt (Debbie Hunt) as our Corporate Attorneys. Jo died of cancer in 1990. The work for application of our 501(c)3 was done by Floi Ewing, Arden&apos;s sister, and our non-profit status was granted in January 1991. Loaf incorporated as a social networking and support group without a membership roll to protect the anonymity of the women in LOAF.
</p>
</div>
</div>
</CardSection>
{/* Part 4 */}
<CardSection>
<div className=" ">
<Title>Part 4</Title>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Third Sunday meeting places have changed over the years. We moved from Womynspace to Autrey House near Rice University. We were there from November 1987 until May 1990 when the new Bishop dis-invited all GLBT groups because of homophobia. We spent a couple months at Montrose Counseling Center (on Lovett), and then moved to the Metropolitan Multi- Service Center on W. Gray. We met there from August 1990 until January 1993. We left because the city started closing the centers on Sunday, and we were not willing to change our meeting day. From February through June we met at Inklings Book Store . In July we started our long occupancy with Houston Mission Church, and met there until the church dissolved in April 2001. We then met at the Hollyfield Center for seven months. From there we went to the GLBT Community Center on Hawthorne where we stayed until July 2003. Attendance was dropping off, and some of the women were not comfortable in a gay identified place. So Third Sunday Meetings moved to Charlotte and Arden&apos;s home - and we met there from August 2003 until April 2011. Membership had grown until the meetings had reached critical mass and parking was a problem. So a team of board members started researching for a new home. And on the third Sunday of May 2011 LOAF started meeting at the Montrose Counseling Center. A new era had started.
</p>
</div>
</CardSection>
{/* Part 5 - With Image */}
<CardSection >
<div className="flex gap-8 flex-col lg:flex-row justify-center items-center md:items-start">
<div className="flex flex-col gap-8 w-full lg:w-1/2">
<img src={pride1Img} alt="Pride Parade"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
<img src={pride2Img} alt="Pride Parade"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
</div>
<div className="w-full lg:w-1/2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Title>Part 5</Title>
<p className="text-md text-[#48286e] leading-relaxed mb-4" >
The activities of the monthly meetings were decided by the participating women. Rules were very limited, and decisions were made monthly by the women attending. We soon decided to set up a quarterly meeting schedule of pot-luck, speaker, and games. We followed this schedule for at least ten years. New ideas/programs were added as time allowed. Our first speaker was Pokey Anderson, an icon in the GLBT community. She provided much information about our history in Houston. We also decided to ask Deb Hunt to talk to us about documents, and she has done this periodically over the years. She spoke to us well before we decided to incorporate, and she then became our Corporate Attorney.
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In November 1988 we instituted our annual Benevolent Project. We collected items to contribute to Stone Soup Kitchen - a GLBT food pantry. We have done this every year since, and have contributed to groups such as Omega House, The Rose, Battered Women, local lesbian organizations, and some individuals.
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
In June 1989 we entered our first Pride Parade. That year we had a convertible and a walking group. Several of the LOAF women participate with other groups in the parade, but we have participated every year since 1989. In 2010 we entered our first float and won a trophy for best representation of the theme.
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
All of these decisions were made by the women at the Third Sunday meetings. There have never been rules instigated by the Board of Directors. Because many women don&apos;t want to attend meetings, we changed Third Sunday Meeting to Meet &apos;N Greet several years ago. And that is what we do - take care of any necessary business. But greet newcomers and socialize with our friends.
</p>
</div>
</div>
</CardSection>
{/* Part 6 */}
<CardSection >
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
Part 6
</h2>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Socials have always been a big part of the activities for LOAF, and having a social as well as the monthly “Third Sunday” meeting was always on the calendar. Pot lucks topped the list for many years, and they were hosted by women in their homes. That is more difficult now because of the size of the membership. Bev and Sandy have hosted a potluck since 1995, and Eva Geer for several years.
</p>
<p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The ice cream socials started in 1989. There are still women who have never cranked or eaten home made ice cream.The “picnic in the park” started in 2000. We have held picnics in a couple State Parks as well as Tom Bass Park in recent years.In 1988 we started attending the TUTS Broadway Musical at Miller Theater in July. We bring a snack supper and a chair and sit on the hill.In 2000 we started eating at Sudie's Catfish House in January. A breather from a busy party season, but a good way to connect.From 1987 to 1994 we had “Second Tuesday Dancing”. First at The Ranch, and then at Ms B&apos;s, it was our way to celebrate birthdays of the month. It was well attended.
</p>
<p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
From 1989 to 1993 we had a five day Thanksgiving camp-out at a State Park. We roasted turkey and women came for potluck on Thanksgiving Day.We had from 10 to 20 campers, and maybe 25 for dinner.We have had a Christmas party every year since 1987.We have had several Port of Houston tours on the Sam Houston; several Houston Zoo tours; museum tours; and out-of town tours for bluebonnets, miniature horses, and Blue Bell ice cream. And occasionally, for lack of inspiration for an event social, we simply met for lunch at a local restaurant.
</p>
<p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF has always been a social group. We have never had support groups or counseling. We are a place to meet other lesbians over fifty, make friends, and have fun.
</p>
</CardSection>
{/* Part 7 - With Image */}
<CardSection>
<div className="flex flex-col md:flex-row gap-8 items-center">
<div className="md:w-1/3">
<img src={part7Img} alt="LOAF Members"
className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
</div>
<div className="md:w-2/3">
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
Part 7
</h2>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The LOAF Library has been an important part of the offering to the women. It started about 1987 when Arden discovered there were books - both fiction and non-fiction - about lesbians. We had one bookstore then -” Wilde &apos;N Stein” - that had a limited selection of lesbian books. Then Arden discovered Womencraft Books, a mail order book company. This began the collection now in the library. Over the years women have donated books. At one time we took duplicate titles to our book stores (Inkilngs and Book Woman) and traded them for titles we didn&apos;t have on the shelf. When the last book store closed we started donating duplicate copies to HATCH, and they are building their library. We have a collection that includes feminist, fantasy/sci-fi, poetry, non-fiction, as well as fiction books. We have a collection of out-of-print periodicals, women&apos;s music, and a video library. We have some beautiful “coffee table” books. We have copies of many of the “pulp” books.
</p>
<p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF also was gifted with a beautiful pianola player piano and about 150 piano rolls. Marie Mariano donated it several years ago. It was in the “Allison” flood, and when it was restored Arden was told it was a beautiful instrument, and quite valuable.
</p>
</div>
</div>
</CardSection>
{/* Part 8 */}
<CardSection arrow={false} >
<h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
Part 8
</h2>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF has become a unique organization in that it is the oldest lesbian organization in Houston, and the only one of its kind in Texas. Over the years there has been quite a bit of exposure and promotion for LOAF.
</p>
<p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
For 17 consecutive years, from 1987 to 2004, we had a Texas Lesbian Conference that rotated between Houston, San Antonio, Austin, and Dallas. LOAF presented workshops at five of these conferences. LOAF did a workshop at the National Lesbian Conference in Atlanta in 1991. We did a workshop at at the PFLAG “Healing the Hurt” conference in 1994. We did a program at the Silver Threads conference in St Petersburg, FL. We have done programs at three OLOC conferences. Charlotte and Arden participated in a live TV show about senior GLBT persons in Dallas. We participated in a documentary on GLBT seniors produced in Canada. And another documentary for Golden Threads at Cape Cod. We participated on a panel for the Women’s Studies Department at the University of Houston for their “Living archive” series. We have done several programs for the Women’s Group in Houston, and appeared on the After Hours radio show on KPFT several times.
</p>
<p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
All of these appearances are documented and part of the LOAF Archives located at the University of Houston Special Collections Library. One result of these workshops and programs has been the formation of similar groups for mid-life and old lesbians throughout the country. But most important is the connection with other lesbians of our generation and avoiding isolation..
</p>
</CardSection>
</main> </main>
{/* CTA Section */}
<section className="py-20 bg-[#48286e] mx-0">
<div className="max-w-7xl mx-auto px-8">
<div className="flex gap-8 md:flex-row flex-col">
<Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
A Life Remembered
</h3>
<p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
</p>
<a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
<Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
View Arden's Tribute
</Button>
</a>
</Card>
<Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
The Old Lesbian Oral Herstory Project
</h3>
<p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
</p>
<a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
<Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
Learn More About OLOHP
</Button>
</a>
</Card>
</div>
</div>
</section>
<PublicFooter /> <PublicFooter />
</div> </div>
); );

140
src/pages/Landing.js
View File

@@ -7,26 +7,89 @@ import PublicFooter from '../components/PublicFooter';
const Landing = () => { const Landing = () => {
// LOAF brand assets (local) // LOAF brand assets (local)
const taglineImage = `${process.env.PUBLIC_URL}/tagline-image.png`; const taglineImage = `${process.env.PUBLIC_URL}/web_elements_tagline.png`;
const shootingStar = `${process.env.PUBLIC_URL}/shooting-star.png`; const shootingStar = `${process.env.PUBLIC_URL}/shooting_star_2.png`;
const iconMeetGreet = `${process.env.PUBLIC_URL}/icon-meet-greet.png`; const iconMeetGreet = `${process.env.PUBLIC_URL}/icon-meet-greet.png`;
const iconSocials = `${process.env.PUBLIC_URL}/icon-socials.png`; const iconSocials = `${process.env.PUBLIC_URL}/icon-socials.png`;
const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`; const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`; const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
const friendships = `${process.env.PUBLIC_URL}/friendships.png`;
const InfoCard = ({ iconSrc, infoTitle, description }) => (
<Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-none lg:max-w-[363px]">
<div className="absolute -top-20 md:-top-40 flex justify-center w-full">
<img
src={iconSrc}
alt={infoTitle}
className=" w-40 md:w-64 lg:max-w-[330px] h-auto aspect-[10/9] object-contain"
/>
</div>
<div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
<h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
{infoTitle}
</h5>
{description}
</div>
</Card>
);
const infoCardData = [
{
iconSrc: iconMeetGreet,
infoTitle: 'Meet and Greet',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
<a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
</p>
),
},
{
iconSrc: iconSocials,
infoTitle: 'Socials',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
something for everyone.
</p>
),
},
{
iconSrc: iconActive,
infoTitle: 'Active LOAFers',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
through the botanic gardens or the Arboretum.
</p>
),
},
];
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <PublicNavbar />
{/* Hero Section */} {/* Hero Section */}
<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"> <section className="relative bg-gradient-to-b from-[#48286e] to-[#664fa3] py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
<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"> {/* Friendships background image */}
<div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem] lg:-top-32">
<img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15 max-w-full max-h-full object-contain" />
</div>
{/* Blur Overlay */}
<div className="absolute inset-0 z-[1] bg-white/5 backdrop-blur-xs"></div>
{/* Left column Loaf Image */}
<div className="relative z-10 lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[530px] lg:flex-shrink-0">
<div className="flex flex-col gap-6 items-center"> <div className="flex flex-col gap-6 items-center">
<img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" /> <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[370px] h-auto object-contain" />
</div> </div>
<div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]"> <div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
<Link to="/register" className="w-full"> <Link to="/become-a-member" 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"> <Button style={{ fontFamily: "'Nunito sans', sans-serif" }} 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 Become a Member
</Button> </Button>
</Link> </Link>
@@ -35,74 +98,43 @@ const Landing = () => {
LOAF is supported by the Hollyfield Foundation LOAF is supported by the Hollyfield Foundation
</p> </p>
</div> </div>
<div className="py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:w-[594px] h-auto"> {/* Right Column Loaf Tagline */}
<img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[483px] h-auto object-contain" /> <div className="relative z-10 py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:max-w-[815px] h-auto">
<img src={taglineImage} alt="LOAF Tagline" className="relative z-10 w-full h-auto object-cover" />
</div> </div>
</section> </section>
{/* About Section */} {/* About Section */}
<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"> <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
<div className="flex flex-col items-center pt-12"> <div className="flex flex-col items-center pt-4">
<h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}> <h3 className="text-[#48286e] px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF Welcome to LOAF
</h3> </h3>
</div> </div>
<p className="text-[rgba(0,0,0,0.55)] text-lg text-center font-medium" style={{ fontFamily: "'Inter', sans-serif" }}> <p className="text-[rgba(0,0,0,0.55)] text-lg lg:text-2xl text-center font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF is Houston's social networking group for lesbians who are 50 years of age and older. LOAF hosts three main activities each month, Meet and Greets, Socials, and ActiveLOAFers. TheaterLOAFers coordinate events throughout the year. LOAF is Houston's social networking group for lesbians who are 50 years of age and older. LOAF hosts three main activities each month, Meet and Greets, Socials, and ActiveLOAFers. TheaterLOAFers coordinate events throughout the year.
</p> </p>
<img src={shootingStar} alt="Decorative element" className="w-full h-[197px] object-contain" /> <img src={shootingStar} alt="Decorative element" className="w-full h-[197px] object-contain" />
</section> </section>
{/* Feature Cards Section */} {/* Feature Cards Section */}
<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"> <section className="bg-gradient-to-b pb-20 from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch 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]"> {infoCardData.map((card) => (
<img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" /> <InfoCard key={card.infoTitle} {...card} />
<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
</h5>
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
<a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
</p>
</div>
</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-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
</h5>
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past social events include, bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is something for everyone.
</p>
</div>
</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-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
</h5>
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included, hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling through the botanic gardens or the Arboretum.
</p>
</div>
</Card>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<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"> <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"> <div className="flex flex-col-reverse md: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"> <Link to="/register" className="w-full sm:w-auto flex items-center justify-center">
<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"> <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full
py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
Become a Member Become a Member
</Button> </Button>
</Link> </Link>
<div className="flex-1 flex items-center justify-center"> <div className="flex-1 flex items-center justify-center">
<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" }}> <h4 className="text-white text-3xl px-4 font-bold text-center lg:text-left leading-normal max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
No matter your age or ability, there is something for everyone. No matter your age or ability, there is something for everyone.
</h4> </h4>
</div> </div>

20
src/pages/MissionValues.js
View File

@@ -10,33 +10,31 @@ const MissionValues = () => {
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <PublicNavbar />
<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"> <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-6xl mx-auto"> <div className="max-w-[1400px] mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="flex md:flex-row flex-col gap-10 items-stretch">
{/* Left Card - Mission (Purple Gradient) */} {/* Left Card - Mission (Purple Gradient) */}
<Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-8 rounded-2xl shadow-lg"> <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" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Mission LOAF Mission
</h2> </h2>
<p className="text-white text-lg text-center leading-relaxed" <p className="text-white text-xl text-center leading-relaxed"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF's mission is to alleviate isolation and enrich the lives of lesbians LOAF’s mission is to alleviate isolation and enrich the lives of lesbians over the age of 50 by providing several social networking events every month in Houston and the surrounding areas.
over the age of 50 by providing several social networking events every month
in Houston and the surrounding areas.
</p> </p>
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<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" /> <img src={loafLogo} alt="LOAF Logo" className="size-32 sm:size-40 md:size-64 lg:size-96 object-contain" />
</div> </div>
</Card> </Card>
{/* Right Card - Values */} {/* Right Card - Values */}
<Card className="bg-white p-8 rounded-2xl shadow-lg"> <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" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Values LOAF Values
</h2> </h2>
<ol className="list-decimal list-inside space-y-3 text-lg text-[#48286e]" <ol className="list-decimal list-inside space-y-8 text-lg text-[#48286e]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li> <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
<li>Social support for lesbians.</li> <li>Social support for lesbians.</li>

392
src/pages/PrivacyPolicy.js
View File

@@ -7,242 +7,190 @@ export default function PrivacyPolicy() {
return ( return (
<> <>
<PublicNavbar /> <PublicNavbar />
<div className="min-h-screen bg-[#F8F7FB]"> <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
<div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12"> <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
{/* Header */} <header className="border-b pb-6">
<div className="mb-8"> <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{fontFamily: 'Poppins'}}>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
Privacy Policy
</h1>
<p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAFers, Inc. Website Privacy Policy LOAFers, Inc. Website Privacy Policy
</p> </h1>
</div> </header>
{/* Content */} <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
<div className="bg-white rounded-lg border border-[#ddd8eb] p-6 sm:p-8 md:p-10 space-y-8"> <section className="mt-8">
<p>
{/* Introduction */} This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and
<section> governs data collection and usage. The Company&apos;s application is a Membership request, Membership online
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> profile, and Consent to receive eNewsletters. By using the Company application, you consent to the data
<p className="text-gray-700 leading-relaxed"> practices described in the statement.
This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and governs data collection and usage. The Company's application is a Membership request, Membership online profile, and Consent to receive eNewsletters. By using the Company application, you consent to the data practices described in the statement. </p>
</p> <p>
<p className="text-gray-700 leading-relaxed"> We reserve the right to change this policy at any given time, of which you will be promptly updated. If
We reserve the right to change this policy at any given time, of which you will be promptly updated. If you want to make sure that you are up to date with the latest changes, we advise you to frequently visit this page. you want to make sure that you are up to date with the latest changes, we advise you to frequently visit
</p> this page.
</div> </p>
</section> </section>
{/* Section 1: What User Data We Collect */} <section id="user-data" className="scroll-mt-24">
<section> <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">What User Data We Collect</h2>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <p>When you visit the Site, we may collect the following data:</p>
style={{ fontFamily: "'Inter', sans-serif" }}> <ul className="list-disc pl-6 space-y-1">
<span>💻</span> What User Data We Collect <li>Your IP address.</li>
<li>Your contact information and email address.</li>
</ul>
<p>When you apply for membership, we collect the following data:</p>
<ul className="list-disc pl-6 space-y-1">
<li>First and last name</li>
<li>Mailing address</li>
<li>Email</li>
<li>Phone number</li>
<li>Birthday</li>
</ul>
<p>If you choose to pay your membership administrative fee online, we have access to:</p>
<ul className="list-disc pl-6 space-y-1">
<li>Partial credit card information</li>
</ul>
<p>You may also choose to provide the following:</p>
<ul className="list-disc pl-6 space-y-1">
<li>Partners name</li>
<li>Photo</li>
<li>Self-bio</li>
<li>Consent to receive our eNewsletter</li>
<li>Consent to display an online profile visible only to membership</li>
</ul>
</section>
<section id="why-collect" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Why We Collect Your Data</h2>
<ul className="list-disc pl-6 space-y-1">
<li>
To send you announcement emails containing the information about our events and information we think you
will find interesting.
</li>
<li>To contact you to fill out surveys about our membership</li>
<li>To customize our blog according to your online behavior and personal preferences.</li>
</ul>
</section>
<section id="third-parties" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Sharing Information with Third Parties</h2>
<p>The Company does not sell, rent, or lease personal data to third parties.</p>
<p>
The Company may share data with trusted partners to help perform statistical analysis, provide customer
support.
</p>
<p>
The Company uses Stripe to process online payments at which time users would no longer be governed by the
Company&apos;s Privacy Policy.
</p>
<p>The Company may disclose your personal information, without notice, if required to do so by law.</p>
</section>
<section id="safeguarding" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Safeguarding and Securing the Data</h2>
<p>
LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all
in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest
technologies and software, which help us safeguard all the information we collect online.
</p>
</section>
<section id="cookies" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Our Cookie Policy</h2>
<p>
Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your
online behavior (analyze web traffic, web pages you visit and spend the most time on).
</p>
<p>
The data we collect by using cookies is used to customize our blog to your needs. After we use the data
for statistical analysis, the data is completely removed from our systems.
</p>
<p>
Please note that cookies don&apos;t allow us to gain control of your computer in any way. They are strictly
used to monitor which pages you find useful and which you do not so that we can provide a better
experience for you.
</p>
<p>
If you want to disable cookies, you can do it by accessing the settings of your internet browser. You can
visit{" "}
<a className="" href="https://www.internetcookies.com">
https://www.internetcookies.com
</a>
, which contains comprehensive information on how to do this on a wide variety of browsers and devices.
</p>
</section>
<section id="other-sites" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Links to Other Websites</h2>
<p>
Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held
responsible for your data and privacy protection. Visiting those websites is not governed by this privacy
policy agreement. Make sure to read the privacy policy documentation of the website you go to from our
website.
</p>
</section>
<section id="restricting" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
Restricting the Collection of your Personal Data
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p>
<p className="text-gray-700 leading-relaxed"> At some point, you might wish to restrict the use and collection of your personal data. You can achieve
When you visit the Site, we may collect the following data: this by doing the following:
</p> </p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4"> <ul className="list-disc pl-6 space-y-1">
<li>Your <strong>IP address</strong></li> <li>Log in to your online profile and make any changes you wish to your profile information.</li>
<li>Your <strong>contact information and email address</strong></li> <li>
</ul> If you have already agreed to share your information with us, feel free to contact us via email and we
will be more than happy to change this for you.
<p className="text-gray-700 leading-relaxed mt-4"> </li>
When you apply for membership, we collect the following data: </ul>
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li><strong>First and last name</strong></li>
<li><strong>Mailing address</strong></li>
<li><strong>Email</strong></li>
<li><strong>Phone number</strong></li>
<li><strong>Birthday</strong></li>
</ul>
<p className="text-gray-700 leading-relaxed mt-4">
If you choose to pay your membership administrative fee online, we have access to:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li><strong>Partial credit card information</strong></li>
</ul>
<p className="text-gray-700 leading-relaxed mt-4">
You may also choose to provide the following:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li><strong>Partner's name</strong></li>
<li><strong>Photo</strong></li>
<li><strong>Self-bio</strong></li>
<li><strong>Consent to receive our eNewsletter</strong></li>
<li><strong>Consent to display an online profile visible only to membership</strong></li>
</ul>
</div>
</section> </section>
{/* Section 2: Why We Collect Your Data */} <section id="children" className="scroll-mt-24">
<section> <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Children Under Thirteen</h2>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <p>The Company does not knowingly collect information from children under the age of 13.</p>
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🎯</span> Why We Collect Your Data
</h2>
<div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>To send you announcement emails containing the information about our events and information we think you will find interesting.</li>
<li>To contact you to fill out surveys about our membership.</li>
<li>To customize our blog according to your online behavior and personal preferences.</li>
</ul>
</div>
</section> </section>
{/* Section 3: Sharing Information with Third Parties */} <section id="changes" className="scroll-mt-24">
<section> <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Changes to this Statement</h2>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <p>
style={{ fontFamily: "'Inter', sans-serif" }}> The Company may make changes to this Policy. When this occurs the effective date of this policy will be
<span>🤝</span> Sharing Information with Third Parties updated.
</h2> </p>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> </section>
<p className="text-gray-700 leading-relaxed">
The Company does not sell, rent, or lease personal data to third parties. <section id="contact" className="scroll-mt-24">
</p> <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Contact Information</h2>
<p className="text-gray-700 leading-relaxed"> <p>If you have any question, please contact LOAFers, Inc. at:</p>
The Company may share data with trusted partners to help perform statistical analysis, provide customer support. <div className="not-prose mt-4">
</p> <p className="font-semibold mb-2">LOAFers, Inc.</p>
<p className="text-gray-700 leading-relaxed"> <p className="">PO BOX 7207</p>
The Company uses <strong>Stripe</strong> to process online payments at which time users would no longer be governed by the Company's Privacy Policy. <p className="">Houston, TX 77248-7207</p>
</p> <p className="mt-3">Or</p>
<p className="text-gray-700 leading-relaxed"> <p className="mt-3">
The Company may disclose your personal information, without notice, if required to do so by law. <a className="" href="mailto:info@loaftx.org">
info@loaftx.org
</a>
</p> </p>
</div> </div>
</section> </section>
{/* Section 4: Safeguarding and Securing the Data */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🔒</span> Safeguarding and Securing the Data
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest technologies and software, which help us safeguard all the information we collect online.
</p>
</div>
</section>
{/* Section 5: Our Cookie Policy */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🍪</span> Our Cookie Policy
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your online behavior (analyze web traffic, web pages you visit and spend the most time on).
</p>
<p className="text-gray-700 leading-relaxed">
The data we collect by using cookies is used to customize our blog to your needs. After we use the data for statistical analysis, the data is completely removed from our systems.
</p>
<p className="text-gray-700 leading-relaxed">
Please note that cookies don't allow us to gain control of your computer in any way. They are strictly used to monitor which pages you find useful and which you do not so that we can provide a better experience for you.
</p>
<p className="text-gray-700 leading-relaxed">
If you want to disable cookies, you can do it by accessing the settings of your internet browser. You can visit{' '}
<a href="https://www.internetcookies.com" target="_blank" rel="noopener noreferrer" className="text-[#664fa3] hover:text-[#422268] font-semibold">
https://www.internetcookies.com
</a>, which contains comprehensive information on how to do this on a wide variety of browsers and devices.
</p>
</div>
</section>
{/* Section 6: Links to Other Websites */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🔗</span> Links to Other Websites
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held responsible for your data and privacy protection. Visiting those websites is not governed by this privacy policy agreement. Make sure to read the privacy policy documentation of the website you go to from our website.
</p>
</div>
</section>
{/* Section 7: Restricting the Collection of your Personal Data */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🚫</span> Restricting the Collection of your Personal Data
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
At some point, you might wish to restrict the use and collection of your personal data. You can achieve this by doing the following:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>Log in to your online profile and make any changes you wish to your profile information.</li>
<li>If you have already agreed to share your information with us, feel free to contact us via email and we will be more than happy to change this for you.</li>
</ul>
</div>
</section>
{/* Section 8: Children Under Thirteen */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>👶</span> Children Under Thirteen
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
The Company does not knowingly collect information from children under the age of 13.
</p>
</div>
</section>
{/* Section 9: Changes to this Statement */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🗓️</span> Changes to this Statement
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
The Company may make changes to this Policy. When this occurs the effective date of this policy will be updated.
</p>
</div>
</section>
{/* Section 10: Contact Information */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}>
<span>📧</span> Contact Information
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
If you have any questions, please contact LOAFers, Inc. at:
</p>
<div className="bg-[#F8F7FB] p-4 rounded-lg border border-[#ddd8eb]">
<p className="font-semibold text-gray-800">LOAFers, Inc.</p>
<p className="text-gray-700">PO Box 7207</p>
<p className="text-gray-700">Houston, TX 77248-7207</p>
<p className="text-gray-700 mt-2">
Email: <a href="mailto:info@loaftx.org" className="text-[#664fa3] hover:text-[#422268] font-semibold">info@loaftx.org</a>
</p>
</div>
</div>
</section>
</div>
{/* Back to Home Link */}
<div className="mt-8 text-center">
<Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span>←</span> Back to Home
</Link>
</div> </div>
</div> </div>
</div>
{/* Back to Home Link */}
<div className="mt-8 text-center">
<Link
to="/"
className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
<span>←</span> Back to Home
</Link>
</div>
</main>
<PublicFooter /> <PublicFooter />
</> </>
); );

35
src/pages/Resources.js
View File

@@ -4,6 +4,7 @@ import PublicFooter from '../components/PublicFooter';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { ChevronDown, ExternalLink, Phone, Mail, MapPin } from 'lucide-react'; import { ChevronDown, ExternalLink, Phone, Mail, MapPin } from 'lucide-react';
import { FaFlag, FaHeartbeat, FaUtensils } from "react-icons/fa";
const Resources = () => { const Resources = () => {
const [openAccordions, setOpenAccordions] = useState({}); const [openAccordions, setOpenAccordions] = useState({});
@@ -23,6 +24,7 @@ const Resources = () => {
const categories = [ const categories = [
{ {
title: 'General LGBTQ+', title: 'General LGBTQ+',
icon: <FaFlag />,
resources: [ resources: [
{ {
name: 'SPRY (Seniors Preparing for Rainbow Years)', name: 'SPRY (Seniors Preparing for Rainbow Years)',
@@ -52,6 +54,7 @@ const Resources = () => {
}, },
{ {
title: 'Healthcare', title: 'Healthcare',
icon: <FaHeartbeat />,
resources: [ resources: [
{ {
name: 'LHI (Lesbian Health Initiative)', name: 'LHI (Lesbian Health Initiative)',
@@ -67,6 +70,7 @@ const Resources = () => {
}, },
{ {
title: 'Food Assistance', title: 'Food Assistance',
icon: <FaUtensils />,
resources: [ resources: [
{ {
name: 'Meals on Wheels', 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"> <main className="bg-gradient-to-b from-white via-[#f1eef9] to-[#e8e0f5] px-6 py-16">
{/* Header Section */} {/* Header Section */}
<section className="max-w-7xl mx-auto mb-12"> <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" }}> <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" 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 Tap or click on each purple tab below to open and read its contents
</p> </h1>
</section> </section>
{/* Resources Grid */} {/* Resources Grid */}
@@ -113,7 +115,8 @@ const Resources = () => {
{categories.map((category, categoryIndex) => ( {categories.map((category, categoryIndex) => (
<div key={categoryIndex} className="space-y-6"> <div key={categoryIndex} className="space-y-6">
{/* Category Title */} {/* 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} {category.title}
</h2> </h2>
@@ -123,29 +126,29 @@ const Resources = () => {
const isExpanded = isOpen(categoryIndex, resourceIndex); const isExpanded = isOpen(categoryIndex, resourceIndex);
return ( return (
<div key={resourceIndex} className="overflow-hidden"> <div key={resourceIndex} className="overflow-hidden ">
{/* Accordion Button */} {/* Accordion Button */}
<button <button
onClick={() => toggleAccordion(categoryIndex, resourceIndex)} 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" }}> <span className="text-lg font-semibold text-left" style={{ fontFamily: "'Inter', sans-serif" }}>
{resource.name} {resource.name}
</span> </span>
<ChevronDown <ChevronDown
className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 ${ className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300
isExpanded ? 'rotate-180' : '' ${isExpanded ? 'rotate-180' : ''}`}
}`}
/> />
</button> </button>
{/* Accordion Content */} {/* Accordion Content */}
<div <div
className={`transition-all duration-300 ease-in-out ${ className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
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"> <Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
{/* Description */} {/* Description */}
<p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{resource.description} {resource.description}
@@ -172,7 +175,7 @@ const Resources = () => {
<div className="flex flex-col gap-1 ml-0"> <div className="flex flex-col gap-1 ml-0">
{resource.phone && ( {resource.phone && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Phone className="h-4 w-4" /> <Phone className="size-4" />
<a <a
href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`} href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
className="text-sm hover:text-[#48286e] transition-colors" className="text-sm hover:text-[#48286e] transition-colors"

878
src/pages/TermsOfService.js
View File

@@ -2,316 +2,606 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter';
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
export default function TermsOfService() { export default function TermsOfService() {
return ( return (
<> <>
<PublicNavbar /> <PublicNavbar />
<div className="min-h-screen bg-[#F8F7FB]"> <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
<div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12"> <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
{/* Header */} {/* Title */}
<div className="mb-8"> <header className="border-b pb-6">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4" <h1 className="text-3xl sm:text-4xl font-bold tracking-tight ">
style={{ fontFamily: "'Inter', sans-serif" }}>
Terms of Service Terms of Service
</h1> </h1>
<p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="mt-3 text-sm">
Last Updated: January 2025 <span className="font-medium">Last updated March 23, 2025</span>
</p> </p>
</div> </header>
{/* Content */} {/* Body */}
<div className="bg-white rounded-lg border border-[#ddd8eb] p-6 sm:p-8 md:p-10 space-y-8"> <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
{/* AGREEMENT */}
{/* Section 1: Agreement to Terms */} <section aria-labelledby="agreement" className="mt-8">
<section> <h2 id="agreement" className="text-xl sm:text-2xl text-[#48286E] font-bold ">
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" AGREEMENT TO OUR LEGAL TERMS
style={{ fontFamily: "'Inter', sans-serif" }}>
1. Agreement to Terms
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed"> <p>
These Terms of Service constitute a legally binding agreement made between you, whether personally or on behalf of an entity ("you") and LOAFers, Inc. ("Company", "we", "us", or "our"), concerning your access to and use of the https://loaftx.org website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto (collectively, the "Site"). We are LOAFers, Inc. ("Company," "we," "us," "our").
</p> </p>
<p className="text-gray-700 leading-relaxed">
You agree that by accessing the Site, you have read, understood, and agree to be bound by all of these Terms of Service. If you do not agree with all of these Terms of Service, then you are expressly prohibited from using the Site and you must discontinue use immediately. <p>
We operate, as well as any other related products and services that refer or link to these legal terms
(the "Legal Terms") (collectively, the "Services").
</p>
<p>
You can contact us by email at{" "}
<a className="" href="mailto:info@loaftx.com">
info@loaftx.com
</a>{" "}
or by mail to PO Box 7207, Houston, TX 77249, United States.
</p>
<p>
These Legal Terms constitute a legally binding agreement made between you, whether personally or on behalf
of an entity ("you"), and LOAFers, Inc., concerning your access to and use of the Services. You agree that
by accessing the Services, you have read, understood, and agreed to be bound by all of these Legal Terms.{" "}
<strong>
IF YOU DO NOT AGREE WITH ALL OF THESE LEGAL TERMS, THEN YOU ARE EXPRESSLY PROHIBITED FROM USING THE
SERVICES AND YOU MUST DISCONTINUE USE IMMEDIATELY.
</strong>
</p>
<p>
Supplemental terms and conditions or documents that may be posted on the Services from time to time are
hereby expressly incorporated herein by reference. We reserve the right, in our sole discretion, to make
changes or modifications to these Legal Terms at any time and for any reason. We will alert you about any
changes by updating the "Last updated" date of these Legal Terms, and you waive any right to receive
specific notice of each such change. It is your responsibility to periodically review these Legal Terms to
stay informed of updates. You will be subject to, and will be deemed to have been made aware of and to have
accepted, the changes in any revised Legal Terms by your continued use of the Services after the date such
revised Legal Terms are posted. We recommend that you print a copy of these Legal Terms for your records.
</p>
</section>
{/* TABLE OF CONTENTS */}
<section aria-labelledby="toc" className="text-[#48286E]">
<h2 id="toc" className="text-lg sm:text-xl font-bold text-[#48286E] m-0">
TABLE OF CONTENTS
</h2>
<ol className="mt-4 list-decimal no-prose text-[#48286E] pl-5 space-y-1">
<li><a className="text-[#48286E]" href="#our-services">OUR SERVICES</a></li>
<li><a className="text-[#48286E]" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
<li><a className="text-[#48286E]" href="#user-representations">USER REPRESENTATIONS</a></li>
<li><a className="text-[#48286E]" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
<li><a className="text-[#48286E]" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
<li><a className="text-[#48286E]" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
<li><a className="text-[#48286E]" href="#services-management">SERVICES MANAGEMENT</a></li>
<li><a className="text-[#48286E]" href="#term-termination">TERM AND TERMINATION</a></li>
<li><a className="text-[#48286E]" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
<li><a className="text-[#48286E]" href="#governing-law">GOVERNING LAW</a></li>
<li><a className="text-[#48286E]" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
<li><a className="text-[#48286E]" href="#corrections">CORRECTIONS</a></li>
<li><a className="text-[#48286E]" href="#disclaimer">DISCLAIMER</a></li>
<li><a className="text-[#48286E]" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
<li><a className="text-[#48286E]" href="#indemnification">INDEMNIFICATION</a></li>
<li><a className="text-[#48286E]" href="#user-data">USER DATA</a></li>
<li><a className="text-[#48286E]" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
<li><a className="text-[#48286E]" href="#miscellaneous">MISCELLANEOUS</a></li>
<li><a className="text-[#48286E]" href="#contact-us">CONTACT US</a></li>
</ol>
</section>
{/* 1. OUR SERVICES */}
<section id="our-services" className="scroll-mt-24">
<h2 className="text-xl text-[#48286E] sm:text-2xl font-bold ">1. OUR SERVICES</h2>
<p>
The information provided when using the Services is not intended for distribution to or use by any person
or entity in any jurisdiction or country where such distribution or use would be contrary to law or
regulation or which would subject us to any registration requirement within such jurisdiction or country.
Accordingly, those persons who choose to access the Services from other locations do so on their own
initiative and are solely responsible for compliance with local laws, if and to the extent local laws are
applicable.
</p>
</section>
{/* 2. INTELLECTUAL PROPERTY RIGHTS */}
<section id="ipr" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E] ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
<h3 className="text-lg font-semibold ">Our intellectual property</h3>
<p>
We are the owner or the licensee of all intellectual property rights in our Services, including all source
code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics
in the Services (collectively, the "Content"), as well as the trademarks, service marks, and logos
contained therein (the "Marks"). Our Content and Marks are protected by copyright and trademark laws (and
various other intellectual property rights and unfair competition laws) and treaties around the world. The
Content and Marks are provided in or through the Services "AS IS" for your personal, non-commercial use or
internal business purpose only.
</p>
<h3 className="text-lg font-semibold text-[#48286E]">Your use of our Services</h3>
<p>
Subject to your compliance with these Legal Terms, including the "PROHIBITED ACTIVITIES" section below, we
grant you a non-exclusive, non-transferable, revocable license to:
</p>
<ul className="list-disc pl-6 space-y-1">
<li>access the Services; and</li>
<li>
download or print a copy of any portion of the Content to which you have properly gained access, solely
for your personal, non-commercial use or internal business purpose.
</li>
</ul>
<p>
Except as set out in this section or elsewhere in our Legal Terms, no part of the Services and no Content
or Marks may be copied, reproduced, aggregated, republished, uploaded, posted, publicly displayed, encoded,
translated, transmitted, distributed, sold, licensed, or otherwise exploited for any commercial purpose
whatsoever, without our express prior written permission. If you wish to make any use of the Services,
Content, or Marks other than as set out in this section or elsewhere in our Legal Terms, please address
your request to:{" "}
<a className="" href="mailto:loafhoustontx@gmail.com">
loafhoustontx@gmail.com
</a>
.
</p>
<p>
If we ever grant you the permission to post, reproduce, or publicly display any part of our Services or
Content, you must identify us as the owners or licensors of the Services, Content, or Marks and ensure that
any copyright or proprietary notice appears or is visible on posting, reproducing, or displaying our
Content. We reserve all rights not expressly granted to you in and to the Services, Content, and Marks. Any
breach of these Intellectual Property Rights will constitute a material breach of our Legal Terms and your
right to use our Services will terminate immediately.
</p>
<h3 className="text-lg font-semibold text-[#48286E]">Your submissions</h3>
<p>
Please review this section and the "PROHIBITED ACTIVITIES" section carefully prior to using our Services to
understand the (a) rights you give us and (b) obligations you have when you post or upload any content
through the Services.
</p>
<p>
<strong>Submissions:</strong> By directly sending us any question, comment, suggestion, idea, feedback, or
other information about the Services ("Submissions"), you agree to assign to us all intellectual property
rights in such Submission. You agree that we shall own this Submission and be entitled to its unrestricted
use and dissemination for any lawful purpose, commercial or otherwise, without acknowledgment or
compensation to you.
</p>
<p>
<strong>
You are responsible for what you post or upload: By sending us Submissions through any part of the
Services you:
</strong>
</p>
<ul className="list-disc pl-6 space-y-2">
<li>
confirm that you have read and agree with our "PROHIBITED ACTIVITIES" and will not post, send, publish,
upload, or transmit through the Services any Submission that is illegal, harassing, hateful, harmful,
defamatory, obscene, bullying, abusive, discriminatory, threatening to any person or group, sexually
explicit, false, inaccurate, deceitful, or misleading;
</li>
<li>to the extent permissible by applicable law, waive any and all moral rights to any such Submission;</li>
<li>
warrant that any such Submission are original to you or that you have the necessary rights and licenses
to submit such Submissions and that you have full authority to grant us the above-mentioned rights in
relation to your Submissions; and
</li>
<li>warrant and represent that your Submissions do not constitute confidential information.</li>
</ul>
<p>
You are solely responsible for your Submissions and you expressly agree to reimburse us for any and all
losses that we may suffer because of your breach of (a) this section, (b) any third party’s intellectual
property rights, or (c) applicable law.
</p>
</section>
{/* 3. USER REPRESENTATIONS */}
<section id="user-representations" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold ">3. USER REPRESENTATIONS</h2>
<p>By using the Services, you represent and warrant that:</p>
<ol className="list-decimal pl-6 space-y-1">
<li>you have the legal capacity and you agree to comply with these Legal Terms;</li>
<li>you are not a minor in the jurisdiction in which you reside;</li>
<li>you will not access the Services through automated or non-human means, whether through abot, script or otherwise;</li>
<li>you will not use the Services for any illegal or unauthorized purpose; and</li>
<li>your use of the Services will not violate any applicable law or regulation.</li>
</ol>
<p>
If you provide any information that is untrue, inaccurate, not current, or incomplete, we have the right to
suspend or terminate your account and refuse any and all current or future use of the Services (or any
portion thereof).
</p>
</section>
{/* 4. PROHIBITED ACTIVITIES */}
<section id="prohibited-activities" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">4. PROHIBITED ACTIVITIES</h2>
<p>
You may not access or use the Services for any purpose other than that for which we make the Services
available. The Services may not be used in connection with any commercial endeavors except those that are
specifically endorsed or approved by us. As a user of the Services, you agree not to:
</p>
<ul className="list-disc pl-6 space-y-2">
<li>Systematically retrieve data or other content from the Services to create or compile, directly or indirectly, a collection, compilation, database, or directory without written permission from us.</li>
<li>Trick, defraud, or mislead us and other users, especially in any attempt to learn sensitive account information such as user passwords.</li>
<li>Circumvent, disable, or otherwise interfere with security-related features of the Services, including features that prevent or restrict the use or copying of any Content or enforce limitations on the use of the Services and/or the Content contained therein.</li>
<li>Disparage, tarnish, or otherwise harm, in our opinion, us and/or the Services.</li>
<li>Use any information obtained from the Services to harass abuse or harm another person.</li>
<li>Make improper use of our support services or submit false reports ofabuse or misconduct.</li>
<li>Use the Services in a manner inconsistent with any applicable laws or regulations.</li>
<li>Engage in unauthorized framing of or linking to the Services.</li>
<li>Upload or transmit (or attempt to upload or to transmit) viruses, Trojan horses, or other material, including excessive use of capital letters and spamming (continuous posting of repetitive text), that interferes with any party’s uninterrupted use and enjoyment of the Services or modifies, impairs, disrupts, alters, or interferes with the use, features, functions, operation, or maintenance of the Services.</li>
<li>Engage in any automated use of the system, such as using scripts to send comments or messages, or using any data mining, robots, or similar data gathering and extraction tools.</li>
<li>Delete the copyright or other proprietary rights notice from any Content.</li>
<li>Attempt to impersonate another user or person or use the username of another user.</li>
<li>Upload or transmit (or attempt to upload or to transmit) any material that acts as a passive or active information collection or transmission mechanism, including without limitation, clear graphics interchange formats ("gifs"), 1×1 pixels, web bugs, cookies, or other similar devices (sometimes referred to as "spyware" or "passive collection mechanisms" or "pcms").</li>
<li>Interfere with, disrupt, or create an undue burden on the Services or the networks or services connected to the Services.</li>
<li>Harass, annoy, intimidate, or threaten any of our employees or agents engaged in providing any portion of the Services to you.</li>
<li>Attempt to bypass any measures of the Services designed to prevent or restrict access to the Services, or any portion of the Services.</li>
<li>Copy or adapt the Services' software, including but not limited to Flash, PHP, HTML, JavaScript, or other code.</li>
<li>Except as permitted by applicable law, decipher, decompile, disassemble, or reverse engineer any of the software comprising or in any way making up a part of the Services.</li>
<li>Except as may be the result of standard search engine or Internet browser usage, use, launch, develop, or distribute any automated system, including without limitation, any spider, robot, cheat utility, scraper, or offline reader that accesses the Services, or use or launch any unauthorized script or other software.</li>
<li>Use a buying agent or purchasing agent to make purchases on the Services.</li>
<li>Make any unauthorized use of the Services, including collecting usernames and/or email addresses of users by electronic or other means for the purpose of sending unsolicited email, or creating user accounts by automated means or under false pretenses.</li>
<li>Use the Services as part of any effort to compete with us or otherwise use the Services and/or the Content for any revenue-generating endeavor or commercial enterprise.</li>
</ul>
</section>
{/* 5. USER GENERATED CONTRIBUTIONS */}
<section id="ugc" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">5. USER GENERATED CONTRIBUTIONS</h2>
<p>
The Services does not offer users to submit or post content. We may provide you with the opportunity to
create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials
to us or on the Services, including but not limited to text, writings, video, audio, photographs, graphics,
comments, suggestions, or personal information or other material (collectively, "Contributions").
Contributions may be viewable by other users of the Services and through third-party websites. When you
create or make available any Contributions, you thereby represent and warrant that:
</p>
</section>
{/* 6. CONTRIBUTION LICENSE */}
<section id="contribution-license" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">6. CONTRIBUTION LICENSE</h2>
<p>
You and Services agree that we may access, store, process, and use any information and personal data that
you provide and your choices (including settings).
</p>
<p>
By submitting suggestions or other feedback regarding the Services, you agree that we can use and share
such feedback for any purpose without compensation to you.
</p>
<p>
We do not assert any ownership over your Contributions. You retain full ownership of all of your
Contributions and any intellectual property rights, or other proprietary rights associated with your
Contributions. We are not liable for any statements or representations in your Contributions provided by
you in any area on the Services. You are solely responsible for your Contributions to the Services and you
expressly agree to exonerate us from any and all responsibility and to refrain from any legal action
against us regarding your Contributions.
</p>
</section>
{/* 7. SERVICES MANAGEMENT */}
<section id="services-management" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">7. SERVICES MANAGEMENT</h2>
<p>
We reserve the right, but not the obligation, to: (1) monitor the Services for violations of these Legal
Terms; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or
these Legal Terms, including without limitation, reporting such user to law enforcement authorities; (3) in
our sole discretion and without limitation, refuse, restrict access to, limit the availability of, or
disable (to the extent technologically feasible) any of your Contributions or any portion thereof; (4) in
our sole discretion and without limitation, notice, or liability, to remove from the Services or otherwise
disable all files and content that are excessive in size or are in any way burdensome to our systems; and
(5) otherwise manage the Services in a manner designed to protect our rights and property and to
facilitate the proper functioning of the Services.
</p>
</section>
{/* 8. TERM AND TERMINATION */}
<section id="term-termination" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">8. TERM AND TERMINATION</h2>
<p>
These Legal Terms shall remain in full force and effect while you use the Services.{" "}
<strong>
WITHOUT LIMITING ANY OTHER PROVISION OF THESE LEGAL TERMS, WE RESERVE THE RIGHT TO, IN OUR SOLE
DISCRETION AND WITHOUT NOTICE OR LIABILITY, DENY ACCESS TO AND USE OF THE SERVICES (INCLUDING BLOCKING
CERTAIN IP ADDRESSES), TO ANY PERSON FOR ANY REASON OR FOR NO REASON, INCLUDING WITHOUT LIMITATION FOR
BREACH OF ANY REPRESENTATION, WARRANTY, OR COVENANT CONTAINED IN THESE LEGAL TERMS OR OF ANY APPLICABLE
LAW OR REGULATION. WE MAY TERMINATE YOUR USE OR PARTICIPATION IN THE SERVICES OR DELETE ANY CONTENT OR
INFORMATION THAT YOU POSTED AT ANY TIME, WITHOUT WARNING, IN OUR SOLE DISCRETION.
</strong>
</p>
<p>
If we terminate or suspend your account for any reason, you are prohibited from registering and creating a
new account under your name, a fake or borrowed name, or the name of any third party, even if you may be
acting on behalf of the third party. In addition to terminating or suspending your account, we reserve the
right to take appropriate legal action, including without limitation pursuing civil, criminal, and
injunctive redress.
</p>
</section>
{/* 9. MODIFICATIONS AND INTERRUPTIONS */}
<section id="modifications" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">9. MODIFICATIONS AND INTERRUPTIONS</h2>
<p>
We reserve the right to change, modify, or remove the contents of the Services at any time or for any
reason at our sole discretion without notice. However, we have no obligation to update any information on
our Services. We will not be liable to you or any third party for any modification, price change,
suspension, or discontinuance of the Services.
</p>
<p>
We cannot guarantee the Services will be available at all times. We may experience hardware, software, or
other problems or need to perform maintenance related to the Services, resulting in interruptions, delays,
or errors. We reserve the right to change, revise, update, suspend, discontinue, or otherwise modify the
Services at any time or for any reason without notice to you.
</p>
<p>
You agree that we have no liability whatsoever for any loss, damage, or inconvenience caused by your
inability to access or use the Services during any downtime or discontinuance of the Services. Nothing in
these Legal Terms will be construed to obligate us to maintain and support the Services or to supply any
corrections, updates, or releases in connection therewith.
</p>
</section>
{/* 10. GOVERNING LAW */}
<section id="governing-law" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">10. GOVERNING LAW</h2>
<p>
These Legal Terms shall be governed by and defined following the laws of Texas. LOAFers, Inc. and yourself
irrevocably consent that the courts of Houston shall have exclusive jurisdiction to resolve any dispute
which may arise in connection with these Legal Terms.
</p>
</section>
{/* 11. DISPUTE RESOLUTION */}
<section id="dispute-resolution" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">11. DISPUTE RESOLUTION</h2>
<h3 className="text-lg font-semibold ">Informal Negotiations</h3>
<p>
To expedite resolution and control the cost of any dispute, controversy, or claim related to these Legal
Terms (each a "Dispute" and collectively, the "Disputes") brought by either you or us (individually, a
"Party" and collectively, the "Parties"), the Parties agree to first attempt to negotiate any Dispute
(except those Disputes expressly provided below) informally for at least ___60_____ days before initiating
arbitration. Such informal negotiations commence upon written notice from one Party to the other Party.
</p>
<h3 className="text-lg font-semibold text-[#48286E]">Binding Arbitration</h3>
<p>
Any dispute arising out of or in connection with these Legal Terms, including any question regarding its
existence, validity, or termination, shall be referred to and finally resolved by the Disputy Resolution
Center of Harris County{" "}
<a
className=""
href="https://drc.harriscountytx.gov/"
target="_blank"
rel="noreferrer"
>
https://drc.harriscountytx.gov/
</a>
</p>
<h3 className="text-lg font-semibold text-[#48286E]">Restrictions</h3>
<p>
The Parties agree that any arbitration shall be limited to the Dispute between the Parties individually.
To the full extent permitted by law, (a) no arbitration shall be joined with any other proceeding; (b)
there is no right or authority for any Dispute to be arbitrated on a class-action basis or to utilize class
action procedures; and (c) there is no right or authority for any Dispute to be brought in a purported
representative capacity on behalf of the general public or any other persons.
</p>
<h3 className="text-lg font-semibold text-[#48286E]">Exceptions to Informal Negotiations and Arbitration</h3>
<p>
The Parties agree that the following Disputes are not subject to the above provisions concerning informal
negotiations binding arbitration: (a) any Disputes seeking to enforce or protect, or concerning the validity
of, any of the intellectual property rights of a Party; (b) any Dispute related to, or arising from,
allegations of theft, piracy, invasion of privacy, or unauthorized use; and (c) any claim for injunctive
relief.
</p>
<p>
If this provision is found to be illegal or unenforceable, then neither Party will elect to arbitrate any
Dispute falling within that portion of this provision found to be illegal or unenforceable and such Dispute
shall be decided by a court of competent jurisdiction within the courts listed for jurisdiction above, and
the Parties agree to submit to the personal jurisdiction of that court.
</p>
</section>
{/* 12. CORRECTIONS */}
<section id="corrections" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">12. CORRECTIONS</h2>
<p>
There may be information on the Services that contains typographical errors, inaccuracies, or omissions,
including descriptions, pricing, availability, and various other information. We reserve the right to
correct any errors, inaccuracies, or omissions and to change or update the information on the Services at
any time, without prior notice.
</p>
</section>
{/* 13. DISCLAIMER */}
<section id="disclaimer" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">13. DISCLAIMER</h2>
<p className="font-semibold">
THE SERVICES ARE PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SERVICES WILL
BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR
IMPLIED, IN CONNECTION WITH THE SERVICES AND YOUR USE THEREOF, INCLUDING, WITHOUT LIMITATION, THE IMPLIED
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
</p>
<p className="font-semibold">
WE MAKE NO WARRANTIES OR REPRESENTATIONS ABOUT THE ACCURACY OR COMPLETENESS OF THE SERVICES' CONTENT OR THE
CONTENT OF ANY WEBSITES OR MOBILE APPLICATIONS LINKED TO THE SERVICES AND WE WILL ASSUME NO LIABILITY OR
RESPONSIBILITY FOR ANY (1) ERRORS, MISTAKES, OR INACCURACIES OF CONTENT AND MATERIALS, (2) PERSONAL INJURY
OR PROPERTY DAMAGE, OF ANY NATURE WHATSOEVER, RESULTING FROM YOUR ACCESS TO AND USE OF THE SERVICES, (3)
ANY UNAUTHORIZED ACCESS TO OR USE OF OUR SECURE SERVERS AND/OR ANY AND ALL PERSONAL INFORMATION AND/OR
FINANCIAL INFORMATION STORED THEREIN, (4) ANY INTERRUPTION OR CESSATION OF TRANSMISSION TO OR FROM THE
SERVICES, (5) ANY BUGS, VIRUSES, TROJAN HORSES, OR THE LIKE WHICH MAY BE TRANSMITTED TO OR THROUGH THE
SERVICES BY ANY THIRD PARTY, AND/OR (6) ANY ERRORS OR OMISSIONS IN ANY CONTENT AND MATERIALS OR FOR ANY LOSS
OR DAMAGE OF ANY KIND INCURRED AS A RESULT OF THE USE OF ANY CONTENT POSTED, TRANSMITTED, OR OTHERWISE MADE
AVAILABLE VIA THE SERVICES.
</p>
<p className="font-semibold">
WE DO NOT WARRANT, ENDORSE, GUARANTEE, OR ASSUME RESPONSIBILITY FOR ANY PRODUCT OR SERVICE ADVERTISED OR
OFFERED BY A THIRD PARTY THROUGH THE SERVICES, ANY HYPERLINKED WEBSITE, OR ANY WEBSITE OR MOBILE APPLICATION
FEATURED IN ANY BANNER OR OTHER ADVERTISING, AND WE WILL NOT BE A PARTY TO OR IN ANY WAY BE RESPONSIBLE FOR
MONITORING ANY TRANSACTION BETWEEN YOU AND ANY THIRD-PARTY PROVIDERS OF PRODUCTS OR SERVICES. AS WITH THE
PURCHASE OF A PRODUCT OR SERVICE THROUGH ANY MEDIUM OR IN ANY ENVIRONMENT, YOU SHOULD USE YOUR BEST
JUDGMENT AND EXERCISE CAUTION WHERE APPROPRIATE.
</p>
</section>
{/* 14. LIMITATIONS OF LIABILITY */}
<section id="limitations-liability" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">14. LIMITATIONS OF LIABILITY</h2>
<p className="font-semibold">
IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY
DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST
PROFIT, LOST REVENUE, LOSS OF DATA, OR OTHER DAMAGES ARISING FROM YOUR USE OF THE SERVICES, EVEN IF WE HAVE
BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
</p>
<p className="font-semibold">
NOTWITHSTANDING ANYTHING TO THE CONTRARY CONTAINED HEREIN, OUR LIABILITY TO YOU FOR ANY CAUSE WHATSOEVER
AND REGARDLESS OF THE FORM OF THE ACTION, WILL AT ALL TIMES BE LIMITED TO THE LESSER OF THE AMOUNT PAID, IF
ANY, BY YOU TO US OR .
</p>
<p className="font-semibold">
CERTAIN US STATE LAWS AND INTERNATIONAL LAWS DO NOT ALLOW LIMITATIONS ON IMPLIED WARRANTIES OR THE
EXCLUSION OR LIMITATION OF CERTAIN DAMAGES. IF THESE LAWS APPLY TO YOU, SOME OR ALL OF THE ABOVE
DISCLAIMERS OR LIMITATIONS MAY NOT APPLY TO YOU, AND YOU MAY HAVE ADDITIONAL RIGHTS.
</p>
</section>
{/* 15. INDEMNIFICATION */}
<section id="indemnification" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">15. INDEMNIFICATION</h2>
<p>
You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of
our respective officers, agents, partners, and employees, from and against any loss, damage, liability,
claim, or demand, including reasonable attorneys’ fees and expenses, made by any third party due to or
arising out of: (1) use of the Services; (2) breach of these Legal Terms; (3) any breach of your
representations and warranties set forth in these Legal Terms; (4) your violation of the rights of a third
party, including but not limited to intellectual property rights; or (5) any overt harmful act toward any
other user of the Services with whom you connected via the Services.
</p>
<p>
Notwithstanding the foregoing, we reserve the right, at your expense, to assume the exclusive defense and
control of any matter for which you are required to indemnify us, and you agree to cooperate, at your
expense, with our defense of such claims. We will use reasonable efforts to notify you of any such claim,
action, or proceeding which is subject to this indemnification upon becoming aware of it.
</p>
</section>
{/* 16. USER DATA */}
<section id="user-data" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">16. USER DATA</h2>
<p>
We will maintain certain data that you transmit to the Services for the purpose of managing the performance
of the Services, as well as data relating to your use of the Services. Although we perform regular routine
backups of data, you are solely responsible for all data that you transmit or that relates to any activity
you have undertaken using the Services. You agree that we shall have no liability to you for any loss or
corruption of any such data, and you hereby waive any right of action against us arising from any such loss
or corruption of such data.
</p>
</section>
{/* 17. ELECTRONIC COMMUNICATIONS */}
<section id="electronic-comms" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
17. ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES
</h2>
<p>
Visiting the Services, sending us emails, and completing online forms constitute electronic communications.
You consent to receive electronic communications, and you agree that all agreements, notices, disclosures,
and other communications we provide to you electronically, via email and on the Services, satisfy any legal
requirement that such communication be in writing.
</p>
<p className="font-semibold">
YOU HEREBY AGREE TO THE USE OF ELECTRONIC SIGNATURES, CONTRACTS, ORDERS, AND OTHER RECORDS, AND TO
ELECTRONIC DELIVERY OF NOTICES, POLICIES, AND RECORDS OF TRANSACTIONS INITIATED OR COMPLETED BY US OR VIA
THE SERVICES.
</p>
<p>
You hereby waive any rights or requirements under any statutes, regulations, rules, ordinances, or other
laws in any jurisdiction which require an original signature or delivery or retention of non-electronic
records, or to payments or the granting of credits by any means other than electronic means.
</p>
</section>
{/* 18. MISCELLANEOUS */}
<section id="miscellaneous" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">18. MISCELLANEOUS</h2>
<p>
These Legal Terms and any policies or operating rules posted by us on the Services or in respect to the
Services constitute the entire agreement and understanding between you and us. Our failure to exercise or
enforce any right or provision of these Legal Terms shall not operate as a waiver of such right or
provision.
</p>
<p>
These Legal Terms operate to the fullest extent permissible by law. We may assign any or all of our rights
and obligations to others at any time. We shall not be responsible or liable for any loss, damage, delay,
or failure to act caused by any cause beyond our reasonable control.
</p>
<p>
If any provision or part of a provision of these Legal Terms is determined to be unlawful, void, or
unenforceable, that provision or part of the provision is deemed severable from these Legal Terms and does
not affect the validity and enforceability of any remaining provisions.
</p>
<p>
There is no joint venture, partnership, employment or agency relationship created between you and us as a
result of these Legal Terms or use of the Services. You agree that these Legal Terms will not be construed
against us by virtue of having drafted them. You hereby waive any and all defenses you may have based on
the electronic form of these Legal Terms and the lack of signing by the parties hereto to execute these
Legal Terms.
</p>
</section>
{/* 19. CONTACT US */}
<section id="contact-us" className="scroll-mt-24">
<h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">19. CONTACT US</h2>
<p>
In order to resolve a complaint regarding the Services or to receive further information regarding use of
the Services, please contact us at:
</p>
<div className="not-prose mt-4 ">
<p className="font-semibold mb-2">LOAFers, Inc.</p>
<p className="">PO Box 7207</p>
<p className="">Houston, TX 77249</p>
<p className="">United States</p>
<p className="mt-3">
<a className="" href="mailto:info@loaftx.org">
info@loaftx.org
</a>
</p> </p>
</div> </div>
</section> </section>
{/* Section 2: Intellectual Property Rights */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
2. Intellectual Property Rights
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
Unless otherwise indicated, the Site is our proprietary property and all source code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics on the Site (collectively, the "Content") and the trademarks, service marks, and logos contained therein (the "Marks") are owned or controlled by us or licensed to us, and are protected by copyright and trademark laws and various other intellectual property rights and unfair competition laws of the United States, foreign jurisdictions, and international conventions.
</p>
</div>
</section>
{/* Section 3: User Representations */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
3. User Representations
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
By using the Site, you represent and warrant that:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>All registration information you submit will be true, accurate, current, and complete</li>
<li>You will maintain the accuracy of such information and promptly update such registration information as necessary</li>
<li>You have the legal capacity and you agree to comply with these Terms of Service</li>
<li>You are not under the age of 13</li>
<li>Not a minor in the jurisdiction in which you reside, or if a minor, you have received parental permission to use the Site</li>
<li>You will not access the Site through automated or non-human means</li>
<li>You will not use the Site for any illegal or unauthorized purpose</li>
<li>Your use of the Site will not violate any applicable law or regulation</li>
</ul>
</div>
</section>
{/* Section 4: Prohibited Activities */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
4. Prohibited Activities
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
You may not access or use the Site for any purpose other than that for which we make the Site available. The Site may not be used in connection with any commercial endeavors except those that are specifically endorsed or approved by us. As a user of the Site, you agree not to:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>Systematically retrieve data or other content from the Site to create or compile, directly or indirectly, a collection, compilation, database, or directory without written permission from us</li>
<li>Make any unauthorized use of the Site, including collecting usernames and/or email addresses of users by electronic or other means for the purpose of sending unsolicited email, or creating user accounts by automated means or under false pretenses</li>
<li>Circumvent, disable, or otherwise interfere with security-related features of the Site</li>
<li>Engage in unauthorized framing of or linking to the Site</li>
<li>Trick, defraud, or mislead us and other users, especially in any attempt to learn sensitive account information such as user passwords</li>
<li>Make improper use of our support services or submit false reports of abuse or misconduct</li>
<li>Engage in any automated use of the system, such as using scripts to send comments or messages</li>
<li>Interfere with, disrupt, or create an undue burden on the Site or the networks or services connected to the Site</li>
</ul>
</div>
</section>
{/* Section 5: User Generated Contributions */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
5. User Generated Contributions
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
The Site may invite you to chat, contribute to, or participate in blogs, message boards, online forums, and other functionality, and may provide you with the opportunity to create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials to us or on the Site.
</p>
</div>
</section>
{/* Section 6: Contribution License */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
6. Contribution License
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
By posting your Contributions to any part of the Site, you automatically grant, and you represent and warrant that you have the right to grant, to us an unrestricted, unlimited, irrevocable, perpetual, non-exclusive, transferable, royalty-free, fully-paid, worldwide right, and license to host, use, copy, reproduce, disclose, sell, resell, publish, broadcast, retitle, archive, store, cache, publicly perform, publicly display, reformat, translate, transmit, excerpt (in whole or in part), and distribute such Contributions.
</p>
</div>
</section>
{/* Section 7: Submissions */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
7. Submissions
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
You acknowledge and agree that any questions, comments, suggestions, ideas, feedback, or other information regarding the Site ("Submissions") provided by you to us are non-confidential and shall become our sole property.
</p>
</div>
</section>
{/* Section 8: Site Management */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
8. Site Management
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
We reserve the right, but not the obligation, to: (1) monitor the Site for violations of these Terms of Service; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or these Terms of Service; (3) refuse, restrict access to, limit the availability of, or disable (to the extent technologically feasible) any of your Contributions; (4) remove from the Site or otherwise disable all files and content that are excessive in size or are in any way burdensome to our systems.
</p>
</div>
</section>
{/* Section 9: Term and Termination */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
9. Term and Termination
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
These Terms of Service shall remain in full force and effect while you use the Site. Without limiting any other provision of these Terms of Service, we reserve the right to, in our sole discretion and without notice or liability, deny access to and use of the Site to any person for any reason or for no reason.
</p>
</div>
</section>
{/* Section 10: Modifications and Interruptions */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
10. Modifications and Interruptions
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
We reserve the right to change, modify, or remove the contents of the Site at any time or for any reason at our sole discretion without notice. We also reserve the right to modify or discontinue all or part of the Site without notice at any time.
</p>
</div>
</section>
{/* Section 11: Governing Law */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
11. Governing Law
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
These Terms of Service and your use of the Site are governed by and construed in accordance with the laws of the State of Texas applicable to agreements made and to be entirely performed within the State of Texas, without regard to its conflict of law principles.
</p>
</div>
</section>
{/* Section 12: Dispute Resolution */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
12. Dispute Resolution
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
Any legal action of whatever nature brought by either you or us shall be commenced or prosecuted in the state and federal courts located in Harris County, Texas, and the parties hereby consent to, and waive all defenses of lack of personal jurisdiction and forum non conveniens with respect to venue and jurisdiction in such state and federal courts.
</p>
</div>
</section>
{/* Section 13: Corrections */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
13. Corrections
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
There may be information on the Site that contains typographical errors, inaccuracies, or omissions that may relate to the Site, including descriptions, pricing, availability, and various other information. We reserve the right to correct any errors, inaccuracies, or omissions and to change or update the information on the Site at any time, without prior notice.
</p>
</div>
</section>
{/* Section 14: Disclaimer */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
14. Disclaimer
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
The Site is provided on an as-is and as-available basis. You agree that your use of the Site and our services will be at your sole risk. To the fullest extent permitted by law, we disclaim all warranties, express or implied, in connection with the Site and your use thereof.
</p>
</div>
</section>
{/* Section 15: Limitations of Liability */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
15. Limitations of Liability
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
In no event will we or our directors, employees, or agents be liable to you or any third party for any direct, indirect, consequential, exemplary, incidental, special, or punitive damages, including lost profit, lost revenue, loss of data, or other damages arising from your use of the Site.
</p>
</div>
</section>
{/* Section 16: Indemnification */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
16. Indemnification
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of our respective officers, agents, partners, and employees, from and against any loss, damage, liability, claim, or demand, including reasonable attorneys' fees and expenses, made by any third party due to or arising out of your use of the Site or breach of these Terms of Service.
</p>
</div>
</section>
{/* Section 17: User Data */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
17. User Data
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
We will maintain certain data that you transmit to the Site for the purpose of managing the Site, as well as data relating to your use of the Site. Although we perform regular routine backups of data, you are solely responsible for all data that you transmit or that relates to any activity you have undertaken using the Site.
</p>
</div>
</section>
{/* Section 18: Electronic Communications */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
18. Electronic Communications, Transactions, and Signatures
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
Visiting the Site, sending us emails, and completing online forms constitute electronic communications. You consent to receive electronic communications, and you agree that all agreements, notices, disclosures, and other communications we provide to you electronically, via email and on the Site, satisfy any legal requirement that such communication be in writing.
</p>
</div>
</section>
{/* Section 19: Contact Us */}
<section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}>
19. Contact Us
</h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-gray-700 leading-relaxed">
In order to resolve a complaint regarding the Site or to receive further information regarding use of the Site, please contact us at:
</p>
<div className="bg-[#F8F7FB] p-4 rounded-lg border border-[#ddd8eb]">
<p className="font-semibold text-gray-800">LOAFers, Inc.</p>
<p className="text-gray-700">PO Box 7207</p>
<p className="text-gray-700">Houston, TX 77249</p>
<p className="text-gray-700 mt-2">
Email: <a href="mailto:info@loaftx.org" className="text-[#664fa3] hover:text-[#422268] font-semibold">info@loaftx.org</a>
</p>
</div>
</div>
</section>
</div>
{/* Back to Home Link */}
<div className="mt-8 text-center">
<Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span>←</span> Back to Home
</Link>
</div> </div>
</div> </div>
</div> {/* Back to Home Link */}
<div className="mt-8 text-center">
<Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span>←</span> Back to Home
</Link>
</div>
</main>
<PublicFooter /> <PublicFooter />
</> </>
); );
} }

161
tailwind.config.js
View File

@@ -1,82 +1,85 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
"./src/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html" "./public/index.html"
], ],
theme: { theme: {
extend: { extend: {
borderRadius: { borderRadius: {
lg: 'var(--radius)', lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)', md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)' sm: 'calc(var(--radius) - 4px)'
}, },
colors: { colors: {
background: 'hsl(var(--background))', background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))', foreground: 'hsl(var(--foreground))',
card: { card: {
DEFAULT: 'hsl(var(--card))', DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))' foreground: 'hsl(var(--card-foreground))'
}, },
popover: { popover: {
DEFAULT: 'hsl(var(--popover))', DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))' foreground: 'hsl(var(--popover-foreground))'
}, },
primary: { primary: {
DEFAULT: 'hsl(var(--primary))', DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))' foreground: 'hsl(var(--primary-foreground))'
}, },
secondary: { secondary: {
DEFAULT: 'hsl(var(--secondary))', DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))' foreground: 'hsl(var(--secondary-foreground))'
}, },
muted: { muted: {
DEFAULT: 'hsl(var(--muted))', DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))' foreground: 'hsl(var(--muted-foreground))'
}, },
accent: { accent: {
DEFAULT: 'hsl(var(--accent))', DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))' foreground: 'hsl(var(--accent-foreground))'
}, },
destructive: { destructive: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))' foreground: 'hsl(var(--destructive-foreground))'
}, },
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
input: 'hsl(var(--input))', input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))', ring: 'hsl(var(--ring))',
chart: { chart: {
'1': 'hsl(var(--chart-1))', '1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))', '2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))', '3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))', '4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))' '5': 'hsl(var(--chart-5))'
} }
}, },
keyframes: { keyframes: {
'accordion-down': { 'accordion-down': {
from: { from: {
height: '0' height: '0'
}, },
to: { to: {
height: 'var(--radix-accordion-content-height)' height: 'var(--radix-accordion-content-height)'
} }
}, },
'accordion-up': { 'accordion-up': {
from: { from: {
height: 'var(--radix-accordion-content-height)' height: 'var(--radix-accordion-content-height)'
}, },
to: { to: {
height: '0' height: '0'
} }
} }
}, },
animation: { animation: {
'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out' 'accordion-up': 'accordion-up 0.2s ease-out'
} }
} }
}, },
plugins: [require("tailwindcss-animate")], plugins: [
require("tailwindcss-animate"),
require("@tailwindcss/typography")
],
}; };

845
yarn.lock
View File

File diff suppressed because it is too large Load Diff