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

Frontend Revamp

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 14:46:16 +07:00
parent 79cebd205c
commit d8c1e133ac
14 changed files with 425 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/pages/Landing.js
View File

@@ -2,136 +2,204 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Calendar, Users, Heart, ArrowRight } from 'lucide-react';
import Navbar from '../components/Navbar';
const Landing = () => {
// LOAF brand assets from Figma
const loafLogo = "https://www.figma.com/api/mcp/asset/5e3c057c-ffb0-4ceb-aa60-70a5ddbe10ab";
const taglineImage = "https://www.figma.com/api/mcp/asset/ce184873-0c46-45eb-8480-76a9411011bf";
const shootingStar = "https://www.figma.com/api/mcp/asset/6db528f4-493b-4560-9ff6-076bc42421ca";
const iconMeetGreet = "https://www.figma.com/api/mcp/asset/3519deee-3f78-45e1-b537-f9c61102c18b";
const iconSocials = "https://www.figma.com/api/mcp/asset/e95f23c6-e893-472e-a3cf-38a05290790b";
const iconActive = "https://www.figma.com/api/mcp/asset/cab1679a-a7d6-4a5f-8732-c6c1cd578320";
const heroLoaf = "https://www.figma.com/api/mcp/asset/f3fb05af-0fef-49b7-bc50-f5914dfe1705";
return (
<div className="min-h-screen bg-[#FDFCF8]">
<Navbar />
<div className="min-h-screen bg-white">
{/* Top Header - Auth Actions */}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-16 py-4 flex justify-end items-center gap-6">
<Link to="/register" className="text-white text-base font-medium hover:opacity-80 transition-opacity">
Register
</Link>
<Link to="/login" className="text-white text-base font-medium hover:opacity-80 transition-opacity">
Login
</Link>
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#644c9f] rounded-full px-6 py-3 text-base font-medium">
Donate
</Button>
</header>
{/* Main Header - Navigation */}
<header className="bg-[#664fa3] px-16 py-2 flex justify-between items-center">
<img src={loafLogo} alt="LOAF Logo" className="h-28 w-28 object-contain" />
<nav className="flex gap-10 items-center">
<a href="#welcome" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
Welcome
</a>
<a href="#about" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
About Us
</a>
<Link to="/register" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
Become a Member
</Link>
<Link to="/login" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
Members Only
</Link>
<a href="#resources" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
Resources
</a>
<a href="#contact" className="text-white text-lg font-bold hover:opacity-80 transition-opacity" style={{ fontFamily: "'Nunito Sans', sans-serif", textShadow: '0px 4px 4px rgba(0,0,0,0.25)' }}>
Contact Us
</a>
</nav>
</header>
{/* Hero Section */}
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-soft-mesh"></div>
<div className="max-w-7xl mx-auto px-6 py-20 lg:py-32 relative">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<h1 className="text-5xl md:text-7xl font-semibold fraunces text-[#3D405B] leading-tight">
Building Friendships, One Event at a Time
</h1>
<p className="text-lg md:text-xl text-[#6B708D] leading-relaxed">
Join our vibrant community of members connecting through shared experiences, events, and meaningful relationships.
</p>
<div className="flex gap-4 flex-wrap">
<Link to="/register">
<Button
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
data-testid="hero-join-button"
>
Become a Member
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
</Link>
<Link to="/login">
<Button
variant="outline"
className="border-2 border-[#3D405B] text-[#3D405B] hover:bg-[#3D405B] hover:text-white rounded-full px-8 py-6 text-lg font-medium transition-all"
data-testid="hero-login-button"
>
Member Login
</Button>
</Link>
</div>
</div>
<div className="relative">
<img
src="https://images.unsplash.com/photo-1660405251862-c023df45d075?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODF8MHwxfHNlYXJjaHwxfHxhY3RpdmUlMjBzZW5pb3IlMjB3b21lbiUyMGdyb3VwJTIwaGlraW5nJTIwbmF0dXJlfGVufDB8fHx8MTc2NDc1NjIwM3ww&ixlib=rb-4.1.0&q=85"
alt="Community members enjoying outdoor activities"
className="rounded-2xl shadow-2xl w-full h-[500px] object-cover"
/>
</div>
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-16 py-0 flex gap-16 items-center justify-center">
<div className="py-10 flex flex-col gap-8 items-center justify-center w-[420px]">
<div className="flex flex-col gap-6 items-center">
<img src={heroLoaf} alt="LOAF" className="w-[334px] h-[105px] object-contain" />
</div>
<div className="flex flex-col gap-4 items-center justify-center w-full">
<Link to="/register" className="w-full max-w-[339px]">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-full transition-colors">
Become a Member
</Button>
</Link>
</div>
<p className="text-white text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by the Hollyfield Foundation
</p>
</div>
<div className="py-16 flex items-center justify-center w-[594px] h-[636px]">
<img src={taglineImage} alt="LOAF Tagline" className="w-[483px] h-[297px] object-contain" />
</div>
</section>
{/* About Section */}
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-16 pt-30 pb-0 flex flex-col gap-8">
<div className="flex flex-col items-center pt-12">
<h3 className="text-[#48286e] text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF
</h3>
</div>
<p className="text-[rgba(0,0,0,0.55)] text-lg 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.
</p>
<img src={shootingStar} alt="Decorative element" className="w-full h-[197px] object-contain" />
</section>
{/* Feature Cards Section */}
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-16 py-30 flex gap-8 items-start justify-center">
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconMeetGreet} alt="Meet and Greet" className="w-[300px] h-[270px] object-contain" />
<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-[300px] h-[270px] 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-[300px] h-[270px] 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>
{/* CTA Section */}
<section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-16 py-30 flex items-center justify-center">
<div className="flex gap-12 items-center justify-center h-[191px]">
<Link to="/register">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-[392px] transition-colors">
Become a Member
</Button>
</Link>
<div className="flex-1 flex items-center justify-center">
<h4 className="text-white text-4xl font-bold max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
No matter your age or ability, there is something for everyone.
</h4>
</div>
</div>
</section>
{/* Features Section */}
<section className="max-w-7xl mx-auto px-6 py-20">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
What We Offer
</h2>
<p className="text-lg text-[#6B708D] max-w-2xl mx-auto">
No matter your age or ability, there is something for everyone in our community.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-community-card">
<div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<Users className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
{/* Main Footer */}
<footer className="bg-[#644c9f] px-16 py-0 flex items-center justify-center h-[420px]">
<div className="border-t border-[rgba(0,0,0,0.1)] py-20 flex gap-30 items-center justify-center flex-1">
<div className="w-[232px]">
<img src={loafLogo} alt="LOAF Logo" className="w-[232px] h-[232px] object-contain" />
</div>
<nav className="flex gap-28 items-start justify-center w-[811px]">
<div className="flex flex-col gap-2 w-[163px]">
<div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>About</p>
</div>
<a href="#history" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>History</a>
<a href="#mission" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Mission and Values</a>
<a href="#board" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Board of Directors</a>
</div>
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
Meet & Greet
</h3>
<p className="text-[#6B708D] leading-relaxed">
Connect with prospective members and get acquainted with our community. Meet the board and ask questions in a welcoming environment.
</p>
</Card>
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-events-card">
<div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<Calendar className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
<div className="flex flex-col gap-2 w-[148px]">
<div className="pb-4">
<p className="text-white text-base font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Connect</p>
</div>
<Link to="/register" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Become a Member</Link>
<a href="#contact" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Contact Us</a>
<a href="#resources" className="text-[#ddd8eb] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>Resources</a>
</div>
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
Social Events
</h3>
<p className="text-[#6B708D] leading-relaxed">
Explore your city with fellow members. From museums to sporting events, board games to pool parties - there's always something happening.
</p>
</Card>
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] hover:shadow-lg transition-shadow" data-testid="feature-activities-card">
<div className="bg-[#F2CC8F]/20 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<Heart className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
<div className="flex flex-col gap-2 items-center w-[271px]">
<div className="pb-4 w-full">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-6 py-3 text-lg font-medium w-[217px]">
Donate
</Button>
</div>
<p className="text-[#ddd8eb] text-base font-medium text-center w-full" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
</div>
<h3 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
Active Living
</h3>
<p className="text-[#6B708D] leading-relaxed">
Stay active with hiking, swimming, pickleball, kayaking, and more. Activities designed for all abilities and fitness levels.
</p>
</Card>
</nav>
</div>
</section>
</footer>
{/* CTA Section */}
<section className="bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 py-20">
<div className="max-w-4xl mx-auto px-6 text-center">
<h2 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-6">
Ready to Join Our Community?
</h2>
<p className="text-lg text-[#6B708D] mb-8">
Start your membership journey today and connect with amazing people in your area.
</p>
<Link to="/register">
<Button
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-12 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
data-testid="cta-register-button"
>
Get Started Now
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
</Link>
</div>
</section>
{/* Footer */}
<footer className="bg-[#3D405B] text-white py-12">
<div className="max-w-7xl mx-auto px-6 text-center">
<p className="text-[#A3B1C6]">
© 2025 Membership Platform. Building connections, creating community.
</p>
</div>
{/* Bottom Footer */}
<footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-16 py-6 flex justify-between items-center h-[76px]">
<nav className="flex gap-8 items-center">
<a href="#terms" className="text-[#c5b4e3] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>
Terms of Service
</a>
<a href="#privacy" className="text-[#c5b4e3] text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Inter', sans-serif" }}>
Privacy Policy
</a>
</nav>
<p className="text-[#c5b4e3] text-base font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
© 2025 LOAF. All Rights Reserved.
</p>
<p className="text-[#c5b4e3] text-base font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Designed and Managed by{' '}
<a href="https://konceptkit.com/" className="text-[#d1c3e9] underline hover:text-white transition-colors">
Koncept Kit
</a>
</p>
</footer>
</div>
);