diff --git a/packages/website/src/layouts/DocsLayout.astro b/packages/website/src/layouts/DocsLayout.astro
index 209f8f6..89db2df 100644
--- a/packages/website/src/layouts/DocsLayout.astro
+++ b/packages/website/src/layouts/DocsLayout.astro
@@ -8,47 +8,131 @@ interface Props {
 
 const { title, description } = Astro.props;
 const currentPath = Astro.url.pathname;
+const fullDescription = description || 'AI Terminal Assistant 文档';
+const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : Astro.url;
 ---
 
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" class="scroll-smooth">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content={description || 'AI Terminal Assistant 文档'} />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Primary Meta Tags -->
     <title>{title} - AI Terminal Assistant</title>
+    <meta name="title" content={`${title} - AI Terminal Assistant`} />
+    <meta name="description" content={fullDescription} />
+    <meta name="keywords" content="AI, Terminal, Assistant, 文档, 教程, 编程助手" />
+    <link rel="canonical" href={canonicalURL} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={`${title} - AI Terminal Assistant`} />
+    <meta property="og:description" content={fullDescription} />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#030712" />
+    <meta name="color-scheme" content="dark" />
   </head>
-  <body class="bg-gray-950 text-gray-100 antialiased">
+  <body class="min-h-screen bg-gray-950 text-gray-100 antialiased">
     <!-- Navigation -->
     <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm">
-      <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-        <a href="/" class="text-xl font-bold text-white">
-          <span class="text-primary-400">AI</span> Terminal Assistant
+      <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6">
+        <a href="/" class="flex items-center gap-2 text-xl font-bold text-white">
+          <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-400 to-cyan-400">
+            <svg class="h-5 w-5 text-gray-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </span>
+          <span class="hidden sm:inline"><span class="text-primary-400">AI</span> Terminal</span>
         </a>
-        <div class="flex items-center gap-6">
+        <div class="flex items-center gap-4 sm:gap-6">
           <a href="/" class="text-sm text-gray-400 transition hover:text-white">首页</a>
-          <a href="/docs" class="text-sm text-white">文档</a>
+          <a href="/docs" class="text-sm font-medium text-white">文档</a>
+          <!-- Mobile sidebar toggle -->
+          <button id="sidebar-toggle" class="flex items-center justify-center rounded-lg p-2 text-gray-400 hover:bg-gray-800 hover:text-white lg:hidden">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
         </div>
       </div>
     </nav>
 
     <!-- Main Layout -->
     <div class="flex pt-16">
-      <!-- Sidebar -->
-      <aside class="fixed left-0 top-16 bottom-0 w-64 overflow-y-auto border-r border-gray-800 bg-gray-950 p-6">
+      <!-- Sidebar - Desktop -->
+      <aside class="fixed left-0 top-16 bottom-0 hidden w-64 overflow-y-auto border-r border-gray-800 bg-gray-950 p-6 lg:block">
         <DocsSidebar currentPath={currentPath} />
       </aside>
 
+      <!-- Sidebar - Mobile (overlay) -->
+      <div id="mobile-sidebar-overlay" class="fixed inset-0 z-40 hidden bg-gray-950/80 backdrop-blur-sm lg:hidden">
+        <aside id="mobile-sidebar" class="fixed left-0 top-16 bottom-0 w-72 -translate-x-full overflow-y-auto border-r border-gray-800 bg-gray-950 p-6 transition-transform duration-300 ease-in-out">
+          <DocsSidebar currentPath={currentPath} />
+        </aside>
+      </div>
+
       <!-- Content -->
-      <main class="ml-64 flex-1 min-h-screen">
-        <div class="mx-auto max-w-4xl px-8 py-12">
+      <main class="min-h-screen flex-1 lg:ml-64">
+        <div class="mx-auto max-w-4xl px-4 py-8 sm:px-8 sm:py-12">
           <article class="prose prose-invert prose-gray max-w-none">
             <slot />
           </article>
+
+          <!-- Page navigation -->
+          <nav class="mt-12 flex items-center justify-between border-t border-gray-800 pt-6">
+            <a href="/docs" class="group flex items-center gap-2 text-sm text-gray-400 transition hover:text-white">
+              <svg class="h-4 w-4 transition group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+              </svg>
+              <span>返回文档</span>
+            </a>
+            <a href="#" class="text-sm text-gray-500 transition hover:text-gray-300">
+              回到顶部
+            </a>
+          </nav>
         </div>
       </main>
     </div>
+
+    <script>
+      // Mobile sidebar toggle
+      const sidebarToggle = document.getElementById('sidebar-toggle');
+      const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');
+      const mobileSidebar = document.getElementById('mobile-sidebar');
+
+      function openSidebar() {
+        mobileSidebarOverlay?.classList.remove('hidden');
+        setTimeout(() => {
+          mobileSidebar?.classList.remove('-translate-x-full');
+        }, 10);
+      }
+
+      function closeSidebar() {
+        mobileSidebar?.classList.add('-translate-x-full');
+        setTimeout(() => {
+          mobileSidebarOverlay?.classList.add('hidden');
+        }, 300);
+      }
+
+      sidebarToggle?.addEventListener('click', openSidebar);
+
+      mobileSidebarOverlay?.addEventListener('click', (e) => {
+        if (e.target === mobileSidebarOverlay) {
+          closeSidebar();
+        }
+      });
+
+      // Close sidebar when clicking a link
+      mobileSidebar?.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', closeSidebar);
+      });
+    </script>
   </body>
 </html>
 
diff --git a/packages/website/src/layouts/Layout.astro b/packages/website/src/layouts/Layout.astro
index 768cc79..9fd503a 100644
--- a/packages/website/src/layouts/Layout.astro
+++ b/packages/website/src/layouts/Layout.astro
@@ -1,21 +1,62 @@
 ---
 interface Props {
   title: string;
+  description?: string;
+  image?: string;
 }
 
-const { title } = Astro.props;
+const {
+  title,
+  description = 'AI Terminal Assistant - 功能完整的终端 AI 编程助手。内置 23+ 工具、Shadow Git 检查点、MCP 扩展、多模型支持。',
+  image = '/og-image.png'
+} = Astro.props;
+
+const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : Astro.url;
 ---
 
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" class="scroll-smooth">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="AI Terminal Assistant - 终端 AI 编程助手" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Primary Meta Tags -->
     <title>{title}</title>
+    <meta name="title" content={title} />
+    <meta name="description" content={description} />
+    <meta name="keywords" content="AI, Terminal, Assistant, Claude, 编程助手, 代码助手, AI编程, MCP, LLM, 开发工具" />
+    <meta name="author" content="AI Terminal Assistant" />
+    <link rel="canonical" href={canonicalURL} />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
+    <meta property="og:locale" content="zh_CN" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={canonicalURL} />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content={image} />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#030712" />
+    <meta name="color-scheme" content="dark" />
+
+    <!-- Mobile Web App -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   </head>
-  <body class="bg-gray-950 text-gray-100 antialiased">
+  <body class="min-h-screen bg-gray-950 text-gray-100 antialiased">
     <slot />
   </body>
 </html>
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index 1bd3ec5..de2aa0d 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -6,99 +6,171 @@ const features = [
     icon: '⚡',
     title: '流式对话',
     description: '基于 AI SDK 的实时流式响应，支持多种 LLM 提供商（Claude、OpenAI 等）。',
+    gradient: 'from-yellow-500 to-orange-500',
   },
   {
     icon: '🛠️',
     title: '23+ 内置工具',
     description: '完整的工具系统：文件操作、Bash 执行、Git 管理、代码搜索、Web 搜索等。',
+    gradient: 'from-blue-500 to-cyan-500',
   },
   {
     icon: '📝',
     title: '智能编辑',
     description: '三种编辑模式（Whole、Search-Replace、Diff）+ 统一编辑接口，准确修改代码。',
+    gradient: 'from-green-500 to-emerald-500',
   },
   {
     icon: '💾',
     title: 'Checkpoint 系统',
     description: 'Shadow Git 架构 + 7点安全检查，支持检查点创建、恢复、撤销恢复。',
+    gradient: 'from-purple-500 to-violet-500',
   },
   {
     icon: '🔌',
     title: 'MCP 集成',
     description: '完整的 Model Context Protocol 支持，通过外部工具扩展 AI 能力。',
+    gradient: 'from-pink-500 to-rose-500',
   },
   {
     icon: '🎯',
     title: 'Agent 系统',
     description: '可配置的 Agent 预设（General、Plan、CodeReviewer），支持自定义 Agent。',
+    gradient: 'from-red-500 to-orange-500',
   },
   {
     icon: '📦',
     title: '会话管理',
     description: '三层存储架构（Message → Part → Storage），自动保存、消息压缩、上下文管理。',
+    gradient: 'from-indigo-500 to-blue-500',
   },
   {
     icon: '🔍',
     title: 'LSP 集成',
     description: '语言服务器协议支持，提供代码诊断、多语言识别等智能编程能力。',
+    gradient: 'from-teal-500 to-cyan-500',
   },
   {
     icon: '⚙️',
     title: 'Hooks 系统',
     description: '工具执行前后的 Hook 机制，支持自定义扩展和流程控制。',
+    gradient: 'from-amber-500 to-yellow-500',
   },
 ];
+
+const stats = [
+  { value: '23+', label: '内置工具' },
+  { value: '3', label: '编辑模式' },
+  { value: '7', label: '安全检查' },
+  { value: '∞', label: '扩展能力' },
+];
 ---
 
 <Layout title="AI Terminal Assistant - 终端 AI 编程助手">
   <!-- Navigation -->
   <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm">
     <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-      <a href="/" class="text-xl font-bold text-white">
-        <span class="text-primary-400">AI</span> Terminal Assistant
+      <a href="/" class="flex items-center gap-2 text-xl font-bold text-white">
+        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-400 to-cyan-400">
+          <svg class="h-5 w-5 text-gray-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+        </span>
+        <span><span class="text-primary-400">AI</span> Terminal</span>
       </a>
-      <div class="flex items-center gap-6">
+      <div class="hidden items-center gap-6 md:flex">
         <a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a>
+        <a href="#quickstart" class="text-sm text-gray-400 transition hover:text-white">快速开始</a>
         <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">文档</a>
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800/50 px-4 py-2 text-sm text-gray-300 transition hover:border-gray-600 hover:bg-gray-800 hover:text-white"
+        >
+          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+          </svg>
+          GitHub
+        </a>
+      </div>
+      <!-- Mobile menu button -->
+      <button id="mobile-menu-btn" class="flex items-center justify-center rounded-lg p-2 text-gray-400 hover:bg-gray-800 hover:text-white md:hidden">
+        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+    </div>
+    <!-- Mobile menu -->
+    <div id="mobile-menu" class="hidden border-t border-gray-800 bg-gray-950 px-6 py-4 md:hidden">
+      <div class="flex flex-col gap-4">
+        <a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a>
+        <a href="#quickstart" class="text-sm text-gray-400 transition hover:text-white">快速开始</a>
+        <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">文档</a>
+        <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-400 transition hover:text-white">GitHub</a>
       </div>
     </div>
   </nav>
 
   <!-- Hero Section -->
   <section class="relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
-    <!-- Background gradient -->
+    <!-- Background effects -->
     <div class="absolute inset-0 bg-gradient-to-b from-primary-900/20 via-transparent to-transparent"></div>
     <div class="absolute top-1/4 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full bg-primary-500/10 blur-3xl"></div>
+    <div class="absolute top-1/3 right-1/4 h-64 w-64 rounded-full bg-cyan-500/10 blur-3xl"></div>
+    <!-- Grid pattern -->
+    <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
 
     <div class="relative z-10 mx-auto max-w-4xl text-center">
-      <h1 class="mb-6 text-5xl font-bold leading-tight text-white md:text-6xl">
+      <!-- Badge -->
+      <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-2 text-sm text-primary-300">
+        <span class="relative flex h-2 w-2">
+          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-400 opacity-75"></span>
+          <span class="relative inline-flex h-2 w-2 rounded-full bg-primary-500"></span>
+        </span>
+        开源 · 功能完整 · 安全可控
+      </div>
+
+      <h1 class="mb-6 text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
         终端中的
-        <span class="bg-gradient-to-r from-primary-400 to-cyan-400 bg-clip-text text-transparent">
+        <span class="bg-gradient-to-r from-primary-400 via-cyan-400 to-primary-400 bg-clip-text text-transparent">
           AI 编程助手
         </span>
       </h1>
-      <p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400">
+      <p class="mx-auto mb-8 max-w-2xl text-base text-gray-400 sm:text-lg">
         功能完整的终端 AI 编程助手。内置 23+ 工具、Shadow Git 检查点、MCP 扩展、
         多模型支持，让 AI 安全高效地参与编程工作。
       </p>
 
+      <!-- Stats -->
+      <div class="mb-10 flex flex-wrap items-center justify-center gap-6 sm:gap-10">
+        {stats.map((stat) => (
+          <div class="text-center">
+            <div class="text-2xl font-bold text-white sm:text-3xl">{stat.value}</div>
+            <div class="text-xs text-gray-500 sm:text-sm">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+
       <!-- Terminal Demo -->
-      <div class="mx-auto mb-10 max-w-2xl overflow-hidden rounded-xl border border-gray-800 bg-gray-900 shadow-2xl">
+      <div class="mx-auto mb-10 max-w-2xl overflow-hidden rounded-xl border border-gray-800 bg-gray-900/80 shadow-2xl shadow-primary-500/5 backdrop-blur-sm">
         <div class="flex items-center gap-2 border-b border-gray-800 bg-gray-900 px-4 py-3">
           <div class="h-3 w-3 rounded-full bg-red-500"></div>
           <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
           <div class="h-3 w-3 rounded-full bg-green-500"></div>
-          <span class="ml-2 text-sm text-gray-500">terminal</span>
+          <span class="ml-2 text-sm text-gray-500">AI Terminal Assistant</span>
         </div>
-        <div class="p-6 text-left font-mono text-sm">
+        <div class="p-4 text-left font-mono text-xs sm:p-6 sm:text-sm">
           <p class="text-gray-500">$ ai-assistant serve --port 3000</p>
           <p class="mt-2 text-green-400">✓ Server started on http://localhost:3000</p>
           <p class="mt-4 text-gray-500">$ ai-assistant attach</p>
           <p class="mt-2 text-primary-400">AI Assistant ready. How can I help?</p>
           <p class="mt-4 text-white">
-            <span class="text-gray-500">&gt;</span> 帮我找出这个项目中所有的 TODO 注释
+            <span class="text-gray-500">&gt;</span> 帮我重构 src/utils/api.ts，添加错误处理
           </p>
-          <p class="mt-2 text-gray-300">正在搜索代码库中的 TODO 注释...</p>
+          <p class="mt-2 text-gray-300">分析文件结构中...</p>
+          <p class="text-gray-300">已创建 checkpoint: <span class="text-cyan-400">pre-refactor-api</span></p>
+          <p class="text-gray-300">正在应用 Search-Replace 编辑模式...</p>
           <span class="inline-block h-4 w-2 animate-pulse bg-primary-400"></span>
         </div>
       </div>
@@ -106,30 +178,54 @@ const features = [
       <!-- CTA Buttons -->
       <div class="flex flex-wrap items-center justify-center gap-4">
         <a
-          href="/docs"
-          class="rounded-xl bg-primary-500 px-8 py-3 font-medium text-white shadow-lg shadow-primary-500/25 transition hover:bg-primary-600"
+          href="#quickstart"
+          class="group relative inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-primary-500 to-cyan-500 px-8 py-3.5 font-medium text-white shadow-lg shadow-primary-500/25 transition hover:shadow-xl hover:shadow-primary-500/30"
         >
-          查看文档
+          <span>快速开始</span>
+          <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+        <a
+          href="/docs"
+          class="inline-flex items-center gap-2 rounded-xl border border-gray-700 bg-gray-800/50 px-8 py-3.5 font-medium text-gray-300 transition hover:border-gray-600 hover:bg-gray-800 hover:text-white"
+        >
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+          <span>查看文档</span>
         </a>
       </div>
     </div>
   </section>
 
   <!-- Features Section -->
-  <section id="features" class="px-6 py-24">
-    <div class="mx-auto max-w-6xl">
-      <h2 class="mb-4 text-center text-3xl font-bold text-white">核心功能</h2>
-      <p class="mx-auto mb-16 max-w-2xl text-center text-gray-400">
-        专为开发者设计，让 AI 真正融入你的开发工作流
-      </p>
+  <section id="features" class="relative px-6 py-24">
+    <!-- Background -->
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-gray-900/50 to-transparent"></div>
 
-      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div class="relative mx-auto max-w-6xl">
+      <div class="mb-16 text-center">
+        <span class="mb-4 inline-block rounded-full bg-primary-500/10 px-4 py-1.5 text-sm font-medium text-primary-400">
+          核心功能
+        </span>
+        <h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">强大的工具集</h2>
+        <p class="mx-auto max-w-2xl text-gray-400">
+          专为开发者设计，让 AI 真正融入你的开发工作流
+        </p>
+      </div>
+
+      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {
           features.map((feature) => (
-            <div class="group rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
-              <div class="mb-4 text-4xl">{feature.icon}</div>
-              <h3 class="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
-              <p class="text-sm leading-relaxed text-gray-400">{feature.description}</p>
+            <div class="group relative overflow-hidden rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-gray-700 hover:bg-gray-900 hover:shadow-xl hover:shadow-primary-500/5">
+              <!-- Gradient overlay on hover -->
+              <div class={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 transition-opacity duration-300 group-hover:opacity-5`}></div>
+              <div class="relative">
+                <div class="mb-4 text-4xl">{feature.icon}</div>
+                <h3 class="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
+                <p class="text-sm leading-relaxed text-gray-400">{feature.description}</p>
+              </div>
             </div>
           ))
         }
@@ -137,12 +233,183 @@ const features = [
     </div>
   </section>
 
+  <!-- Quick Start Section -->
+  <section id="quickstart" class="px-6 py-24">
+    <div class="mx-auto max-w-4xl">
+      <div class="mb-16 text-center">
+        <span class="mb-4 inline-block rounded-full bg-cyan-500/10 px-4 py-1.5 text-sm font-medium text-cyan-400">
+          快速开始
+        </span>
+        <h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">三步上手</h2>
+        <p class="mx-auto max-w-2xl text-gray-400">
+          简单配置，立即开始使用 AI 编程助手
+        </p>
+      </div>
+
+      <div class="space-y-6">
+        <!-- Step 1 -->
+        <div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
+            1
+          </div>
+          <div class="flex-1">
+            <h3 class="mb-2 text-lg font-semibold text-white">克隆并安装</h3>
+            <div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
+              <code class="text-gray-300">git clone https://github.com/your-repo/ai-terminal-assistant.git</code><br/>
+              <code class="text-gray-300">cd ai-terminal-assistant && pnpm install</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 2 -->
+        <div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
+            2
+          </div>
+          <div class="flex-1">
+            <h3 class="mb-2 text-lg font-semibold text-white">配置 API Key</h3>
+            <div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
+              <code class="text-gray-500"># 创建 .env 文件</code><br/>
+              <code class="text-gray-300">echo "ANTHROPIC_API_KEY=your-api-key" > .env</code>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3 -->
+        <div class="group flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 text-lg font-bold text-white">
+            3
+          </div>
+          <div class="flex-1">
+            <h3 class="mb-2 text-lg font-semibold text-white">启动服务</h3>
+            <div class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm">
+              <code class="text-gray-500"># 启动服务器</code><br/>
+              <code class="text-gray-300">pnpm server:dev</code><br/><br/>
+              <code class="text-gray-500"># 另一个终端，打开 Web UI</code><br/>
+              <code class="text-gray-300">cd packages/web && pnpm dev</code><br/><br/>
+              <code class="text-gray-500"># 或使用 CLI</code><br/>
+              <code class="text-gray-300">pnpm cli attach http://localhost:3000</code>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-10 text-center">
+        <a
+          href="/docs"
+          class="inline-flex items-center gap-2 text-primary-400 transition hover:text-primary-300"
+        >
+          <span>查看详细文档</span>
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Architecture Overview -->
+  <section class="px-6 py-24">
+    <div class="mx-auto max-w-6xl">
+      <div class="mb-16 text-center">
+        <span class="mb-4 inline-block rounded-full bg-purple-500/10 px-4 py-1.5 text-sm font-medium text-purple-400">
+          架构设计
+        </span>
+        <h2 class="mb-4 text-3xl font-bold text-white sm:text-4xl">模块化架构</h2>
+        <p class="mx-auto max-w-2xl text-gray-400">
+          Monorepo 结构，清晰的模块划分
+        </p>
+      </div>
+
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
+          <div class="mb-3 flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500/10">
+              <svg class="h-4 w-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+              </svg>
+            </div>
+            <h3 class="font-semibold text-white">Core</h3>
+          </div>
+          <p class="text-sm text-gray-400">Agent 引擎、工具链、LSP、Checkpoint、MCP</p>
+        </div>
+
+        <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
+          <div class="mb-3 flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-green-500/10">
+              <svg class="h-4 w-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+              </svg>
+            </div>
+            <h3 class="font-semibold text-white">Server</h3>
+          </div>
+          <p class="text-sm text-gray-400">Hono HTTP 服务、REST API、WebSocket、SSE</p>
+        </div>
+
+        <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
+          <div class="mb-3 flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-500/10">
+              <svg class="h-4 w-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <h3 class="font-semibold text-white">Web</h3>
+          </div>
+          <p class="text-sm text-gray-400">React 前端、Vite 构建、Tailwind CSS</p>
+        </div>
+
+        <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-5">
+          <div class="mb-3 flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-500/10">
+              <svg class="h-4 w-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <h3 class="font-semibold text-white">CLI</h3>
+          </div>
+          <p class="text-sm text-gray-400">命令行工具、serve/attach 命令</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Footer -->
   <footer class="border-t border-gray-800 px-6 py-12">
-    <div class="mx-auto max-w-6xl text-center">
-      <p class="text-sm text-gray-500">
-        AI Terminal Assistant · Built with Claude API
-      </p>
+    <div class="mx-auto max-w-6xl">
+      <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
+        <div class="flex items-center gap-2 text-gray-400">
+          <span class="flex h-6 w-6 items-center justify-center rounded bg-gradient-to-br from-primary-400 to-cyan-400">
+            <svg class="h-4 w-4 text-gray-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </span>
+          <span class="text-sm">AI Terminal Assistant</span>
+        </div>
+        <div class="flex items-center gap-6">
+          <a href="/docs" class="text-sm text-gray-500 transition hover:text-gray-300">文档</a>
+          <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-500 transition hover:text-gray-300">GitHub</a>
+        </div>
+        <p class="text-sm text-gray-600">
+          Built with Claude API
+        </p>
+      </div>
     </div>
   </footer>
+
+  <script>
+    // Mobile menu toggle
+    const menuBtn = document.getElementById('mobile-menu-btn');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    menuBtn?.addEventListener('click', () => {
+      mobileMenu?.classList.toggle('hidden');
+    });
+
+    // Close mobile menu when clicking a link
+    mobileMenu?.querySelectorAll('a').forEach(link => {
+      link.addEventListener('click', () => {
+        mobileMenu?.classList.add('hidden');
+      });
+    });
+  </script>
 </Layout>
