feat: Add dashboard layout with dark theme and Pro feature paywall component.
This commit is contained in:
2569718930@qq.com
@@ -1431,8 +1431,8 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(2, 6, 23, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -36,69 +36,85 @@ export function ProFeaturePaywall({ feature }: ProFeaturePaywallProps) {
|
||||
const isEn = locale === "en-US";
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-4xl rounded-[2rem] border border-white/10 bg-gradient-to-b from-slate-800/95 to-slate-950/95 p-8 md:p-10">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 -translate-y-12 items-center justify-center rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-400 text-white shadow-xl shadow-amber-500/20">
|
||||
<Crown size={28} />
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-center py-10 md:py-16">
|
||||
<div className="relative w-full max-w-4xl rounded-[2.5rem] border border-white/10 bg-slate-900/60 backdrop-blur-xl p-8 shadow-2xl md:p-12">
|
||||
<div className="absolute left-1/2 top-0 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[1.5rem] border-4 border-slate-950 bg-gradient-to-tr from-amber-500 via-orange-500 to-yellow-400 text-white shadow-2xl shadow-orange-500/40">
|
||||
<Crown size={32} fill="currentColor" />
|
||||
</div>
|
||||
|
||||
<div className="-mt-6 text-center">
|
||||
<h3 className="text-3xl font-bold text-white">
|
||||
{isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
|
||||
</h3>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-base text-slate-300">
|
||||
{isEn
|
||||
? `This module (${featureLabel}) is available for subscribers only. Upgrade to unlock advanced weather intelligence.`
|
||||
: `当前模块（${featureLabel}）仅对订阅用户开放。升级后可解锁更完整的气象分析能力。`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 text-center">
|
||||
<h3 className="text-3xl font-extrabold tracking-tight text-white md:text-4xl">
|
||||
{isEn ? "Unlock PolyWeather Pro" : "开启 PolyWeather Pro"}
|
||||
</h3>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-300">
|
||||
{isEn
|
||||
? `This module (${featureLabel}) is available for subscribers only. Upgrade to unlock advanced weather intelligence.`
|
||||
: `当前模块（${featureLabel}）仅对订阅用户开放。升级后可解锁更完整的气象分析能力。`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
icon: Zap,
|
||||
text: isEn ? "Real-time radar and lightning tracking" : "实时雷达与闪电追踪",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
text: isEn ? "15-day high-precision trend analysis" : "15 天高精度趋势分析",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
text: isEn ? "Pro-grade station raw data" : "专业级气象站原始数据",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: isEn ? "Ad-free experience across all surfaces" : "全平台无广告体验",
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3"
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
icon: Zap,
|
||||
text: isEn
|
||||
? "Real-time radar and lightning tracking"
|
||||
: "实时雷达与闪电追踪",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
text: isEn
|
||||
? "15-day high-precision trend analysis"
|
||||
: "15 天高精度趋势分析",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
text: isEn
|
||||
? "Pro-grade station raw data"
|
||||
: "专业级气象站原始数据",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: isEn
|
||||
? "Ad-free experience across all surfaces"
|
||||
: "全平台无广告体验",
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.text}
|
||||
className="flex items-center gap-4 rounded-2xl border border-white/5 bg-white/5 px-5 py-4 transition hover:bg-white/10"
|
||||
>
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-300">
|
||||
<item.icon size={20} />
|
||||
</div>
|
||||
<span className="text-base font-medium text-slate-200">
|
||||
{item.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<Link
|
||||
href="/account"
|
||||
className="group flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5 text-xl font-bold text-white shadow-xl shadow-blue-600/20 transition hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98]"
|
||||
>
|
||||
<item.icon size={17} className="text-cyan-300" />
|
||||
<span className="text-sm text-slate-200">{item.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isEn ? "Upgrade now - $5 / month" : "立即升级 - $5 / 月"}
|
||||
<ArrowRight
|
||||
size={22}
|
||||
className="ml-2 transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
href="/account"
|
||||
className="group flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-4 text-lg font-semibold text-white shadow-lg shadow-blue-600/20 transition hover:from-blue-500 hover:to-indigo-500"
|
||||
>
|
||||
{isEn ? "Upgrade now - $5 / month" : "立即升级 - $5 / 月"}
|
||||
<ArrowRight
|
||||
size={19}
|
||||
className="ml-2 transition-transform group-hover:translate-x-1"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border-t border-white/10 pt-4 text-center text-xs text-slate-400">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Lock size={12} />
|
||||
{isEn ? "Payments are secured with AES-256 encryption" : "所有交易均经过 AES-256 加密保护"}
|
||||
</span>
|
||||
<div className="mt-8 border-t border-white/10 pt-6 text-center text-xs text-slate-400">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Lock size={14} className="text-slate-500" />
|
||||
{isEn
|
||||
? "Payments are secured with AES-256 encryption"
|
||||
: "所有交易均经过 AES-256 加密保护"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user