From 5a68d88fa9a970bc29a29663e5467f89e33b4dac Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Tue, 28 Jul 2026 09:29:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=BB=B7=E9=A1=B5=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=EF=BC=9ASiliconFlow=E9=A3=8E=E6=A0=BC=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=20+=20=E7=82=AB=E9=85=B7=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除侧边栏，改为全宽布局，顶部Hero区域（渐变标题+搜索框+热门标签）
- 新增横向筛选pill按钮（模型类型/供应商/服务商）
- 卡片网格3列响应式布局，悬停发光+上浮+微缩放效果
- 新增浮动粒子背景、卡片入场逐个动画、搜索框光晕脉冲
- 新增流光扫过效果、价格数字脉冲发光
- 新增DeepSeek-V4/MiniMax模型默认倍率
- 更新setup.ps1支持DeepSeek+Minimax双供应商配置
---
 setting/ratio_setting/model_ratio.go          |    8 +
 setup.ps1                                     |   56 +
 .../model-pricing/layout/ModelsContent.jsx    |  181 ++-
 .../model-pricing/layout/PricingPage.jsx      |   23 +-
 .../view/card/PricingCardView.jsx             |  375 +++---
 .../model-pricing/view/table/PricingTable.jsx |    8 +-
 .../view/table/PricingTableColumns.jsx        |   16 +-
 web/src/index.css                             |  865 +++++++++----
 web/src/pages/Home/index.jsx                  | 1105 ++++++++---------
 9 files changed, 1532 insertions(+), 1105 deletions(-)
 create mode 100644 setup.ps1

diff --git a/setting/ratio_setting/model_ratio.go b/setting/ratio_setting/model_ratio.go
index 7b4455d..6004764 100644
--- a/setting/ratio_setting/model_ratio.go
+++ b/setting/ratio_setting/model_ratio.go
@@ -274,6 +274,14 @@ var defaultModelRatio = map[string]float64{
 	"deepseek-ai/DeepSeek-V3-0324":            0.8,
 	"deepseek-ai/DeepSeek-V3.1":               0.8,
 	"DeepSeek-V3.2":                           0.8,
+	"deepseek-V4":                             1.0,
+	"deepseek-v4-Flash":                       0.2,
+	// MiniMax
+	"MiniMax-M2.1":               1.0,
+	"MiniMax-M2.1-highspeed":     0.5,
+	"MiniMax-M2":                 0.8,
+	"MiniMax-M2.5":               1.2,
+	"MiniMax-M2.5-highspeed":     0.6,
 }
 
 var defaultModelPrice = map[string]float64{
diff --git a/setup.ps1 b/setup.ps1
new file mode 100644
index 0000000..83d946a
--- /dev/null
+++ b/setup.ps1
@@ -0,0 +1,56 @@
+$OutputEncoding = [System.Text.Encoding]::UTF8
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+
+# Login
+$loginResp = Invoke-WebRequest -Uri "http://localhost:3000/api/user/login" -Method POST -Body '{"username":"admin","password":"admin12345"}' -ContentType "application/json; charset=utf-8" -UseBasicParsing -SessionVariable ws
+Write-Host "Login OK"
+
+$hdr = @{"New-Api-User"="1"}
+
+# Create channels
+$ch1 = '{"mode":"single","channel":{"name":"DeepSeek","type":43,"base_url":"https://api.deepseek.com","key":"sk-ds-test","models":"deepseek-V4,deepseek-v4-Flash","status":1,"supplier_type":"\u516c\u6709\u4e91","other":"{}","setting":"{}"}}'
+$ch2 = '{"mode":"single","channel":{"name":"Minimax","type":35,"base_url":"https://api.minimax.chat","key":"sk-mm-test","models":"MiniMax-M2.1,MiniMax-M2.1-highspeed,MiniMax-M2,MiniMax-M2.5,MiniMax-M2.5-highspeed","status":1,"supplier_type":"\u516c\u6709\u4e91","other":"{}","setting":"{}"}}'
+
+foreach ($ch in @($ch1,$ch2)) {
+  $bytes = [System.Text.Encoding]::UTF8.GetBytes($ch)
+  $r = Invoke-WebRequest -Uri "http://localhost:3000/api/channel/" -Method POST -Body $bytes -ContentType "application/json; charset=utf-8" -UseBasicParsing -WebSession $ws -Headers $hdr
+  Write-Host "Channel created"
+}
+
+# Sync abilities
+$m1 = [System.Text.Encoding]::UTF8.GetBytes('{"models":["deepseek-V4","deepseek-v4-Flash"]}')
+$m2 = [System.Text.Encoding]::UTF8.GetBytes('{"models":["MiniMax-M2.1","MiniMax-M2.1-highspeed","MiniMax-M2","MiniMax-M2.5","MiniMax-M2.5-highspeed"]}')
+Invoke-WebRequest -Uri "http://localhost:3000/api/channel/1/models" -Method PATCH -Body $m1 -ContentType "application/json; charset=utf-8" -UseBasicParsing -WebSession $ws -Headers $hdr | Out-Null
+Invoke-WebRequest -Uri "http://localhost:3000/api/channel/2/models" -Method PATCH -Body $m2 -ContentType "application/json; charset=utf-8" -UseBasicParsing -WebSession $ws -Headers $hdr | Out-Null
+Write-Host "Abilities synced"
+
+# Create model metas
+$names = @("deepseek-V4","deepseek-v4-Flash","MiniMax-M2.1","MiniMax-M2.1-highspeed","MiniMax-M2","MiniMax-M2.5","MiniMax-M2.5-highspeed")
+foreach ($n in $names) {
+  $body = [System.Text.Encoding]::UTF8.GetBytes("{`"model_name`":`"$n`",`"status`":1}")
+  Invoke-WebRequest -Uri "http://localhost:3000/api/models/" -Method POST -Body $body -ContentType "application/json; charset=utf-8" -UseBasicParsing -WebSession $ws -Headers $hdr | Out-Null
+  Write-Host "Meta: $n"
+}
+
+# Seed test results (required for pricing page to display data)
+$testModels = @(
+  @{ch=1; ms=@("deepseek-V4","deepseek-v4-Flash"); msrt=200},
+  @{ch=2; ms=@("MiniMax-M2.1","MiniMax-M2.1-highspeed","MiniMax-M2","MiniMax-M2.5","MiniMax-M2.5-highspeed"); msrt=300}
+)
+foreach ($g in $testModels) {
+  foreach ($m in $g.ms) {
+    $body = [System.Text.Encoding]::UTF8.GetBytes("{`"channel_id`":$($g.ch),`"model_name`":`"$m`",`"manual_display_response_time`":$($g.msrt),`"manual_stability_grade`":5}")
+    Invoke-WebRequest -Uri "http://localhost:3000/api/channel/model-test-result-display" -Method PUT -Body $body -ContentType "application/json; charset=utf-8" -UseBasicParsing -WebSession $ws -Headers $hdr | Out-Null
+    Write-Host "Test result: ch=$($g.ch) $m"
+  }
+}
+
+# Reset ratios
+$rr = Invoke-WebRequest -Uri "http://localhost:3000/api/option/rest_model_ratio" -Method POST -UseBasicParsing -WebSession $ws -Headers $hdr
+Write-Host "Ratio reset: $($rr.Content)"
+
+# Check
+$resp = Invoke-WebRequest -Uri "http://localhost:3000/api/pricing" -UseBasicParsing -WebSession $ws -Headers $hdr
+$data = $resp.Content | ConvertFrom-Json
+Write-Host "`nPricing data count: $($data.data.Count)"
+$data.data | ForEach-Object { Write-Host "  $($_.model_name)" }
diff --git a/web/src/components/table/model-pricing/layout/ModelsContent.jsx b/web/src/components/table/model-pricing/layout/ModelsContent.jsx
index 50bdc36..bec5c20 100644
--- a/web/src/components/table/model-pricing/layout/ModelsContent.jsx
+++ b/web/src/components/table/model-pricing/layout/ModelsContent.jsx
@@ -6,6 +6,14 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
 For commercial licensing, please contact support@quantumnous.com
 */
 
@@ -13,15 +21,6 @@ import React from 'react';
 import { Search } from 'lucide-react';
 import PricingCardView from '../view/card/PricingCardView';
 
-// 顶部 Tab 到 tag 值的映射
-const TAB_TO_TAG = {
-  all: 'all',
-  text: '文本',
-  image: '图片',
-  audio: '音频',
-  video: '视频',
-};
-
 const TYPE_TABS = [
   { key: 'all', labelKey: '全部' },
   { key: 'text', labelKey: '文本' },
@@ -30,9 +29,20 @@ const TYPE_TABS = [
   { key: 'video', labelKey: '视频' },
 ];
 
+const TAB_TO_TAG = {
+  all: 'all',
+  text: '文本',
+  image: '图片',
+  audio: '音频',
+  video: '视频',
+};
+
 const ModelsContent = ({
   filteredModels,
+  models,
   filterTag, setFilterTag,
+  filterVendor, setFilterVendor,
+  filterSupplierType, setFilterSupplierType,
   searchValue, setSearchValue,
   loading,
   isMobile,
@@ -40,48 +50,161 @@ const ModelsContent = ({
   t,
   ...cardProps
 }) => {
-  // 根据当前 filterTag 反推激活的 tab key
   const activeTabKey = filterTag === 'all' ? 'all'
     : (Object.entries(TAB_TO_TAG).find(([, v]) => v === filterTag)?.[0] || 'all');
 
+  // Get unique vendors for filter pills
+  const vendors = React.useMemo(() => {
+    if (!models) return [];
+    const names = [...new Set(models.map((m) => m.vendor_name).filter(Boolean))].sort();
+    return names;
+  }, [models]);
+
+  // Get unique supplier types
+  const supplierTypes = React.useMemo(() => {
+    if (!models) return [];
+    const types = new Set();
+    models.forEach((m) => {
+      (m.channel_list || []).forEach((ch) => {
+        if (ch.supplier_type) types.add(ch.supplier_type);
+      });
+    });
+    return [...types].sort();
+  }, [models]);
+
   return (
-    <>
-      {/* Type Tabs */}
-      <div className='models-tabs-bar'>
-        {TYPE_TABS.map((tab) => (
-          <button
-            key={tab.key}
-            className={`models-tab-btn${activeTabKey === tab.key ? ' active' : ''}`}
-            onClick={() => setFilterTag(TAB_TO_TAG[tab.key])}
-          >
-            {t(tab.labelKey)}
-          </button>
+    <div className='sf-pricing-inner'>
+      {/* Floating Particles */}
+      <div className='sf-particles'>
+        {Array.from({ length: 8 }, (_, i) => (
+          <div key={i} className='sf-particle' />
         ))}
-        <div className='flex-1' />
-        <div className='relative'>
-          <Search size={15} className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/60' />
+      </div>
+
+      {/* Hero Section */}
+      <div className='sf-hero'>
+        <h1 className='sf-hero-title'>
+          {t('探索最适合的 AI 模型')}
+        </h1>
+        <p className='sf-hero-subtitle'>
+          {t('为您的应用找到最优质的模型与服务')}
+        </p>
+
+        {/* Search Bar */}
+        <div className='sf-search-bar'>
+          <Search size={16} className='sf-search-icon' />
           <input
             type='text'
-            placeholder={t('搜索模型名称...')}
+            placeholder={t('搜索模型名称、供应商、应用场景...')}
             value={searchValue}
             onChange={(e) => setSearchValue(e.target.value)}
-            className='w-48 bg-muted/30 border border-input rounded-lg pl-9 pr-3 py-1.5 text-sm text-foreground placeholder-muted-foreground/50 focus:outline-none focus:border-ring focus:bg-muted/50 transition-all'
+            className='sf-search-input'
           />
         </div>
+
+        {/* Hot Models Quick Tags */}
+        {models && models.length > 0 && (
+          <div className='sf-hot-tags'>
+            <span className='sf-hot-label'>{t('热门模型')}</span>
+            {models.slice(0, isMobile ? 4 : 7).map((m) => (
+              <button
+                key={m.model_name}
+                className='sf-hot-tag'
+                onClick={() => setSearchValue(m.model_name)}
+              >
+                {m.model_name}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Filter Section */}
+      <div className='sf-filter-section'>
+        {/* Type Filters */}
+        <div className='sf-filter-row'>
+          <span className='sf-filter-label'>{t('模型类型')}</span>
+          <div className='sf-filter-pills'>
+            {TYPE_TABS.map((tab) => (
+              <button
+                key={tab.key}
+                className={`sf-filter-pill${activeTabKey === tab.key ? ' active' : ''}`}
+                onClick={() => setFilterTag(TAB_TO_TAG[tab.key])}
+              >
+                {t(tab.labelKey)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Vendor Filters */}
+        {vendors.length > 0 && (
+          <div className='sf-filter-row'>
+            <span className='sf-filter-label'>{t('供应商')}</span>
+            <div className='sf-filter-pills'>
+              <button
+                className={`sf-filter-pill${filterVendor === 'all' ? ' active' : ''}`}
+                onClick={() => setFilterVendor('all')}
+              >
+                {t('全部')}
+              </button>
+              {vendors.map((v) => (
+                <button
+                  key={v}
+                  className={`sf-filter-pill${filterVendor === v ? ' active' : ''}`}
+                  onClick={() => setFilterVendor(filterVendor === v ? 'all' : v)}
+                >
+                  {v}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Supplier Type Filters */}
+        {supplierTypes.length > 0 && (
+          <div className='sf-filter-row'>
+            <span className='sf-filter-label'>{t('服务商')}</span>
+            <div className='sf-filter-pills'>
+              <button
+                className={`sf-filter-pill${filterSupplierType === 'all' ? ' active' : ''}`}
+                onClick={() => setFilterSupplierType('all')}
+              >
+                {t('全部')}
+              </button>
+              {supplierTypes.map((type) => (
+                <button
+                  key={type}
+                  className={`sf-filter-pill${filterSupplierType === type ? ' active' : ''}`}
+                  onClick={() => setFilterSupplierType(filterSupplierType === type ? 'all' : type)}
+                >
+                  {type}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Results Header */}
+      <div className='sf-results-header'>
+        <h2 className='sf-results-title'>
+          {t('为您找到')} <span className='sf-results-count'>{filteredModels?.length || 0}</span> {t('个模型')}
+        </h2>
       </div>
 
       {/* Model Cards Grid */}
-      <div className='flex-1 overflow-y-auto'>
+      <div className='sf-cards-container'>
         <PricingCardView
           filteredModels={filteredModels}
           loading={loading}
           blurPricing={blurPricing}
           t={t}
-          gridCols={2}
+          gridCols={isMobile ? 1 : 3}
           {...cardProps}
         />
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/web/src/components/table/model-pricing/layout/PricingPage.jsx b/web/src/components/table/model-pricing/layout/PricingPage.jsx
index 5641e16..384ec27 100644
--- a/web/src/components/table/model-pricing/layout/PricingPage.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingPage.jsx
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useContext, useMemo } from 'react';
 import { ImagePreview } from '@douyinfe/semi-ui';
-import ModelsSidebar from './ModelsSidebar';
 import ModelsContent from './ModelsContent';
 import ModelDetailSideSheet from '../modal/ModelDetailSideSheet';
 import { useModelPricingData } from '../../../../hooks/model-pricing/useModelPricingData';
@@ -59,22 +58,12 @@ const PricingPage = () => {
   };
 
   return (
-    <div className='bg-background'>
-      <div className='models-page-layout'>
-        {!isMobile && (
-          <aside className='models-sidebar'>
-            <ModelsSidebar {...allProps} />
-          </aside>
-        )}
-
-        <main className='models-content'>
-          <ModelsContent
-            {...allProps}
-            isMobile={isMobile}
-            sidebarProps={allProps}
-          />
-        </main>
-      </div>
+    <div className='sf-pricing-page'>
+      <ModelsContent
+        {...allProps}
+        isMobile={isMobile}
+        sidebarProps={allProps}
+      />
 
       <ImagePreview
         src={pricingData.modalImageUrl}
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index baedb40..a09c413 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import {
-  Card,
   Empty,
   Pagination,
   Avatar,
@@ -39,13 +38,6 @@ import {
 import PricingCardSkeleton from './PricingCardSkeleton';
 import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
 import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
-const CARD_STYLES = {
-  container:
-    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
-  icon: 'w-8 h-8 flex items-center justify-center',
-  selected: 'border-blue-500 bg-blue-50',
-  default: 'border-gray-200 hover:border-gray-300',
-};
 
 const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
@@ -72,7 +64,7 @@ const PricingCardView = ({
   channelVideoRatio = {},
   channelVideoCompletionRatio = {},
   channelVideoPrice = {},
-  gridCols = 0, // 当 > 0 时使用 grid 布局（如 gridCols=2 表示 2 列）
+  gridCols = 3,
 }) => {
   const showSkeleton = useMinimumLoadingTime(loading);
   const startIndex = (currentPage - 1) * pageSize;
@@ -93,9 +85,9 @@ const PricingCardView = ({
         <span
           key={idx}
           style={{
-            color: '#ef4444',
+            color: '#1976d2',
             fontWeight: 700,
-            backgroundColor: 'rgba(239, 68, 68, 0.12)',
+            backgroundColor: 'rgba(25, 118, 210, 0.12)',
             borderRadius: 4,
           }}
         >
@@ -119,7 +111,6 @@ const PricingCardView = ({
       groupRatio,
     );
 
-    // 辅助函数：格式化价格
     const formatPrice = (priceUSD) => {
       const rawDisplayPrice = displayPrice(priceUSD);
       const unitDivisor = tokenUnit === 'K' ? 1000 : 1;
@@ -141,7 +132,7 @@ const PricingCardView = ({
         }
       }
 
-      return { value: parseFloat(numericPrice.toFixed(2)), symbol };
+      return { value: parseFloat(numericPrice.toFixed(4)), symbol };
     };
 
     const modelHasVideoRatio =
@@ -157,7 +148,6 @@ const PricingCardView = ({
       model.video_price !== undefined &&
       Number.isFinite(Number(model.video_price));
 
-    // 提取所有通道的价格（与 relay 一致：ch.model_ratio 已含渠道折扣；再乘分组倍率）
     const prices = {
       input: [],
       output: [],
@@ -181,18 +171,6 @@ const PricingCardView = ({
       const cid = ch.channel_id;
       const mname = model.model_name;
 
-      // ============================================================
-      // 新计费公式参数：
-      //   ch.model_ratio / ch.model_price 为原始渠道倍率（后端不再预乘成本折扣）
-      //   成本折扣率 = price_discount_percent / 100
-      //   加价倍率   = markup_discount_rate / 100
-      //
-      //   输入   = (ch.model_ratio × costDisc + globalMr × markupRate) × 2 × groupRatio
-      //   输出   = (ch.model_ratio × cr × costDisc + globalMr × globalCR × markupRate) × 2 × groupRatio
-      //   缓存读 = (ch.model_ratio × cacheRatio × costDisc + globalMr × globalCacheR × markupRate) × 2 × groupRatio
-      //   缓存写 = (ch.model_ratio × createCacheRatio × costDisc + globalMr × globalCreateCacheR × markupRate) × 2 × groupRatio
-      //   固定价 = (ch.model_price × costDisc + globalMp × markupRate) × groupRatio
-      // ============================================================
       const priceDiscountPercent =
         ch.price_discount_percent != null ? ch.price_discount_percent : 100;
       const markupDiscountPercent = ch.markup_discount_rate || 0;
@@ -212,7 +190,6 @@ const PricingCardView = ({
         originalPrices.videoFlat.push(formatPrice(flatUsd));
       }
 
-      // 全局子倍率（用于加价侧）
       const globalCR = model.completion_ratio || 0;
       const globalCacheR =
         model.cache_ratio != null ? Number(model.cache_ratio) : 0;
@@ -236,7 +213,6 @@ const PricingCardView = ({
         globalCreateCacheRatio: globalCreateCacheR,
       });
 
-      // 按量计费
       if (model.quota_type === 0) {
         if (ch.model_ratio !== undefined && ch.model_ratio !== null) {
           prices.input.push(
@@ -244,7 +220,6 @@ const PricingCardView = ({
           );
           originalPrices.input.push(formatPrice(billingRates.inputRatioPrice));
 
-          // 输出价格：渠道配置了 completion_ratio 即可展示
           if (
             ch.completion_ratio !== undefined &&
             ch.completion_ratio !== null
@@ -257,7 +232,6 @@ const PricingCardView = ({
             );
           }
 
-          // 缓存读取价格：渠道配置了 cache_ratio 即可展示
           if (
             ch.cache_ratio !== undefined &&
             ch.cache_ratio !== null
@@ -268,7 +242,6 @@ const PricingCardView = ({
             originalPrices.cache.push(formatPrice(billingRates.cacheRatioPrice));
           }
 
-          // 缓存创建价格：渠道配置了 create_cache_ratio 即可展示
           if (
             ch.create_cache_ratio !== undefined &&
             ch.create_cache_ratio !== null
@@ -321,9 +294,7 @@ const PricingCardView = ({
             );
           }
         }
-      }
-      // 按次计费
-      else if (model.quota_type === 1 || ch.quota_type === 1) {
+      } else if (model.quota_type === 1 || ch.quota_type === 1) {
         if (!skipSimpleFixed && ch.model_price !== undefined && ch.model_price !== null) {
           prices.fixed.push(
             formatPrice(billingRates.effModelPrice * usedGroupRatio),
@@ -333,7 +304,6 @@ const PricingCardView = ({
       }
     });
 
-    // 根数据价格（用同一口径计算，用于与 channel 价格比较）
     const rootPrices = {};
     if (model.quota_type === 0) {
       if (model.model_ratio !== undefined && model.model_ratio !== null) {
@@ -386,7 +356,6 @@ const PricingCardView = ({
       rootPrices.videoFlat = formatPrice(Number(model.video_price));
     }
 
-    // 若根价格高于任意一个 channel 的对应价格，则返回划线原价与折扣
     const getOriginal = (rootPrice, channelPriceArray) => {
       if (!rootPrice || !channelPriceArray || channelPriceArray.length === 0)
         return null;
@@ -401,7 +370,6 @@ const PricingCardView = ({
       return null;
     };
 
-    // 计算范围
     const calculateRange = (priceArray) => {
       if (priceArray.length === 0) return null;
       if (priceArray.length === 1) {
@@ -467,7 +435,6 @@ const PricingCardView = ({
     };
   };
 
-  // 获取模型的价格项（优先使用 channel 价格）
   const getModelPriceItemsForCard = (model, priceData) => {
     const hint = model.video_flat_clip_hint;
     const useTieredVideoFlat =
@@ -485,12 +452,10 @@ const PricingCardView = ({
       skipSimpleFixed: useTieredImagePerImage,
     });
 
-    // 如果没有 channel 价格，使用原有逻辑
     if (!channelPrices) {
       return getModelPriceItems(priceData, t, siteDisplayType);
     }
 
-    // 使用 channel 价格构建价格项
     const items = [];
     const {
       input,
@@ -507,7 +472,6 @@ const PricingCardView = ({
       quotaType,
     } = channelPrices;
 
-    // 按次计费
     if (quotaType === 1 && fixed) {
       items.push({
         key: 'fixed',
@@ -518,13 +482,11 @@ const PricingCardView = ({
         suffix: fixedSuffix,
         original: original?.fixed,
       });
-    }
-    // 按量计费
-    else {
+    } else {
       if (input) {
         items.push({
           key: 'input',
-          label: t('输入价格'),
+          label: t('输入'),
           value:
             input.single ||
             `${input.symbol}${input.min} ~ ${input.symbol}${input.max}`,
@@ -536,7 +498,7 @@ const PricingCardView = ({
       if (output) {
         items.push({
           key: 'output',
-          label: t('输出价格'),
+          label: t('输出'),
           value:
             output.single ||
             `${output.symbol}${output.min} ~ ${output.symbol}${output.max}`,
@@ -548,7 +510,7 @@ const PricingCardView = ({
       if (videoToken) {
         items.push({
           key: 'video-token',
-          label: t('视频（倍率计价）'),
+          label: t('视频'),
           value:
             videoToken.single ||
             `${videoToken.symbol}${videoToken.min} ~ ${videoToken.symbol}${videoToken.max}`,
@@ -556,33 +518,12 @@ const PricingCardView = ({
           original: original?.videoToken,
         });
       }
-
-      // 卡片表面仅展示输入/输出价格，缓存价格不在卡片上显示（详情弹窗中仍可见）
-      // if (cache) {
-      //   items.push({
-      //     key: 'cache',
-      //     label: t('缓存读取价格'),
-      //     value: cache.single || `${cache.symbol}${cache.min} ~ ${cache.symbol}${cache.max}`,
-      //     suffix: unitSuffix,
-      //     original: original?.cache,
-      //   });
-      // }
-      //
-      // if (createCache) {
-      //   items.push({
-      //     key: 'create-cache',
-      //     label: t('缓存创建价格'),
-      //     value: createCache.single || `${createCache.symbol}${createCache.min} ~ ${createCache.symbol}${createCache.max}`,
-      //     suffix: unitSuffix,
-      //     original: original?.createCache,
-      //   });
-      // }
     }
 
     if (videoFlat) {
       items.push({
         key: 'video-flat',
-        label: t('视频按条（固定价）'),
+        label: t('视频按条'),
         value:
           videoFlat.single ||
           `${videoFlat.symbol}${videoFlat.min} ~ ${videoFlat.symbol}${videoFlat.max}`,
@@ -603,7 +544,7 @@ const PricingCardView = ({
         key: 'video-flat-tiered',
         label: perSecond ? t('按秒') : t('按条'),
         valueNode: (
-          <span className='font-bold text-black'>
+          <span className='font-bold text-[#1976d2]'>
             {t('最低价')}
             {displayPrice(usd)}
             {perSecond ? t('/秒起') : t('/条起')}
@@ -624,7 +565,7 @@ const PricingCardView = ({
         key: 'image-per-image-tiered',
         label: t('按张'),
         valueNode: (
-          <span className='font-bold text-black'>
+          <span className='font-bold text-[#1976d2]'>
             {t('最低价')}
             {displayPrice(usd)}
             {t('/张起')}
@@ -636,50 +577,47 @@ const PricingCardView = ({
     return items;
   };
 
-  // 获取模型图标
   const getModelIcon = (model) => {
     if (!model || !model.model_name) {
       return (
-        <div className={CARD_STYLES.container}>
-          <Avatar size='large'>?</Avatar>
+        <div className='sf-card-icon-wrap'>
+          <Avatar size='small'>?</Avatar>
         </div>
       );
     }
-    // 1) 优先使用模型自定义图标
     if (model.icon) {
       return (
-        <div className={CARD_STYLES.container}>
-          <div className={CARD_STYLES.icon}>
-            {getLobeHubIcon(model.icon, 32)}
+        <div className='sf-card-icon-wrap'>
+          <div className='sf-card-icon'>
+            {getLobeHubIcon(model.icon, 28)}
           </div>
         </div>
       );
     }
-    // 2) 退化为供应商图标
     if (model.vendor_icon) {
       return (
-        <div className={CARD_STYLES.container}>
-          <div className={CARD_STYLES.icon}>
-            {getLobeHubIcon(model.vendor_icon, 32)}
+        <div className='sf-card-icon-wrap'>
+          <div className='sf-card-icon'>
+            {getLobeHubIcon(model.vendor_icon, 28)}
           </div>
         </div>
       );
     }
 
-    // 如果没有供应商图标，使用模型名称生成头像
-
     const avatarText =
       (model.model_name || '').slice(0, 2).toUpperCase() || 'AI';
     return (
-      <div className={CARD_STYLES.container}>
+      <div className='sf-card-icon-wrap'>
         <Avatar
-          size='large'
+          size='small'
           style={{
-            width: 48,
-            height: 48,
-            borderRadius: 16,
-            fontSize: 16,
+            width: 36,
+            height: 36,
+            borderRadius: 10,
+            fontSize: 13,
             fontWeight: 'bold',
+            backgroundColor: '#e3f2fd',
+            color: '#1976d2',
           }}
         >
           {avatarText}
@@ -688,154 +626,155 @@ const PricingCardView = ({
     );
   };
 
-  // 获取模型描述
   const getModelDescription = (record) => {
     return record.description || '';
   };
 
-  // 显示骨架屏
+  // Get supplier type tag color
+  const getSupplierTypeTag = (model) => {
+    const types = new Set();
+    (model.channel_list || []).forEach((ch) => {
+      if (ch.supplier_type) types.add(ch.supplier_type);
+    });
+    const firstType = [...types][0];
+    if (!firstType) return null;
+    return firstType;
+  };
+
+  // Get model tags
+  const getModelTags = (model) => {
+    if (!model.tags) return [];
+    return String(model.tags).split(/[,;|]/).map(s => s.trim()).filter(Boolean);
+  };
+
   if (showSkeleton) {
-    return (
-      <>
-        <PricingCardSkeleton />
-      </>
-    );
+    return <PricingCardSkeleton />;
   }
 
   if (!filteredModels || filteredModels.length === 0) {
     return (
-      <>
-        <div className='flex justify-center items-center py-20'>
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('搜索无结果')}
-          />
-        </div>
-      </>
+      <div className='flex justify-center items-center py-20'>
+        <Empty
+          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+          darkModeImage={
+            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
+          }
+          description={
+            <span style={{ color: '#90a4ae' }}>{t('搜索无结果')}</span>
+          }
+        />
+      </div>
     );
   }
 
   return (
     <>
-      <div className={gridCols > 0 ? '' : 'px-2 pt-2'}>
-        <div className={gridCols > 0 ? 'grid gap-4' : 'flex flex-wrap gap-4'} style={gridCols > 0 ? { gridTemplateColumns: `repeat(${gridCols}, 1fr)` } : undefined}>
-          {paginatedModels.map((model, index) => {
-            const modelKey = getModelKey(model);
+      <div className='sf-card-grid' style={{ gridTemplateColumns: `repeat(${gridCols}, 1fr)` }}>
+        {paginatedModels.map((model, index) => {
+          const modelKey = getModelKey(model);
 
-            const priceData = calculateModelPrice({
-              record: model,
-              selectedGroup,
-              groupRatio,
-              groupModelPrice,
-              groupModelRatio,
-              tokenUnit,
-              displayPrice,
-              currency,
-              quotaDisplayType: siteDisplayType,
-            });
+          const priceData = calculateModelPrice({
+            record: model,
+            selectedGroup,
+            groupRatio,
+            groupModelPrice,
+            groupModelRatio,
+            tokenUnit,
+            displayPrice,
+            currency,
+            quotaDisplayType: siteDisplayType,
+          });
 
-            return (
-              <Card
-                key={modelKey || index}
-                className={`${gridCols > 0 ? '!w-full' : 'flex-1 min-w-[350px] max-w-[600px]'} !rounded-2xl transition-all duration-200 hover:shadow-lg border ${blurPricing ? '' : 'cursor-pointer'} ${CARD_STYLES.default}`}
-                bodyStyle={{ height: '100%' }}
-                onClick={() =>
-                  !blurPricing && openModelDetail && openModelDetail(model)
-                }
-              >
-                <div className='flex flex-col h-full'>
-                  {/* 头部：图标 + 模型名称 */}
-                  <div className='flex items-start mb-3'>
-                    <div className='flex items-start space-x-3 flex-1 min-w-0'>
-                      {getModelIcon(model)}
-                      <div className='flex-1 min-w-0'>
-                        <h3 className='text-lg font-bold text-gray-900 truncate'>
-                          {renderHighlightedText(model.model_name)}
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
+          const supplierType = getSupplierTypeTag(model);
+          const tags = getModelTags(model);
 
-                  {/* 模型描述 */}
-                  <div
-                    className='mb-4'
-                    style={
-                      blurPricing
-                        ? {
-                            filter: 'blur(6px)',
-                            userSelect: 'none',
-                            pointerEvents: 'none',
-                          }
-                        : undefined
-                    }
-                  >
-                    <p
-                      className='text-xs line-clamp-2 leading-relaxed'
-                      style={{ color: 'var(--semi-color-text-2)' }}
-                    >
-                      {renderHighlightedText(getModelDescription(model))}
-                    </p>
-                  </div>
-
-                  {/* 价格：输入 + 输出并排 */}
-                  <div
-                    className='mt-auto'
-                    style={
-                      blurPricing
-                        ? {
-                            filter: 'blur(6px)',
-                            userSelect: 'none',
-                            pointerEvents: 'none',
-                          }
-                        : undefined
-                    }
-                  >
-                    {(() => {
-                      const items = getModelPriceItemsForCard(model, priceData);
-                      if (items.length === 0) return null;
-                      return (
-                        <div className='flex flex-wrap gap-3'>
-                          {items.map(item => (
-                            <div key={item.key} className='flex-1 rounded-xl px-3 py-2.5' style={{backgroundColor: 'var(--semi-color-fill-0)', minWidth: '120px'}}>
-                              <div className='text-[10px] mb-0.5' style={{color: 'var(--semi-color-text-2)'}}>{item.label}</div>
-                              <div className='text-sm font-bold text-gray-900'>
-                                {item.valueNode || (item.value + (item.suffix || ''))}
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      );
-                    })()}
-                  </div>
+          return (
+            <div
+              key={modelKey || index}
+              className={`sf-model-card group ${blurPricing ? '' : 'cursor-pointer'}`}
+              onClick={() =>
+                !blurPricing && openModelDetail && openModelDetail(model)
+              }
+            >
+              <div className='sf-shimmer-overlay' />
+              {/* Card Header: Provider + Tag */}
+              <div className='sf-card-header'>
+                <div className='sf-card-provider'>
+                  {getModelIcon(model)}
+                  <span className='sf-card-provider-name'>
+                    {model.vendor_name || model.model_name?.split('/')[0] || 'AI'}
+                  </span>
                 </div>
-              </Card>
-            );
-          })}
-        </div>
+                {supplierType && (
+                  <span className='sf-card-type-tag'>{supplierType}</span>
+                )}
+              </div>
 
-        {/* 分页 */}
-        {filteredModels.length > 0 && (
-          <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
-            <Pagination
-              currentPage={currentPage}
-              pageSize={pageSize}
-              total={filteredModels.length}
-              showSizeChanger={showSizeChanger}
-              pageSizeOptions={[10, 20, 50, 100]}
-              size={isMobile ? 'small' : 'default'}
-              showQuickJumper={isMobile}
-              onPageChange={(page) => setCurrentPage(page)}
-              onPageSizeChange={(size) => {
-                setPageSize(size);
-                setCurrentPage(1);
-              }}
-            />
-          </div>
-        )}
+              {/* Default View: Model Name + Tags + Pricing */}
+              <div className='sf-card-default-view'>
+                <h3 className='sf-card-model-name'>
+                  {renderHighlightedText(model.model_name)}
+                </h3>
+
+                {/* Tags */}
+                {tags.length > 0 && (
+                  <div className='sf-card-tags'>
+                    {tags.slice(0, 3).map((tag) => (
+                      <span key={tag} className='sf-card-tag'>{tag}</span>
+                    ))}
+                  </div>
+                )}
+
+                {/* Pricing */}
+                <div
+                  className='sf-card-pricing'
+                  style={blurPricing ? { filter: 'blur(6px)', userSelect: 'none', pointerEvents: 'none' } : undefined}
+                >
+                  {(() => {
+                    const items = getModelPriceItemsForCard(model, priceData);
+                    if (items.length === 0) return null;
+                    return items.slice(0, 2).map(item => (
+                      <div key={item.key} className='sf-price-item'>
+                        <span className='sf-price-label'>{item.label}</span>
+                        <span className='sf-price-value'>
+                          {item.valueNode || (item.value + (item.suffix || ''))}
+                        </span>
+                      </div>
+                    ));
+                  })()}
+                </div>
+              </div>
+
+              {/* Hover View: Description */}
+              <div className='sf-card-hover-view'>
+                <p className='sf-card-description'>
+                  {getModelDescription(model) || t('暂无描述')}
+                </p>
+              </div>
+            </div>
+          );
+        })}
       </div>
+
+      {/* Pagination */}
+      {filteredModels.length > 0 && (
+        <div className='sf-pagination'>
+          <Pagination
+            currentPage={currentPage}
+            pageSize={pageSize}
+            total={filteredModels.length}
+            showSizeChanger={showSizeChanger}
+            pageSizeOptions={[10, 20, 50, 100]}
+            size={isMobile ? 'small' : 'default'}
+            showQuickJumper={isMobile}
+            onPageChange={(page) => setCurrentPage(page)}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setCurrentPage(1);
+            }}
+          />
+        </div>
+      )}
     </>
   );
 };
diff --git a/web/src/components/table/model-pricing/view/table/PricingTable.jsx b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
index 7d7a3f9..f5b6319 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
@@ -98,7 +98,7 @@ const PricingTable = ({
 
   const ModelTable = useMemo(
     () => (
-      <Card className='!rounded-xl overflow-hidden' bordered={false}>
+      <Card className='!rounded-xl overflow-hidden !border-[#e3f2fd]' bordered>
         <Table
           columns={processedColumns}
           dataSource={filteredModels}
@@ -112,13 +112,13 @@ const PricingTable = ({
           })}
           empty={
             <div className='flex flex-col items-center justify-center px-6 py-16 text-center'>
-              <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-400 dark:bg-white/5 dark:text-white/40'>
+              <div className='mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-[#e3f2fd] text-[#90a4ae]'>
                 <SearchX size={22} strokeWidth={1.5} />
               </div>
-              <div className='text-sm font-medium text-slate-700 dark:text-white/80'>
+              <div className='text-sm font-medium text-[#374151]'>
                 {t('搜索无结果')}
               </div>
-              <div className='mt-1 text-xs text-slate-400 dark:text-white/40'>
+              <div className='mt-1 text-xs text-[#90a4ae]'>
                 {t('试试调整筛选条件或换个关键词')}
               </div>
             </div>
diff --git a/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx b/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
index 15c8a62..2ea8e9b 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
@@ -37,13 +37,13 @@ function renderQuotaType(type, t) {
   switch (type) {
     case 1:
       return (
-        <Tag color='teal' shape='circle'>
+        <Tag color='blue' shape='circle'>
           {t('按次计费')}
         </Tag>
       );
     case 0:
       return (
-        <Tag color='violet' shape='circle'>
+        <Tag color='cyan' shape='circle'>
           {t('按量计费')}
         </Tag>
       );
@@ -200,8 +200,8 @@ export const getPricingTableColumns = ({
       <div className='flex items-center space-x-1'>
         <span>{t('倍率')}</span>
         <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
-          <IconHelpCircle
-            className='text-blue-500 cursor-pointer'
+            <IconHelpCircle
+              className='text-[#1976d2] cursor-pointer'
             onClick={() => {
               setModalImageUrl('/ratio.png');
               setIsModalOpenurl(true);
@@ -217,17 +217,17 @@ export const getPricingTableColumns = ({
 
       return (
         <div className='space-y-1'>
-          <div className='text-gray-700'>
+          <div className='text-[#374151]'>
             {t('模型倍率')}：
             {record.quota_type === 0
               ? (priceData?.inputRatio ?? text)
               : t('无')}
           </div>
-          <div className='text-gray-700'>
+          <div className='text-[#374151]'>
             {t('输出倍率')}：
             {record.quota_type === 0 ? completionRatio : t('无')}
           </div>
-          <div className='text-gray-700'>
+          <div className='text-[#374151]'>
             {t('分组倍率')}：{priceData?.usedGroupRatio ?? '-'}
           </div>
         </div>
@@ -246,7 +246,7 @@ export const getPricingTableColumns = ({
       return (
         <div className='space-y-1'>
           {priceItems.map((item) => (
-            <div key={item.key} className='text-gray-700'>
+            <div key={item.key} className='text-[#374151]'>
               {item.label} {item.value}
               {item.suffix}
             </div>
diff --git a/web/src/index.css b/web/src/index.css
index 9961db7..752d8a0 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -2,100 +2,104 @@
 /* 这些变量叠加在 Semi Design 之上，供新的 shadcn 风格组件使用 */
 
 :root {
-  /* shadcn/ui 基础色板 — Slate 中性色调 (220° hue) */
   --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
+  --foreground: 222 47% 11%;
   --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
+  --card-foreground: 222 47% 11%;
   --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 220 5% 96%;
-  --secondary-foreground: 220 6% 10%;
-  --muted: 220 5% 96%;
-  --muted-foreground: 220 4% 56%;
-  --accent: 220 5% 96%;
-  --accent-foreground: 220 6% 10%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 221 83% 53%;
+  --accent-foreground: 0 0% 100%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 13% 91%;
-  --input: 220 13% 91%;
-  --ring: 0 0% 9%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 221 83% 53%;
   --radius: 0.5rem;
-  --link: 0 0% 9%;
-  --link-hover: 0 0% 20%;
-  --chart-1: 160 60% 45%;
-  --chart-2: 217 91% 60%;
+  --link: 221 83% 53%;
+  --link-hover: 221 83% 40%;
+  --chart-1: 221 83% 53%;
+  --chart-2: 160 60% 45%;
   --chart-3: 43 96% 56%;
   --chart-4: 280 65% 60%;
   --chart-5: 340 75% 55%;
 }
 
 .dark {
-  --background: 0 0% 5.5%;
-  --foreground: 0 0% 90%;
-  --card: 0 0% 10%;
-  --card-foreground: 0 0% 90%;
-  --popover: 0 0% 8%;
-  --popover-foreground: 0 0% 90%;
-  --primary: 236 52% 62%;
+  --background: 210 60% 97%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 217 91% 60%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 0 0% 13%;
-  --secondary-foreground: 0 0% 90%;
-  --muted: 0 0% 9%;
-  --muted-foreground: 0 0% 56%;
-  --accent: 236 52% 62%;
+  --secondary: 210 40% 93%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 93%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 217 91% 60%;
   --accent-foreground: 0 0% 100%;
   --destructive: 0 62% 45%;
   --destructive-foreground: 0 0% 100%;
-  --border: 0 0% 100% / 0.08;
-  --input: 0 0% 100% / 0.06;
-  --ring: 236 52% 62%;
-  --link: 236 52% 72%;
-  --link-hover: 236 52% 62%;
+  --border: 214.3 31.8% 85%;
+  --input: 214.3 31.8% 85%;
+  --ring: 217 91% 60%;
+  --link: 217 91% 60%;
+  --link-hover: 217 91% 50%;
   --radius: 0.375rem;
-  --chart-1: 236 52% 62%;
+  --chart-1: 217 91% 60%;
   --chart-2: 160 60% 50%;
   --chart-3: 43 96% 56%;
   --chart-4: 280 65% 60%;
   --chart-5: 340 75% 55%;
 }
 
-/* === Linear Dark: Semi Design 暗色覆盖 === */
-.dark {
-  --semi-color-primary: rgba(94, 106, 210, 1);
-  --semi-color-primary-hover: rgba(114, 126, 230, 1);
-  --semi-color-primary-active: rgba(78, 90, 190, 1);
-  --semi-color-primary-disabled: rgba(94, 106, 210, 0.35);
-  --semi-color-primary-light-default: rgba(94, 106, 210, 0.12);
-  --semi-color-primary-light-hover: rgba(94, 106, 210, 0.18);
-  --semi-color-primary-light-active: rgba(94, 106, 210, 0.24);
-  --semi-color-bg-0: rgba(14, 14, 14, 1);
-  --semi-color-bg-1: rgba(19, 19, 19, 1);
-  --semi-color-bg-2: rgba(25, 25, 25, 1);
-  --semi-color-bg-3: rgba(32, 32, 32, 1);
-  --semi-color-bg-4: rgba(40, 40, 40, 1);
-  --semi-color-text-0: rgba(230, 230, 230, 1);
-  --semi-color-text-1: rgba(190, 190, 190, 1);
-  --semi-color-text-2: rgba(140, 140, 140, 1);
-  --semi-color-text-3: rgba(100, 100, 100, 1);
-  --semi-color-border: rgba(255, 255, 255, 0.08);
-  --semi-color-fill-0: rgba(255, 255, 255, 0.04);
-  --semi-color-fill-1: rgba(255, 255, 255, 0.06);
-  --semi-color-fill-2: rgba(255, 255, 255, 0.08);
-  --semi-color-link: rgba(130, 143, 255, 1);
-  --semi-color-link-hover: rgba(158, 168, 255, 1);
-  --semi-color-link-active: rgba(110, 122, 235, 1);
-  --semi-color-link-visited: rgba(130, 143, 255, 0.8);
-  --semi-color-tertiary: rgba(255, 255, 255, 0.06);
-  --semi-color-tertiary-hover: rgba(255, 255, 255, 0.10);
-  --semi-color-tertiary-active: rgba(255, 255, 255, 0.14);
-  --semi-shadow-elevated: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.3);
+/* === Linear Dark: Semi Design 暗色覆盖 — 蓝白渐变主题 === */
+body[theme-mode='dark'] {
+  --semi-color-primary: rgba(59, 130, 246, 1);
+  --semi-color-primary-hover: rgba(79, 150, 255, 1);
+  --semi-color-primary-active: rgba(37, 99, 235, 1);
+  --semi-color-primary-disabled: rgba(59, 130, 246, 0.35);
+  --semi-color-primary-light-default: rgba(59, 130, 246, 0.12);
+  --semi-color-primary-light-hover: rgba(59, 130, 246, 0.18);
+  --semi-color-primary-light-active: rgba(59, 130, 246, 0.24);
+  --semi-color-bg-0: rgba(240, 247, 255, 1);
+  --semi-color-bg-1: rgba(235, 244, 255, 1);
+  --semi-color-bg-2: rgba(224, 240, 253, 1);
+  --semi-color-bg-3: rgba(214, 232, 248, 1);
+  --semi-color-bg-4: rgba(204, 224, 244, 1);
+  --semi-color-nav-bg: rgba(240, 247, 255, 1);
+  --semi-color-text-0: rgba(15, 23, 42, 1);
+  --semi-color-text-1: rgba(51, 65, 85, 1);
+  --semi-color-text-2: rgba(100, 116, 139, 1);
+  --semi-color-text-3: rgba(148, 163, 184, 1);
+  --semi-color-border: rgba(191, 219, 254, 1);
+  --semi-color-fill-0: rgba(59, 130, 246, 0.04);
+  --semi-color-fill-1: rgba(59, 130, 246, 0.06);
+  --semi-color-fill-2: rgba(59, 130, 246, 0.08);
+  --semi-color-link: rgba(59, 130, 246, 1);
+  --semi-color-link-hover: rgba(37, 99, 235, 1);
+  --semi-color-link-active: rgba(29, 78, 216, 1);
+  --semi-color-link-visited: rgba(59, 130, 246, 0.8);
+  --semi-color-tertiary: rgba(59, 130, 246, 0.06);
+  --semi-color-tertiary-hover: rgba(59, 130, 246, 0.10);
+  --semi-color-tertiary-active: rgba(59, 130, 246, 0.14);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .4);
+  --semi-shadow-elevated: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.1);
   --semi-color-success: rgba(52, 211, 153, 1);
   --semi-color-danger: rgba(248, 113, 113, 1);
   --semi-color-warning: rgba(251, 191, 36, 1);
-  --semi-color-info: rgba(94, 106, 210, 1);
+  --semi-color-info: rgba(59, 130, 246, 1);
+  --semi-color-default: rgba(59, 130, 246, 0.04);
+  --semi-color-default-hover: rgba(59, 130, 246, 0.06);
+  --semi-color-default-active: rgba(59, 130, 246, 0.08);
 }
 
 /* 确保按钮圆角在暗色模式下生效（覆盖 Semi 库默认值） */
@@ -108,17 +112,25 @@
   border-radius: 8px !important;
 }
 
-/* 全局基础样式 — 使用新字体族 */
+/* 全局基础样式 — 蓝白渐变主题 */
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
   color: hsl(var(--foreground));
-  background-color: hsl(var(--background));
+  background: linear-gradient(135deg, #e0f0ff 0%, #edf5ff 20%, #f5faff 40%, #ffffff 60%, #f0f7ff 80%, #e8f4fd 100%);
+  background-attachment: fixed;
+  min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* ==================== Tailwind CSS 配置 ==================== */
 
+/* 暗色模式 body 背景也使用蓝白渐变 */
+html.dark body {
+  background: linear-gradient(135deg, #e0f0ff 0%, #edf5ff 20%, #f5faff 40%, #ffffff 60%, #f0f7ff 80%, #e8f4fd 100%);
+  background-attachment: fixed;
+}
+
 /* ==================== Tailwind CSS 閰嶇疆 ==================== */
 @layer tailwind-base, semi, tailwind-components, tailwind-utils;
 
@@ -1610,183 +1622,598 @@ html.dark .with-pastel-balls::before {
   padding-top: 0.75rem !important;
 }
 
-/* ==================== 妯″瀷瀹氫环椤甸潰甯冨眬 ==================== */
-.pricing-layout {
-  height: calc(100vh - 60px);
-  overflow: hidden;
-  margin-top: 60px;
+/* ==================== SiliconFlow-style Pricing Page (Cool Effects) ==================== */
+
+/* ─── Keyframe Animations ─── */
+@keyframes sf-gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
 }
 
-.pricing-sidebar {
-  width: clamp(280px, 24vw, 520px) !important;
-  min-width: clamp(280px, 24vw, 520px) !important;
-  max-width: clamp(280px, 24vw, 520px) !important;
-  height: calc(100vh - 60px);
-  background-color: var(--semi-color-bg-0);
-  overflow: auto;
+@keyframes sf-float {
+  0%, 100% { transform: translateY(0) translateX(0); }
+  25% { transform: translateY(-20px) translateX(10px); }
+  50% { transform: translateY(-10px) translateX(-5px); }
+  75% { transform: translateY(-25px) translateX(8px); }
 }
 
-.pricing-content {
-  height: calc(100vh - 60px);
-  background-color: var(--semi-color-bg-0);
-  display: flex;
-  flex-direction: column;
+@keyframes sf-pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(25, 118, 210, 0.1); }
+  50% { box-shadow: 0 0 40px rgba(25, 118, 210, 0.25); }
 }
 
-.pricing-pagination-divider {
-  border-color: var(--semi-color-border);
+@keyframes sf-card-in {
+  from { opacity: 0; transform: translateY(30px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-.pricing-content-mobile {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+@keyframes sf-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.pricing-search-header {
-  padding: 0.5rem;
-  background-color: var(--semi-color-bg-0);
-  flex-shrink: 0;
-  position: sticky;
+@keyframes sf-glow-ring {
+  0%, 100% { opacity: 0.3; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.02); }
+}
+
+@keyframes sf-fade-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sf-search-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
+  50% { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.08); }
+}
+
+@keyframes sf-dot-float {
+  0% { transform: translateY(100vh) scale(0); opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
+}
+
+@keyframes sf-title-reveal {
+  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
+  to { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@keyframes sf-price-glow {
+  0%, 100% { text-shadow: none; }
+  50% { text-shadow: 0 0 8px rgba(25, 118, 210, 0.3); }
+}
+
+/* Page Container */
+.sf-pricing-page {
+  min-height: 100vh;
+  background: #f7f9fc;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* ─── Floating Particles Background ─── */
+.sf-particles {
+  position: fixed;
   top: 0;
-  z-index: 5;
-}
-
-.pricing-view-container {
-  flex: 1;
-  overflow: auto;
-}
-
-.pricing-view-container-mobile {
-  flex: 1;
-  overflow: auto;
-  min-height: 0;
-}
-
-/* ─── Models 新布局 ─── */
-.models-page-layout {
-  display: flex;
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 56px 24px 0;
-  gap: 32px;
-  height: 100vh;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
   overflow: hidden;
+}
+
+.sf-particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(25, 118, 210, 0.15);
+  animation: sf-dot-float linear infinite;
+}
+.sf-particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; width: 6px; height: 6px; background: rgba(25, 118, 210, 0.1); }
+.sf-particle:nth-child(2) { left: 25%; animation-duration: 15s; animation-delay: 2s; width: 4px; height: 4px; }
+.sf-particle:nth-child(3) { left: 40%; animation-duration: 10s; animation-delay: 4s; width: 8px; height: 8px; background: rgba(66, 165, 245, 0.12); }
+.sf-particle:nth-child(4) { left: 55%; animation-duration: 18s; animation-delay: 1s; width: 3px; height: 3px; }
+.sf-particle:nth-child(5) { left: 70%; animation-duration: 13s; animation-delay: 3s; width: 5px; height: 5px; background: rgba(21, 101, 192, 0.1); }
+.sf-particle:nth-child(6) { left: 85%; animation-duration: 16s; animation-delay: 5s; width: 4px; height: 4px; }
+.sf-particle:nth-child(7) { left: 15%; animation-duration: 14s; animation-delay: 6s; width: 7px; height: 7px; background: rgba(25, 118, 210, 0.08); }
+.sf-particle:nth-child(8) { left: 60%; animation-duration: 11s; animation-delay: 7s; width: 3px; height: 3px; }
+
+.sf-pricing-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px 60px;
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Hero Section ─── */
+.sf-hero {
+  text-align: center;
+  padding: 70px 0 50px;
+  position: relative;
+}
+
+.sf-hero::before {
+  content: '';
+  position: absolute;
+  top: -100px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 800px;
+  height: 500px;
+  background: radial-gradient(ellipse, rgba(25, 118, 210, 0.06) 0%, transparent 70%);
+  pointer-events: none;
+  animation: sf-pulse-glow 6s ease-in-out infinite;
+}
+
+.sf-hero-title {
+  font-size: 48px;
+  font-weight: 800;
+  margin: 0 0 16px;
+  line-height: 1.2;
+  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 25%, #42a5f5 50%, #1976d2 75%, #0d47a1 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: sf-gradient-shift 4s ease infinite, sf-title-reveal 0.8s ease-out;
+  text-shadow: none;
+}
+
+.sf-hero-subtitle {
+  font-size: 17px;
+  color: #546e7a;
+  margin: 0 0 36px;
+  animation: sf-fade-up 0.8s ease-out 0.2s both;
+}
+
+/* ─── Search Bar ─── */
+.sf-search-bar {
+  position: relative;
+  max-width: 620px;
+  margin: 0 auto 28px;
+  animation: sf-fade-up 0.8s ease-out 0.4s both;
+}
+
+.sf-search-icon {
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #90a4ae;
+  transition: color 0.3s;
+}
+
+.sf-search-input {
+  width: 100%;
+  height: 52px;
+  padding: 0 18px 0 48px;
+  border: 2px solid #e3f2fd;
+  border-radius: 14px;
+  background: #fff;
+  font-size: 15px;
+  color: #0a1929;
+  outline: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.06);
   box-sizing: border-box;
 }
-
-.models-sidebar {
-  width: 280px;
-  flex-shrink: 0;
-  overflow-y: auto;
-  padding: 0 16px 24px 0;
-  border-right: 1px solid var(--border-color, #e5e7eb);
+.sf-search-input::placeholder {
+  color: #b0bec5;
+  transition: color 0.3s;
+}
+.sf-search-input:focus {
+  border-color: #1976d2;
+  box-shadow: 0 4px 24px rgba(25, 118, 210, 0.18), 0 0 0 4px rgba(25, 118, 210, 0.06);
+  animation: sf-search-glow 2s ease-in-out infinite;
+}
+.sf-search-input:focus ~ .sf-search-icon {
+  color: #1976d2;
 }
 
-.models-sidebar::-webkit-scrollbar {
-  width: 4px;
-}
-.models-sidebar::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.models-sidebar:hover::-webkit-scrollbar-thumb {
-  background: rgba(0,0,0,0.15);
-  border-radius: 2px;
+/* ─── Hot Tags ─── */
+.sf-hot-tags {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  animation: sf-fade-up 0.8s ease-out 0.6s both;
 }
 
-.models-content {
-  flex: 1;
-  min-width: 0;
+.sf-hot-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #546e7a;
+}
+
+.sf-hot-tag {
+  padding: 5px 14px;
+  border: 1px solid #e3f2fd;
+  border-radius: 20px;
+  background: #fff;
+  font-size: 12px;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+.sf-hot-tag::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(25, 118, 210, 0.08), rgba(66, 165, 245, 0.08));
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+.sf-hot-tag:hover {
+  border-color: #1976d2;
+  color: #1976d2;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
+}
+.sf-hot-tag:hover::before {
+  opacity: 1;
+}
+
+/* ─── Filter Section ─── */
+.sf-filter-section {
+  padding: 24px 0;
   display: flex;
   flex-direction: column;
+  gap: 16px;
+  animation: sf-fade-up 0.8s ease-out 0.7s both;
+}
+
+.sf-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.sf-filter-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.sf-filter-pills {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.sf-filter-pill {
+  padding: 7px 18px;
+  border: 1.5px solid #e3f2fd;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 13px;
+  color: #546e7a;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+.sf-filter-pill:hover {
+  border-color: #1976d2;
+  color: #1976d2;
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.1);
+}
+.sf-filter-pill.active {
+  border-color: #1976d2;
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  color: #1976d2;
+  font-weight: 600;
+  box-shadow: 0 2px 12px rgba(25, 118, 210, 0.2);
+}
+
+/* ─── Results Header ─── */
+.sf-results-header {
+  padding: 16px 0 8px;
+  animation: sf-fade-up 0.8s ease-out 0.8s both;
+}
+
+.sf-results-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #0a1929;
+  margin: 0;
+}
+
+.sf-results-count {
+  color: #1976d2;
+  font-weight: 800;
+  animation: sf-price-glow 3s ease-in-out infinite;
+}
+
+/* ─── Card Grid ─── */
+.sf-card-grid {
+  display: grid;
+  gap: 22px;
+  padding: 20px 0;
+}
+
+/* ─── Model Card ─── */
+.sf-model-card {
+  position: relative;
+  background: #fff;
+  border: 1.5px solid #e3f2fd;
+  border-radius: 16px;
+  padding: 24px;
+  height: 230px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  cursor: pointer;
+  animation: sf-card-in 0.6s ease-out both;
+  /* Staggered entrance */
+}
+.sf-model-card:nth-child(1) { animation-delay: 0.1s; }
+.sf-model-card:nth-child(2) { animation-delay: 0.15s; }
+.sf-model-card:nth-child(3) { animation-delay: 0.2s; }
+.sf-model-card:nth-child(4) { animation-delay: 0.25s; }
+.sf-model-card:nth-child(5) { animation-delay: 0.3s; }
+.sf-model-card:nth-child(6) { animation-delay: 0.35s; }
+.sf-model-card:nth-child(7) { animation-delay: 0.4s; }
+.sf-model-card:nth-child(8) { animation-delay: 0.45s; }
+.sf-model-card:nth-child(9) { animation-delay: 0.5s; }
+
+/* Glow border on hover */
+.sf-model-card::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #1976d2, #42a5f5, #1976d2);
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0.4s ease;
+}
+.sf-model-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  background: #fff;
+  z-index: -1;
+}
+.sf-model-card:hover {
+  transform: translateY(-6px) scale(1.01);
+  border-color: transparent;
+  box-shadow: 0 12px 40px rgba(25, 118, 210, 0.2), 0 0 60px rgba(25, 118, 210, 0.06);
+}
+.sf-model-card:hover::before {
+  opacity: 1;
+  animation: sf-glow-ring 2s ease-in-out infinite;
+}
+
+/* Shimmer effect on hover */
+.sf-model-card .sf-shimmer-overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  background: linear-gradient(90deg, transparent 0%, rgba(25, 118, 210, 0.04) 50%, transparent 100%);
+  background-size: 200% 100%;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.sf-model-card:hover .sf-shimmer-overlay {
+  opacity: 1;
+  animation: sf-shimmer 2s linear infinite;
+}
+
+/* Card Header */
+.sf-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.sf-card-provider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sf-card-icon-wrap {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  flex-shrink: 0;
+  transition: all 0.3s;
+}
+.sf-model-card:hover .sf-card-icon-wrap {
+  transform: scale(1.08);
+  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
+}
+
+.sf-card-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sf-card-provider-name {
+  font-size: 13px;
+  color: #546e7a;
+  font-weight: 500;
+}
+
+.sf-card-type-tag {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  color: #1976d2;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* Default View */
+.sf-card-default-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  transition: opacity 0.4s ease;
+}
+
+.sf-card-model-name {
+  font-size: 17px;
+  font-weight: 700;
+  color: #0a1929;
+  margin: 0 0 10px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.3s;
+}
+.sf-model-card:hover .sf-card-model-name {
+  color: #1976d2;
+}
+
+.sf-card-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.sf-card-tag {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: #f0f7ff;
+  color: #1976d2;
+  font-weight: 500;
+  transition: all 0.25s;
+}
+.sf-model-card:hover .sf-card-tag {
+  background: #e3f2fd;
+}
+
+/* Pricing */
+.sf-card-pricing {
+  margin-top: auto;
+  display: flex;
+  gap: 16px;
+}
+
+.sf-price-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.sf-price-label {
+  font-size: 11px;
+  color: #90a4ae;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.sf-price-value {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1976d2;
+  transition: all 0.3s;
+}
+.sf-model-card:hover .sf-price-value {
+  animation: sf-price-glow 2s ease-in-out infinite;
+}
+
+/* Hover View */
+.sf-card-hover-view {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24px;
+  background: linear-gradient(transparent, rgba(255,255,255,0.97) 15%);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+.sf-model-card:hover .sf-card-hover-view {
+  opacity: 1;
+  transform: translateY(0);
+}
+.sf-model-card:hover .sf-card-default-view {
+  opacity: 0.2;
+}
+
+.sf-card-description {
+  font-size: 13px;
+  color: #546e7a;
+  line-height: 1.6;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.models-tabs-bar {
+/* ─── Pagination ─── */
+.sf-pagination {
   display: flex;
-  gap: 8px;
-  padding: 16px 0;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  justify-content: center;
+  padding: 36px 0 16px;
 }
 
-.models-tab-btn {
-  padding: 6px 20px;
-  border-radius: 20px;
-  border: 1px solid var(--border-color, #d1d5db);
-  background: transparent;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--text-muted, #6b7280);
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-.models-tab-btn:hover {
-  border-color: var(--primary-color, #3b82f6);
-  color: var(--primary-color, #3b82f6);
-}
-.models-tab-btn.active {
-  background: var(--primary-color, #3b82f6);
-  color: white;
-  border-color: var(--primary-color, #3b82f6);
+/* ─── Responsive ─── */
+@media (max-width: 1024px) {
+  .sf-pricing-inner {
+    padding: 0 20px 40px;
+  }
+  .sf-hero-title {
+    font-size: 36px;
+  }
 }
 
-.models-card-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  padding: 16px 0;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.models-card-grid::-webkit-scrollbar {
-  width: 6px;
-}
-.models-card-grid::-webkit-scrollbar-thumb {
-  background: rgba(0,0,0,0.12);
-  border-radius: 3px;
-}
-
-/* 筛选面板标题 */
-.models-filter-section {
-  margin-bottom: 24px;
-}
-.models-filter-title {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted, #6b7280);
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
-}
-
-.models-filter-item {
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-size: 14px;
-  color: var(--text-color, #374151);
-  gap: 8px;
-}
-.models-filter-item:hover {
-  background: var(--hover-bg, #f3f4f6);
-}
-.models-filter-item.active {
-  background: var(--primary-light, #eff6ff);
-  color: var(--primary-color, #3b82f6);
-  font-weight: 500;
-}
-.models-filter-item .count {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--text-muted, #9ca3af);
+@media (max-width: 768px) {
+  .sf-pricing-inner {
+    padding: 0 16px 32px;
+  }
+  .sf-hero {
+    padding: 40px 0 24px;
+  }
+  .sf-hero-title {
+    font-size: 28px;
+  }
+  .sf-hero-subtitle {
+    font-size: 14px;
+  }
+  .sf-filter-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .sf-model-card {
+    height: auto;
+    min-height: 180px;
+  }
+  .sf-particles {
+    display: none;
+  }
 }
 
 /* ==================== semi-ui 缁勪欢鑷畾涔夋牱寮?==================== */
diff --git a/web/src/pages/Home/index.jsx b/web/src/pages/Home/index.jsx
index 1633638..91d9982 100644
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -1,425 +1,255 @@
 /*
 Copyright (C) 2025 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Copy, Check, Code, Terminal, FileCode, Box, Grid3X3, Play, Trophy, PieChart, BookOpen, Search, Sun, Moon, Monitor, Languages } from 'lucide-react';
+import {
+  Copy, Check, Box, Grid3X3, Trophy, BookOpen,
+  Zap, Shield, Globe, ArrowRight, Layers, Sparkles, ArrowUpRight,
+  Cpu, CreditCard, RefreshCw, MessageSquare, Send, Terminal,
+  Database, Workflow, Lock, BarChart3, Users, ChevronRight,
+  Cloud, Server, Activity, TrendingUp, Headphones, FileText,
+  Key, Settings, Monitor, Smartphone, BarChart2, Globe2,
+} from 'lucide-react';
 import { UserContext } from '../../context/User';
-import { StatusContext } from '../../context/Status';
 import { stringToColor, getSystemName } from '../../helpers';
 
 
-/* ==================================================================
-   TokenDance-style Home Page
-   Design: black/white minimal with serif headings
-   ================================================================== */
 
-/* ─── Hero Marquee Carousel Texts ────────────────────────── */
-const CAROUSEL_TEXTS = [
-  'OpenAI 协议',
-  'Claude 协议',
-  'Gemini 协议',
-  '智能路由',
-  '统一计费',
-  '模型丰富',
-  '安全可靠',
-  '开箱即用',
-];
-
-/* ─── Hero Section ──────────────────────────────────────────── */
-
-/* --- Helper: Theme Toggle --- */
-function HomeThemeToggle() {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  const theme = localStorage.getItem("theme-mode") || "auto";
-  const applyTheme = useCallback((val) => {
-    const actualTheme = val === 'auto'
-      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-      : val;
-    if (actualTheme === 'dark') {
-      document.body.setAttribute('theme-mode', 'dark');
-      document.documentElement.classList.add('dark');
-    } else {
-      document.body.removeAttribute('theme-mode');
-      document.documentElement.classList.remove('dark');
-    }
-  }, []);
-  const setTheme = (val) => {
-    localStorage.setItem("theme-mode", val);
-    applyTheme(val);
-    setOpen(false);
-  };
-  useEffect(() => {
-    applyTheme(theme);
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = () => {
-      const stored = localStorage.getItem("theme-mode") || "auto";
-      applyTheme(stored);
-    };
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [applyTheme]);
-  const icons = { light: <Sun size={16} />, dark: <Moon size={16} />, auto: <Monitor size={16} /> };
-  return (
-    <div className="relative" ref={ref}>
-      <button type="button" onClick={() => setOpen(!open)} className="inline-flex items-center justify-center p-2 rounded-md text-white/60 hover:text-white hover:bg-white/10 transition-colors">
-        {icons[theme] || icons.auto}
-      </button>
-      {open && (
-        <div className="absolute right-0 top-full mt-1 z-50 min-w-[10rem] rounded-lg border border-white/10 bg-neutral-900 p-1 shadow-md">
-          {[
-            { key: "light", icon: <Sun size={16} />, label: t("浅色模式") },
-            { key: "dark", icon: <Moon size={16} />, label: t("深色模式") },
-            { key: "auto", icon: <Monitor size={16} />, label: t("自动模式") },
-          ].map((opt) => (
-            <button key={opt.key} type="button" onClick={() => setTheme(opt.key)} className={`flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors ${theme === opt.key ? "bg-white/10 text-white font-medium" : "text-white/50 hover:bg-white/10 hover:text-white"}`}>
-              {opt.icon}<span>{opt.label}</span>
-              {theme === opt.key && <span className="ml-auto flex h-3.5 w-3.5 items-center justify-center"><span className="h-1.5 w-1.5 rounded-full bg-white"></span></span>}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* --- Helper: Language Selector --- */
-function HomeLanguageSelector() {
-  const { t, i18n } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  const current = (i18n.language || "").startsWith("zh") ? "zh-CN" : "en";
-  const switchLang = (code) => { i18n.changeLanguage(code); setOpen(false); };
-  const langLabels = { "zh-CN": "简体中文", "en": "English" };
-  return (
-    <div className="relative" ref={ref}>
-      <button type="button" onClick={() => setOpen(!open)} className="inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-white/60 hover:text-white hover:bg-white/10 transition-colors">
-        <Languages size={16} /><span className="hidden sm:inline text-xs">{langLabels[current] || current}</span>
-      </button>
-      {open && (
-        <div className="absolute right-0 top-full mt-1 z-50 min-w-[8rem] rounded-lg border border-white/10 bg-neutral-900 p-1 shadow-md">
-          {Object.entries(langLabels).map(([code, label]) => (
-            <button key={code} type="button" onClick={() => switchLang(code)} className={`flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors ${current === code ? "bg-white/10 text-white font-medium" : "text-white/50 hover:bg-white/10 hover:text-white"}`}>
-              {label}
-              {current === code && <span className="ml-auto flex h-3.5 w-3.5 items-center justify-center"><span className="h-1.5 w-1.5 rounded-full bg-white"></span></span>}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function HeroSection() {
+/* ═══════════════ SECTION 1: HERO ═══════════════ */
+function Hero() {
   const { t } = useTranslation();
   const [userState] = useContext(UserContext);
-  const [statusState] = useContext(StatusContext);
   const [copied, setCopied] = useState(false);
-  const navigate = useNavigate();
 
-  // 读取管理员开关：默认 true（未加载 status 前也显示）
-  const showThemeToggle = statusState?.status?.HeaderShowThemeToggle !== false;
-  const showLanguageSelector = false;
-  const copyCmd = useCallback(() => {
-    navigator.clipboard.writeText("https://tokendance.space");
+  const copyUrl = useCallback(() => {
+    navigator.clipboard.writeText('https://api.turingtoken.ai');
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }, []);
+
   return (
-    <section className="relative bg-black text-white overflow-hidden">
-      <div className="absolute inset-0 pointer-events-none opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
-        <div className="fixed top-0 z-50 w-full border-b border-white/10 bg-black">
-        <div className="flex h-14 items-center px-4 lg:px-6 max-w-[1400px] mx-auto">
-          <Link to="/" className="flex items-center gap-2 flex-shrink-0">
-            <img src="/logo.jpg" alt="logo" className="w-7 h-7 rounded-full object-cover" />
-            <span className="font-heading text-lg font-bold tracking-tight text-white">TuringToken</span>
-            <span className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-white/20 text-white/40">BETA</span>
-          </Link>
-          <div className="hidden md:block flex-1" />
-          <nav className="hidden md:flex items-center gap-0.5">
-            {[
-              { key: "model", label: "模型", icon: <Box size={16} />, to: "/pricing" },
-              { key: "benchmark", label: "评测", icon: <Trophy size={16} />, to: "/benchmarks" },
-              { key: "docs", label: "文档", icon: <BookOpen size={16} />, to: "/docs" },
-              { key: "console", label: "控制台", icon: <Grid3X3 size={16} />, to: "/console" },
-            ].map((item) => (
-              <Link key={item.key} to={item.to} className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[14px] rounded-md transition-colors duration-150 text-white/60 hover:text-white">{item.icon}<span className="hidden sm:inline">{t(item.label)}</span></Link>
-            ))}
-          </nav>
-          <div className="flex items-center gap-1">
-            {showThemeToggle && <HomeThemeToggle />}
-            {showLanguageSelector && <HomeLanguageSelector />}
-            {userState.user ? (
-              <Link to="/console" className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-white/20 border border-white/20 transition-colors duration-200 ml-2" title={userState.user.display_name || userState.user.username}>
-                <span className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white" style={{ backgroundColor: stringToColor(userState.user.username) }}>
-                  {userState.user.username?.charAt(0).toUpperCase()}
-                </span>
-              </Link>
-            ) : (
-              <Link to="/login" className="inline-flex items-center bg-white text-black px-4 py-1.5 text-sm font-mono font-medium uppercase tracking-widest rounded hover:bg-transparent hover:text-white border border-white transition-colors duration-200 ml-2">
-                {t("登录")}
-              </Link>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="relative flex-1 grid md:grid-cols-2 gap-8 px-6 md:px-12 pt-[88px] pb-12 items-center max-w-[1400px] mx-auto w-full" style={{ minHeight: "90vh" }}>
-        <div className="home-fade-in">
-          <p className="font-mono text-sm text-white/30 mb-6 tracking-wide font-body">
-            {"// unified model API gateway"}
-          </p>
-          <div className="w-[60px] h-[4px] bg-white mb-6" />
-          <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] mb-6">
-            {t("更快、更稳、更省")}<br />{t("Token服务平台")}
-          </h1>
-          <p className="font-body text-white/50 text-base md:text-lg leading-relaxed mb-10">
-            {t("兼容 OpenAI / Claude / Gemini 等协议，覆盖文本、图像、视频、语音，智能路由，统一计费。")}
-          </p>
-          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 font-body">
-            <Link to="/console/token" className="inline-flex items-center bg-white text-black px-6 py-3 text-sm font-mono font-medium uppercase tracking-widest hover:bg-transparent hover:text-white border border-white transition-colors duration-200">
-              {t("开始使用")}
-            </Link>
-            <Link to="/pricing" className="inline-flex items-center text-white/60 px-6 py-3 text-sm font-mono font-medium uppercase tracking-widest hover:text-white transition-colors duration-200">
-              {t("查看价格")} &rarr;
-            </Link>
-          </div>
-        </div>
-        <div className="home-fade-in-delay-1 font-body">
-          <div className="bg-neutral-900 border border-white/10 rounded-none overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/10 bg-neutral-800/50">
-              <div className="flex gap-1.5">
-                <span className="w-3 h-3 rounded-full bg-red-500/60" />
-                <span className="w-3 h-3 rounded-full bg-yellow-500/60" />
-                <span className="w-3 h-3 rounded-full bg-green-500/60" />
-              </div>
-              <span className="font-mono text-[10px] text-white/20 tracking-wide">terminal</span>
-              <button type="button" onClick={copyCmd} className="text-white/30 hover:text-white/70 transition-colors" aria-label="Copy">
-                {copied ? <Check size={14} /> : <Copy size={14} />}
-              </button>
-            </div>
-            <pre className="p-5 text-sm font-mono leading-relaxed text-white/80 overflow-x-auto">
-              <code>{`curl https://api.turingtoken.ai/v1/chat/completions \\
-  -H "Authorization: Bearer \$YOUR_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "gpt-4o",
-    "messages": [{"role": "user", "content": "Hello"}]
-  }'`}</code>
-            </pre>
-          </div>
-        </div>
-      </div>
+    <section className="relative min-h-[580px] bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c] overflow-hidden">
+      {/* Background decorative elements */}
+      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#1976d2]/10 rounded-full blur-[150px]" />
+      <div className="absolute bottom-0 left-[20%] w-[500px] h-[500px] bg-[#42a5f5]/5 blur-[120px]" />
+      
+      {/* Grid pattern */}
+      <div className="absolute inset-0 opacity-[0.03]" style={{
+        backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
+        backgroundSize: '60px 60px',
+      }} />
 
-      {/* Hero brand wordmark — TURINGTOKEN */}
-      <div className="w-full overflow-hidden px-6 pb-2">
-        <div
-          className="inline-flex whitespace-nowrap origin-left font-mono font-bold uppercase leading-[0.85] select-none tracking-tight"
-          style={{ fontSize: 'clamp(4rem, 20vw, 12rem)', transform: 'scaleX(1.04)' }}
-        >
-          <span className="text-white">Turing</span>
-          <span className="text-white/30" style={{ textShadow: '0 0 30px rgba(255,255,255,0.15), 4px 4px 12px rgba(0,0,0,0.5)' }}>Token</span>
-        </div>
-      </div>
-
-      {/* Feature marquee strip — 轮播: OpenAI 协议 / Claude 协议 / 智能路由 ... */}
-      <div className="w-full border-t border-white/10 py-5 px-6 overflow-hidden">
-        <div className="home-marquee flex gap-12 items-center">
-          {[...CAROUSEL_TEXTS, ...CAROUSEL_TEXTS].map((text, i) => (
-            <span
-              key={i}
-              className="font-mono text-sm text-white/40 whitespace-nowrap tracking-wider"
-            >
-              {text}
-            </span>
+      {/* Nav */}
+      <nav className="relative z-20 flex items-center justify-between px-6 lg:px-12 h-14 max-w-[1400px] mx-auto w-full">
+        <Link to="/" className="flex items-center gap-2.5">
+          <img src="/logo.jpg" alt="" className="w-7 h-7 rounded-lg object-cover" />
+          <span className="text-[16px] font-bold text-white tracking-tight">TuringToken</span>
+        </Link>
+        <div className="hidden md:flex items-center gap-1">
+          {[{ l: t('模型'), to: '/pricing', i: <Box size={14} /> }, { l: t('评测'), to: '/benchmarks', i: <Trophy size={14} /> }, { l: t('文档'), to: '/docs', i: <BookOpen size={14} /> }, { l: t('控制台'), to: '/console', i: <Grid3X3 size={14} /> }].map(n => (
+            <Link key={n.to} to={n.to} className="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm text-white/70 hover:text-white hover:bg-white/5 transition-all">
+              {n.i}{n.l}
+            </Link>
           ))}
         </div>
-      </div>
-    </section>
-  );
-}const FEATURES = [
-  {
-    titleKey: '多协议兼容',
-    descKey:
-      '原生支持 OpenAI、Claude、Gemini 文本协议，覆盖图像 / 视频 / 文本转语音生成。无需修改代码，切换 Base URL 即可接入。',
-    code: 'baseURL: "api.turingtoken.ai"',
-  },
-  {
-    titleKey: '智能路由',
-    descKey:
-      '根据模型名称自动路由至对应供应商。一个入口，无需关心底层调度。',
-    code: 'route(model) → provider',
-  },
-  {
-    titleKey: '统一计费',
-    descKey:
-      '跨供应商统一 Token 消耗统计与账单。告别多平台分别充值的混乱。',
-    code: 'billing.unified()',
-  },
-  {
-    titleKey: '容错降级',
-    descKey:
-      '同一模型支持多供应商端点自动切换；单次请求可指定多个候选模型，逐级降级，保障服务持续可用。',
-    code: 'fallback: model[] → provider[]',
-  },
-  {
-    titleKey: '模型丰富',
-    descKey:
-      '接入 MiniMax、通义千问、Kimi、智谱、DeepSeek 等国内头部模型。持续扩展中。',
-    code: 'models.list() → 80+',
-  },
-  {
-    titleKey: '开箱即用',
-    descKey:
-      '一键登录，分钟级接入。兼容现有 SDK，零迁移成本。',
-    code: 'import OpenAI from "openai"',
-  },
-];
-
-function FeaturesSection() {
-  const { t } = useTranslation();
-  return (
-    <section id="features" className="py-24 px-6">
-      <div className="max-w-6xl mx-auto">
-        <p className="font-mono text-xs text-muted-foreground tracking-widest uppercase mb-3">
-          {/* features */}
-        </p>
-        <h2 className="font-heading text-3xl font-bold md:text-4xl tracking-tight mb-16 text-foreground">
-          {t('为接入 AI 模型的开发者而造。')}
-        </h2>
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3">
-          {FEATURES.map((f, i) => (
-            <div
-              key={i}
-              className="group p-8 flex flex-col transition-all duration-200 hover:bg-foreground hover:text-background border-b sm:border-r border-border"
-            >
-              <code className="inline-block text-xs mb-4 font-mono border border-foreground/10 px-2 py-1 w-fit group-hover:border-background/30 group-hover:text-background transition-all duration-200">
-                {f.code}
-              </code>
-              <h3 className="font-heading text-lg font-bold mb-2 text-foreground group-hover:text-background transition-all duration-200">
-                {t(f.titleKey)}
-              </h3>
-              <p className="text-sm text-muted-foreground leading-relaxed group-hover:text-background/70 transition-all duration-200">
-                {t(f.descKey)}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-/* ─── How It Works Section ──────────────────────────────────── */
-
-const STEPS = [
-  {
-    step: '01',
-    titleKey: '注册账号',
-    descKey: '通过邮箱一键注册，即刻开始使用。',
-    link: '/register',
-  },
-  {
-    step: '02',
-    titleKey: '创建 API Key',
-    descKey: '在控制台创建密钥，支持多 Key 管理与权限控制。',
-    link: '/console/token',
-  },
-  {
-    step: '03',
-    titleKey: '发起请求',
-    descKey: '使用你熟悉的 SDK 调用任意模型，完全兼容原生协议。',
-    link: '/pricing',
-  },
-];
-
-function HowItWorksSection() {
-  const { t } = useTranslation();
-  return (
-    <section
-      id="how-it-works"
-      className="border-y-4 border-border"
-    >
-      <div className="max-w-5xl mx-auto">
-        <div className="px-6 md:px-12 pt-24 pb-12">
-          <div className="font-mono text-xs text-muted-foreground tracking-widest uppercase mb-3">
-            {'// how it works'}
-          </div>
-          <h2 className="font-heading text-3xl font-bold md:text-4xl tracking-tight text-foreground">
-            {t('三步接入，分钟级上线')}
-          </h2>
-        </div>
-        {STEPS.map((s, i) => (
-          <Link
-            key={i}
-            to={s.link}
-            className={`group block border-t border-border ${
-              i === STEPS.length - 1 ? 'border-b border-border' : ''
-            } hover:bg-foreground transition-all duration-200`}
-          >
-            <div className="grid md:grid-cols-[120px_1fr_auto] gap-0 items-center">
-              <div className="px-6 md:px-12 py-8 md:border-r border-border group-hover:border-background/10 flex items-baseline transition-all duration-200">
-                <span className="font-mono text-5xl md:text-6xl font-bold text-muted-foreground/30 group-hover:text-background leading-none transition-all duration-200">
-                  {s.step}
-                </span>
-              </div>
-              <div className="px-6 md:px-12 py-8">
-                <h3 className="font-mono text-lg font-bold uppercase tracking-wide mb-2 text-foreground group-hover:text-background transition-all duration-200">
-                  {t(s.titleKey)}
-                </h3>
-                <p className="text-sm text-muted-foreground group-hover:text-background/50 transition-all duration-200">
-                  {t(s.descKey)}
-                </p>
-              </div>
-              <span className="hidden md:block pr-8 font-mono text-xl text-muted-foreground/30 group-hover:text-background transition-all duration-200">
-                &rarr;
+        <div className="flex items-center gap-3">
+          {userState.user ? (
+            <Link to="/console" className="w-7 h-7 rounded border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all">
+              <span className="w-4 h-4 rounded flex items-center justify-center text-[8px] font-bold text-white" style={{ backgroundColor: stringToColor(userState.user.username) }}>
+                {userState.user.username?.charAt(0).toUpperCase()}
               </span>
+            </Link>
+          ) : (
+            <Link to="/login" className="px-4 py-1.5 rounded text-sm font-medium text-white bg-[#1976d2] hover:bg-[#1565c0] transition-all">
+              {t('登录')}
+            </Link>
+          )}
+        </div>
+      </nav>
+
+      {/* Content */}
+      <div className="relative z-10 max-w-[1200px] mx-auto px-6 pt-14 pb-14">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          {/* Left */}
+          <div>
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#42a5f5]/30 bg-[#42a5f5]/10 mb-5">
+              <Sparkles size={12} className="text-[#42a5f5]" />
+              <span className="text-xs font-medium text-[#42a5f5]">Unified AI Gateway</span>
             </div>
-          </Link>
-        ))}
+
+            <h1 className="text-4xl sm:text-5xl lg:text-[52px] font-bold leading-[1.1] mb-5">
+              <span className="text-white">{t('更快、更稳、更省')}</span>
+              <br />
+              <span className="text-[#42a5f5]">{t('Token服务平台')}</span>
+            </h1>
+
+            <p className="text-white/60 text-lg leading-relaxed mb-8 max-w-lg">
+              {t('兼容 OpenAI / Claude / Gemini 等协议，覆盖文本、图像、视频、语音，智能路由，统一计费。')}
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-3 mb-10">
+              <Link to="/console/token" className="inline-flex items-center justify-center gap-2 px-7 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
+                {t('开始使用')} <ArrowRight size={16} />
+              </Link>
+              <Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-6 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
+                {t('查看价格')}
+              </Link>
+            </div>
+
+            {/* Stats */}
+            <div className="flex gap-10">
+              {[
+                { n: '80+', l: 'AI 模型' },
+                { n: '40+', l: '供应商' },
+                { n: '99.9%', l: '可用率' },
+              ].map((s, i) => (
+                <div key={i}>
+                  <div className="text-2xl font-bold text-white mb-1">{s.n}</div>
+                  <div className="text-sm text-white/40">{s.l}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right — Code card */}
+          <div className="relative">
+            <div className="rounded-lg border border-white/10 bg-[#0d2137]/80 backdrop-blur overflow-hidden shadow-2xl">
+              {/* Header */}
+              <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/5 bg-[#0a1929]/80">
+                <div className="flex gap-1.5">
+                  <span className="w-2 h-2 rounded-full bg-[#ff5f57]" />
+                  <span className="w-2 h-2 rounded-full bg-[#febc2e]" />
+                  <span className="w-2 h-2 rounded-full bg-[#28c840]" />
+                </div>
+                <span className="text-[10px] font-mono text-white/30 tracking-wider uppercase">terminal</span>
+                <button onClick={copyUrl} className="text-white/20 hover:text-[#42a5f5] transition-colors p-1 rounded hover:bg-white/5">
+                  {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
+                </button>
+              </div>
+              {/* Code */}
+              <div className="p-5 font-mono text-[11px] leading-[1.9]">
+                <div className="text-white/20 mb-3"># Quick start with curl</div>
+                <div>
+                  <span className="text-[#42a5f5]">curl</span>{' '}
+                  <span className="text-white/60">https://api.turingtoken.ai/v1/chat/completions</span> \
+                </div>
+                <div>{'  '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Authorization: Bearer $KEY"</span> \</div>
+                <div>{'  '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Content-Type: application/json"</span> \</div>
+                <div>{'  '}<span className="text-amber-400">-d</span> <span className="text-yellow-400">'{'{'}</span></div>
+                <div>{'    '}<span className="text-[#42a5f5]">"model"</span>: <span className="text-emerald-400">"gpt-4o"</span>,</div>
+                <div>{'    '}<span className="text-[#42a5f5]">"messages"</span>: [{'{'}<span className="text-[#42a5f5]">"role"</span>: <span className="text-emerald-400">"user"</span>, <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello"</span>{'}'}]</div>
+                <div><span className="text-yellow-400">{'}'}</span><span className="text-white/40">'</span></div>
+                <div className="mt-3 text-white/20"># Response</div>
+                <div className="text-white/50">{'{'} <span className="text-[#42a5f5]">"choices"</span>: [{'{'} <span className="text-[#42a5f5]">"message"</span>: {'{'} <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello! How can I help?"</span> {'}'} {'}'}] {'}'}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom marquee */}
+      <div className="relative z-10 border-t border-white/5 py-4 overflow-hidden bg-white/[0.02]">
+        <div className="home-marquee flex gap-6 items-center">
+          {[...Array(3)].fill(null).map((_, gi) => (
+            <React.Fragment key={gi}>
+              {['OpenAI', 'Claude', 'Gemini', 'DeepSeek', 'Qwen', 'MiniMax', 'Kimi', '智谱', 'Groq', 'Azure'].map((name, i) => (
+                <span key={`${gi}-${i}`} className="flex-shrink-0 px-4 py-1 rounded border border-white/5 bg-white/[0.03] text-xs font-medium text-white/30 hover:text-white/50 hover:border-white/10 transition-all">
+                  {name}
+                </span>
+              ))}
+            </React.Fragment>
+          ))}
+        </div>
       </div>
     </section>
   );
 }
 
-/* ─── Quick Start Section (Code Tabs) ───────────────────────── */
+/* ═══════════════ SECTION 2: CAPABILITIES ═══════════════ */
+const CAPABILITIES = [
+  { icon: <Layers size={22} />, title: '多协议兼容', desc: '原生支持 OpenAI、Claude、Gemini，切换 Base URL 即可接入' },
+  { icon: <Zap size={22} />, title: '智能路由', desc: '根据模型名称自动路由至最优供应商，无需关心底层调度' },
+  { icon: <CreditCard size={22} />, title: '统一计费', desc: '跨供应商统一 Token 消耗统计与账单，告别多平台充值' },
+  { icon: <RefreshCw size={22} />, title: '容错降级', desc: '多供应商端点自动切换，逐级降级保障服务持续可用' },
+  { icon: <Cpu size={22} />, title: '模型丰富', desc: '接入 80+ 主流模型，覆盖文本、图像、视频、语音全模态' },
+  { icon: <Shield size={22} />, title: '开箱即用', desc: '一键登录，分钟级接入，兼容现有 SDK，零迁移成本' },
+];
 
-const PROVIDERS = ['openai', 'claude', 'gemini'];
-const PROVIDER_LABELS = { openai: 'OpenAI', claude: 'Claude', gemini: 'Gemini' };
-const LANGUAGES = ['curl', 'python', 'nodejs'];
+function Capabilities() {
+  const { t } = useTranslation();
+  return (
+    <section className="py-16 px-6 bg-white">
+      <div className="max-w-[1200px] mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('平台核心能力')}</h2>
+          <p className="text-gray-500 text-sm">一个 API 网关，连接所有主流 AI 模型供应商</p>
+        </div>
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {CAPABILITIES.map((p, i) => (
+            <div key={i} className="group p-5 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all duration-300 cursor-pointer">
+              <div className="w-10 h-10 rounded-lg bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center mb-3 transition-transform duration-300 group-hover:scale-110">
+                {p.icon}
+              </div>
+              <h3 className="font-bold text-base text-gray-900 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(p.title)}</h3>
+              <p className="text-sm text-gray-500 leading-relaxed">{t(p.desc)}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ═══════════════ SECTION 3: HOW IT WORKS ═══════════════ */
+const STEPS = [
+  { n: '01', title: '注册账号', desc: '通过邮箱一键注册，即刻开始使用。', icon: <Users size={20} />, link: '/register' },
+  { n: '02', title: '创建 API Key', desc: '在控制台创建密钥，支持多 Key 管理。', icon: <Key size={20} />, link: '/console/token' },
+  { n: '03', title: '发起请求', desc: '使用你熟悉的 SDK 调用任意模型。', icon: <Send size={20} />, link: '/pricing' },
+];
+
+function HowItWorks() {
+  const { t } = useTranslation();
+  return (
+    <section className="py-16 px-6 bg-white">
+      <div className="max-w-[1000px] mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('三步接入，分钟级上线')}</h2>
+        </div>
+        <div className="grid md:grid-cols-3 gap-6 relative">
+          {STEPS.map((s, i) => (
+            <Link key={i} to={s.link} className="group text-center relative">
+              <div className="relative inline-flex">
+                <div className="w-14 h-14 rounded-full bg-[#1976d2] text-white flex items-center justify-center shadow-lg shadow-[#1976d2]/20 group-hover:shadow-xl group-hover:shadow-[#1976d2]/30 group-hover:scale-110 transition-all duration-300">
+                  {s.icon}
+                </div>
+                <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[#e3f2fd] text-[#1976d2] text-[10px] font-bold flex items-center justify-center border-2 border-white">
+                  {s.n}
+                </span>
+              </div>
+              <h3 className="text-base font-bold text-gray-900 mt-4 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(s.title)}</h3>
+              <p className="text-sm text-gray-500 max-w-[200px] mx-auto leading-relaxed">{t(s.desc)}</p>
+              {i < STEPS.length - 1 && (
+                <div className="hidden md:block absolute top-7 left-[60%] w-[80%] h-px">
+                  <div className="w-full h-full border-t-2 border-dashed border-[#bbdefb]" />
+                </div>
+              )}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ═══════════════ SECTION 5: QUICK START ═══════════════ */
+const PROVS = ['openai', 'claude', 'gemini'];
+const PROV_LABELS = { openai: 'OpenAI', claude: 'Claude', gemini: 'Gemini' };
+const LANGS = ['curl', 'python', 'nodejs'];
 const LANG_LABELS = { curl: 'cURL', python: 'Python', nodejs: 'Node.js' };
-
-const CODE_SAMPLES = {
+const SAMPLES = {
   openai: {
     curl: `curl https://api.turingtoken.ai/v1/chat/completions \\
   -H "Authorization: Bearer $OPENAI_API_KEY" \\
@@ -499,289 +329,344 @@ console.log(response.content[0].text);`,
     python: `import google.generativeai as genai
 
 genai.configure(api_key="sk-your-key")
-
 model = genai.GenerativeModel("gemini-2.0-flash")
 response = model.generate_content("Hello!")
 print(response.text)`,
     nodejs: `import { GoogleGenerativeAI } from "@google/generative-ai";
 
 const genAI = new GoogleGenerativeAI("sk-your-key");
-const model = genAI.getGenerativeModel({
-  model: "gemini-2.0-flash",
-});
-
+const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
 const result = await model.generateContent("Hello!");
 console.log(result.response.text());`,
   },
 };
 
-function QuickStartSection() {
+function QuickStart() {
   const { t } = useTranslation();
-  const [provider, setProvider] = useState('openai');
+  const [prov, setProv] = useState('openai');
   const [lang, setLang] = useState('curl');
   const [copied, setCopied] = useState(false);
-
-  const code = CODE_SAMPLES[provider]?.[lang] || '';
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [code]);
+  const code = SAMPLES[prov]?.[lang] || '';
+  const copy = useCallback(() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1500); }, [code]);
 
   return (
-    <section id="quick-start" className="px-6 py-16">
-      <div className="max-w-4xl mx-auto">
-        <p className="font-mono text-xs text-muted-foreground tracking-widest uppercase mb-2">
-          Quick Start
-        </p>
-        <h2 className="font-heading text-2xl font-bold mb-8 text-foreground">
-          {t('快速开始')}
-        </h2>
-
-        {/* Provider tabs */}
-        <div className="flex gap-0 mb-0">
-          {PROVIDERS.map((p) => (
-            <button
-              key={p}
-              type="button"
-              onClick={() => setProvider(p)}
-              className={`font-mono text-sm px-4 py-2 transition-all duration-200 ${
-                provider === p
-                  ? 'bg-foreground text-background'
-                  : 'border-2 border-border bg-transparent hover:bg-foreground hover:text-background'
-              }`}
-            >
-              {PROVIDER_LABELS[p]}
-            </button>
-          ))}
+    <section className="py-16 px-6 bg-[#f5f7fa]">
+      <div className="max-w-[900px] mx-auto">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('快速开始')}</h2>
         </div>
-
-        {/* Code block */}
-        <div className="border-2 border-border">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b-2 border-border bg-muted">
-            <div className="flex gap-3">
-              {LANGUAGES.map((l) => (
-                <button
-                  key={l}
-                  type="button"
-                  onClick={() => setLang(l)}
-                  className={`font-mono text-xs transition-colors ${
-                    lang === l
-                      ? 'text-foreground font-bold border-b-2 border-foreground'
-                      : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                >
+        <div className="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
+          <div className="flex items-center gap-1 px-3 pt-3 border-b border-gray-100">
+            {PROVS.map(p => (
+              <button key={p} onClick={() => setProv(p)} className={`px-4 py-2 rounded-t text-sm font-medium transition-all ${prov === p ? 'bg-[#1976d2] text-white' : 'text-gray-400 hover:text-gray-600'}`}>
+                {PROV_LABELS[p]}
+              </button>
+            ))}
+            <div className="flex-1" />
+            <div className="flex items-center gap-3 pr-2">
+              {LANGS.map(l => (
+                <button key={l} onClick={() => setLang(l)} className={`text-xs font-mono pb-2 transition-all ${lang === l ? 'text-[#1976d2] font-semibold border-b-2 border-[#1976d2]' : 'text-gray-400 hover:text-gray-600'}`}>
                   {LANG_LABELS[l]}
                 </button>
               ))}
+              <button onClick={copy} className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-[#1976d2] transition-all mb-2">
+                {copied ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
+              </button>
             </div>
-            <button
-              type="button"
-              onClick={handleCopy}
-              className="text-muted-foreground hover:text-foreground transition-colors"
-              title="Copy"
-            >
-              {copied ? <Check size={16} className="text-green-600" /> : <Copy size={16} />}
-            </button>
           </div>
-          <div className="bg-foreground text-background">
-            <pre className="p-5 text-sm leading-relaxed overflow-x-auto font-mono">
-              <code>{code}</code>
-            </pre>
+          <div className="bg-gradient-to-br from-[#0a1929] to-[#0d2137] p-5 border-t border-[#1976d2]/20">
+            <pre className="font-mono text-[11px] leading-[1.9] text-[#90caf9] overflow-x-auto"><code>{code}</code></pre>
           </div>
         </div>
-
-        {/* Call to docs */}
-        <Link
-          to="/pricing"
-          className="group mt-6 flex items-center justify-between border-2 border-border p-5 hover:bg-foreground transition-all duration-200"
-        >
+        <Link to="/pricing" className="group mt-5 flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all">
           <div>
-            <p className="font-mono text-xs text-muted-foreground group-hover:text-background/50 tracking-widest uppercase mb-1 transition-all duration-200">
-              Model Pricing
-            </p>
-            <p className="font-heading text-lg font-bold text-foreground group-hover:text-background transition-all duration-200">
-              {t('查看模型定价，了解完整列表')}
-            </p>
+            <p className="text-xs font-mono text-[#1976d2] tracking-wider uppercase mb-1">Model Pricing</p>
+            <p className="font-bold text-gray-900 group-hover:text-[#1976d2] transition-colors">{t('查看模型定价，了解完整列表')}</p>
           </div>
-          <span className="font-mono text-2xl text-foreground group-hover:text-background transition-all duration-200">
-            &rarr;
-          </span>
+          <ArrowUpRight size={18} className="text-gray-400 group-hover:text-[#1976d2] transition-all" />
         </Link>
       </div>
     </section>
   );
 }
 
-/* ─── Pricing / CTA Section ──────────────────────────────────── */
-
-function PricingSection() {
+/* ═══════════════ SECTION 6: CTA ═══════════════ */
+function CTA() {
   const { t } = useTranslation();
   return (
-    <section id="pricing" className="py-24 px-6">
-      <div className="max-w-4xl mx-auto">
-        <div className="text-xs font-mono text-muted-foreground mb-3 tracking-widest uppercase">
-          {'// pricing'}
-        </div>
-        <h2 className="font-heading text-3xl font-bold md:text-4xl tracking-tight mb-16 text-foreground">
-          {t('获取 Token 额度')}
-        </h2>
-
-        {/* Token credit callout */}
-        <div className="bg-foreground text-background px-8 py-5 mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-          <div className="flex items-center gap-4">
-            <span className="shrink-0 border border-background/30 px-2.5 py-0.5 text-xs font-mono tracking-widest uppercase">
-              {t('今日特惠')}
-            </span>
-            <span className="font-heading text-lg font-bold">
-              {t('注册即送 ¥10 额度')}
+    <section className="py-16 px-6 bg-white">
+      <div className="max-w-[1000px] mx-auto">
+        <div className="relative rounded-lg overflow-hidden bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c]">
+          <div className="absolute inset-0 opacity-[0.03]" style={{
+            backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
+            backgroundSize: '30px 30px',
+          }} />
+          <div className="absolute top-4 right-4">
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
+              <span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
+              限时活动
             </span>
           </div>
-          <span className="text-sm text-background/50">
-            {t('新用户注册即赠 ¥10 Token，7 天有效期')}
-          </span>
+          <div className="relative p-10 md:p-12 text-center">
+            <span className="inline-block px-3 py-1 rounded-full bg-[#42a5f5]/20 text-[#42a5f5] text-xs font-medium tracking-wider mb-5">SPECIAL OFFER</span>
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">{t('注册即送 ¥10 额度')}</h2>
+            <p className="text-white/60 text-base mb-6 max-w-lg mx-auto leading-relaxed">{t('新用户注册即赠 ¥10 Token，7 天有效期。兼容 OpenAI / Claude / Gemini 协议，一个 API Key 调用所有主流模型。')}</p>
+            <div className="flex items-center justify-center gap-4 mb-8 text-sm text-white/50">
+              <span className="flex items-center gap-1.5">
+                <Check size={14} className="text-emerald-400" />
+                无需绑定信用卡
+              </span>
+              <span className="flex items-center gap-1.5">
+                <Check size={14} className="text-emerald-400" />
+                即开即用
+              </span>
+              <span className="flex items-center gap-1.5">
+                <Check size={14} className="text-emerald-400" />
+                按量计费
+              </span>
+            </div>
+            <div className="flex flex-col sm:flex-row gap-3 justify-center">
+              <Link to="/register" className="inline-flex items-center justify-center gap-2 px-8 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
+                {t('免费注册')} <ArrowRight size={16} />
+              </Link>
+              <Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-8 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
+                {t('查看价格')}
+              </Link>
+            </div>
+          </div>
         </div>
-
-        {/* Call to action */}
-        <Link
-          to="/register"
-          className="group block border-2 border-border p-8 mb-6 hover:bg-foreground transition-all duration-200"
-        >
-          <h3 className="font-heading text-2xl font-bold mb-3 text-foreground group-hover:text-background transition-all duration-200">
-            {t('立即注册，开始使用')}
-          </h3>
-          <p className="text-sm text-muted-foreground group-hover:text-background/60 leading-relaxed mb-6 transition-all duration-200">
-            {t(
-              '兼容 OpenAI / Claude / Gemini 协议。一个 API Key，调用所有主流模型。免去多平台充值与管理的麻烦。'
-            )}
-          </p>
-          <span className="inline-flex items-center bg-foreground text-background border-2 border-foreground px-6 py-3 text-sm font-mono font-bold uppercase tracking-widest group-hover:bg-background group-hover:text-foreground transition-colors duration-200">
-            {t('免费注册')} &rarr;
-          </span>
-        </Link>
       </div>
     </section>
   );
 }
 
-/* ─── Providers Marquee Section ──────────────────────────────── */
+/* ═══════════════ SECTION 7: STATS ═══════════════ */
+function Stats() {
+  const { t } = useTranslation();
+  const nav = useNavigate();
+  return (
+    <section className="py-14 bg-[#f5f7fa]">
+      <div className="max-w-[1200px] mx-auto px-6">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {[
+            { n: '80+', l: 'AI 模型', d: '覆盖主流模型' },
+            { n: '40+', l: '供应商', d: '全球优质渠道' },
+            { n: '99.9%', l: '可用率', d: '稳定可靠' },
+            { n: '<100ms', l: '响应延迟', d: '极速响应' },
+          ].map((s, i) => (
+            <div key={i} className="text-center p-5 rounded-lg bg-white border border-gray-100">
+              <div className="text-3xl font-bold text-[#1976d2] mb-1">{s.n}</div>
+              <div className="text-sm font-medium text-gray-900 mb-0.5">{s.l}</div>
+              <div className="text-xs text-gray-400">{s.d}</div>
+            </div>
+          ))}
+        </div>
+        <div className="text-center mt-8">
+          <button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
+            {t('查看全部模型')} <ArrowRight size={14} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
 
-const PROVIDER_LOGOS = [
-  { name: 'OpenAI', className: 'opacity-60' },
-  { name: 'Claude', className: 'opacity-60' },
-  { name: 'Gemini', className: 'opacity-60' },
-  { name: 'DeepSeek', className: 'opacity-60' },
-  { name: 'Qwen', className: 'opacity-60' },
-  { name: 'MiniMax', className: 'opacity-60' },
-  { name: 'Kimi', className: 'opacity-60' },
-  { name: '智谱', className: 'opacity-60' },
-  { name: 'Groq', className: 'opacity-60' },
-  { name: 'Azure', className: 'opacity-60' },
+/* ═══════════════ SECTION 8: PRICING PREVIEW ═══════════════ */
+const PRICING_MODELS = [
+  { name: 'GPT-4o', input: '¥0.02/1K', output: '¥0.08/1K' },
+  { name: 'Claude 3.5 Sonnet', input: '¥0.02/1K', output: '¥0.10/1K' },
+  { name: 'Gemini 1.5 Pro', input: '¥0.01/1K', output: '¥0.05/1K' },
+  { name: 'DeepSeek V3', input: '¥0.002/1K', output: '¥0.006/1K' },
 ];
 
-function ProvidersSection() {
+function PricingPreview() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-
+  const nav = useNavigate();
   return (
-    <section className="bg-foreground text-background border-t-4 border-background">
-      {/* Provider logos marquee area */}
-      <div className="w-full py-16 px-6">
-        <div className="max-w-6xl mx-auto text-center">
-          <p className="font-mono text-xs text-background/30 tracking-widest uppercase mb-3">
-            {'// supported providers'}
-          </p>
-          <h2 className="font-heading text-2xl font-bold mb-8">
-            {t('40+ AI 供应商，统一接入')}
-          </h2>
-
-          <div className="overflow-hidden">
-            <div className="home-marquee flex gap-16 items-center">
-              {[...PROVIDER_LOGOS, ...PROVIDER_LOGOS].map((logo, i) => (
-                <span
-                  key={i}
-                  className="font-mono text-sm text-background/40 whitespace-nowrap tracking-wider"
-                >
-                  {logo.name}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div className="mt-10">
-            <button
-              type="button"
-              onClick={() => navigate('/pricing')}
-              className="inline-flex items-center bg-background text-foreground border-2 border-background px-8 py-3 text-sm font-mono font-bold uppercase tracking-widest hover:bg-transparent hover:text-background transition-colors duration-200"
-            >
-              {t('查看全部模型')} &rarr;
-            </button>
-          </div>
+    <section className="py-14 bg-[#f5f7fa]">
+      <div className="max-w-[1000px] mx-auto px-6">
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('透明定价')}</h2>
+          <p className="text-gray-500 text-sm">按量计费，用多少付多少，无隐藏费用</p>
+        </div>
+        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+          <div className="grid grid-cols-4 bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-500">
+            <div className="px-4 py-3">模型</div>
+            <div className="px-4 py-3">输入价格</div>
+            <div className="px-4 py-3">输出价格</div>
+            <div className="px-4 py-3 text-right">操作</div>
+          </div>
+          {PRICING_MODELS.map((m, i) => (
+            <div key={i} className={`grid grid-cols-4 text-sm ${i < PRICING_MODELS.length - 1 ? 'border-b border-gray-100' : ''}`}>
+              <div className="px-4 py-3 font-medium text-gray-900">{m.name}</div>
+              <div className="px-4 py-3 text-gray-600">{m.input}</div>
+              <div className="px-4 py-3 text-gray-600">{m.output}</div>
+              <div className="px-4 py-3 text-right">
+                <button onClick={() => nav('/pricing')} className="text-[#1976d2] text-xs font-medium hover:underline">
+                  查看详情
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="text-center mt-6">
+          <button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
+            {t('查看完整价格表')} <ArrowRight size={14} />
+          </button>
         </div>
-      </div>
-
-      <div className="text-center pt-6 pb-8">
-        <p className="font-mono text-xs text-background/30 tracking-wide">
-          {t('免费注册，分钟级接入。兼容你现有的 SDK 和工作流。')}
-        </p>
       </div>
     </section>
   );
 }
 
-/* ─── Dark Footer ────────────────────────────────────────────── */
+/* ═══════════════ SECTION 10: TESTIMONIALS ═══════════════ */
+const TESTIMONIALS = [
+  { name: '张工', role: 'AI 创业公司 CTO', content: '接入 TuringToken 后，我们无需逐一对接各家 API，开发效率提升了 3 倍。智能路由让我们的服务稳定性达到了 99.95%。' },
+  { name: '李经理', role: '互联网大厂技术负责人', content: '统一计费功能非常实用，以前每个月要对账 5 家供应商，现在一个后台全搞定。成本降低了 20%。' },
+  { name: '王同学', role: '独立开发者', content: '作为个人开发者，最看重的是按量计费和免费额度。TuringToken 让我能用上 GPT-4o 而不用担心账单。' },
+];
 
-function DarkFooter() {
+function Testimonials() {
   const { t } = useTranslation();
   return (
-    <footer className="bg-foreground text-background border-t border-background/10 py-12 px-6">
-      <div className="max-w-6xl mx-auto">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-6 mb-8">
-          <div className="flex items-center gap-6">
-            <Link
-              to="/pricing"
-              className="font-mono text-xs text-background/40 hover:text-background transition-all duration-200"
-            >
-              {t('定价')}
-            </Link>
-            <Link
-              to="/console"
-              className="font-mono text-xs text-background/40 hover:text-background transition-all duration-200"
-            >
-              {t('控制台')}
-            </Link>
+    <section className="py-14 bg-white">
+      <div className="max-w-[1200px] mx-auto px-6">
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('用户评价')}</h2>
+          <p className="text-gray-500 text-sm">来自真实用户的声音</p>
+        </div>
+        <div className="grid md:grid-cols-3 gap-5">
+          {TESTIMONIALS.map((t, i) => (
+            <div key={i} className="p-5 rounded-lg border border-gray-200 bg-white hover:shadow-lg hover:shadow-gray-100 transition-all">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-full bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center font-bold text-sm">
+                  {t.name.charAt(0)}
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-gray-900">{t.name}</div>
+                  <div className="text-xs text-gray-400">{t.role}</div>
+                </div>
+              </div>
+              <p className="text-sm text-gray-600 leading-relaxed">"{t.content}"</p>
+              <div className="flex gap-0.5 mt-3">
+                {[1,2,3,4,5].map(s => (
+                  <svg key={s} className="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
+                    <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
+                  </svg>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ═══════════════ SECTION 11: FAQ ═══════════════ */
+const FAQS = [
+  { q: '什么是 TuringToken？', a: 'TuringToken 是一个统一的 AI 网关平台，通过一个 API Key 即可调用 OpenAI、Claude、Gemini 等多家主流大模型，无需分别对接。' },
+  { q: '如何开始使用？', a: '注册账号后，在控制台创建 API Key，将 Base URL 设置为 api.turingtoken.ai 即可。兼容现有 OpenAI SDK，无需修改代码。' },
+  { q: '支持哪些模型？', a: '目前支持 80+ 模型，包括 GPT-4o、Claude 3.5 Sonnet、Gemini 1.5 Pro、DeepSeek V3、通义千问、智谱 GLM-4 等主流模型。' },
+  { q: '计费方式是什么？', a: '按 Token 消耗量计费，用多少付多少。新用户注册即送 ¥10 额度，7 天有效期。无最低消费，无月费。' },
+  { q: '数据安全如何保障？', a: '我们不存储任何请求和响应内容，所有数据仅用于实时转发。支持 HTTPS 加密传输，企业版可选私有部署。' },
+];
+
+function FAQ() {
+  const { t } = useTranslation();
+  const [openIdx, setOpenIdx] = useState(null);
+  return (
+    <section className="py-14 bg-[#f5f7fa]">
+      <div className="max-w-[800px] mx-auto px-6">
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('常见问题')}</h2>
+          <p className="text-gray-500 text-sm">如有其他问题，请联系 support@turingtoken.ai</p>
+        </div>
+        <div className="space-y-3">
+          {FAQS.map((f, i) => (
+            <div key={i} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+              <button
+                onClick={() => setOpenIdx(openIdx === i ? null : i)}
+                className="w-full flex items-center justify-between px-5 py-4 text-left"
+              >
+                <span className="text-sm font-medium text-gray-900">{f.q}</span>
+                <ChevronRight size={16} className={`text-gray-400 transition-transform ${openIdx === i ? 'rotate-90' : ''}`} />
+              </button>
+              {openIdx === i && (
+                <div className="px-5 pb-4">
+                  <p className="text-sm text-gray-500 leading-relaxed">{f.a}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ═══════════════ FOOTER ═══════════════ */
+function Footer() {
+  const { t } = useTranslation();
+  return (
+    <footer className="bg-[#0a1929] border-t border-white/5">
+      <div className="max-w-[1200px] mx-auto px-6 py-12">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
+          <div>
+            <div className="flex items-center gap-2.5 mb-4">
+              <img src="/logo.jpg" alt="" className="w-6 h-6 rounded object-cover" />
+              <span className="font-bold text-white text-sm">TuringToken</span>
+            </div>
+            <p className="text-xs text-white/30 leading-relaxed">统一 AI 网关，一个 API 连接所有主流大模型。</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-white mb-3">产品</h4>
+            <div className="space-y-2">
+              <Link to="/pricing" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('定价')}</Link>
+              <Link to="/console" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('控制台')}</Link>
+              <Link to="/benchmarks" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('模型评测')}</Link>
+            </div>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-white mb-3">支持</h4>
+            <div className="space-y-2">
+              <Link to="/docs" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('文档')}</Link>
+              <Link to="/about" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('关于我们')}</Link>
+              <span className="block text-xs text-white/40">support@turingtoken.ai</span>
+            </div>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-white mb-3">法律</h4>
+            <div className="space-y-2">
+              <span className="block text-xs text-white/40">服务协议</span>
+              <span className="block text-xs text-white/40">隐私政策</span>
+              <span className="block text-xs text-white/40">合规声明</span>
+            </div>
           </div>
         </div>
-        <div className="border-t border-background/10 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
-          <span className="font-mono text-xs text-background/30">
-            &copy; 2026 {getSystemName()}
-          </span>
+        <div className="pt-6 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-3">
+          <span className="text-xs text-white/20">&copy; 2026 {getSystemName()} All rights reserved.</span>
+          <span className="text-xs text-white/20">Powered by QuantumNous</span>
         </div>
       </div>
     </footer>
   );
 }
 
-/* ─── Main Home Page ────────────────────────────────────────── */
-
-const Home = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <div className="home-page">
-        <HeroSection />
-        <FeaturesSection />
-        <HowItWorksSection />
-        <QuickStartSection />
-        <PricingSection />
-        <ProvidersSection />
-        <DarkFooter />
-      </div>
-    </div>
-  );
-};
+/* ═══════════════ EXPORT ═══════════════ */
+const Home = () => (
+  <div className="min-h-screen">
+    <Hero />
+    <Capabilities />
+    <HowItWorks />
+    <QuickStart />
+    <Stats />
+    <PricingPreview />
+    <Testimonials />
+    <FAQ />
+    <CTA />
+    <Footer />
+  </div>
+);
 
 export default Home;
-