2569718930@qq.com
106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import {
|
|
ArrowRight,
|
|
BarChart3,
|
|
Crown,
|
|
Lock,
|
|
ShieldCheck,
|
|
Sparkles,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { useI18n } from "@/hooks/useI18n";
|
|
|
|
type ProFeaturePaywallProps = {
|
|
feature: "today" | "history" | "future";
|
|
};
|
|
|
|
function getFeatureLabel(
|
|
locale: "zh-CN" | "en-US",
|
|
feature: "today" | "history" | "future",
|
|
) {
|
|
if (locale === "en-US") {
|
|
if (feature === "today") return "Intraday Analysis";
|
|
if (feature === "history") return "History Reconciliation";
|
|
return "Future-date Analysis";
|
|
}
|
|
if (feature === "today") return "今日日内分析";
|
|
if (feature === "history") return "历史对账";
|
|
return "未来日期分析";
|
|
}
|
|
|
|
export function ProFeaturePaywall({ feature }: ProFeaturePaywallProps) {
|
|
const { locale } = useI18n();
|
|
const featureLabel = getFeatureLabel(locale, feature);
|
|
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="-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-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"
|
|
>
|
|
<item.icon size={17} className="text-cyan-300" />
|
|
<span className="text-sm text-slate-200">{item.text}</span>
|
|
</div>
|
|
))}
|
|
</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>
|
|
</div>
|
|
);
|
|
}
|