Seed: fitness template (17 files)
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Award, Calendar, Dumbbell } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const filters = ["All", "Strength", "Cardio", "Yoga", "Boxing", "Nutrition"];
|
||||
|
||||
const trainers = [
|
||||
{ name: "Marcus Rivera", specialty: "Strength & Conditioning", certs: "NSCA-CSCS, USAW Level 2", exp: "8 years", gradient: "from-orange-400 to-red-400", tag: "Strength" },
|
||||
{ name: "Sarah Chen", specialty: "HIIT & Cardio", certs: "ACE-CPT, TRX Certified", exp: "12 years", gradient: "from-red-400 to-rose-400", tag: "Cardio" },
|
||||
{ name: "Priya Sharma", specialty: "Yoga & Mobility", certs: "RYT-500, FRC Certified", exp: "6 years", gradient: "from-amber-400 to-orange-400", tag: "Yoga" },
|
||||
{ name: "Dante Williams", specialty: "Boxing & MMA", certs: "USA Boxing Coach, NASM-CPT", exp: "10 years", gradient: "from-rose-400 to-pink-400", tag: "Boxing" },
|
||||
{ name: "Elena Vasquez", specialty: "Sports Nutrition", certs: "ISSN-CISSN, Precision Nutrition L2", exp: "9 years", gradient: "from-orange-400 to-amber-400", tag: "Nutrition" },
|
||||
{ name: "Tyler Brooks", specialty: "Powerlifting", certs: "USAPL Coach, NSCA-CSCS", exp: "7 years", gradient: "from-red-400 to-orange-400", tag: "Strength" },
|
||||
];
|
||||
|
||||
export default function Trainers() {
|
||||
const [active, setActive] = useState("All");
|
||||
const filtered = active === "All" ? trainers : trainers.filter(t => t.tag === active);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white">
|
||||
<Header />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-32 pb-16 bg-gradient-to-b from-slate-900 to-slate-950">
|
||||
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||
<Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">The Team</Badge>
|
||||
<h1 className="text-4xl md:text-5xl font-black uppercase text-white animate-fade-up">MEET YOUR TRAINERS</h1>
|
||||
<p className="mt-4 text-slate-400 max-w-xl mx-auto">Certified professionals dedicated to helping you crush every goal.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Filters ── */}
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="flex gap-2 justify-center flex-wrap mb-12">
|
||||
{filters.map((f) => (
|
||||
<Button key={f} variant={active === f ? "default" : "outline"} onClick={() => setActive(f)} className={`rounded-full font-bold uppercase tracking-wide text-sm px-6 transition-all \${active === f ? "bg-gradient-to-r from-orange-500 to-red-500 text-white border-0 shadow-lg shadow-orange-500/25" : "border-slate-700 text-slate-400 hover:text-white hover:border-slate-500"}`}>
|
||||
{f}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 stagger">
|
||||
{filtered.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-8 text-center">
|
||||
<div className={`w-24 h-24 rounded-full bg-gradient-to-br \${t.gradient} mx-auto mb-6 flex items-center justify-center text-3xl font-black text-white shadow-xl group-hover:scale-105 transition-transform`}>
|
||||
{t.name.split(" ").map(n => n[0]).join("")}
|
||||
</div>
|
||||
<h3 className="font-bold text-white text-xl">{t.name}</h3>
|
||||
<Badge className="mt-2 bg-orange-500/10 text-orange-400 border-orange-500/30 text-xs uppercase">{t.specialty}</Badge>
|
||||
<div className="mt-6 space-y-3 text-sm text-left">
|
||||
<div className="flex items-center gap-3 text-slate-300">
|
||||
<Award className="h-4 w-4 text-orange-400 shrink-0" />
|
||||
<span>{t.certs}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-slate-300">
|
||||
<Calendar className="h-4 w-4 text-orange-400 shrink-0" />
|
||||
<span>{t.exp} experience</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-16 bg-gradient-to-r from-orange-600 via-red-600 to-orange-600 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(255,255,255,0.08),transparent)]" />
|
||||
<div className="relative mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 className="text-3xl font-black uppercase text-white animate-fade-up">Want a Personalized Plan?</h2>
|
||||
<p className="mt-3 text-white/80">Book a free consultation with any of our trainers and get a custom program built for your goals.</p>
|
||||
<Button asChild size="lg" className="mt-6 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">
|
||||
<Link to="/contact">Book Free Consultation</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user