Seed: fitness template (17 files)
This commit is contained in:
@@ -0,0 +1,284 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
ArrowRight, Flame, Dumbbell, Heart, Zap, Timer, Trophy,
|
||||||
|
Users, Star, Quote, CheckCircle, ChevronRight
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const classes = [
|
||||||
|
{ icon: Flame, title: "HIIT Burn", desc: "Torch calories with explosive interval circuits that keep your metabolism fired up all day.", gradient: "from-orange-500/20 to-red-500/20", border: "border-orange-500/20" },
|
||||||
|
{ icon: Dumbbell, title: "Power Lift", desc: "Build raw strength with barbell-focused compound lifts and progressive overload programming.", gradient: "from-red-500/20 to-pink-500/20", border: "border-red-500/20" },
|
||||||
|
{ icon: Heart, title: "Yoga Flow", desc: "Restore balance with dynamic vinyasa sequences that build flexibility and mental clarity.", gradient: "from-amber-500/20 to-orange-500/20", border: "border-amber-500/20" },
|
||||||
|
{ icon: Zap, title: "Box Fit", desc: "Channel your inner fighter with boxing combos, heavy bag work, and cardio conditioning.", gradient: "from-rose-500/20 to-red-500/20", border: "border-rose-500/20" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const trainers = [
|
||||||
|
{ name: "Marcus Rivera", specialty: "Strength & Conditioning", exp: "8+ years", gradient: "from-orange-400 to-red-400" },
|
||||||
|
{ name: "Sarah Chen", specialty: "HIIT & Cardio", exp: "12+ years", gradient: "from-red-400 to-rose-400" },
|
||||||
|
{ name: "Priya Sharma", specialty: "Yoga & Mobility", exp: "6+ years", gradient: "from-amber-400 to-orange-400" },
|
||||||
|
{ name: "Dante Williams", specialty: "Boxing & MMA", exp: "10+ years", gradient: "from-rose-400 to-pink-400" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ initials: "MR", name: "Mike Rodriguez", text: "Lost 40 pounds in 6 months. The trainers here actually care about your progress and keep you accountable.", rating: 5 },
|
||||||
|
{ initials: "KL", name: "Karen Liu", text: "Best gym community I have ever been part of. The classes are challenging and the energy is always electric.", rating: 5 },
|
||||||
|
{ initials: "JD", name: "James Davis", text: "Went from barely running a mile to completing a marathon. Apex Fitness changed my life completely.", rating: 5 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ value: "5,000+", label: "Active Members" },
|
||||||
|
{ value: "120+", label: "Weekly Classes" },
|
||||||
|
{ value: "35+", label: "Expert Trainers" },
|
||||||
|
{ value: "12+", label: "Years Strong" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-950 text-white">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── Hero ── */}
|
||||||
|
<section className="relative min-h-[90vh] flex items-center overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950" />
|
||||||
|
<div className="absolute top-20 right-10 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-pulse" />
|
||||||
|
<div className="absolute bottom-20 left-10 w-72 h-72 bg-red-500/10 rounded-full blur-3xl animate-pulse" />
|
||||||
|
<div className="relative mx-auto max-w-7xl px-6 py-32 text-center">
|
||||||
|
<Badge className="mb-6 bg-orange-500/10 text-orange-400 border-orange-500/30 px-4 py-1 text-sm font-semibold uppercase tracking-wider">No.1 Gym in Los Angeles</Badge>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black uppercase tracking-tight leading-[1.1] animate-fade-up">
|
||||||
|
FORGE YOUR<br />
|
||||||
|
<span className="bg-gradient-to-r from-orange-400 via-red-400 to-orange-400 bg-clip-text text-transparent">STRONGEST SELF</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg md:text-xl text-slate-400 max-w-2xl mx-auto">World-class equipment, expert trainers, and a community that pushes you to break limits. Your transformation starts today.</p>
|
||||||
|
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Button asChild size="lg" className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold uppercase tracking-wide rounded-full px-8 shadow-xl shadow-orange-500/25 active:scale-[0.97] transition-all text-base">
|
||||||
|
<Link to="/pricing">Start Free Trial <ArrowRight className="ml-2 h-5 w-5" /></Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" size="lg" className="border-slate-700 text-slate-300 hover:bg-slate-800/50 hover:text-white rounded-full px-8 font-bold uppercase tracking-wide text-base">
|
||||||
|
<Link to="/classes">View Classes</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-3xl mx-auto">
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<div key={i} className="text-center">
|
||||||
|
<div className="text-3xl md:text-4xl font-black text-white">{s.value}</div>
|
||||||
|
<div className="text-sm text-slate-500 mt-1 uppercase tracking-wide">{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Classes ── */}
|
||||||
|
<section className="py-24 bg-slate-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">Programs</Badge>
|
||||||
|
<h2 className="text-4xl font-black uppercase text-white animate-fade-up">Our Classes</h2>
|
||||||
|
<p className="mt-4 text-slate-400 max-w-xl mx-auto">From high-intensity interval training to mindful yoga, we have the perfect class for every fitness level.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
|
||||||
|
{classes.map((c, i) => (
|
||||||
|
<Card key={i} className={`bg-slate-900/80 backdrop-blur border \${c.border} hover:border-orange-500/40 transition-all duration-300 group hover:-translate-y-1`}>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br \${c.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
|
||||||
|
<c.icon className="h-6 w-6 text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-white text-lg mb-2">{c.title}</h3>
|
||||||
|
<p className="text-sm text-slate-400">{c.desc}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-10">
|
||||||
|
<Button asChild variant="outline" className="border-orange-500/30 text-orange-400 hover:bg-orange-500/10 rounded-full uppercase font-bold tracking-wide">
|
||||||
|
<Link to="/classes">All Classes <ChevronRight className="ml-1 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Why Choose Us ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-red-500/10 text-red-400 border-red-500/30 uppercase text-xs tracking-wider">Why Us</Badge>
|
||||||
|
<h2 className="text-4xl font-black uppercase text-white animate-fade-up">BUILT DIFFERENT</h2>
|
||||||
|
<p className="mt-4 text-slate-400 max-w-xl mx-auto">State-of-the-art facility with everything you need to train, recover, and dominate.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{[
|
||||||
|
{ icon: Trophy, title: "Elite Equipment", desc: "Over 200 machines and free-weight stations from top brands, always maintained." },
|
||||||
|
{ icon: Timer, title: "Open Early & Late", desc: "Doors open at 5 AM and close at 11 PM so your schedule never limits your gains." },
|
||||||
|
{ icon: Users, title: "Strong Community", desc: "Join a tribe of motivated athletes who push each other to be better every single day." },
|
||||||
|
{ icon: Zap, title: "Fast Results", desc: "Science-backed programs designed by certified trainers to maximize your progress." },
|
||||||
|
].map((f, i) => (
|
||||||
|
<div key={i} className="text-center p-8 rounded-2xl bg-slate-900/60 border border-slate-800 hover:border-orange-500/20 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 group">
|
||||||
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mx-auto mb-5 group-hover:scale-110 transition-transform">
|
||||||
|
<f.icon className="h-7 w-7 text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-white text-lg mb-2">{f.title}</h3>
|
||||||
|
<p className="text-sm text-slate-400 leading-relaxed">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Pricing Preview ── */}
|
||||||
|
<section className="py-24 bg-slate-900/30">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-red-500/10 text-red-400 border-red-500/30 uppercase text-xs tracking-wider">Membership</Badge>
|
||||||
|
<h2 className="text-4xl font-black uppercase text-white animate-fade-up">Choose Your Plan</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto stagger">
|
||||||
|
{[
|
||||||
|
{ name: "Basic", price: "$29", features: ["Gym floor access", "Locker room", "2 classes/week", "Fitness assessment"], popular: false },
|
||||||
|
{ name: "Pro", price: "$59", features: ["Unlimited classes", "Sauna & pool", "1 PT session/mo", "Nutrition plan", "Guest passes"], popular: true },
|
||||||
|
{ name: "Elite", price: "$99", features: ["Everything in Pro", "Unlimited PT sessions", "Recovery suite", "Priority booking", "Merch discount", "24/7 access"], popular: false },
|
||||||
|
].map((tier, i) => (
|
||||||
|
<Card key={i} className={`relative bg-slate-900/80 backdrop-blur border transition-all duration-300 hover:-translate-y-1 \${tier.popular ? "border-orange-500/50 shadow-xl shadow-orange-500/10 scale-105" : "border-slate-800 hover:border-slate-700"}`}>
|
||||||
|
{tier.popular && <div className="absolute -top-3 left-1/2 -translate-x-1/2"><Badge className="bg-gradient-to-r from-orange-500 to-red-500 text-white border-0 uppercase text-xs tracking-wider px-4">Most Popular</Badge></div>}
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<h3 className="text-lg font-bold uppercase text-slate-300">{tier.name}</h3>
|
||||||
|
<div className="mt-4 mb-6">
|
||||||
|
<span className="text-5xl font-black text-white">{tier.price}</span>
|
||||||
|
<span className="text-slate-500">/mo</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 mb-8 text-left">
|
||||||
|
{tier.features.map((f, j) => (
|
||||||
|
<div key={j} className="flex items-center gap-3 text-sm text-slate-300">
|
||||||
|
<CheckCircle className="h-4 w-4 text-orange-400 shrink-0" />
|
||||||
|
<span>{f}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button asChild className={`w-full font-bold uppercase tracking-wide rounded-full active:scale-[0.97] transition-all \${tier.popular ? "bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white shadow-lg shadow-orange-500/25" : "bg-slate-800 hover:bg-slate-700 text-white"}`}>
|
||||||
|
<Link to="/pricing">Get Started</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Trainers ── */}
|
||||||
|
<section className="py-24 bg-slate-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">Our Team</Badge>
|
||||||
|
<h2 className="text-4xl font-black uppercase text-white animate-fade-up">Expert Trainers</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
|
||||||
|
{trainers.map((t, i) => (
|
||||||
|
<Card key={i} className="bg-slate-900/80 backdrop-blur border border-slate-800 hover:border-orange-500/30 transition-all duration-300 group hover:-translate-y-1">
|
||||||
|
<CardContent className="p-6 text-center">
|
||||||
|
<div className={`w-20 h-20 rounded-full bg-gradient-to-br \${t.gradient} mx-auto mb-4 flex items-center justify-center text-2xl font-black text-white shadow-lg`}>
|
||||||
|
{t.name.split(" ").map(n => n[0]).join("")}
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-white text-lg">{t.name}</h3>
|
||||||
|
<p className="text-sm text-orange-400 font-medium mt-1">{t.specialty}</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-2">{t.exp} experience</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-10">
|
||||||
|
<Button asChild variant="outline" className="border-orange-500/30 text-orange-400 hover:bg-orange-500/10 rounded-full uppercase font-bold tracking-wide">
|
||||||
|
<Link to="/trainers">Meet the Team <ChevronRight className="ml-1 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Transformation Banner ── */}
|
||||||
|
<section className="py-20 bg-gradient-to-r from-slate-900 via-slate-950 to-slate-900 border-y border-slate-800">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">Results Guaranteed</Badge>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-black uppercase text-white leading-tight animate-fade-up">REAL PEOPLE. REAL TRANSFORMATIONS.</h2>
|
||||||
|
<p className="mt-4 text-slate-400 leading-relaxed">Our members consistently achieve incredible results with our proven training programs and dedicated coaching staff.</p>
|
||||||
|
<div className="mt-6 flex gap-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-black text-orange-400">22 lbs</div>
|
||||||
|
<div className="text-xs text-slate-500 uppercase tracking-wide mt-1">Avg Weight Lost</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-black text-red-400">40%</div>
|
||||||
|
<div className="text-xs text-slate-500 uppercase tracking-wide mt-1">Strength Gain</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-black text-orange-400">94%</div>
|
||||||
|
<div className="text-xs text-slate-500 uppercase tracking-wide mt-1">Member Retention</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="h-40 rounded-2xl bg-gradient-to-br from-orange-500/10 to-red-500/10 border border-orange-500/20 flex items-center justify-center">
|
||||||
|
<Flame className="h-12 w-12 text-orange-500/40" />
|
||||||
|
</div>
|
||||||
|
<div className="h-40 rounded-2xl bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/20 flex items-center justify-center mt-8">
|
||||||
|
<Dumbbell className="h-12 w-12 text-red-500/40" />
|
||||||
|
</div>
|
||||||
|
<div className="h-40 rounded-2xl bg-gradient-to-br from-amber-500/10 to-orange-500/10 border border-amber-500/20 flex items-center justify-center -mt-8">
|
||||||
|
<Heart className="h-12 w-12 text-amber-500/40" />
|
||||||
|
</div>
|
||||||
|
<div className="h-40 rounded-2xl bg-gradient-to-br from-rose-500/10 to-pink-500/10 border border-rose-500/20 flex items-center justify-center">
|
||||||
|
<Trophy className="h-12 w-12 text-rose-500/40" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Testimonials ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-red-500/10 text-red-400 border-red-500/30 uppercase text-xs tracking-wider">Success Stories</Badge>
|
||||||
|
<h2 className="text-4xl font-black uppercase text-white animate-fade-up">Member Results</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<Card key={i} className="bg-slate-900/80 backdrop-blur border border-slate-800 hover:border-orange-500/20 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Quote className="h-8 w-8 text-orange-500/30 mb-4" />
|
||||||
|
<p className="text-slate-300 italic leading-relaxed mb-6">{t.text}</p>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-red-400 flex items-center justify-center text-sm font-bold text-white">{t.initials}</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-white text-sm">{t.name}</div>
|
||||||
|
<div className="flex gap-0.5">{Array.from({length: t.rating}).map((_, j) => <Star key={j} className="h-3 w-3 fill-orange-400 text-orange-400" />)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section className="py-24 bg-gradient-to-br from-orange-600 via-red-600 to-orange-600 relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent)]" />
|
||||||
|
<div className="relative mx-auto max-w-4xl px-6 text-center">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-black uppercase text-white leading-tight animate-fade-up">YOUR FIRST WEEK IS ON US</h2>
|
||||||
|
<p className="mt-4 text-lg text-white/80 max-w-xl mx-auto">No commitment. No contracts. Just show up and see why thousands choose Apex Fitness.</p>
|
||||||
|
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Button asChild size="lg" className="bg-white text-orange-600 hover:bg-slate-100 font-bold uppercase tracking-wide rounded-full px-8 shadow-xl active:scale-[0.97] transition-all text-base">
|
||||||
|
<Link to="/pricing">Claim Your Free Week <ArrowRight className="ml-2 h-5 w-5" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user