diff --git a/frontend/index.html b/frontend/index.html
index 1bf971e..8270ff1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>玩玩云 - 现代化云存储管理平台</title>
+  <title>玩玩云 - 现代化云存储平台</title>
   <script>
-    // 邮件激活/重置链接容错：如果在落地页携带token，自动跳转到应用页处理
+    // 邮件激活/重置链接容错
     (function() {
       const search = window.location.search;
       if (!search) return;
@@ -23,27 +23,28 @@
     }
 
     :root {
-      --primary: #667eea;
-      --primary-dark: #5568d3;
-      --secondary: #764ba2;
-      --accent: #f093fb;
-      --dark: #1a202c;
-      --light: #f7fafc;
-      --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
-      --shadow-md: 0 10px 40px rgba(0,0,0,0.1);
-      --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #12121a;
+      --glass: rgba(255, 255, 255, 0.03);
+      --glass-border: rgba(255, 255, 255, 0.08);
+      --text-primary: #ffffff;
+      --text-secondary: rgba(255, 255, 255, 0.6);
+      --accent-1: #667eea;
+      --accent-2: #764ba2;
+      --accent-3: #f093fb;
+      --glow: rgba(102, 126, 234, 0.4);
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background: var(--gradient);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
       min-height: 100vh;
       overflow-x: hidden;
     }
 
-    /* 动画背景 */
-    .animated-bg {
+    /* 动态背景 */
+    .bg-gradient {
       position: fixed;
       top: 0;
       left: 0;
@@ -53,610 +54,454 @@
       overflow: hidden;
     }
 
-    .animated-bg::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 1%);
-      background-size: 50px 50px;
-      animation: moveBackground 20s linear infinite;
-    }
-
-    @keyframes moveBackground {
-      0% { transform: translate(0, 0); }
-      100% { transform: translate(50px, 50px); }
-    }
-
-    /* 浮动元素 */
-    .floating-shape {
+    .gradient-orb {
       position: absolute;
       border-radius: 50%;
-      background: rgba(255, 255, 255, 0.05);
-      animation: float 6s ease-in-out infinite;
+      filter: blur(80px);
+      opacity: 0.5;
+      animation: float 20s ease-in-out infinite;
     }
 
-    .shape-1 { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }
-    .shape-2 { width: 200px; height: 200px; top: 60%; right: 10%; animation-delay: 2s; }
-    .shape-3 { width: 150px; height: 150px; bottom: 15%; left: 15%; animation-delay: 4s; }
+    .orb-1 {
+      width: 600px;
+      height: 600px;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
+      top: -200px;
+      right: -200px;
+      animation-delay: 0s;
+    }
+
+    .orb-2 {
+      width: 500px;
+      height: 500px;
+      background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
+      bottom: -150px;
+      left: -150px;
+      animation-delay: -7s;
+    }
+
+    .orb-3 {
+      width: 300px;
+      height: 300px;
+      background: linear-gradient(135deg, var(--accent-3), var(--accent-1));
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      animation-delay: -14s;
+      opacity: 0.3;
+    }
 
     @keyframes float {
-      0%, 100% { transform: translateY(0) rotate(0deg); }
-      50% { transform: translateY(-30px) rotate(10deg); }
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      25% { transform: translate(50px, -50px) scale(1.1); }
+      50% { transform: translate(-30px, 30px) scale(0.95); }
+      75% { transform: translate(-50px, -30px) scale(1.05); }
+    }
+
+    /* 网格背景 */
+    .grid-bg {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image:
+        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+      background-size: 60px 60px;
+      z-index: -1;
     }
 
     /* 导航栏 */
     .navbar {
-      background: rgba(255, 255, 255, 0.98);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
       padding: 20px 50px;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      box-shadow: var(--shadow-md);
-      position: sticky;
-      top: 0;
       z-index: 100;
-      backdrop-filter: blur(10px);
+      background: rgba(10, 10, 15, 0.8);
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--glass-border);
     }
 
     .logo {
-      font-size: 32px;
-      font-weight: 800;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+      font-size: 28px;
+      font-weight: 700;
       display: flex;
       align-items: center;
       gap: 12px;
-      cursor: pointer;
-      transition: transform 0.3s;
-    }
-
-    .logo:hover {
-      transform: scale(1.05);
+      color: var(--text-primary);
     }
 
     .logo i {
-      background: var(--gradient);
+      font-size: 32px;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
 
-    .nav-buttons {
+    .nav-links {
       display: flex;
-      gap: 15px;
+      gap: 12px;
     }
 
     .btn {
-      padding: 14px 32px;
-      border: none;
+      padding: 12px 28px;
       border-radius: 12px;
-      cursor: pointer;
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      transition: all 0.3s ease;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
-      position: relative;
-      overflow: hidden;
+      border: none;
     }
 
-    .btn::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      border-radius: 50%;
-      background: rgba(255,255,255,0.3);
-      transform: translate(-50%, -50%);
-      transition: width 0.6s, height 0.6s;
+    .btn-ghost {
+      background: transparent;
+      color: var(--text-secondary);
+      border: 1px solid transparent;
     }
 
-    .btn:hover::before {
-      width: 300px;
-      height: 300px;
-    }
-
-    .btn > * {
-      position: relative;
-      z-index: 1;
+    .btn-ghost:hover {
+      color: var(--text-primary);
+      background: var(--glass);
+      border-color: var(--glass-border);
     }
 
     .btn-primary {
-      background: var(--gradient);
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
-      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+      box-shadow: 0 4px 20px var(--glow);
     }
 
     .btn-primary:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px var(--glow);
     }
 
-    .btn-outline {
-      background: transparent;
-      color: var(--primary);
-      border: 2px solid var(--primary);
+    /* 主内容区 */
+    .main {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 120px 50px 80px;
     }
 
-    .btn-outline:hover {
-      background: var(--primary);
-      color: white;
-      transform: translateY(-3px);
-      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
-    }
-
-    /* Hero区域的outline按钮使用白色配色，在渐变背景上更清晰 */
-    .hero .btn-outline {
-      background: rgba(255, 255, 255, 0.15);
-      color: white;
-      border: 2px solid rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(10px);
-    }
-
-    .hero .btn-outline:hover {
-      background: rgba(255, 255, 255, 0.95);
-      color: var(--primary);
-      border-color: white;
-      transform: translateY(-3px);
-      box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
-    }
-
-    /* Hero Section */
-    .hero {
+    .container {
       max-width: 1200px;
-      margin: 100px auto 60px;
-      padding: 0 50px;
-      text-align: center;
-      color: white;
-      animation: fadeInUp 1s ease-out;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 80px;
+      align-items: center;
     }
 
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(30px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
+    /* 左侧内容 */
+    .hero-content {
+      animation: fadeIn 1s ease-out;
     }
 
-    .hero-badge {
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
-      padding: 8px 20px;
-      background: rgba(255,255,255,0.2);
+      padding: 8px 16px;
+      background: var(--glass);
+      border: 1px solid var(--glass-border);
       border-radius: 50px;
-      font-size: 14px;
-      font-weight: 600;
+      font-size: 13px;
+      color: var(--accent-3);
       margin-bottom: 30px;
       backdrop-filter: blur(10px);
-      border: 1px solid rgba(255,255,255,0.3);
-      animation: pulse 2s ease-in-out infinite;
     }
 
-    @keyframes pulse {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
+    .badge i {
+      font-size: 10px;
     }
 
-    .hero h1 {
-      font-size: 72px;
-      font-weight: 900;
-      margin-bottom: 25px;
-      line-height: 1.2;
-      text-shadow: 0 4px 20px rgba(0,0,0,0.1);
-      letter-spacing: -1px;
+    .hero-title {
+      font-size: 64px;
+      font-weight: 800;
+      line-height: 1.1;
+      margin-bottom: 24px;
+      letter-spacing: -2px;
     }
 
-    .hero h1 i {
-      animation: bounce 2s ease-in-out infinite;
+    .hero-title .gradient-text {
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
-    @keyframes bounce {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
-    }
-
-    .hero-subtitle {
-      font-size: 24px;
-      margin-bottom: 50px;
-      opacity: 0.95;
-      line-height: 1.6;
-      font-weight: 400;
-      max-width: 800px;
-      margin-left: auto;
-      margin-right: auto;
+    .hero-desc {
+      font-size: 18px;
+      color: var(--text-secondary);
+      line-height: 1.7;
+      margin-bottom: 40px;
+      max-width: 500px;
     }
 
     .hero-buttons {
       display: flex;
-      gap: 20px;
-      justify-content: center;
-      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 60px;
     }
 
     .btn-large {
-      padding: 20px 40px;
-      font-size: 20px;
-      border-radius: 16px;
+      padding: 16px 36px;
+      font-size: 16px;
+      border-radius: 14px;
     }
 
-    .btn-large i {
-      font-size: 22px;
-    }
-
-    /* Stats Section */
+    /* 统计数据 */
     .stats {
-      max-width: 1200px;
-      margin: 80px auto;
-      padding: 0 50px;
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 40px;
+      display: flex;
+      gap: 50px;
     }
 
-    .stat-card {
-      text-align: center;
-      color: white;
-      animation: fadeInUp 1s ease-out;
-      animation-fill-mode: both;
+    .stat-item {
+      text-align: left;
     }
 
-    .stat-card:nth-child(1) { animation-delay: 0.1s; }
-    .stat-card:nth-child(2) { animation-delay: 0.2s; }
-    .stat-card:nth-child(3) { animation-delay: 0.3s; }
-
-    .stat-number {
-      font-size: 56px;
-      font-weight: 900;
-      display: block;
-      margin-bottom: 10px;
-      background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
+    .stat-value {
+      font-size: 32px;
+      font-weight: 700;
+      background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
 
     .stat-label {
-      font-size: 18px;
-      opacity: 0.9;
-      font-weight: 500;
+      font-size: 14px;
+      color: var(--text-secondary);
+      margin-top: 4px;
     }
 
-    /* Features Section */
-    .features-section {
-      background: white;
-      padding: 100px 50px;
-      margin-top: 60px;
-    }
-
-    .section-header {
-      text-align: center;
-      max-width: 800px;
-      margin: 0 auto 80px;
-    }
-
-    .section-title {
-      font-size: 48px;
-      font-weight: 800;
-      color: var(--dark);
-      margin-bottom: 20px;
-      position: relative;
-      display: inline-block;
-    }
-
-    .section-title::after {
-      content: '';
-      position: absolute;
-      bottom: -10px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 60px;
-      height: 4px;
-      background: var(--gradient);
-      border-radius: 2px;
-    }
-
-    .section-desc {
-      font-size: 20px;
-      color: #666;
-      line-height: 1.7;
-      margin-top: 30px;
-    }
-
-    .features {
-      max-width: 1200px;
-      margin: 0 auto;
+    /* 右侧功能卡片 */
+    .features-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-      gap: 40px;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
+      animation: fadeIn 1s ease-out 0.3s both;
     }
 
     .feature-card {
-      background: white;
-      padding: 50px 40px;
-      border-radius: 24px;
-      box-shadow: var(--shadow-sm);
-      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      border: 2px solid transparent;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .feature-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: var(--gradient);
-      opacity: 0;
-      transition: opacity 0.4s;
-      z-index: 0;
-    }
-
-    .feature-card:hover::before {
-      opacity: 0.03;
+      background: var(--glass);
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      padding: 28px;
+      backdrop-filter: blur(20px);
+      transition: all 0.4s ease;
+      cursor: default;
     }
 
     .feature-card:hover {
-      transform: translateY(-12px);
-      box-shadow: var(--shadow-lg);
-      border-color: var(--primary);
+      transform: translateY(-8px);
+      border-color: rgba(102, 126, 234, 0.3);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     }
 
-    .feature-card > * {
-      position: relative;
-      z-index: 1;
-    }
+    .feature-card:nth-child(2) { animation-delay: 0.1s; }
+    .feature-card:nth-child(3) { animation-delay: 0.2s; }
+    .feature-card:nth-child(4) { animation-delay: 0.3s; }
 
     .feature-icon {
-      width: 80px;
-      height: 80px;
-      background: var(--gradient);
-      border-radius: 20px;
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
+      border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-bottom: 30px;
-      transition: all 0.4s;
-    }
-
-    .feature-icon i {
-      font-size: 40px;
+      margin-bottom: 18px;
+      font-size: 22px;
       color: white;
     }
 
-    .feature-card:hover .feature-icon {
-      transform: scale(1.1) rotate(5deg);
-      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
-    }
-
     .feature-title {
-      font-size: 24px;
-      font-weight: 700;
-      margin-bottom: 16px;
-      color: var(--dark);
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
     }
 
     .feature-desc {
-      font-size: 16px;
-      color: #666;
-      line-height: 1.7;
-    }
-
-    .feature-tag {
-      display: inline-block;
-      padding: 6px 14px;
-      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-      color: var(--primary);
-      border-radius: 20px;
-      font-size: 13px;
-      font-weight: 600;
-      margin-top: 16px;
-    }
-
-    /* Tech Stack Section */
-    .tech-stack {
-      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-      padding: 100px 50px;
-    }
-
-    .tech-grid {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-      gap: 30px;
-    }
-
-    .tech-item {
-      background: white;
-      padding: 30px 20px;
-      border-radius: 16px;
-      text-align: center;
-      box-shadow: var(--shadow-sm);
-      transition: all 0.3s;
-      border: 2px solid transparent;
-    }
-
-    .tech-item:hover {
-      transform: translateY(-8px);
-      box-shadow: var(--shadow-md);
-      border-color: var(--primary);
-    }
-
-    .tech-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .tech-name {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--dark);
-    }
-
-    /* CTA Section */
-    .cta-section {
-      background: var(--dark);
-      color: white;
-      padding: 100px 50px;
-      text-align: center;
-    }
-
-    .cta-content {
-      max-width: 800px;
-      margin: 0 auto;
-    }
-
-    .cta-title {
-      font-size: 48px;
-      font-weight: 800;
-      margin-bottom: 24px;
-    }
-
-    .cta-desc {
-      font-size: 20px;
-      opacity: 0.9;
-      margin-bottom: 40px;
+      font-size: 14px;
+      color: var(--text-secondary);
       line-height: 1.6;
     }
 
-    .cta-buttons {
+    /* 底部技术栈 */
+    .tech-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 20px 50px;
+      background: rgba(10, 10, 15, 0.9);
+      backdrop-filter: blur(20px);
+      border-top: 1px solid var(--glass-border);
       display: flex;
-      gap: 20px;
-      justify-content: center;
-      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: center;
     }
 
-    /* Footer */
-    .footer {
-      background: #111;
-      color: white;
-      padding: 40px 50px;
+    .tech-list {
+      display: flex;
+      gap: 30px;
+      align-items: center;
     }
 
-    .footer-bottom {
-      max-width: 1200px;
-      margin: 0 auto;
-      text-align: center;
-      color: rgba(255,255,255,0.7);
-    }
-
-    .footer-bottom p {
+    .tech-item {
       display: flex;
       align-items: center;
-      justify-content: center;
       gap: 8px;
+      font-size: 13px;
+      color: var(--text-secondary);
+      transition: color 0.3s;
+    }
+
+    .tech-item:hover {
+      color: var(--text-primary);
+    }
+
+    .tech-item i {
+      font-size: 18px;
+    }
+
+    .copyright {
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    /* 响应式 */
+    @media (max-width: 1024px) {
+      .container {
+        grid-template-columns: 1fr;
+        gap: 60px;
+        text-align: center;
+      }
+
+      .hero-content {
+        order: 1;
+      }
+
+      .features-grid {
+        order: 2;
+      }
+
+      .hero-desc {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .hero-buttons {
+        justify-content: center;
+      }
+
+      .stats {
+        justify-content: center;
+      }
     }
 
-    /* Responsive */
     @media (max-width: 768px) {
       .navbar {
         padding: 15px 20px;
       }
 
       .logo {
-        font-size: 24px;
+        font-size: 22px;
       }
 
-      .hero {
-        margin: 60px auto 40px;
-        padding: 0 20px;
+      .logo i {
+        font-size: 26px;
       }
 
-      .hero h1 {
-        font-size: 42px;
+      .main {
+        padding: 100px 20px 120px;
       }
 
-      .hero-subtitle {
-        font-size: 18px;
+      .hero-title {
+        font-size: 40px;
+        letter-spacing: -1px;
+      }
+
+      .hero-desc {
+        font-size: 16px;
+      }
+
+      .hero-buttons {
+        flex-direction: column;
       }
 
       .btn-large {
-        padding: 16px 28px;
-        font-size: 16px;
+        width: 100%;
+        justify-content: center;
       }
 
       .stats {
-        grid-template-columns: 1fr;
-        padding: 0 20px;
+        flex-wrap: wrap;
         gap: 30px;
       }
 
-      .stat-number {
-        font-size: 40px;
-      }
-
-      .features-section,
-      .tech-stack,
-      .cta-section {
-        padding: 60px 20px;
-      }
-
-      .section-title {
-        font-size: 36px;
-      }
-
-      .section-desc {
-        font-size: 16px;
-      }
-
-      .features {
+      .features-grid {
         grid-template-columns: 1fr;
-        gap: 30px;
       }
 
-      .footer {
-        padding: 30px 20px;
+      .tech-bar {
+        flex-direction: column;
+        gap: 15px;
+        padding: 15px 20px;
+      }
+
+      .tech-list {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
       }
     }
 
-    /* Scroll reveal animation */
-    .reveal {
-      opacity: 0;
-      transform: translateY(30px);
-      transition: all 0.8s ease-out;
-    }
+    @media (max-width: 480px) {
+      .nav-links .btn span {
+        display: none;
+      }
 
-    .reveal.active {
-      opacity: 1;
-      transform: translateY(0);
+      .nav-links .btn {
+        padding: 10px 14px;
+      }
     }
   </style>
 </head>
 <body>
-  <!-- 动画背景 -->
-  <div class="animated-bg">
-    <div class="floating-shape shape-1"></div>
-    <div class="floating-shape shape-2"></div>
-    <div class="floating-shape shape-3"></div>
+  <!-- 背景效果 -->
+  <div class="bg-gradient">
+    <div class="gradient-orb orb-1"></div>
+    <div class="gradient-orb orb-2"></div>
+    <div class="gradient-orb orb-3"></div>
   </div>
+  <div class="grid-bg"></div>
 
   <!-- 导航栏 -->
   <nav class="navbar">
     <div class="logo">
       <i class="fas fa-cloud"></i>
-      玩玩云
+      <span>玩玩云</span>
     </div>
-    <div class="nav-buttons">
-      <a href="app.html?action=login" class="btn btn-outline">
-        <i class="fas fa-right-to-bracket"></i>
+    <div class="nav-links">
+      <a href="app.html?action=login" class="btn btn-ghost">
+        <i class="fas fa-arrow-right-to-bracket"></i>
         <span>登录</span>
       </a>
       <a href="app.html?action=register" class="btn btn-primary">
@@ -666,263 +511,104 @@
     </div>
   </nav>
 
-  <!-- Hero Section -->
-  <div class="hero">
-    <div class="hero-badge">
-      <i class="fas fa-star"></i>
-      <span>版本号 V1.0</span>
+  <!-- 主内容 -->
+  <main class="main">
+    <div class="container">
+      <!-- 左侧文案 -->
+      <div class="hero-content">
+        <div class="badge">
+          <i class="fas fa-circle"></i>
+          <span>安全 · 高效 · 简洁</span>
+        </div>
+        <h1 class="hero-title">
+          现代化<br><span class="gradient-text">云存储平台</span>
+        </h1>
+        <p class="hero-desc">
+          简单、安全、高效的文件管理解决方案。支持 SFTP 远程连接和服务器本地存储双模式，随时随地管理和分享你的文件。
+        </p>
+        <div class="hero-buttons">
+          <a href="app.html?action=register" class="btn btn-primary btn-large">
+            <i class="fas fa-rocket"></i>
+            <span>免费注册</span>
+          </a>
+          <a href="app.html?action=login" class="btn btn-ghost btn-large">
+            <i class="fas fa-play"></i>
+            <span>已有账号</span>
+          </a>
+        </div>
+        <div class="stats">
+          <div class="stat-item">
+            <div class="stat-value">5GB</div>
+            <div class="stat-label">单文件上限</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">双模式</div>
+            <div class="stat-label">存储方案</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">24/7</div>
+            <div class="stat-label">全天候服务</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧功能卡片 -->
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="fas fa-server"></i>
+          </div>
+          <h3 class="feature-title">SFTP 连接</h3>
+          <p class="feature-desc">连接你自己的服务器，数据完全自主掌控</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="fas fa-cloud-arrow-up"></i>
+          </div>
+          <h3 class="feature-title">极速上传</h3>
+          <p class="feature-desc">拖拽上传，实时进度，支持大文件断点续传</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="fas fa-share-nodes"></i>
+          </div>
+          <h3 class="feature-title">安全分享</h3>
+          <p class="feature-desc">一键生成链接，支持密码保护和有效期</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="fas fa-shield-halved"></i>
+          </div>
+          <h3 class="feature-title">企业安全</h3>
+          <p class="feature-desc">JWT 认证，bcrypt 加密，全链路安全</p>
+        </div>
+      </div>
     </div>
-    <h1>
-      <i class="fas fa-cloud"></i>
-      玩玩云管理平台
-    </h1>
-    <p class="hero-subtitle">
-      简单、安全、高效的现代化云存储管理解决方案<br>
-      支持SFTP远程连接和服务器本地存储两种模式，随时随地管理文件，轻松分享
-    </p>
-    <div class="hero-buttons">
-      <a href="app.html?action=register" class="btn btn-primary btn-large">
-        <i class="fas fa-rocket"></i>
-        <span>立即开始</span>
-      </a>
-      <a href="app.html?action=login" class="btn btn-outline btn-large">
-        <i class="fas fa-right-to-bracket"></i>
-        <span>已有账号</span>
-      </a>
+  </main>
+
+  <!-- 底部技术栈 -->
+  <div class="tech-bar">
+    <div class="tech-list">
+      <div class="tech-item">
+        <i class="fab fa-node-js"></i>
+        <span>Node.js</span>
+      </div>
+      <div class="tech-item">
+        <i class="fab fa-vuejs"></i>
+        <span>Vue.js</span>
+      </div>
+      <div class="tech-item">
+        <i class="fas fa-database"></i>
+        <span>SQLite</span>
+      </div>
+      <div class="tech-item">
+        <i class="fab fa-docker"></i>
+        <span>Docker</span>
+      </div>
+    </div>
+    <div class="copyright">
+      玩玩云 © 2025
     </div>
   </div>
-
-  <!-- Stats -->
-  <div class="stats">
-    <div class="stat-card">
-      <span class="stat-number">5GB</span>
-      <span class="stat-label">单文件上限</span>
-    </div>
-    <div class="stat-card">
-      <span class="stat-number">双模式</span>
-      <span class="stat-label">SFTP + 本地存储</span>
-    </div>
-    <div class="stat-card">
-      <span class="stat-number">24/7</span>
-      <span class="stat-label">随时访问</span>
-    </div>
-  </div>
-
-  <!-- Features Section -->
-  <section class="features-section">
-    <div class="section-header reveal">
-      <h2 class="section-title">强大的功能特性</h2>
-      <p class="section-desc">
-        为现代化文件管理而生，提供完整的文件操作、分享、管理功能
-      </p>
-    </div>
-
-    <div class="features">
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-server"></i>
-        </div>
-        <h3 class="feature-title">SFTP 连接</h3>
-        <p class="feature-desc">
-          支持连接任何 SFTP 服务器，数据存储在你自己的服务器上，更安全可靠。支持多用户配置，每个用户独立管理。
-        </p>
-        <span class="feature-tag">自主可控</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-cloud-upload-alt"></i>
-        </div>
-        <h3 class="feature-title">文件管理</h3>
-        <p class="feature-desc">
-          网盘式界面，支持文件浏览、上传、下载、重命名、删除。拖拽上传，实时进度显示，单文件最大 5GB。
-        </p>
-        <span class="feature-tag">简单易用</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-share-alt"></i>
-        </div>
-        <h3 class="feature-title">文件分享</h3>
-        <p class="feature-desc">
-          一键生成分享链接，支持密码保护和有效期设置。提供分享统计，查看访问次数和下载次数。
-        </p>
-        <span class="feature-tag">安全分享</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-download"></i>
-        </div>
-        <h3 class="feature-title">灵活下载</h3>
-        <p class="feature-desc">
-          支持 HTTP 直链、SFTP 流式下载和服务器本地存储三种模式。SFTP模式零存储纯中转，本地模式快速稳定，实时显示下载进度。
-        </p>
-        <span class="feature-tag">高效传输</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-users"></i>
-        </div>
-        <h3 class="feature-title">多用户系统</h3>
-        <p class="feature-desc">
-          完整的用户注册、登录、权限管理系统。管理员可以管理所有用户和分享，支持用户封禁。
-        </p>
-        <span class="feature-tag">权限管理</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-lock"></i>
-        </div>
-        <h3 class="feature-title">安全可靠</h3>
-        <p class="feature-desc">
-          JWT 认证，密码 bcrypt 加密存储，SQL 注入防护，XSS 防护。所有数据传输经过加密处理。
-        </p>
-        <span class="feature-tag">企业级安全</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-mobile-alt"></i>
-        </div>
-        <h3 class="feature-title">响应式设计</h3>
-        <p class="feature-desc">
-          完美支持桌面和移动设备，自适应各种屏幕尺寸。随时随地访问你的文件，移动办公更便捷。
-        </p>
-        <span class="feature-tag">跨平台</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fas fa-desktop"></i>
-        </div>
-        <h3 class="feature-title">桌面工具</h3>
-        <p class="feature-desc">
-          提供桌面端上传工具，支持拖拽上传，实时显示进度。自动配置连接，让大文件上传更简单。
-        </p>
-        <span class="feature-tag">效率工具</span>
-      </div>
-
-      <div class="feature-card reveal">
-        <div class="feature-icon">
-          <i class="fab fa-docker"></i>
-        </div>
-        <h3 class="feature-title">Docker 部署</h3>
-        <p class="feature-desc">
-          完整的 Docker 容器化部署方案，一键部署脚本，自动环境检查。易于维护，快速升级。
-        </p>
-        <span class="feature-tag">开箱即用</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- Tech Stack -->
-  <section class="tech-stack">
-    <div class="section-header reveal">
-      <h2 class="section-title">现代化技术栈</h2>
-      <p class="section-desc">
-        基于最新技术构建，保证性能和可扩展性
-      </p>
-    </div>
-
-    <div class="tech-grid">
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fab fa-node-js"></i></div>
-        <div class="tech-name">Node.js 20</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fab fa-vuejs"></i></div>
-        <div class="tech-name">Vue.js 3</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fas fa-database"></i></div>
-        <div class="tech-name">SQLite</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fab fa-docker"></i></div>
-        <div class="tech-name">Docker</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fas fa-network-wired"></i></div>
-        <div class="tech-name">Express</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fas fa-shield-alt"></i></div>
-        <div class="tech-name">JWT</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fas fa-lock"></i></div>
-        <div class="tech-name">bcrypt</div>
-      </div>
-      <div class="tech-item reveal">
-        <div class="tech-icon"><i class="fab fa-nginx"></i></div>
-        <div class="tech-name">Nginx</div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="cta-section">
-    <div class="cta-content">
-      <h2 class="cta-title">准备好开始了吗？</h2>
-      <p class="cta-desc">
-        立即注册，开始使用玩玩云管理你的文件。<br>
-        数据完全由你掌控，支持SFTP和本地存储双模式。
-      </p>
-      <div class="cta-buttons">
-        <a href="app.html?action=register" class="btn btn-primary btn-large">
-          <i class="fas fa-rocket"></i>
-          <span>免费注册</span>
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer class="footer">
-    <div class="footer-bottom">
-      <p>
-        <i class="fas fa-heart" style="color: #ff6b6b;"></i>
-        <span>玩玩云 © 2025 - 让文件管理更简单</span>
-      </p>
-    </div>
-  </footer>
-
-  <script>
-    // Scroll reveal animation
-    function reveal() {
-      const reveals = document.querySelectorAll('.reveal');
-
-      reveals.forEach(element => {
-        const windowHeight = window.innerHeight;
-        const elementTop = element.getBoundingClientRect().top;
-        const elementVisible = 150;
-
-        if (elementTop < windowHeight - elementVisible) {
-          element.classList.add('active');
-        }
-      });
-    }
-
-    window.addEventListener('scroll', reveal);
-    reveal(); // Check on load
-
-    // Smooth scroll
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-      anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-          target.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start'
-          });
-        }
-      });
-    });
-  </script>
 </body>
 </html>
