vibeasite-templates/template-fitness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: fitness template (17 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:58:58 +00:00
parent 181f18127e
commit 26ae913776
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Index.tsx
+5 -5
View File
@@ -82,9 +82,9 @@ export default function Index() {
</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`}>
<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`}>
<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>
@@ -141,7 +141,7 @@ export default function Index() {
{ 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"}`}>
<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>
@@ -157,7 +157,7 @@ export default function Index() {
</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"}`}>
<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>
@@ -178,7 +178,7 @@ export default function Index() {
{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`}>
<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>