feat: Implement subscription-based premium features, payment processing, and enhanced dashboard components.

2026-03-13 06:41:33 +08:00
parent f7b649bb0a
commit 54c4a26162
19 changed files with 427 additions and 90 deletions
@@ -0,0 +1,105 @@
+"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>
+  );
+}