diff --git a/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-38.pyc b/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-38.pyc
new file mode 100644
index 0000000..8c4f88b
Binary files /dev/null and b/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-38.pyc differ
diff --git a/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-38.pyc b/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-38.pyc
new file mode 100644
index 0000000..dbabe42
Binary files /dev/null and b/.cursor/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-38.pyc differ
diff --git a/dist.zip b/dist.zip
new file mode 100644
index 0000000..8f47b61
Binary files /dev/null and b/dist.zip differ
diff --git a/index.html b/index.html
index 93d513e..2087156 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="灵犀学 - AI驱动的智慧教育生态平台，游戏化激发学习兴趣，AI智能批改提升教学效率" />
-    <meta name="keywords" content="灵犀学,AI教育,智慧学习,游戏化学习,AI批改,智能教育" />
+    <meta name="description" content="灵犀学 - 一站式互动内容服务平台，趣味化互动体验，智能工具提升管理效率" />
+    <meta name="keywords" content="灵犀学,互动平台,内容服务,趣味闯关,数据分析,智能工具" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
-    <title>灵犀学 - AI驱动的智慧教育生态平台</title>
+    <title>灵犀学 - 一站式互动内容服务平台</title>
   </head>
   <body class="antialiased">
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 4a01003..1e4a764 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  window.scrollTo(0, 0)
+})
 </script>
 
 <template>
diff --git a/src/components/new/AdminSectionNew.vue b/src/components/new/AdminSectionNew.vue
new file mode 100644
index 0000000..e5b5f2a
--- /dev/null
+++ b/src/components/new/AdminSectionNew.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {
+  FileCheck2, LayoutDashboard, Library, Users,
+  Clock, CheckCircle2, TrendingUp, Eye
+} from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+import DashboardMockup from '@/components/new/illustrations/DashboardMockup.vue'
+
+const { target, isVisible } = useScrollReveal()
+
+const features = [
+  {
+    icon: FileCheck2,
+    title: '内容分发',
+    desc: '海量资源一键组合，支持按类型、难度、标签灵活筛选',
+  },
+  {
+    icon: LayoutDashboard,
+    title: '数据看板',
+    desc: '全局/分组/分类多维度数据，运营效果一目了然',
+    tag: '管理者最爱',
+  },
+  {
+    icon: Library,
+    title: '自建资源库',
+    desc: '支持自建专属资源库，积累沉淀数字化资产',
+  },
+  {
+    icon: Users,
+    title: '团队管理',
+    desc: '成员分组、任务分配、进度追踪，高效管理每个团队',
+  },
+  {
+    icon: Clock,
+    title: '任务管理',
+    desc: '一键发布任务，实时追踪完成进度和处理状态',
+  },
+  {
+    icon: Eye,
+    title: '人工复核',
+    desc: '智能处理后人工复核，双重保障内容质量',
+  },
+  {
+    icon: TrendingUp,
+    title: '数据分析',
+    desc: '每位用户的数据可视化，精准识别运营薄弱点',
+  },
+  {
+    icon: CheckCircle2,
+    title: '流程管理',
+    desc: '批次管理、数据批量导入，工作流程一站式搞定',
+  },
+]
+</script>
+
+<template>
+  <section id="admin" class="relative py-24 lg:py-32 bg-bg-soft overflow-hidden">
+    <div class="absolute top-20 -left-40 w-[500px] h-[500px] rounded-full bg-accent/5 blur-3xl" />
+    <div class="absolute bottom-40 -right-60 w-[600px] h-[600px] rounded-full bg-primary/5 blur-3xl" />
+
+    <div class="absolute bottom-20 left-10 lg:left-20 opacity-[0.03]">
+      <svg width="200" height="200" viewBox="0 0 200 200">
+        <pattern id="crosses-new" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
+          <line x1="10" y1="15" x2="20" y2="15" stroke="#22C55E" stroke-width="1.5" />
+          <line x1="15" y1="10" x2="15" y2="20" stroke="#22C55E" stroke-width="1.5" />
+        </pattern>
+        <rect width="200" height="200" fill="url(#crosses-new)" />
+      </svg>
+    </div>
+
+    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div
+        class="text-center max-w-3xl mx-auto mb-12 transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+      >
+        <p class="text-sm font-semibold text-accent tracking-wider uppercase mb-3">管理端</p>
+        <h2 class="text-3xl sm:text-4xl lg:text-[2.75rem] font-extrabold text-text-heading leading-tight">
+          高效管理，<span class="bg-gradient-to-r from-accent to-emerald-400 bg-clip-text text-transparent">数据驱动运营</span>
+        </h2>
+        <p class="text-lg text-text-muted mt-5 leading-relaxed">
+          从内容分发到数据分析，智能工具接管重复性工作，管理者把宝贵时间留给真正需要关注的事务
+        </p>
+      </div>
+
+      <div
+        class="mb-14 transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+        :style="{ transitionDelay: isVisible ? '200ms' : '0ms' }"
+      >
+        <div class="max-w-3xl mx-auto relative">
+          <DashboardMockup />
+          <div class="absolute -top-4 -right-4 lg:right-8 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-slow">
+            <div class="flex items-center gap-2">
+              <div class="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center">
+                <CheckCircle2 class="w-4 h-4 text-accent" />
+              </div>
+              <div>
+                <p class="text-xs font-semibold text-text-heading">全部处理完成</p>
+                <p class="text-xs text-accent font-medium">节省 2.5 小时</p>
+              </div>
+            </div>
+          </div>
+          <div class="absolute bottom-8 -left-4 lg:left-0 glass-card-strong rounded-xl px-3.5 py-2.5 shadow-lg animate-float-medium hidden sm:block">
+            <div class="flex items-center gap-2">
+              <div class="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
+                <TrendingUp class="w-4 h-4 text-primary" />
+              </div>
+              <div>
+                <p class="text-xs font-semibold text-text-heading">本周效率</p>
+                <p class="text-xs text-primary font-medium">提升 35%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div
+          v-for="(feat, i) in features"
+          :key="feat.title"
+          class="group relative p-5 rounded-2xl bg-white/90 backdrop-blur-sm border border-gray-100 hover:border-accent/20 hover:shadow-lg hover:shadow-accent/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer"
+          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
+          :style="{ transitionDelay: isVisible ? `${400 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
+        >
+          <div class="absolute -bottom-4 -right-4 w-16 h-16 rounded-full bg-accent/[0.03] group-hover:bg-accent/[0.08] transition-colors duration-500" />
+
+          <span
+            v-if="feat.tag"
+            class="absolute -top-3 right-4 text-xs font-semibold px-2.5 py-0.5 rounded-full bg-gradient-to-r from-accent to-accent-light text-white shadow-sm z-10"
+          >
+            {{ feat.tag }}
+          </span>
+          <div class="relative">
+            <div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center mb-3 group-hover:bg-accent/12 group-hover:scale-110 transition-all duration-300">
+              <component :is="feat.icon" class="w-5 h-5 text-accent" />
+            </div>
+            <h4 class="text-base font-bold text-text-heading mb-1">{{ feat.title }}</h4>
+            <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes float-medium {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-7px); }
+}
+.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
+.animate-float-medium { animation: float-medium 4s ease-in-out infinite 0.5s; }
+</style>
diff --git a/src/components/new/AppSectionNew.vue b/src/components/new/AppSectionNew.vue
new file mode 100644
index 0000000..a9e62cd
--- /dev/null
+++ b/src/components/new/AppSectionNew.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import {
+  Swords, BookOpenCheck, Star, Zap,
+  MessageCircle, Target, Smile, ShieldCheck,
+} from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+import tabletImg from '@/assets/xuesheng.png'
+
+const { target, isVisible } = useScrollReveal()
+
+const features = [
+  {
+    icon: Swords,
+    title: '内容闯关',
+    desc: '关卡式互动体验，普通/困难双模式，每通一关都有满满成就感',
+    tag: '最受欢迎',
+  },
+  {
+    icon: BookOpenCheck,
+    title: '精品内容体系',
+    desc: '从入门到进阶，科学分级内容路径，持续提升核心能力',
+  },
+  {
+    icon: Star,
+    title: '积分激励',
+    desc: '完成任务赚积分和钻石，兑换奖励，参与变成收获的过程',
+  },
+  {
+    icon: Zap,
+    title: '自由探索模式',
+    desc: '按分类自主选择内容，灵活掌握节奏和方向',
+  },
+  {
+    icon: MessageCircle,
+    title: '智能助手',
+    desc: '智能陪伴，随时答疑解惑，像拥有一位24小时私人顾问',
+  },
+  {
+    icon: Target,
+    title: '精准推荐',
+    desc: '智能分析薄弱环节，定向推送相关内容，告别无效重复',
+  },
+  {
+    icon: Smile,
+    title: '积极心态',
+    desc: '「3 件好事」与微笑打卡，关注心理健康，培养积极心态',
+  },
+  {
+    icon: ShieldCheck,
+    title: '进度助手',
+    desc: '个性化计划 + 进度追踪，帮助养成自律好习惯',
+  },
+]
+</script>
+
+<template>
+  <section id="app" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
+    <div class="absolute top-40 -right-60 w-[500px] h-[500px] rounded-full bg-primary/5 blur-3xl" />
+    <div class="absolute bottom-20 -left-40 w-[400px] h-[400px] rounded-full bg-accent/5 blur-3xl" />
+
+    <div class="absolute top-20 right-10 lg:right-20 opacity-[0.04]" style="background-image: radial-gradient(circle, #4F46E5 1.5px, transparent 1.5px); background-size: 24px 24px; width: 200px; height: 200px;" />
+
+    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid lg:grid-cols-12 gap-12 lg:gap-8 items-start">
+
+        <div
+          class="lg:col-span-5 lg:sticky lg:top-28 transition-all duration-700"
+          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+        >
+          <p class="text-sm font-semibold text-primary tracking-wider uppercase mb-3">体验端</p>
+          <h2 class="text-3xl sm:text-4xl lg:text-[2.75rem] font-extrabold text-text-heading leading-tight">
+            趣味互动，<br />
+            <span class="gradient-text">探索不止</span>
+          </h2>
+          <p class="text-lg text-text-muted mt-5 leading-relaxed">
+            告别枯燥模式，灵犀学用趣味化机制点燃参与热情。排行榜、成就徽章、虚拟奖励——让用户主动投入其中。
+          </p>
+
+          <div class="mt-10 flex justify-center">
+            <div class="relative w-full max-w-md">
+              <div class="rounded-2xl bg-gradient-to-br from-[#1E1B4B] to-[#312E81] p-2.5 shadow-2xl">
+                <div class="rounded-xl overflow-hidden bg-[#0F0D2E] aspect-[16/10]">
+                  <img :src="tabletImg" alt="灵犀学体验端界面" class="w-full h-full object-cover" />
+                </div>
+              </div>
+              <div class="absolute -right-6 top-6 glass-card rounded-xl px-3 py-2 shadow-lg animate-float-slow hidden sm:block">
+                <div class="flex items-center gap-1.5">
+                  <svg class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                  <span class="text-xs font-bold text-amber-600">+100 积分</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="lg:col-span-7 grid sm:grid-cols-2 gap-4">
+          <div
+            v-for="(feat, i) in features"
+            :key="feat.title"
+            class="group relative p-5 rounded-2xl bg-white border border-gray-100 hover:border-primary/20 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer"
+            :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
+            :style="{ transitionDelay: isVisible ? `${200 + i * 80}ms` : '0ms', transitionDuration: '600ms' }"
+          >
+            <div class="absolute -bottom-4 -right-4 w-20 h-20 rounded-full bg-primary/[0.03] group-hover:bg-primary/[0.06] transition-colors duration-500" />
+
+            <span
+              v-if="feat.tag"
+              class="absolute -top-3 right-4 text-xs font-semibold px-2.5 py-0.5 rounded-full bg-gradient-to-r from-primary to-primary-light text-white shadow-sm z-10"
+            >
+              {{ feat.tag }}
+            </span>
+            <div class="relative">
+              <div class="w-11 h-11 rounded-xl bg-primary/8 flex items-center justify-center mb-3.5 group-hover:bg-primary/12 group-hover:scale-110 transition-all duration-300">
+                <component :is="feat.icon" class="w-5.5 h-5.5 text-primary" />
+              </div>
+              <h4 class="text-base font-bold text-text-heading mb-1.5">{{ feat.title }}</h4>
+              <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }
+</style>
diff --git a/src/components/new/CtaSectionNew.vue b/src/components/new/CtaSectionNew.vue
new file mode 100644
index 0000000..b80cf43
--- /dev/null
+++ b/src/components/new/CtaSectionNew.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ArrowRight, Sparkles, Layers, Zap, Star, X, Phone } from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+
+const { target, isVisible } = useScrollReveal()
+const showDemoModal = ref(false)
+</script>
+
+<template>
+  <section id="cta" class="relative py-24 lg:py-32 bg-white overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
+    <div class="absolute top-20 left-1/4 w-[400px] h-[400px] rounded-full bg-primary/8 blur-3xl" />
+    <div class="absolute bottom-10 right-1/4 w-[300px] h-[300px] rounded-full bg-accent/8 blur-3xl" />
+
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-16 left-[10%] animate-float-1">
+        <div class="w-12 h-12 rounded-2xl bg-primary/8 flex items-center justify-center">
+          <Layers class="w-6 h-6 text-primary/40" />
+        </div>
+      </div>
+      <div class="absolute top-24 right-[12%] animate-float-2">
+        <div class="w-10 h-10 rounded-xl bg-accent/8 flex items-center justify-center">
+          <Star class="w-5 h-5 text-accent/40" />
+        </div>
+      </div>
+      <div class="absolute bottom-20 left-[8%] animate-float-3">
+        <div class="w-11 h-11 rounded-2xl bg-amber-500/8 flex items-center justify-center">
+          <Zap class="w-5 h-5 text-amber-500/40" />
+        </div>
+      </div>
+      <div class="absolute bottom-28 right-[10%] animate-float-1">
+        <div class="w-10 h-10 rounded-xl bg-primary-light/10 flex items-center justify-center">
+          <Sparkles class="w-5 h-5 text-primary-light/40" />
+        </div>
+      </div>
+      <div class="absolute top-1/2 left-[5%] animate-float-2 hidden lg:block">
+        <div class="w-8 h-8 rounded-lg bg-rose-500/8 flex items-center justify-center">
+          <Star class="w-4 h-4 text-rose-400/40" />
+        </div>
+      </div>
+      <div class="absolute top-1/3 right-[6%] animate-float-3 hidden lg:block">
+        <div class="w-9 h-9 rounded-xl bg-cyan-500/8 flex items-center justify-center">
+          <Layers class="w-4 h-4 text-cyan-500/40" />
+        </div>
+      </div>
+    </div>
+
+    <div
+      ref="target"
+      class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center transition-all duration-700"
+      :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+    >
+      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/8 border border-primary/15 mb-6">
+        <Sparkles class="w-4 h-4 text-primary" />
+        <span class="text-sm font-medium text-primary">免费开始使用</span>
+      </div>
+
+      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-heading leading-tight">
+        准备好开启<span class="gradient-text">新体验</span>了吗？
+      </h2>
+
+      <p class="text-lg text-text-muted mt-5 leading-relaxed max-w-2xl mx-auto">
+        无论您是想提升团队效率的管理者，还是希望获得更好体验的用户，灵犀学都能为您提供最佳方案。
+      </p>
+
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
+        <a
+          href="https://ai.xuexiaole.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 text-base font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-2xl hover:shadow-xl hover:shadow-primary/25 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
+        >
+          <span>立即免费体验</span>
+          <ArrowRight class="w-5 h-5 group-hover:translate-x-0.5 transition-transform duration-200" />
+        </a>
+        <button
+          @click="showDemoModal = true"
+          class="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 px-8 py-4 text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 cursor-pointer"
+        >
+          预约产品演示
+        </button>
+      </div>
+
+      <p class="text-sm text-text-muted mt-6">
+        无需信用卡 · 即刻开始 · 专属客服支持
+      </p>
+    </div>
+
+    <!-- Demo modal -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="showDemoModal" class="fixed inset-0 z-[100] flex items-center justify-center p-4" @click.self="showDemoModal = false">
+          <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+          <div class="relative bg-white rounded-3xl shadow-2xl max-w-sm w-full p-8 text-center">
+            <button
+              @click="showDemoModal = false"
+              class="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors duration-200 cursor-pointer"
+            >
+              <X class="w-4 h-4 text-gray-500" />
+            </button>
+            <div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-5">
+              <Phone class="w-8 h-8 text-primary" />
+            </div>
+            <h3 class="text-xl font-bold text-text-heading mb-2">预约产品演示</h3>
+            <p class="text-sm text-text-muted mb-6">请拨打以下电话联系我们，专属顾问将为您安排演示</p>
+            <a
+              href="tel:17670000000"
+              class="inline-flex items-center gap-2.5 px-6 py-3.5 text-lg font-bold text-primary bg-primary/8 rounded-2xl hover:bg-primary/12 transition-colors duration-200"
+            >
+              <Phone class="w-5 h-5" />
+              176 7000 0000
+            </a>
+            <p class="text-xs text-text-muted mt-4">工作时间：周一至周五 9:00 - 18:00</p>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </section>
+</template>
+
+<style scoped>
+@keyframes float-1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-15px) rotate(5deg)} }
+@keyframes float-2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-4deg)} }
+@keyframes float-3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(3deg)} }
+.animate-float-1 { animation: float-1 6s ease-in-out infinite; }
+.animate-float-2 { animation: float-2 5s ease-in-out infinite 0.8s; }
+.animate-float-3 { animation: float-3 7s ease-in-out infinite 1.5s; }
+</style>
diff --git a/src/components/new/FeaturesSectionNew.vue b/src/components/new/FeaturesSectionNew.vue
new file mode 100644
index 0000000..0b23b64
--- /dev/null
+++ b/src/components/new/FeaturesSectionNew.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import {
+  Gamepad2, BrainCircuit, BookOpen, Trophy,
+  Target, BarChart3,
+} from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+
+const { target, isVisible } = useScrollReveal()
+
+const features = [
+  {
+    icon: Gamepad2,
+    title: '趣味闯关体验',
+    desc: '将内容变成闯关冒险，激发用户内在驱动力，互动体验越用越想用。',
+    color: 'primary',
+  },
+  {
+    icon: BrainCircuit,
+    title: '智能分析引擎',
+    desc: '主观内容秒级处理，关键信息高亮解析，效率媲美专业团队。',
+    color: 'accent',
+  },
+  {
+    icon: BookOpen,
+    title: '沉浸式内容体系',
+    desc: '从入门到进阶，科学分级内容路径，培养持续探索的动力。',
+    color: 'amber',
+  },
+  {
+    icon: Trophy,
+    title: '成就激励系统',
+    desc: '积分奖励、排行榜、成就勋章，让每一步进步都被看见和鼓励。',
+    color: 'rose',
+  },
+  {
+    icon: Target,
+    title: '精准内容推荐',
+    desc: '智能分析薄弱环节，定向推送相关内容，告别盲目操作。',
+    color: 'cyan',
+  },
+  {
+    icon: BarChart3,
+    title: '可视化数据报告',
+    desc: '多维度数据看板，团队/分类/个人一目了然，数据驱动精细化运营。',
+    color: 'violet',
+  },
+]
+
+const colorMap: Record<string, { bg: string; iconBg: string; text: string; border: string; gradFrom: string; gradTo: string }> = {
+  primary: { bg: 'bg-primary/5', iconBg: 'bg-primary/12', text: 'text-primary', border: 'border-primary/10', gradFrom: '#4F46E5', gradTo: '#818CF8' },
+  accent: { bg: 'bg-accent/5', iconBg: 'bg-accent/12', text: 'text-accent', border: 'border-accent/10', gradFrom: '#22C55E', gradTo: '#4ADE80' },
+  amber: { bg: 'bg-amber-500/5', iconBg: 'bg-amber-500/12', text: 'text-amber-600', border: 'border-amber-500/10', gradFrom: '#F59E0B', gradTo: '#FBBF24' },
+  rose: { bg: 'bg-rose-500/5', iconBg: 'bg-rose-500/12', text: 'text-rose-600', border: 'border-rose-500/10', gradFrom: '#F43F5E', gradTo: '#FB7185' },
+  cyan: { bg: 'bg-cyan-500/5', iconBg: 'bg-cyan-500/12', text: 'text-cyan-600', border: 'border-cyan-500/10', gradFrom: '#06B6D4', gradTo: '#22D3EE' },
+  violet: { bg: 'bg-violet-500/5', iconBg: 'bg-violet-500/12', text: 'text-violet-600', border: 'border-violet-500/10', gradFrom: '#8B5CF6', gradTo: '#A78BFA' },
+}
+</script>
+
+<template>
+  <section id="features" class="relative py-24 lg:py-32 bg-white overflow-hidden">
+    <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
+
+    <div class="absolute top-32 -right-20 w-64 h-64 rounded-full bg-primary/3 blur-3xl" />
+    <div class="absolute bottom-20 -left-20 w-48 h-48 rounded-full bg-accent/3 blur-3xl" />
+
+    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div
+        class="text-center max-w-3xl mx-auto mb-16 lg:mb-20 transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+      >
+        <p class="text-sm font-semibold text-primary tracking-wider uppercase mb-3">核心能力</p>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-heading leading-tight">
+          一个平台，<span class="gradient-text">覆盖全场景</span>
+        </h2>
+        <p class="text-lg text-text-muted mt-5 leading-relaxed">
+          从内容分发到数据分析，从任务管理到智能处理，灵犀学为服务的每个环节注入智慧力量
+        </p>
+      </div>
+
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
+        <div
+          v-for="(feat, i) in features"
+          :key="feat.title"
+          class="group relative p-6 lg:p-8 rounded-2xl border bg-white transition-all duration-500 cursor-pointer hover:-translate-y-1 hover:shadow-xl hover:shadow-gray-200/50 overflow-hidden"
+          :class="[
+            colorMap[feat.color].border,
+            isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
+          ]"
+          :style="{ transitionDelay: isVisible ? `${i * 100}ms` : '0ms' }"
+        >
+          <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full opacity-[0.06] group-hover:opacity-[0.12] transition-opacity duration-500">
+            <svg viewBox="0 0 100 100" class="w-full h-full">
+              <circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradFrom" />
+            </svg>
+          </div>
+          <div class="absolute -top-3 -right-3 w-16 h-16 rounded-full opacity-[0.04] group-hover:opacity-[0.08] transition-opacity duration-500">
+            <svg viewBox="0 0 100 100" class="w-full h-full">
+              <circle cx="50" cy="50" r="50" :fill="colorMap[feat.color].gradTo" />
+            </svg>
+          </div>
+
+          <div class="relative">
+            <div
+              class="w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110 shadow-sm"
+              :class="colorMap[feat.color].iconBg"
+            >
+              <component :is="feat.icon" class="w-7 h-7" :class="colorMap[feat.color].text" />
+            </div>
+            <h3 class="text-lg font-bold text-text-heading mb-2.5">{{ feat.title }}</h3>
+            <p class="text-sm text-text-muted leading-relaxed">{{ feat.desc }}</p>
+
+            <div class="mt-5 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <div class="h-0.5 w-8 rounded-full" :class="colorMap[feat.color].iconBg" />
+              <span class="text-xs font-medium" :class="colorMap[feat.color].text">了解更多</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/new/FooterSectionNew.vue b/src/components/new/FooterSectionNew.vue
new file mode 100644
index 0000000..c64ac03
--- /dev/null
+++ b/src/components/new/FooterSectionNew.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import logoImg from '@/assets/logo.png'
+
+const currentYear = new Date().getFullYear()
+
+const footerLinks = [
+  {
+    title: '产品',
+    links: [
+      { label: '体验端', href: '#app' },
+      { label: '管理端', href: '#admin' },
+      { label: '核心技术', href: '#tech' },
+      { label: '功能介绍', href: '#features' },
+    ],
+  },
+  {
+    title: '支持',
+    links: [
+      { label: '帮助中心', href: '#' },
+      { label: '使用教程', href: '#' },
+      { label: '常见问题', href: '#' },
+      { label: '联系我们', href: '#' },
+    ],
+  },
+  {
+    title: '公司',
+    links: [
+      { label: '关于我们', href: '#about' },
+      { label: '合作伙伴', href: '#' },
+      { label: '加入我们', href: '#' },
+      { label: '新闻动态', href: '#' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <footer class="bg-[#0F0D2E] text-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
+      <div class="grid grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
+        <div class="col-span-2">
+          <div class="flex items-center mb-4">
+            <img :src="logoImg" alt="灵犀学" class="h-9 w-auto brightness-0 invert" />
+          </div>
+          <p class="text-sm text-indigo-200/50 leading-relaxed max-w-xs mb-6">
+            一站式互动内容服务平台，让管理更高效，让体验更精彩。
+          </p>
+          <div class="flex gap-3">
+            <a
+              v-for="platform in ['微信', '微博', '抖音']"
+              :key="platform"
+              href="#"
+              class="w-9 h-9 rounded-lg bg-white/8 border border-white/8 flex items-center justify-center text-xs font-medium text-indigo-200/60 hover:bg-white/15 hover:text-white transition-all duration-200 cursor-pointer"
+            >
+              {{ platform[0] }}
+            </a>
+          </div>
+        </div>
+
+        <div v-for="group in footerLinks" :key="group.title">
+          <h4 class="text-sm font-semibold text-white mb-4">{{ group.title }}</h4>
+          <ul class="space-y-2.5">
+            <li v-for="link in group.links" :key="link.label">
+              <a
+                :href="link.href"
+                class="text-sm text-indigo-200/50 hover:text-white transition-colors duration-200 cursor-pointer"
+              >
+                {{ link.label }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="mt-12 pt-8 border-t border-white/8 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <p class="text-xs text-indigo-200/40">&copy; {{ currentYear }} 灵犀学. All rights reserved.</p>
+        <div class="flex items-center gap-6">
+          <a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">隐私政策</a>
+          <a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">服务条款</a>
+          <a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">ICP 备案</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/src/components/new/HeroSectionNew.vue b/src/components/new/HeroSectionNew.vue
new file mode 100644
index 0000000..88286cf
--- /dev/null
+++ b/src/components/new/HeroSectionNew.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { Sparkles, ArrowRight, Play } from 'lucide-vue-next'
+import HeroIllustrationNew from '@/components/new/illustrations/HeroIllustrationNew.vue'
+</script>
+
+<template>
+  <section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-br from-bg-soft via-white to-indigo-50/80" />
+    <div class="absolute top-20 -left-32 w-[500px] h-[500px] rounded-full bg-primary/8 blur-3xl" />
+    <div class="absolute bottom-10 -right-40 w-[600px] h-[600px] rounded-full bg-accent/6 blur-3xl" />
+    <div class="absolute top-1/3 right-1/4 w-[300px] h-[300px] rounded-full bg-primary-light/10 blur-3xl" />
+
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, #4F46E5 1px, transparent 1px); background-size: 40px 40px;" />
+
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-20 lg:pt-40 lg:pb-32">
+      <div class="grid lg:grid-cols-2 gap-16 lg:gap-12 items-center">
+        <div class="space-y-10">
+          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/8 border border-primary/15">
+            <Sparkles class="w-4 h-4 text-primary" />
+            <span class="text-sm font-medium text-primary">一站式互动内容服务平台</span>
+          </div>
+
+          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
+            <span class="gradient-text-hero">让每一步成长</span>
+            <br />
+            <span class="gradient-text">都被看见</span>
+          </h1>
+
+          <p class="text-lg sm:text-xl text-text-muted leading-relaxed max-w-lg">
+            趣味化互动体验激发内驱力，智能工具提升管理效率。
+            <span class="text-text-body font-medium">一个平台，连接服务的每一个环节。</span>
+          </p>
+
+          <div class="flex flex-wrap gap-5">
+            <a
+              href="https://ai.xuexiaole.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2.5 px-8 py-4 text-base font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-2xl hover:shadow-xl hover:shadow-primary/25 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
+            >
+              <span>体验入口</span>
+              <ArrowRight class="w-4.5 h-4.5 group-hover:translate-x-0.5 transition-transform duration-200" />
+            </a>
+            <a
+              href="https://admin.xuexiaole.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2.5 px-8 py-4 text-base font-semibold text-primary bg-white border-2 border-primary/20 rounded-2xl hover:border-primary/40 hover:bg-primary/5 hover:-translate-y-0.5 transition-all duration-300 cursor-pointer group"
+            >
+              <Play class="w-4.5 h-4.5" />
+              <span>管理入口</span>
+            </a>
+          </div>
+
+          <div class="flex items-center gap-6 pt-2">
+            <div class="flex -space-x-2">
+              <div v-for="i in 4" :key="i" class="w-9 h-9 rounded-full border-2 border-white bg-gradient-to-br from-primary/60 to-primary-light/80 flex items-center justify-center text-xs font-bold text-white shadow-sm">
+                {{ ['张', '李', '王', '陈'][i - 1] }}
+              </div>
+            </div>
+            <div>
+              <p class="text-sm font-semibold text-text-heading">10,000+ 用户已加入</p>
+              <p class="text-xs text-text-muted">来自全国 200+ 机构</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="relative lg:pl-4">
+          <HeroIllustrationNew class="w-full max-w-[520px] mx-auto" />
+
+          <div class="absolute top-6 right-0 lg:-right-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-slow">
+            <div class="flex items-center gap-2">
+              <div class="w-8 h-8 rounded-lg bg-accent/15 flex items-center justify-center">
+                <Sparkles class="w-4 h-4 text-accent" />
+              </div>
+              <div>
+                <p class="text-xs font-semibold text-text-heading">连续打卡 7 天</p>
+                <p class="text-xs text-accent font-medium">+50 积分奖励</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="absolute bottom-16 left-0 lg:-left-2 glass-card rounded-2xl px-4 py-3 shadow-lg animate-float-medium">
+            <div class="flex items-center gap-2">
+              <div class="w-8 h-8 rounded-lg bg-primary/15 flex items-center justify-center">
+                <Play class="w-4 h-4 text-primary" />
+              </div>
+              <div>
+                <p class="text-xs font-semibold text-text-heading">智能处理完成</p>
+                <p class="text-xs text-primary font-medium">准确率 92%</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="absolute top-1/2 -right-4 lg:right-2 glass-card rounded-2xl px-3 py-2.5 shadow-lg animate-float-fast hidden sm:block">
+            <div class="flex items-center gap-2">
+              <div class="w-7 h-7 rounded-lg bg-amber-500/15 flex items-center justify-center">
+                <svg class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+              </div>
+              <div>
+                <p class="text-xs font-semibold text-text-heading">排行榜 #3</p>
+                <p class="text-xs text-amber-600 font-medium">超越 89%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+@keyframes float-medium {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes float-fast {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-15px); }
+}
+.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
+.animate-float-medium { animation: float-medium 4s ease-in-out infinite 0.5s; }
+.animate-float-fast { animation: float-fast 5s ease-in-out infinite 1s; }
+</style>
diff --git a/src/components/new/NavBarNew.vue b/src/components/new/NavBarNew.vue
new file mode 100644
index 0000000..8d0bd93
--- /dev/null
+++ b/src/components/new/NavBarNew.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Menu, X } from 'lucide-vue-next'
+import logoImg from '@/assets/logo.png'
+
+const scrolled = ref(false)
+const mobileOpen = ref(false)
+
+const navLinks = [
+  { label: '产品功能', href: '#features' },
+  { label: '体验端', href: '#app' },
+  { label: '管理端', href: '#admin' },
+  { label: '关于我们', href: '#about' },
+]
+
+function onScroll() {
+  scrolled.value = window.scrollY > 20
+}
+
+function scrollTo(href: string) {
+  mobileOpen.value = false
+  const el = document.querySelector(href)
+  el?.scrollIntoView({ behavior: 'smooth' })
+}
+
+onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
+onUnmounted(() => window.removeEventListener('scroll', onScroll))
+</script>
+
+<template>
+  <nav
+    class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+    :class="scrolled
+      ? 'bg-white/80 backdrop-blur-xl shadow-lg shadow-indigo-100/40 border-b border-white/40'
+      : 'bg-transparent'"
+  >
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-16 lg:h-18">
+        <a href="#" class="flex items-center cursor-pointer group" @click.prevent="scrollTo('#hero')">
+          <img :src="logoImg" alt="灵犀学" class="h-9 w-auto" />
+        </a>
+
+        <div class="hidden lg:flex items-center gap-1">
+          <a
+            v-for="link in navLinks"
+            :key="link.href"
+            :href="link.href"
+            class="px-4 py-2 text-sm font-medium text-text-body hover:text-primary rounded-lg hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
+            @click.prevent="scrollTo(link.href)"
+          >
+            {{ link.label }}
+          </a>
+        </div>
+
+        <div class="hidden lg:flex items-center gap-3">
+          <a
+            href="#cta"
+            class="px-5 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 cursor-pointer"
+            @click.prevent="scrollTo('#cta')"
+          >
+            免费体验
+          </a>
+        </div>
+
+        <button
+          class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
+          @click="mobileOpen = !mobileOpen"
+          :aria-label="mobileOpen ? '关闭菜单' : '打开菜单'"
+        >
+          <X v-if="mobileOpen" class="w-5 h-5 text-text-body" />
+          <Menu v-else class="w-5 h-5 text-text-body" />
+        </button>
+      </div>
+    </div>
+
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 -translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-2"
+    >
+      <div
+        v-if="mobileOpen"
+        class="lg:hidden bg-white/95 backdrop-blur-xl border-b border-gray-200/50 shadow-xl"
+      >
+        <div class="px-4 py-3 space-y-1">
+          <a
+            v-for="link in navLinks"
+            :key="link.href"
+            :href="link.href"
+            class="block px-4 py-3 text-sm font-medium text-text-body hover:text-primary hover:bg-primary/5 rounded-xl transition-colors duration-200 cursor-pointer"
+            @click.prevent="scrollTo(link.href)"
+          >
+            {{ link.label }}
+          </a>
+          <div class="pt-2 pb-1">
+            <a
+              href="#cta"
+              class="block w-full text-center px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl cursor-pointer"
+              @click.prevent="scrollTo('#cta')"
+            >
+              免费体验
+            </a>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </nav>
+</template>
diff --git a/src/components/new/StatsSectionNew.vue b/src/components/new/StatsSectionNew.vue
new file mode 100644
index 0000000..aecb3b7
--- /dev/null
+++ b/src/components/new/StatsSectionNew.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+
+const { target, isVisible } = useScrollReveal()
+
+const stats = [
+  { value: 10000, suffix: '+', label: '活跃用户', desc: '每天在灵犀学上使用' },
+  { value: 200, suffix: '+', label: '合作机构', desc: '覆盖全国多个城市' },
+  { value: 500, suffix: '万+', label: '内容处理', desc: '累计处理内容数量' },
+  { value: 96.8, suffix: '%', label: '用户满意度', desc: '获得用户高度认可' },
+]
+
+const counters = ref(stats.map(() => 0))
+
+function animateCounter(index: number, target: number, duration = 2000) {
+  const start = performance.now()
+  const isFloat = !Number.isInteger(target)
+
+  function update(now: number) {
+    const elapsed = now - start
+    const progress = Math.min(elapsed / duration, 1)
+    const eased = 1 - Math.pow(1 - progress, 3)
+    counters.value[index] = isFloat
+      ? Math.round(target * eased * 10) / 10
+      : Math.round(target * eased)
+    if (progress < 1) requestAnimationFrame(update)
+  }
+
+  requestAnimationFrame(update)
+}
+
+watch(isVisible, (val) => {
+  if (val) {
+    stats.forEach((s, i) => {
+      setTimeout(() => animateCounter(i, s.value), i * 150)
+    })
+  }
+})
+</script>
+
+<template>
+  <section class="relative py-20 lg:py-28 bg-white overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-primary/3 via-transparent to-accent/3" />
+
+    <div ref="target" class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
+        <div
+          v-for="(stat, i) in stats"
+          :key="stat.label"
+          class="text-center p-6 lg:p-8 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-1 transition-all duration-300 cursor-default"
+          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+          :style="{ transitionDelay: isVisible ? `${i * 100}ms` : '0ms', transitionDuration: '600ms' }"
+        >
+          <p class="text-3xl sm:text-4xl lg:text-5xl font-extrabold gradient-text leading-none">
+            {{ Number.isInteger(stat.value) ? counters[i].toLocaleString() : counters[i].toFixed(1) }}{{ stat.suffix }}
+          </p>
+          <p class="text-base font-bold text-text-heading mt-3">{{ stat.label }}</p>
+          <p class="text-sm text-text-muted mt-1">{{ stat.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/new/TechSectionNew.vue b/src/components/new/TechSectionNew.vue
new file mode 100644
index 0000000..cb89163
--- /dev/null
+++ b/src/components/new/TechSectionNew.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import {
+  Cpu, Workflow, ShieldCheck, Layers,
+  Sparkles, ArrowRight,
+} from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+
+const { target, isVisible } = useScrollReveal()
+
+const techPoints = [
+  {
+    icon: Layers,
+    title: '深度内容理解',
+    desc: '强大的内容处理能力，准确理解各类内容的核心信息与逻辑结构。',
+  },
+  {
+    icon: Cpu,
+    title: '多维分析引擎',
+    desc: '关键信息提取、逻辑分析、完整度评估，多维度综合智能评判。',
+  },
+  {
+    icon: Workflow,
+    title: '个性化推荐',
+    desc: '动态规划内容路径，精准推荐每位用户的最优内容组合。',
+  },
+  {
+    icon: ShieldCheck,
+    title: '双重保障机制',
+    desc: '系统处理 + 人工复核双保险模式，确保结果的准确性与可靠性。',
+  },
+]
+
+const flow = [
+  { step: '01', label: '发布任务', desc: '一键组合发布' },
+  { step: '02', label: '用户参与', desc: '在线完成互动' },
+  { step: '03', label: '智能处理', desc: '秒级自动处理' },
+  { step: '04', label: '人工复核', desc: '关键内容审查' },
+  { step: '05', label: '数据报告', desc: '多维报告生成' },
+]
+</script>
+
+<template>
+  <section id="tech" class="relative py-24 lg:py-32 bg-gradient-to-b from-[#0F0D2E] to-[#1A1744] text-white overflow-hidden">
+    <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-light/30 to-transparent" />
+    <div class="absolute top-20 -right-40 w-[600px] h-[600px] rounded-full bg-primary/10 blur-3xl" />
+    <div class="absolute bottom-20 -left-40 w-[500px] h-[500px] rounded-full bg-accent/8 blur-3xl" />
+
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(129,140,248,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,0.3) 1px, transparent 1px); background-size: 60px 60px;" />
+
+    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Header -->
+      <div
+        class="text-center max-w-3xl mx-auto mb-16 lg:mb-20 transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+      >
+        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/8 border border-white/10 mb-6">
+          <Sparkles class="w-4 h-4 text-primary-light" />
+          <span class="text-sm font-medium text-primary-light">核心技术</span>
+        </div>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight">
+          不止是工具，
+          <span class="bg-gradient-to-r from-primary-light via-indigo-300 to-accent bg-clip-text text-transparent">
+            更是智慧服务的引擎
+          </span>
+        </h2>
+        <p class="text-lg text-indigo-200/70 mt-5 leading-relaxed">
+          融合先进算法与自适应技术，灵犀学为每一位用户提供个性化的智能服务体验
+        </p>
+      </div>
+
+      <!-- Tech points -->
+      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-16 lg:mb-20">
+        <div
+          v-for="(tech, i) in techPoints"
+          :key="tech.title"
+          class="group p-6 rounded-2xl bg-white/5 border border-white/8 hover:bg-white/8 hover:border-white/15 transition-all duration-300 cursor-pointer overflow-hidden relative"
+          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+          :style="{ transitionDelay: isVisible ? `${400 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
+        >
+          <div class="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-primary-light/0 group-hover:bg-primary-light/10 transition-all duration-500 blur-2xl" />
+
+          <div class="relative">
+            <div class="w-12 h-12 rounded-xl bg-primary-light/15 flex items-center justify-center mb-4 group-hover:bg-primary-light/20 group-hover:scale-110 transition-all duration-300">
+              <component :is="tech.icon" class="w-6 h-6 text-primary-light" />
+            </div>
+            <h4 class="text-base font-bold text-white mb-2">{{ tech.title }}</h4>
+            <p class="text-sm text-indigo-200/60 leading-relaxed">{{ tech.desc }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Flow -->
+      <div
+        class="transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+        :style="{ transitionDelay: isVisible ? '800ms' : '0ms' }"
+      >
+        <h3 class="text-xl font-bold text-center text-white mb-10">服务全流程</h3>
+        <div class="flex flex-col lg:flex-row items-center lg:items-start gap-3 lg:gap-0">
+          <template v-for="(item, i) in flow" :key="item.step">
+            <div class="flex-1 text-center group">
+              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/30 to-primary-light/20 border border-primary-light/20 flex items-center justify-center mx-auto mb-3 group-hover:from-primary/50 group-hover:to-primary-light/30 group-hover:scale-110 transition-all duration-300">
+                <span class="text-lg font-bold text-primary-light">{{ item.step }}</span>
+              </div>
+              <p class="text-sm font-semibold text-white">{{ item.label }}</p>
+              <p class="text-xs text-indigo-200/50 mt-1">{{ item.desc }}</p>
+            </div>
+            <div
+              v-if="i < flow.length - 1"
+              class="hidden lg:flex items-center pt-6"
+            >
+              <div class="w-12 flex items-center">
+                <div class="flex-1 h-px bg-gradient-to-r from-primary-light/30 to-primary-light/10" />
+                <ArrowRight class="w-4 h-4 text-primary-light/30 -ml-1" />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/new/TestimonialSectionNew.vue b/src/components/new/TestimonialSectionNew.vue
new file mode 100644
index 0000000..7ae5c16
--- /dev/null
+++ b/src/components/new/TestimonialSectionNew.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Star, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useScrollReveal } from '@/composables/useScrollReveal'
+
+const { target, isVisible } = useScrollReveal()
+
+const testimonials = [
+  {
+    name: '刘女士',
+    role: '运营主管 · 杭州',
+    content: '以前每次处理数据至少花 3 个小时，现在工具 10 分钟就搞定了，而且质量非常高。我终于有时间专注于更重要的事务了。',
+    rating: 5,
+    initials: '刘',
+  },
+  {
+    name: '王先生',
+    role: '资深用户 · 南京',
+    content: '以前一提到任务就头疼，现在每天抢着玩闯关挑战，不知不觉已经连续打卡 30 多天了。积分奖励机制真的太棒了！',
+    rating: 5,
+    initials: '王',
+  },
+  {
+    name: '张先生',
+    role: '机构负责人 · 成都',
+    content: '引入灵犀学半年后，团队整体效率提升了 70%。数据看板让运营管理变得透明高效，强烈推荐给同行。',
+    rating: 5,
+    initials: '张',
+  },
+  {
+    name: '陈女士',
+    role: '核心用户 · 上海',
+    content: '我最喜欢闯关的困难模式，拿到满星特别有成就感！排行榜上我已经是第二名了，马上就要超过第一名。',
+    rating: 5,
+    initials: '陈',
+  },
+]
+
+const current = ref(0)
+
+function next() {
+  current.value = (current.value + 1) % testimonials.length
+}
+function prev() {
+  current.value = (current.value - 1 + testimonials.length) % testimonials.length
+}
+</script>
+
+<template>
+  <section id="about" class="relative py-24 lg:py-32 bg-gradient-to-b from-white to-bg-soft overflow-hidden">
+    <div ref="target" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div
+        class="text-center max-w-3xl mx-auto mb-14 transition-all duration-700"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
+      >
+        <p class="text-sm font-semibold text-primary tracking-wider uppercase mb-3">用户心声</p>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-text-heading leading-tight">
+          他们都在用<span class="gradient-text">灵犀学</span>
+        </h2>
+      </div>
+
+      <div class="hidden lg:grid grid-cols-2 gap-6">
+        <div
+          v-for="(t, i) in testimonials"
+          :key="t.name"
+          class="p-7 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
+          :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
+          :style="{ transitionDelay: isVisible ? `${200 + i * 100}ms` : '0ms', transitionDuration: '600ms' }"
+        >
+          <div class="flex gap-0.5 mb-4">
+            <Star v-for="s in t.rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
+          </div>
+          <p class="text-text-body leading-relaxed mb-5">{{ t.content }}</p>
+          <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
+              {{ t.initials }}
+            </div>
+            <div>
+              <p class="text-sm font-semibold text-text-heading">{{ t.name }}</p>
+              <p class="text-xs text-text-muted">{{ t.role }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:hidden">
+        <div class="relative overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-lg p-7">
+          <TransitionGroup
+            enter-active-class="transition-all duration-400"
+            enter-from-class="opacity-0 translate-x-8"
+            enter-to-class="opacity-100 translate-x-0"
+            leave-active-class="transition-all duration-200 absolute"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0 -translate-x-8"
+          >
+            <div :key="current">
+              <div class="flex gap-0.5 mb-4">
+                <Star v-for="s in testimonials[current].rating" :key="s" class="w-4 h-4 text-amber-400 fill-amber-400" />
+              </div>
+              <p class="text-text-body leading-relaxed mb-5">{{ testimonials[current].content }}</p>
+              <div class="flex items-center gap-3 pt-4 border-t border-gray-100">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-sm font-bold text-white">
+                  {{ testimonials[current].initials }}
+                </div>
+                <div>
+                  <p class="text-sm font-semibold text-text-heading">{{ testimonials[current].name }}</p>
+                  <p class="text-xs text-text-muted">{{ testimonials[current].role }}</p>
+                </div>
+              </div>
+            </div>
+          </TransitionGroup>
+        </div>
+        <div class="flex items-center justify-center gap-4 mt-6">
+          <button
+            class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
+            @click="prev"
+            aria-label="上一条"
+          >
+            <ChevronLeft class="w-5 h-5 text-text-body" />
+          </button>
+          <div class="flex gap-2">
+            <div
+              v-for="(_, i) in testimonials"
+              :key="i"
+              class="w-2 h-2 rounded-full transition-colors duration-300 cursor-pointer"
+              :class="i === current ? 'bg-primary' : 'bg-gray-300'"
+              @click="current = i"
+            />
+          </div>
+          <button
+            class="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:border-primary/30 hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
+            @click="next"
+            aria-label="下一条"
+          >
+            <ChevronRight class="w-5 h-5 text-text-body" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/components/new/illustrations/DashboardMockup.vue b/src/components/new/illustrations/DashboardMockup.vue
new file mode 100644
index 0000000..2b76a95
--- /dev/null
+++ b/src/components/new/illustrations/DashboardMockup.vue
@@ -0,0 +1,142 @@
+<template>
+  <svg viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-2xl">
+    <defs>
+      <linearGradient id="dm-frame" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#1E1B4B" />
+        <stop offset="100%" stop-color="#312E81" />
+      </linearGradient>
+      <linearGradient id="dm-bar" x1="0" y1="0" x2="1" y2="0">
+        <stop offset="0%" stop-color="#22C55E" />
+        <stop offset="100%" stop-color="#4ADE80" />
+      </linearGradient>
+      <linearGradient id="dm-chart" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#4F46E5" />
+        <stop offset="100%" stop-color="#818CF8" />
+      </linearGradient>
+      <clipPath id="dm-screen-clip">
+        <rect x="60" y="20" width="480" height="290" rx="4" />
+      </clipPath>
+    </defs>
+
+    <!-- Laptop lid -->
+    <rect x="40" y="8" width="520" height="310" rx="16" fill="url(#dm-frame)" />
+    <rect x="50" y="16" width="500" height="294" rx="8" fill="#0F0D2E" />
+
+    <!-- Screen -->
+    <rect x="60" y="20" width="480" height="286" rx="4" fill="#F8FAFC" />
+
+    <!-- Camera -->
+    <circle cx="300" cy="12" r="3" fill="#312E81" />
+
+    <!-- Laptop base -->
+    <path d="M20 318 L580 318 L600 345 Q600 360 585 360 L15 360 Q0 360 0 345 Z" fill="url(#dm-frame)" />
+    <rect x="250" y="323" width="100" height="6" rx="3" fill="#312E81" />
+    <ellipse cx="300" cy="368" rx="80" ry="6" fill="#1E1B4B" opacity="0.2" />
+
+    <!-- Screen content -->
+    <g clip-path="url(#dm-screen-clip)">
+      <!-- Sidebar -->
+      <rect x="60" y="20" width="110" height="290" fill="white" />
+      <line x1="170" y1="20" x2="170" y2="310" stroke="#E2E8F0" stroke-width="1" />
+
+      <!-- Logo in sidebar -->
+      <circle cx="95" cy="48" r="14" fill="#4F46E5" />
+      <text x="95" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="white">灵</text>
+      <text x="120" y="48" font-size="8" font-weight="bold" fill="#1E1B4B">灵犀学</text>
+      <text x="120" y="58" font-size="6" fill="#64748B">管理控制台</text>
+
+      <!-- Sidebar menu items -->
+      <rect x="68" y="80" width="94" height="24" rx="6" fill="#EEF2FF" />
+      <rect x="76" y="87" width="8" height="8" rx="2" fill="#4F46E5" />
+      <text x="90" y="95" font-size="8" fill="#4F46E5" font-weight="600">数据看板</text>
+
+      <rect x="76" y="117" width="8" height="8" rx="2" fill="#CBD5E1" />
+      <text x="90" y="125" font-size="8" fill="#64748B">任务管理</text>
+
+      <rect x="76" y="142" width="8" height="8" rx="2" fill="#CBD5E1" />
+      <text x="90" y="150" font-size="8" fill="#64748B">资源中心</text>
+
+      <rect x="76" y="167" width="8" height="8" rx="2" fill="#CBD5E1" />
+      <text x="90" y="175" font-size="8" fill="#64748B">智能处理</text>
+
+      <rect x="76" y="192" width="8" height="8" rx="2" fill="#CBD5E1" />
+      <text x="90" y="200" font-size="8" fill="#64748B">数据分析</text>
+
+      <rect x="76" y="217" width="8" height="8" rx="2" fill="#CBD5E1" />
+      <text x="90" y="225" font-size="8" fill="#64748B">团队管理</text>
+
+      <!-- Main content area -->
+      <!-- Header -->
+      <text x="186" y="44" font-size="12" font-weight="bold" fill="#1E1B4B">运营数据总览</text>
+      <rect x="460" y="30" width="68" height="22" rx="6" fill="#4F46E5" />
+      <text x="494" y="45" text-anchor="middle" font-size="8" font-weight="600" fill="white">导出报告</text>
+
+      <!-- Stats row -->
+      <rect x="182" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="194" y="76" font-size="7" fill="#64748B">处理总量</text>
+      <text x="194" y="96" font-size="16" font-weight="bold" fill="#1E1B4B">5,847</text>
+      <text x="250" y="96" font-size="7" fill="#22C55E" font-weight="600">↑12%</text>
+
+      <rect x="274" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="286" y="76" font-size="7" fill="#64748B">准确率</text>
+      <text x="286" y="96" font-size="16" font-weight="bold" fill="#22C55E">96.8%</text>
+
+      <rect x="366" y="58" width="84" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="378" y="76" font-size="7" fill="#64748B">节省时间</text>
+      <text x="378" y="96" font-size="16" font-weight="bold" fill="#4F46E5">482h</text>
+
+      <rect x="458" y="58" width="72" height="52" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="468" y="76" font-size="7" fill="#64748B">响应时间</text>
+      <text x="468" y="96" font-size="16" font-weight="bold" fill="#F59E0B">2.1s</text>
+
+      <!-- Chart area -->
+      <rect x="182" y="120" width="190" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="196" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">本周处理趋势</text>
+
+      <!-- Bar chart -->
+      <rect x="200" y="210" width="20" height="28" rx="3" fill="url(#dm-chart)" opacity="0.6" />
+      <rect x="226" y="195" width="20" height="43" rx="3" fill="url(#dm-chart)" opacity="0.7" />
+      <rect x="252" y="180" width="20" height="58" rx="3" fill="url(#dm-chart)" opacity="0.8" />
+      <rect x="278" y="170" width="20" height="68" rx="3" fill="url(#dm-chart)" opacity="0.9" />
+      <rect x="304" y="160" width="20" height="78" rx="3" fill="url(#dm-chart)" />
+      <rect x="330" y="175" width="20" height="63" rx="3" fill="url(#dm-chart)" opacity="0.85" />
+      <text x="210" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周一</text>
+      <text x="236" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周二</text>
+      <text x="262" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周三</text>
+      <text x="288" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周四</text>
+      <text x="314" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周五</text>
+      <text x="340" y="244" text-anchor="middle" font-size="6" fill="#94A3B8">周六</text>
+
+      <!-- Donut chart area -->
+      <rect x="380" y="120" width="148" height="130" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <text x="394" y="140" font-size="8" font-weight="bold" fill="#1E1B4B">分类分布</text>
+
+      <!-- Donut chart -->
+      <circle cx="430" cy="195" r="32" fill="none" stroke="#EEF2FF" stroke-width="10" />
+      <circle cx="430" cy="195" r="32" fill="none" stroke="#4F46E5" stroke-width="10" stroke-dasharray="80 120" stroke-dashoffset="0" stroke-linecap="round" />
+      <circle cx="430" cy="195" r="32" fill="none" stroke="#22C55E" stroke-width="10" stroke-dasharray="50 150" stroke-dashoffset="-80" stroke-linecap="round" />
+      <circle cx="430" cy="195" r="32" fill="none" stroke="#F59E0B" stroke-width="10" stroke-dasharray="35 165" stroke-dashoffset="-130" stroke-linecap="round" />
+      <text x="430" y="193" text-anchor="middle" font-size="10" font-weight="bold" fill="#1E1B4B">5,847</text>
+      <text x="430" y="203" text-anchor="middle" font-size="6" fill="#64748B">总处理</text>
+
+      <!-- Legend -->
+      <circle cx="483" cy="170" r="3" fill="#4F46E5" />
+      <text x="490" y="173" font-size="6" fill="#64748B">类型 A 40%</text>
+      <circle cx="483" cy="186" r="3" fill="#22C55E" />
+      <text x="490" y="189" font-size="6" fill="#64748B">类型 B 25%</text>
+      <circle cx="483" cy="202" r="3" fill="#F59E0B" />
+      <text x="490" y="205" font-size="6" fill="#64748B">类型 C 18%</text>
+      <circle cx="483" cy="218" r="3" fill="#E2E8F0" />
+      <text x="490" y="221" font-size="6" fill="#64748B">其他 17%</text>
+
+      <!-- Recent tasks -->
+      <rect x="182" y="260" width="346" height="44" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1" />
+      <circle cx="202" cy="282" r="10" fill="#DCFCE7" />
+      <text x="202" y="286" text-anchor="middle" font-size="10" fill="#22C55E">✓</text>
+      <text x="220" y="278" font-size="8" font-weight="600" fill="#1E1B4B">A 组 · 内容处理批次</text>
+      <text x="220" y="292" font-size="6" fill="#64748B">42/42 已完成 · 准确率 97.2%</text>
+      <rect x="440" y="273" width="52" height="18" rx="9" fill="#DCFCE7" />
+      <text x="466" y="286" text-anchor="middle" font-size="7" font-weight="600" fill="#22C55E">已完成</text>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/new/illustrations/HeroIllustrationNew.vue b/src/components/new/illustrations/HeroIllustrationNew.vue
new file mode 100644
index 0000000..6860416
--- /dev/null
+++ b/src/components/new/illustrations/HeroIllustrationNew.vue
@@ -0,0 +1,156 @@
+<template>
+  <svg viewBox="0 0 500 480" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
+    <defs>
+      <linearGradient id="hn-grad1" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="#4F46E5" />
+        <stop offset="100%" stop-color="#818CF8" />
+      </linearGradient>
+      <linearGradient id="hn-grad2" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="#22C55E" />
+        <stop offset="100%" stop-color="#4ADE80" />
+      </linearGradient>
+      <linearGradient id="hn-grad3" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="#F59E0B" />
+        <stop offset="100%" stop-color="#FBBF24" />
+      </linearGradient>
+      <linearGradient id="hn-screen" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#EEF2FF" />
+        <stop offset="100%" stop-color="#F8FAFC" />
+      </linearGradient>
+      <filter id="hn-shadow" x="-20%" y="-20%" width="140%" height="140%">
+        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#4F46E5" flood-opacity="0.15" />
+      </filter>
+    </defs>
+
+    <!-- Central device (tablet/phone) -->
+    <g class="animate-device" filter="url(#hn-shadow)">
+      <rect x="130" y="100" width="240" height="320" rx="20" fill="#1E1B4B" />
+      <rect x="140" y="115" width="220" height="280" rx="10" fill="url(#hn-screen)" />
+      <circle cx="250" cy="108" r="3" fill="#312E81" />
+
+      <!-- Screen content: mini dashboard -->
+      <rect x="155" y="130" width="90" height="40" rx="8" fill="white" />
+      <rect x="163" y="140" width="30" height="6" rx="3" fill="#4F46E5" opacity="0.3" />
+      <rect x="163" y="152" width="50" height="8" rx="3" fill="#4F46E5" />
+
+      <rect x="255" y="130" width="90" height="40" rx="8" fill="white" />
+      <rect x="263" y="140" width="30" height="6" rx="3" fill="#22C55E" opacity="0.3" />
+      <rect x="263" y="152" width="45" height="8" rx="3" fill="#22C55E" />
+
+      <!-- Mini chart bars -->
+      <rect x="155" y="180" width="190" height="80" rx="8" fill="white" />
+      <rect x="170" y="232" width="18" height="18" rx="3" fill="url(#hn-grad1)" opacity="0.5" />
+      <rect x="196" y="222" width="18" height="28" rx="3" fill="url(#hn-grad1)" opacity="0.65" />
+      <rect x="222" y="212" width="18" height="38" rx="3" fill="url(#hn-grad1)" opacity="0.8" />
+      <rect x="248" y="205" width="18" height="45" rx="3" fill="url(#hn-grad1)" />
+      <rect x="274" y="215" width="18" height="35" rx="3" fill="url(#hn-grad1)" opacity="0.7" />
+      <rect x="300" y="225" width="18" height="25" rx="3" fill="url(#hn-grad1)" opacity="0.55" />
+
+      <!-- Mini list items -->
+      <rect x="155" y="270" width="190" height="24" rx="6" fill="white" />
+      <circle cx="170" cy="282" r="5" fill="#DCFCE7" />
+      <rect x="182" y="278" width="60" height="5" rx="2" fill="#334155" opacity="0.3" />
+      <rect x="320" y="278" width="16" height="5" rx="2" fill="#22C55E" />
+
+      <rect x="155" y="300" width="190" height="24" rx="6" fill="white" />
+      <circle cx="170" cy="312" r="5" fill="#EEF2FF" />
+      <rect x="182" y="308" width="50" height="5" rx="2" fill="#334155" opacity="0.3" />
+      <rect x="320" y="308" width="16" height="5" rx="2" fill="#818CF8" />
+
+      <rect x="155" y="330" width="190" height="24" rx="6" fill="white" />
+      <circle cx="170" cy="342" r="5" fill="#FEF3C7" />
+      <rect x="182" y="338" width="55" height="5" rx="2" fill="#334155" opacity="0.3" />
+      <rect x="320" y="338" width="16" height="5" rx="2" fill="#F59E0B" />
+
+      <!-- Home indicator -->
+      <rect x="220" y="400" width="60" height="4" rx="2" fill="#312E81" />
+    </g>
+
+    <!-- Floating card: top right -->
+    <g class="animate-card1" filter="url(#hn-shadow)">
+      <rect x="380" y="80" width="110" height="60" rx="14" fill="white" />
+      <circle cx="400" cy="105" r="12" fill="#EEF2FF" />
+      <rect x="392" y="101" width="16" height="8" rx="2" fill="url(#hn-grad1)" />
+      <rect x="420" y="97" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
+      <rect x="420" y="108" width="40" height="5" rx="2" fill="#4F46E5" opacity="0.6" />
+    </g>
+
+    <!-- Floating card: left side -->
+    <g class="animate-card2" filter="url(#hn-shadow)">
+      <rect x="10" y="200" width="110" height="60" rx="14" fill="white" />
+      <circle cx="30" cy="225" r="12" fill="#DCFCE7" />
+      <rect x="22" y="221" width="16" height="8" rx="2" fill="url(#hn-grad2)" />
+      <rect x="50" y="217" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
+      <rect x="50" y="228" width="40" height="5" rx="2" fill="#22C55E" opacity="0.6" />
+    </g>
+
+    <!-- Floating badge: bottom right -->
+    <g class="animate-card3">
+      <circle cx="420" cy="350" r="28" fill="url(#hn-grad3)" opacity="0.15" />
+      <circle cx="420" cy="350" r="18" fill="url(#hn-grad3)" />
+      <text x="420" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="white">★</text>
+    </g>
+
+    <!-- Decorative hexagons -->
+    <g class="animate-hex1" opacity="0.15">
+      <polygon points="70,80 90,70 110,80 110,100 90,110 70,100" fill="none" stroke="#4F46E5" stroke-width="1.5" />
+    </g>
+    <g class="animate-hex2" opacity="0.12">
+      <polygon points="400,250 415,242 430,250 430,266 415,274 400,266" fill="none" stroke="#22C55E" stroke-width="1.5" />
+    </g>
+
+    <!-- Floating dots / nodes network -->
+    <circle cx="60" cy="160" r="4" fill="#818CF8" opacity="0.4" class="animate-dot1" />
+    <circle cx="440" cy="180" r="3" fill="#22C55E" opacity="0.3" class="animate-dot2" />
+    <circle cx="50" cy="350" r="3.5" fill="#F59E0B" opacity="0.35" class="animate-dot3" />
+    <circle cx="460" cy="420" r="3" fill="#818CF8" opacity="0.3" class="animate-dot1" />
+    <circle cx="80" cy="440" r="2.5" fill="#22C55E" opacity="0.25" class="animate-dot2" />
+
+    <!-- Connection lines -->
+    <line x1="60" y1="160" x2="130" y2="200" stroke="#818CF8" stroke-width="0.8" opacity="0.15" class="animate-line1" />
+    <line x1="370" y1="200" x2="440" y2="180" stroke="#22C55E" stroke-width="0.8" opacity="0.15" class="animate-line2" />
+    <line x1="370" y1="350" x2="420" y2="350" stroke="#F59E0B" stroke-width="0.8" opacity="0.15" class="animate-line1" />
+
+    <!-- Abstract ring -->
+    <circle cx="460" cy="100" r="20" fill="none" stroke="#818CF8" stroke-width="1" opacity="0.1" class="animate-ring" />
+    <circle cx="460" cy="100" r="12" fill="none" stroke="#818CF8" stroke-width="1.5" opacity="0.15" class="animate-ring" />
+
+    <!-- Small plus signs -->
+    <g opacity="0.2" class="animate-dot3">
+      <line x1="30" y1="120" x2="30" y2="132" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
+      <line x1="24" y1="126" x2="36" y2="126" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
+    </g>
+    <g opacity="0.15" class="animate-dot1">
+      <line x1="470" y1="300" x2="470" y2="312" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
+      <line x1="464" y1="306" x2="476" y2="306" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+@keyframes device-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+@keyframes card1-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
+@keyframes card2-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
+@keyframes card3-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
+@keyframes hex1-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(15deg)} }
+@keyframes hex2-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-10deg)} }
+@keyframes dot-drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,-8px)} }
+@keyframes dot-drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,5px)} }
+@keyframes dot-drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4px,7px)} }
+@keyframes line-pulse1 { 0%,100%{opacity:.15} 50%{opacity:.3} }
+@keyframes line-pulse2 { 0%,100%{opacity:.15} 50%{opacity:.25} }
+@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:.1} 50%{transform:scale(1.1);opacity:.2} }
+
+.animate-device { animation: device-float 6s ease-in-out infinite; }
+.animate-card1 { animation: card1-float 5s ease-in-out infinite 0.5s; }
+.animate-card2 { animation: card2-float 4.5s ease-in-out infinite 1s; }
+.animate-card3 { animation: card3-float 5.5s ease-in-out infinite 0.8s; }
+.animate-hex1 { animation: hex1-rotate 8s ease-in-out infinite; transform-origin: 90px 90px; }
+.animate-hex2 { animation: hex2-rotate 7s ease-in-out infinite 1s; transform-origin: 415px 258px; }
+.animate-dot1 { animation: dot-drift1 6s ease-in-out infinite; }
+.animate-dot2 { animation: dot-drift2 5s ease-in-out infinite 1s; }
+.animate-dot3 { animation: dot-drift3 7s ease-in-out infinite 0.5s; }
+.animate-line1 { animation: line-pulse1 4s ease-in-out infinite; }
+.animate-line2 { animation: line-pulse2 5s ease-in-out infinite 1s; }
+.animate-ring { animation: ring-pulse 4s ease-in-out infinite; transform-origin: 460px 100px; }
+</style>
diff --git a/src/main.ts b/src/main.ts
index 55a12eb..d49fc21 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,11 @@ import App from './App.vue'
 import router from './router'
 import './style.css'
 
+// 由路由统一控制滚动，避免浏览器 scroll restoration 与 SPA 抢滚动
+if ('scrollRestoration' in history) {
+  history.scrollRestoration = 'manual'
+}
+
 const app = createApp(App)
 app.use(router)
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index 41b9445..1f833a2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,12 +6,21 @@ const router = createRouter({
     {
       path: '/',
       name: 'Home',
+      component: () => import('@/views/HomeViewNew.vue'),
+    },
+    {
+      path: '/legacy',
+      name: 'HomeLegacy',
       component: () => import('@/views/HomeView.vue'),
     },
   ],
-  scrollBehavior(_to, _from, savedPosition) {
+  scrollBehavior(to, _from, savedPosition) {
     if (savedPosition) return savedPosition
-    return { top: 0, behavior: 'smooth' }
+    if (to.hash) {
+      return { el: to.hash, behavior: 'smooth', top: 80 }
+    }
+    // 用 instant 避免与浏览器默认行为、异步挂载 DOM 抢滚动，出现「先顶再被拉到锚点/底部」
+    return { top: 0, left: 0, behavior: 'auto' }
   },
 })
 
diff --git a/src/style.css b/src/style.css
index 1a2f905..9bab00d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,7 +16,7 @@
 }
 
 html {
-  scroll-behavior: smooth;
+  /* scroll-behavior 由 JS 按需控制，全局 smooth 会导致刷新后滚回顶部被拦截 */
 }
 
 body {
diff --git a/src/views/HomeViewNew.vue b/src/views/HomeViewNew.vue
new file mode 100644
index 0000000..11d9ad1
--- /dev/null
+++ b/src/views/HomeViewNew.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import NavBarNew from '@/components/new/NavBarNew.vue'
+import HeroSectionNew from '@/components/new/HeroSectionNew.vue'
+import FeaturesSectionNew from '@/components/new/FeaturesSectionNew.vue'
+import AppSectionNew from '@/components/new/AppSectionNew.vue'
+import AdminSectionNew from '@/components/new/AdminSectionNew.vue'
+import TechSectionNew from '@/components/new/TechSectionNew.vue'
+import StatsSectionNew from '@/components/new/StatsSectionNew.vue'
+import TestimonialSectionNew from '@/components/new/TestimonialSectionNew.vue'
+import CtaSectionNew from '@/components/new/CtaSectionNew.vue'
+import FooterSectionNew from '@/components/new/FooterSectionNew.vue'
+</script>
+
+<template>
+  <div class="min-h-screen bg-white">
+    <NavBarNew />
+    <main>
+      <HeroSectionNew />
+      <FeaturesSectionNew />
+      <AppSectionNew />
+      <AdminSectionNew />
+      <TechSectionNew />
+      <StatsSectionNew />
+      <TestimonialSectionNew />
+      <CtaSectionNew />
+    </main>
+    <FooterSectionNew />
+  </div>
+</template>
