From 5c3de0dbe09a4462ef36ef5ce9db972814f9d764 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Fri, 13 Mar 2026 07:40:09 +0800
Subject: [PATCH] feat: Add dashboard layout with dark theme and Pro feature
 paywall component.

---
 .../components/dashboard/Dashboard.module.css |   4 +-
 .../dashboard/ProFeaturePaywall.tsx           | 134 ++++++++++--------
 2 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/frontend/components/dashboard/Dashboard.module.css b/frontend/components/dashboard/Dashboard.module.css
index eedb67ba..e0fbe487 100644
--- a/frontend/components/dashboard/Dashboard.module.css
+++ b/frontend/components/dashboard/Dashboard.module.css
@@ -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;
diff --git a/frontend/components/dashboard/ProFeaturePaywall.tsx b/frontend/components/dashboard/ProFeaturePaywall.tsx
index 86d3d5d1..da7692f1 100644
--- a/frontend/components/dashboard/ProFeaturePaywall.tsx
+++ b/frontend/components/dashboard/ProFeaturePaywall.tsx
@@ -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>
   );