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

Initial Commit

Browse Source
This commit is contained in:
Koncept Kit
2025-12-05 16:40:33 +07:00
parent 0834f12410
commit 94c7d5aec0
91 changed files with 20446 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/pages/Landing.js Normal file
View File

@@ -0,0 +1,140 @@
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 = () => {
return (
<div className="min-h-screen bg-[#FDFCF8]">
<Navbar />
{/* 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>
</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} />
</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>
<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>
<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>
</div>
</section>
{/* 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>
</footer>
</div>
);
};
export default Landing;