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

Compare commits

base: andika:main
Branches Tags
andika:main andika:features andika:loaf-prod andika:dev andika:theme-provider andika:dav-prod andika:templates
...
compare: andika:03eb349f0ef1b5904b61a0175e138673a3ffdd0d
Branches Tags
andika:features andika:loaf-prod andika:dev andika:theme-provider andika:dav-prod andika:templates andika:main

6 Commits
main ... 03eb349f0e

Author SHA1 Message Date
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
18 changed files with 309 additions and 153 deletions
Expand all files Collapse all files

84
src/components/PublicFooter-kc.js Normal file
View File

@@ -0,0 +1,84 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from './ui/button';
const PublicFooter = () => {
const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
return (
<>
{/* Main Footer */}
<footer className="bg-[#644c9f] px-20 border-t border-[rgba(0,0,0,0.1)] py-4 md:py-[35px] flex items-center justify-center">
<div className=" flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-30 items-center justify-around w-full max-w-7xl">
<div className="w-32 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" />
</div>
<nav className="flex sm:px-4 px-2 flex-col sm:flex-row gap-32 items-start justify-center w-full lg:w-auto">
<div className="flex-col gap-2 w-full sm:w-auto sm:min-w-[163px] hidden sm:flex">
<div className="">
<p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppinss Sans', sans-serif" }}>About</p>
</div>
<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: "'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: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
</div>
<div className="hidden sm:flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
<div className="">
<p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppins Sans', sans-serif" }}>Connect</p>
</div>
<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: "'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: "'Nunito Sans', sans-serif" }}>Resources</Link>
</div>
<div className="flex flex-col gap-2 justify-center w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px] text-center">
<div className="pb-4 w-full flex ">
<Link to="/donate" className="block">
<Button style={{ fontFamily: "'Nunito Sans', sans-serif" }} className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-14 py-6 text-[19px] leading-6 sm:text-lg font-semibold ">
Donate
</Button>
</Link>
</div>
<div className=' w-full flex justify-center '>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
</div>
</div>
</nav>
</div>
</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-16 py-5">
<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">
<<<<<<< HEAD
<a href="/#terms" 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
</a>
<a href="/#privacy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', 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: "'Inter', sans-serif" }}>
Terms of Service
</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" }}>
>>>>>>> main
Privacy Policy
</Link>
</nav>
<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.
</p>
<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{' '}
<a href="https://konceptkit.com/" className="text-white transition-colors whitespace-nowrap">
Koncept Kit
</a>
</p>
</div>
</footer>
</>
);
};
export default PublicFooter;

161
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,29 +42,59 @@ 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"> <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<button <div className='flex gap-4 sm:gap-6'>
onClick={handleAuthAction}
className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer" <button
style={{ fontFamily: "'Poppins', sans-serif" }} onClick={handleAuthAction}
> className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
{user ? 'Logout' : 'Login'} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
</button>
{!user && (
<Link
to="/register"
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Poppins', sans-serif" }}
> >
Register {user ? 'Logout' : 'Login'}
</Link> </button>
)} {!user && (
<Link
to="/register"
className="text-white text-base font-medium hover:opacity-80 transition-opacity"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
</Link>
)}
</div>
<Link to="/donate"> <Link to="/donate">
<Button <Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]" 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" }} style={{ fontFamily: "'Montserrat', sans-serif" }}
> >
Donate Donate
@@ -58,7 +103,7 @@ const PublicNavbar = () => {
</header> </header>
{/* Main Header - Navigation */} {/* Main Header - Navigation */}
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center"> <header className="sticky top-0 inset-x-0 z-40 bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<Link to="/"> <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" /> <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> </Link>
@@ -73,18 +118,21 @@ const PublicNavbar = () => {
</button> </button>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden lg:flex gap-10 items-center"> <nav className="hidden lg:flex gap-6 items-center">
<Link <Link
to="/#welcome" to="/#welcome"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className={getDesktopLinkClasses('/#welcome')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Welcome Welcome
</Link> </Link>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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" <button
style={{ fontFamily: "'Poppins', sans-serif" }}> 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 About Us
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</button> </button>
@@ -92,19 +140,19 @@ const PublicNavbar = () => {
<DropdownMenuContent align="start" className="bg-white min-w-[220px]"> <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer" <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
History History
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer" <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Mission and Values Mission and Values
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer" <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors Board of Directors
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@@ -112,31 +160,31 @@ const PublicNavbar = () => {
</DropdownMenu> </DropdownMenu>
<Link <Link
to={user ? "/dashboard" : "/become-a-member"} to={user ? "/dashboard" : "/become-a-member"}
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className={getDesktopLinkClasses(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>
{!user && ( {!user && (
<Link <Link
to="/login" to="/login"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className={getDesktopLinkClasses('/login')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Members Only Members Only
</Link> </Link>
)} )}
<Link <Link
to="/resources" to="/resources"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className={getDesktopLinkClasses('/resources')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Resources Resources
</Link> </Link>
<Link <Link
to="/contact-us" to="/contact-us"
className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity" className={getDesktopLinkClasses('/contact-us')}
style={{ fontFamily: "'Poppins', sans-serif" }} style={{ fontFamily: "'Nunito Sans', sans-serif" }}
> >
Contact Us Contact Us
</Link> </Link>
@@ -156,7 +204,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 +221,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 +264,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 +274,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 +284,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 +293,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 +307,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 +316,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>

4
src/pages/BecomeMember.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { ArrowDown } from 'lucide-react'; import { ArrowDown } from 'lucide-react';
const BecomeMember = () => { const BecomeMember = () => {
@@ -13,7 +13,7 @@ const BecomeMember = () => {
const imgIconAdminFee4 = `${process.env.PUBLIC_URL}/imgIconAdminFee4.png`; const imgIconAdminFee4 = `${process.env.PUBLIC_URL}/imgIconAdminFee4.png`;
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`;
return ( return (
<div className="min-h-screen bg-gray-50 relative"> <div className="min-h-screen bg-gray-50 relative">
<PublicNavbar /> <PublicNavbar />

2
src/pages/BoardOfDirectors.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
const BoardOfDirectors = () => { const BoardOfDirectors = () => {

2
src/pages/ContactUs.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
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 { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';

2
src/pages/Donate.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
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 { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';

2
src/pages/DonationSuccess.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { CheckCircle, Heart } from 'lucide-react'; import { CheckCircle, Heart } from 'lucide-react';

2
src/pages/ForgotPassword.js
View File

@@ -7,7 +7,7 @@ import { Label } from '../components/ui/label';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { toast } from 'sonner'; import { toast } from 'sonner';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { ArrowRight, ArrowLeft, Mail, CheckCircle } from 'lucide-react'; import { ArrowRight, ArrowLeft, Mail, CheckCircle } from 'lucide-react';
const ForgotPassword = () => { const ForgotPassword = () => {

2
src/pages/History.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
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';

109
src/pages/Landing.js
View File

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
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 PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
const Landing = () => { const Landing = () => {
// LOAF brand assets (local) // LOAF brand assets (local)
@@ -14,13 +14,68 @@ const Landing = () => {
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 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-[363px]">
<div className="absolute -top-52 flex justify-center w-full">
<img
src={iconSrc}
alt={infoTitle}
className="w-full 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="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 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">
<div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0"> <div className="py-20 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
<div className="flex flex-col gap-6 items-center"> <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-[334px] h-auto object-contain" />
</div> </div>
@@ -41,7 +96,7 @@ const Landing = () => {
</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-44 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 flex flex-col gap-6 sm:gap-8">
<div className="flex flex-col items-center pt-12"> <div className="flex flex-col items-center pt-12">
<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] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF Welcome to LOAF
@@ -54,55 +109,23 @@ const Landing = () => {
</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 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-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 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">
<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 px-3
py-7 text-base sm:text-lg font-medium w-full 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 font-bold text-center lg:text-left 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>

2
src/pages/Login.js
View File

@@ -8,7 +8,7 @@ import { Label } from '../components/ui/label';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { toast } from 'sonner'; import { toast } from 'sonner';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { ArrowRight, ArrowLeft } from 'lucide-react'; import { ArrowRight, ArrowLeft } from 'lucide-react';
const Login = () => { const Login = () => {

2
src/pages/MissionValues.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
const MissionValues = () => { const MissionValues = () => {

26
src/pages/PrivacyPolicy.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; 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-kc';
export default function PrivacyPolicy() { export default function PrivacyPolicy() {
return ( return (
@@ -12,7 +12,7 @@ export default function PrivacyPolicy() {
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4" <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
Privacy Policy Privacy Policy
</h1> </h1>
<p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -38,7 +38,7 @@ export default function PrivacyPolicy() {
{/* Section 1: What User Data We Collect */} {/* Section 1: What User Data We Collect */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>💻</span> What User Data We Collect <span>💻</span> What User Data We Collect
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -84,7 +84,7 @@ export default function PrivacyPolicy() {
{/* Section 2: Why We Collect Your Data */} {/* Section 2: Why We Collect Your Data */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🎯</span> Why We Collect Your Data <span>🎯</span> Why We Collect Your Data
</h2> </h2>
<div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -99,7 +99,7 @@ export default function PrivacyPolicy() {
{/* Section 3: Sharing Information with Third Parties */} {/* Section 3: Sharing Information with Third Parties */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🤝</span> Sharing Information with Third Parties <span>🤝</span> Sharing Information with Third Parties
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -121,7 +121,7 @@ export default function PrivacyPolicy() {
{/* Section 4: Safeguarding and Securing the Data */} {/* Section 4: Safeguarding and Securing the Data */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🔒</span> Safeguarding and Securing the Data <span>🔒</span> Safeguarding and Securing the Data
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -134,7 +134,7 @@ export default function PrivacyPolicy() {
{/* Section 5: Our Cookie Policy */} {/* Section 5: Our Cookie Policy */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🍪</span> Our Cookie Policy <span>🍪</span> Our Cookie Policy
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -159,7 +159,7 @@ export default function PrivacyPolicy() {
{/* Section 6: Links to Other Websites */} {/* Section 6: Links to Other Websites */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🔗</span> Links to Other Websites <span>🔗</span> Links to Other Websites
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -172,7 +172,7 @@ export default function PrivacyPolicy() {
{/* Section 7: Restricting the Collection of your Personal Data */} {/* Section 7: Restricting the Collection of your Personal Data */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🚫</span> Restricting the Collection of your Personal Data <span>🚫</span> Restricting the Collection of your Personal Data
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -189,7 +189,7 @@ export default function PrivacyPolicy() {
{/* Section 8: Children Under Thirteen */} {/* Section 8: Children Under Thirteen */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>👶</span> Children Under Thirteen <span>👶</span> Children Under Thirteen
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -202,7 +202,7 @@ export default function PrivacyPolicy() {
{/* Section 9: Changes to this Statement */} {/* Section 9: Changes to this Statement */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>🗓️</span> Changes to this Statement <span>🗓️</span> Changes to this Statement
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -215,7 +215,7 @@ export default function PrivacyPolicy() {
{/* Section 10: Contact Information */} {/* Section 10: Contact Information */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
<span>📧</span> Contact Information <span>📧</span> Contact Information
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -237,7 +237,7 @@ export default function PrivacyPolicy() {
{/* Back to Home Link */} {/* Back to Home Link */}
<div className="mt-8 text-center"> <div className="mt-8 text-center">
<Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2" <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span>←</span> Back to Home <span>←</span> Back to Home
</Link> </Link>
</div> </div>

2
src/pages/Register.js
View File

@@ -5,7 +5,7 @@ import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { toast } from 'sonner'; import { toast } from 'sonner';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { ArrowRight, ArrowLeft } from 'lucide-react'; import { ArrowRight, ArrowLeft } from 'lucide-react';
import RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator'; import RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator';
import RegistrationStep1 from '../components/registration/RegistrationStep1'; import RegistrationStep1 from '../components/registration/RegistrationStep1';

2
src/pages/ResetPassword.js
View File

@@ -7,7 +7,7 @@ import { Label } from '../components/ui/label';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { toast } from 'sonner'; import { toast } from 'sonner';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
import { ArrowRight, Lock, AlertCircle } from 'lucide-react'; import { ArrowRight, Lock, AlertCircle } from 'lucide-react';
const ResetPassword = () => { const ResetPassword = () => {

12
src/pages/Resources.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
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';
@@ -133,17 +133,15 @@ const Resources = () => {
{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 mt-3' : '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-2xl border-2 border-[#ddd8eb] shadow-lg">
{/* Description */} {/* Description */}

44
src/pages/TermsOfService.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; 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-kc';
export default function TermsOfService() { export default function TermsOfService() {
return ( return (
@@ -12,7 +12,7 @@ export default function TermsOfService() {
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4" <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> 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="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -26,7 +26,7 @@ export default function TermsOfService() {
{/* Section 1: Agreement to Terms */} {/* Section 1: Agreement to Terms */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
1. Agreement to Terms 1. Agreement to Terms
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -42,7 +42,7 @@ export default function TermsOfService() {
{/* Section 2: Intellectual Property Rights */} {/* Section 2: Intellectual Property Rights */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
2. Intellectual Property Rights 2. Intellectual Property Rights
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -55,7 +55,7 @@ export default function TermsOfService() {
{/* Section 3: User Representations */} {/* Section 3: User Representations */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
3. User Representations 3. User Representations
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -78,7 +78,7 @@ export default function TermsOfService() {
{/* Section 4: Prohibited Activities */} {/* Section 4: Prohibited Activities */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
4. Prohibited Activities 4. Prohibited Activities
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -101,7 +101,7 @@ export default function TermsOfService() {
{/* Section 5: User Generated Contributions */} {/* Section 5: User Generated Contributions */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
5. User Generated Contributions 5. User Generated Contributions
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -114,7 +114,7 @@ export default function TermsOfService() {
{/* Section 6: Contribution License */} {/* Section 6: Contribution License */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
6. Contribution License 6. Contribution License
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -127,7 +127,7 @@ export default function TermsOfService() {
{/* Section 7: Submissions */} {/* Section 7: Submissions */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
7. Submissions 7. Submissions
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -140,7 +140,7 @@ export default function TermsOfService() {
{/* Section 8: Site Management */} {/* Section 8: Site Management */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
8. Site Management 8. Site Management
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -153,7 +153,7 @@ export default function TermsOfService() {
{/* Section 9: Term and Termination */} {/* Section 9: Term and Termination */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
9. Term and Termination 9. Term and Termination
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -166,7 +166,7 @@ export default function TermsOfService() {
{/* Section 10: Modifications and Interruptions */} {/* Section 10: Modifications and Interruptions */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
10. Modifications and Interruptions 10. Modifications and Interruptions
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -179,7 +179,7 @@ export default function TermsOfService() {
{/* Section 11: Governing Law */} {/* Section 11: Governing Law */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
11. Governing Law 11. Governing Law
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -192,7 +192,7 @@ export default function TermsOfService() {
{/* Section 12: Dispute Resolution */} {/* Section 12: Dispute Resolution */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
12. Dispute Resolution 12. Dispute Resolution
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -205,7 +205,7 @@ export default function TermsOfService() {
{/* Section 13: Corrections */} {/* Section 13: Corrections */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
13. Corrections 13. Corrections
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -218,7 +218,7 @@ export default function TermsOfService() {
{/* Section 14: Disclaimer */} {/* Section 14: Disclaimer */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
14. Disclaimer 14. Disclaimer
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -231,7 +231,7 @@ export default function TermsOfService() {
{/* Section 15: Limitations of Liability */} {/* Section 15: Limitations of Liability */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
15. Limitations of Liability 15. Limitations of Liability
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -244,7 +244,7 @@ export default function TermsOfService() {
{/* Section 16: Indemnification */} {/* Section 16: Indemnification */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
16. Indemnification 16. Indemnification
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -257,7 +257,7 @@ export default function TermsOfService() {
{/* Section 17: User Data */} {/* Section 17: User Data */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
17. User Data 17. User Data
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -270,7 +270,7 @@ export default function TermsOfService() {
{/* Section 18: Electronic Communications */} {/* Section 18: Electronic Communications */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
18. Electronic Communications, Transactions, and Signatures 18. Electronic Communications, Transactions, and Signatures
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -283,7 +283,7 @@ export default function TermsOfService() {
{/* Section 19: Contact Us */} {/* Section 19: Contact Us */}
<section> <section>
<h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4" <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}> style={{ fontFamily: "'Inter', sans-serif" }}>
19. Contact Us 19. Contact Us
</h2> </h2>
<div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -305,7 +305,7 @@ export default function TermsOfService() {
{/* Back to Home Link */} {/* Back to Home Link */}
<div className="mt-8 text-center"> <div className="mt-8 text-center">
<Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2" <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span>←</span> Back to Home <span>←</span> Back to Home
</Link> </Link>
</div> </div>

2
src/pages/VerifyEmail.js
View File

@@ -5,7 +5,7 @@ import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card'; import { Card } from '../components/ui/card';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react'; import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
import PublicNavbar from '../components/PublicNavbar'; import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter'; import PublicFooter from '../components/PublicFooter-kc';
const API_URL = process.env.REACT_APP_BACKEND_URL; const API_URL = process.env.REACT_APP_BACKEND_URL;