318 lines
14 KiB
TypeScript
318 lines
14 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { ArrowLeft, Crown, Check, Star, Zap, Shield, Gift, Sparkles, Trophy, Users } from "lucide-react"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import Link from "next/link"
|
|||
|
|
import { useState } from "react"
|
|||
|
|
|
|||
|
|
export default function VipPage() {
|
|||
|
|
const [selectedPlan, setSelectedPlan] = useState("monthly")
|
|||
|
|
|
|||
|
|
const plans = [
|
|||
|
|
{
|
|||
|
|
id: "daily",
|
|||
|
|
name: "体验版",
|
|||
|
|
duration: "1天",
|
|||
|
|
price: 9.9,
|
|||
|
|
originalPrice: 19.9,
|
|||
|
|
discount: "限时5折",
|
|||
|
|
popular: false,
|
|||
|
|
badge: "试用",
|
|||
|
|
color: "from-blue-400 to-blue-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "monthly",
|
|||
|
|
name: "月度会员",
|
|||
|
|
duration: "1个月",
|
|||
|
|
price: 68,
|
|||
|
|
originalPrice: 98,
|
|||
|
|
discount: "7折优惠",
|
|||
|
|
popular: true,
|
|||
|
|
badge: "推荐",
|
|||
|
|
color: "from-purple-400 to-purple-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "quarterly",
|
|||
|
|
name: "季度会员",
|
|||
|
|
duration: "3个月",
|
|||
|
|
price: 168,
|
|||
|
|
originalPrice: 294,
|
|||
|
|
discount: "超值4.3折",
|
|||
|
|
popular: false,
|
|||
|
|
badge: "超值",
|
|||
|
|
color: "from-pink-400 to-pink-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "yearly",
|
|||
|
|
name: "年度会员",
|
|||
|
|
duration: "1年",
|
|||
|
|
price: 588,
|
|||
|
|
originalPrice: 1176,
|
|||
|
|
discount: "超值5折",
|
|||
|
|
popular: false,
|
|||
|
|
badge: "最划算",
|
|||
|
|
color: "from-orange-400 to-orange-500",
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const privileges = [
|
|||
|
|
{
|
|||
|
|
icon: <Crown className="w-6 h-6" />,
|
|||
|
|
title: "专属身份标识",
|
|||
|
|
desc: "VIP专属标识，彰显尊贵身份",
|
|||
|
|
color: "from-yellow-400 to-orange-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: <Zap className="w-6 h-6" />,
|
|||
|
|
title: "优先预约权",
|
|||
|
|
desc: "热门场馆优先预约，不再排队等待",
|
|||
|
|
color: "from-blue-400 to-blue-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: <Gift className="w-6 h-6" />,
|
|||
|
|
title: "专属折扣",
|
|||
|
|
desc: "场馆预订享受VIP专属折扣优惠",
|
|||
|
|
color: "from-green-400 to-green-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: <Shield className="w-6 h-6" />,
|
|||
|
|
title: "免费取消",
|
|||
|
|
desc: "预约后可免费取消，无违约金",
|
|||
|
|
color: "from-purple-400 to-purple-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: <Star className="w-6 h-6" />,
|
|||
|
|
title: "专属客服",
|
|||
|
|
desc: "7x24小时VIP专属客服服务",
|
|||
|
|
color: "from-pink-400 to-pink-500",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: <Check className="w-6 h-6" />,
|
|||
|
|
title: "高清回放",
|
|||
|
|
desc: "无限制观看高清比赛回放视频",
|
|||
|
|
color: "from-indigo-400 to-indigo-500",
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const stats = [
|
|||
|
|
{ label: "活跃用户", value: "50万+", icon: <Users className="w-5 h-5" /> },
|
|||
|
|
{ label: "满意度", value: "98%", icon: <Star className="w-5 h-5" /> },
|
|||
|
|
{ label: "场馆覆盖", value: "1000+", icon: <Trophy className="w-5 h-5" /> },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50">
|
|||
|
|
{/* Header with premium gradient */}
|
|||
|
|
<div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 py-4 sticky top-0 z-10 shadow-2xl">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<Link href="/profile">
|
|||
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
|||
|
|
<ArrowLeft className="w-5 h-5 text-white" />
|
|||
|
|
</div>
|
|||
|
|
</Link>
|
|||
|
|
<h1 className="text-xl font-bold text-white">VIP会员</h1>
|
|||
|
|
<div className="w-10 h-10"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* VIP Banner with enhanced styling */}
|
|||
|
|
<div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 pb-12 relative overflow-hidden">
|
|||
|
|
{/* Background decorations */}
|
|||
|
|
<div className="absolute top-0 left-0 w-32 h-32 bg-white/10 rounded-full -translate-x-16 -translate-y-16"></div>
|
|||
|
|
<div className="absolute top-20 right-0 w-24 h-24 bg-white/10 rounded-full translate-x-12"></div>
|
|||
|
|
<div className="absolute bottom-0 left-1/2 w-40 h-40 bg-white/5 rounded-full translate-x-20 translate-y-20"></div>
|
|||
|
|
|
|||
|
|
<div className="text-center relative z-10">
|
|||
|
|
<div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4 shadow-2xl">
|
|||
|
|
<Crown className="w-12 h-12 text-white" />
|
|||
|
|
</div>
|
|||
|
|
<h2 className="text-3xl font-bold text-white mb-2">LIMO VIP会员</h2>
|
|||
|
|
<p className="text-white/90 text-lg">开启专属运动体验</p>
|
|||
|
|
|
|||
|
|
{/* Stats */}
|
|||
|
|
<div className="flex justify-center space-x-8 mt-6">
|
|||
|
|
{stats.map((stat, index) => (
|
|||
|
|
<div key={index} className="text-center">
|
|||
|
|
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mx-auto mb-1">
|
|||
|
|
{stat.icon}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-white font-bold text-lg">{stat.value}</div>
|
|||
|
|
<div className="text-white/80 text-xs">{stat.label}</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Pricing Plans with premium styling */}
|
|||
|
|
<div className="px-4 -mt-8 relative z-10">
|
|||
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
|||
|
|
<div className="text-center mb-6">
|
|||
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-2">选择会员套餐</h3>
|
|||
|
|
<p className="text-gray-500">解锁更多专属特权</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
{plans.map((plan) => (
|
|||
|
|
<div
|
|||
|
|
key={plan.id}
|
|||
|
|
onClick={() => setSelectedPlan(plan.id)}
|
|||
|
|
className={`relative border-2 rounded-3xl p-5 cursor-pointer transition-all duration-300 ${
|
|||
|
|
selectedPlan === plan.id
|
|||
|
|
? "border-transparent bg-gradient-to-br from-[#05C7C7]/10 to-[#04B5B5]/10 shadow-xl scale-[1.02]"
|
|||
|
|
: "border-gray-200/50 bg-white/50 hover:border-gray-300/50 hover:shadow-lg"
|
|||
|
|
} ${plan.popular ? "ring-2 ring-yellow-400/50" : ""}`}
|
|||
|
|
>
|
|||
|
|
{plan.popular && (
|
|||
|
|
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
|||
|
|
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-4 py-1 rounded-full text-xs font-bold shadow-lg">
|
|||
|
|
<Sparkles className="w-3 h-3 inline mr-1" />
|
|||
|
|
最受欢迎
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div
|
|||
|
|
className={`w-12 h-12 bg-gradient-to-r ${plan.color} rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg`}
|
|||
|
|
>
|
|||
|
|
<Crown className="w-6 h-6 text-white" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h4 className="font-bold text-gray-900 mb-1 text-lg">{plan.name}</h4>
|
|||
|
|
<p className="text-sm text-gray-500 mb-3">{plan.duration}</p>
|
|||
|
|
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<span className="text-3xl font-bold text-[#05C7C7]">¥{plan.price}</span>
|
|||
|
|
<span className="text-sm text-gray-400 line-through ml-2">¥{plan.originalPrice}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-gradient-to-r from-red-100 to-red-50 text-red-600 px-3 py-1 rounded-xl text-xs font-bold border border-red-200/50">
|
|||
|
|
{plan.discount}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{selectedPlan === plan.id && (
|
|||
|
|
<div className="absolute top-3 right-3">
|
|||
|
|
<div className="w-6 h-6 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full flex items-center justify-center shadow-lg">
|
|||
|
|
<Check className="w-4 h-4 text-white" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* VIP Privileges with enhanced styling */}
|
|||
|
|
<div className="px-4 mt-8">
|
|||
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
|||
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center justify-center">
|
|||
|
|
<div className="w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center mr-3 shadow-lg">
|
|||
|
|
<Crown className="w-5 h-5 text-white" />
|
|||
|
|
</div>
|
|||
|
|
VIP专属特权
|
|||
|
|
</h3>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 gap-4">
|
|||
|
|
{privileges.map((privilege, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-start space-x-4 p-4 bg-gradient-to-r from-gray-50/50 to-white/50 rounded-2xl border border-gray-100/50 transition-all duration-300 hover:shadow-lg hover:scale-[1.01]"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={`w-12 h-12 bg-gradient-to-r ${privilege.color} rounded-2xl flex items-center justify-center text-white flex-shrink-0 shadow-lg`}
|
|||
|
|
>
|
|||
|
|
{privilege.icon}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h4 className="font-bold text-gray-900 text-lg mb-1">{privilege.title}</h4>
|
|||
|
|
<p className="text-sm text-gray-600 leading-relaxed">{privilege.desc}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Testimonials */}
|
|||
|
|
<div className="px-4 mt-8">
|
|||
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
|||
|
|
<h3 className="text-xl font-bold text-gray-900 mb-4 text-center">用户好评</h3>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-2xl border border-blue-100/50">
|
|||
|
|
<div className="flex items-center space-x-2 mb-2">
|
|||
|
|
<div className="w-8 h-8 bg-gradient-to-r from-blue-400 to-blue-500 rounded-full flex items-center justify-center">
|
|||
|
|
<span className="text-white text-sm font-bold">张</span>
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold text-gray-900">张先生</span>
|
|||
|
|
<div className="flex space-x-1">
|
|||
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|||
|
|
<Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-gray-600">"VIP服务真的很棒，预约场馆再也不用排队了！"</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-2xl border border-green-100/50">
|
|||
|
|
<div className="flex items-center space-x-2 mb-2">
|
|||
|
|
<div className="w-8 h-8 bg-gradient-to-r from-green-400 to-green-500 rounded-full flex items-center justify-center">
|
|||
|
|
<span className="text-white text-sm font-bold">李</span>
|
|||
|
|
</div>
|
|||
|
|
<span className="font-semibold text-gray-900">李女士</span>
|
|||
|
|
<div className="flex space-x-1">
|
|||
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|||
|
|
<Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-gray-600">"专属客服响应很快，解决问题很及时，值得推荐！"</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Purchase Section with enhanced styling */}
|
|||
|
|
<div className="px-4 mt-8 pb-8">
|
|||
|
|
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
|||
|
|
<div className="flex items-center justify-between mb-6 p-4 bg-gradient-to-r from-gray-50 to-white rounded-2xl border border-gray-100/50">
|
|||
|
|
<span className="text-gray-600 font-medium">选择套餐:</span>
|
|||
|
|
<div className="text-right">
|
|||
|
|
<div className="font-bold text-gray-900 text-lg">{plans.find((p) => p.id === selectedPlan)?.name}</div>
|
|||
|
|
<div className="text-2xl font-bold text-[#05C7C7]">
|
|||
|
|
¥{plans.find((p) => p.id === selectedPlan)?.price}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button className="w-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 hover:from-yellow-500 hover:via-orange-600 hover:to-red-600 text-white py-5 rounded-2xl font-bold text-lg shadow-2xl shadow-orange-500/30 transition-all duration-300 hover:scale-[1.02] relative overflow-hidden">
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
|
|||
|
|
<Crown className="w-6 h-6 mr-2" />
|
|||
|
|
立即开通VIP会员
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-center space-x-4 mt-4 text-xs text-gray-400">
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
<Shield className="w-3 h-3" />
|
|||
|
|
<span>安全支付</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
<Check className="w-3 h-3" />
|
|||
|
|
<span>随时取消</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
|||
|
|
<span>7天无理由退款</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="text-xs text-gray-400 text-center mt-4">开通即表示同意《VIP会员服务协议》</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Bottom Spacing */}
|
|||
|
|
<div className="h-8"></div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|