From d47a7a4d6c5c1e732fbfd79cf4aff73f29053c75 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:12:43 +0000
Subject: [PATCH] Seed: fitness template (17 files)

---
 src/pages/Trainers.tsx | 89 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/pages/Trainers.tsx

diff --git a/src/pages/Trainers.tsx b/src/pages/Trainers.tsx
new file mode 100644
index 0000000..afd5890
--- /dev/null
+++ b/src/pages/Trainers.tsx
@@ -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>
+  );
+}
\ No newline at end of file