docs: add website redesign plan and design spec

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/cli/page.tsx

@@ -0,0 +1,151 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "DAL CLI — 终端不退出，AI 已就位",
+  description:
+    "同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。",
+}
+
+const FEATURES = [
+  {
+    title: "Shell 原生集成",
+    description: "不用打开新窗口。在你的终端里直接启动 DAL，上下文自动继承。",
+  },
+  {
+    title: "Task 管道",
+    description: "把复杂任务拆成管道式的步骤，每步结果可以 pipe 到下一步。",
+  },
+  {
+    title: "BYOK 直连",
+    description: "你的 API Key 直连供应商，CLI 不做中间人，数据不绕路。",
+  },
+  {
+    title: "离线可用",
+    description: "本地模型支持，网络断了也能继续工作。",
+  },
+]
+
+export default function CliPage() {
+  return (
+    <main>
+      <section className="section hero-v1">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="cli-hero"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="inner-container _480px _100-tablet"
+          >
+            <div className="subtitle">DAL CLI</div>
+            <h1>终端不退出，AI 已就位</h1>
+            <div className="mg-top-4x-extra-small">
+              <p>
+                同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "8px 16px",
+                  border: "1px solid var(--core--colors--neutral--400)",
+                  borderRadius: "8px",
+                  fontFamily: "monospace",
+                  fontSize: "0.875rem",
+                  color: "var(--font--colors--paragraph)",
+                }}
+              >
+                <span style={{ color: "var(--font--colors--title)" }}>$</span>
+                <span>npx dalcode</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section overflow-hidden">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="cli-features-title"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="text-center"
+          >
+            <div className="subtitle">Features</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>为终端用户设计，不是 IDE 的简化版</h2>
+            </div>
+          </div>
+          <div className="mg-top-large">
+            <div
+              data-w-id="cli-features-grid"
+              style={{ opacity: "0", filter: "blur(8px)" }}
+              className="corner-gradient-container"
+            >
+              <div className="border-wrapper">
+                <div
+                  className="w-layout-grid"
+                  style={{ gridTemplateColumns: "1fr 1fr" }}
+                >
+                  {FEATURES.map((feat) => (
+                    <div key={feat.title} className="card principles-card">
+                      <div>
+                        <h3 className="display-4">{feat.title}</h3>
+                        <div className="mg-top-5x-extra-small">
+                          <p>{feat.description}</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
+                <div className="corner-gradient-horizontal top-left" />
+                <div className="corner-gradient-horizontal bottom-left" />
+                <div className="corner-gradient-horizontal top-right" />
+                <div className="corner-gradient-horizontal bottom-right" />
+                <div className="corner-gradient-vertical bottom-left" />
+                <div className="corner-gradient-vertical bottom-right" />
+                <div className="corner-gradient-vertical top-left" />
+                <div className="corner-gradient-vertical top-right" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="cta-section v1">
+        <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
+          <div className="inner-container _430px">
+            <div className="subtitle">Get Started</div>
+            <div className="mg-top-3x-extra-small">
+              <h2 className="text-titles-dm">在终端里试试</h2>
+            </div>
+            <div className="mg-top-4x-extra-small">
+              <p className="text-paragraph-dm">
+                一条命令启动，用你自己的 Key，不需要注册。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="secondary-button w-inline-block">
+                  <div className="button-content">
+                    <div>了解更多</div>
+                    <div className="button-icon-wrapper secondary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg bg-neutral-800" />
+                      <div className="button-icon-bg-inside bg-neutral-600" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

app/code/page.tsx

@@ -0,0 +1,150 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "DAL Code — 写代码之前，先把事情想清楚",
+  description:
+    "AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。",
+}
+
+const CAPABILITIES = [
+  {
+    title: "Intent Capture",
+    description:
+      "你说方向，AI 来追问细节。结构化问题把模糊想法收敛成可执行的工程规格。",
+  },
+  {
+    title: "Mission Mode",
+    description:
+      "一个目标拆成十步计划，逐步推进，关键节点等你确认再继续。",
+  },
+  {
+    title: "Smart Routing",
+    description:
+      "架构设计用强模型，格式化用快模型。每个子任务自动选对模型。",
+  },
+  {
+    title: "Diff 审批",
+    description:
+      "代码变更、文件操作、命令执行——敏感操作必须经过你的确认。",
+  },
+  {
+    title: "Skills 引擎",
+    description:
+      "把团队最佳实践封装成可复用工作流，新人上手即用，经验不再只在某个人脑子里。",
+  },
+  {
+    title: "上下文压缩",
+    description:
+      "五层压缩策略，对话再长也不丢关键信息。token 花在刀刃上。",
+  },
+]
+
+export default function CodePage() {
+  return (
+    <main>
+      <section className="section hero-v1">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="code-hero"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="inner-container _480px _100-tablet"
+          >
+            <div className="subtitle">DAL Code</div>
+            <h1>写代码之前，先把事情想清楚</h1>
+            <div className="mg-top-4x-extra-small">
+              <p>
+                AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="primary-button w-inline-block">
+                  <div className="button-content">
+                    <div>联系我们</div>
+                    <div className="button-icon-wrapper primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg" />
+                      <div className="button-icon-bg-inside" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section overflow-hidden">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="code-caps-title"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="text-center"
+          >
+            <div className="subtitle">Capabilities</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>不是更多的功能，是更对的架构</h2>
+            </div>
+          </div>
+          <div className="mg-top-large">
+            <div
+              data-w-id="code-caps-grid"
+              style={{ opacity: "0", filter: "blur(8px)" }}
+            >
+              <div
+                className="w-layout-grid values-grid"
+                style={{ gridTemplateColumns: "1fr 1fr 1fr" }}
+              >
+                {CAPABILITIES.map((cap) => (
+                  <div key={cap.title} className="value-item">
+                    <div>
+                      <h3 className="display-4">{cap.title}</h3>
+                      <div className="mg-top-5x-extra-small">
+                        <p style={{ fontSize: "0.875rem" }}>{cap.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="cta-section v1">
+        <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
+          <div className="inner-container _430px">
+            <div className="subtitle">Next Step</div>
+            <div className="mg-top-3x-extra-small">
+              <h2 className="text-titles-dm">聊聊你的开发场景</h2>
+            </div>
+            <div className="mg-top-4x-extra-small">
+              <p className="text-paragraph-dm">
+                无论是独立项目还是团队协作，DAL Code 都从同一个起点开始——一次结构化的需求对话。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="secondary-button w-inline-block">
+                  <div className="button-content">
+                    <div>联系团队</div>
+                    <div className="button-icon-wrapper secondary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg bg-neutral-800" />
+                      <div className="button-icon-bg-inside bg-neutral-600" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

app/globals.css

@@ -211,11 +211,29 @@
   color: #f5f5f5;
 }
 
-/* Primary button in dark sections */
+/* Primary button: in dark mode, bg becomes light (#f5f5f5) via variable inversion,
+   so text must be dark for contrast */
 .dark .primary-button {
+  color: #0d0d0d;
   border-color: #2a2a2a;
 }
 
+.dark .primary-button:hover {
+  color: #0d0d0d;
+}
+
+.dark .primary-button .button-icon-wrapper svg {
+  color: #0d0d0d;
+}
+
+.dark .primary-button .button-icon-bg {
+  background-color: #1a1a1a;
+}
+
+.dark .primary-button .button-icon-bg-inside {
+  background-color: #2a2a2a;
+}
+
 /* Badge */
 .dark .badge {
   background-color: #1e1e1e;
@@ -235,6 +253,28 @@
   background-color: #2a2a2a;
 }
 
+/* Newsletter input in dark mode */
+.dark .input.dark-mode {
+  background-color: #1a1a1a;
+  border-color: #333;
+  color: #f5f5f5;
+}
+
+.dark .input.dark-mode:hover,
+.dark .input.dark-mode:focus {
+  background-color: #222;
+  border-color: #444;
+}
+
+.dark .input.dark-mode::placeholder {
+  color: #666;
+}
+
+.dark .form-button.inside-input.dark-mode {
+  background-color: #f5f5f5;
+  color: #0d0d0d;
+}
+
 /* Dropdown menu */
 .dark .w-dropdown-list {
   background-color: #1e1e1e;
@@ -282,3 +322,115 @@
   background-color: var(--core--colors--neutral--300);
 }
 
+/* Careers page — positions list */
+.positions-list-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.position-item {
+  display: flex !important;
+  align-items: center;
+  padding: 24px 28px;
+  text-decoration: none;
+  border-bottom: 1px solid var(--core--colors--neutral--300);
+  transition: background-color 0.2s;
+}
+
+.position-item:last-child {
+  border-bottom: none;
+}
+
+.position-item:hover {
+  background-color: var(--core--colors--neutral--200);
+}
+
+.dark .position-item:hover {
+  background-color: #1a1a1a;
+}
+
+.position-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 24px;
+}
+
+.position-info {
+  flex: 1;
+}
+
+.position-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Locale switcher */
+.locale-switcher {
+  position: relative;
+  margin-left: 8px;
+}
+
+.locale-switcher-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--core--colors--neutral--400);
+  background: transparent;
+  cursor: pointer;
+  color: var(--core--colors--neutral--700);
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.locale-switcher-trigger:hover {
+  background-color: var(--core--colors--neutral--300);
+}
+
+.locale-switcher-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 80px;
+  border: 1px solid var(--core--colors--neutral--400);
+  border-radius: 8px;
+  background: var(--core--colors--neutral--100);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.dark .locale-switcher-dropdown {
+  background: #1e1e1e;
+}
+
+.locale-switcher-option {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--font--colors--paragraph);
+  text-align: left;
+  transition: background-color 0.15s;
+}
+
+.locale-switcher-option:hover {
+  background-color: var(--core--colors--neutral--300);
+}
+
+.dark .locale-switcher-option:hover {
+  background-color: #2a2a2a;
+}
+
+.locale-switcher-option.active {
+  font-weight: 600;
+}
+

app/office/page.tsx

@@ -0,0 +1,142 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "DAL Office — 文档也该有 AI 原生体验",
+  description:
+    "文字、表格、演示文稿——内置 AI 辅助起草、数据洞察和版式生成，非技术团队也能高效产出。",
+}
+
+const EDITORS = [
+  {
+    name: "文字处理",
+    description: "AI 辅助起草、润色、翻译。长文档自动摘要，会议纪要一键生成。",
+  },
+  {
+    name: "数据表格",
+    description: "自然语言查询数据，公式自动生成，异常值智能标注。",
+  },
+  {
+    name: "演示文稿",
+    description: "描述主题即可生成结构化幻灯片，版式和配图自动匹配。",
+  },
+]
+
+export default function OfficePage() {
+  return (
+    <main>
+      <section className="section hero-v1">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="office-hero"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="inner-container _480px _100-tablet"
+          >
+            <div className="subtitle">DAL Office</div>
+            <h1>文档也该有 AI 原生体验</h1>
+            <div className="mg-top-4x-extra-small">
+              <p>
+                文字、表格、演示文稿——内置 AI 辅助起草、数据洞察和版式生成，非技术团队也能高效产出。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="primary-button w-inline-block">
+                  <div className="button-content">
+                    <div>申请体验</div>
+                    <div className="button-icon-wrapper primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg" />
+                      <div className="button-icon-bg-inside" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section overflow-hidden">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="office-editors-title"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="text-center"
+          >
+            <div className="subtitle">Editors</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>三种编辑器，一套 AI 能力</h2>
+            </div>
+          </div>
+          <div className="mg-top-large">
+            <div
+              data-w-id="office-editors-grid"
+              style={{ opacity: "0", filter: "blur(8px)" }}
+              className="corner-gradient-container"
+            >
+              <div className="border-wrapper">
+                <div className="w-layout-grid principles-grid">
+                  {EDITORS.map((editor) => (
+                    <div key={editor.name} className="card principles-card">
+                      <div>
+                        <h3 className="display-4">{editor.name}</h3>
+                        <div className="mg-top-5x-extra-small">
+                          <p>{editor.description}</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
+                <div className="corner-gradient-horizontal top-left" />
+                <div className="corner-gradient-horizontal bottom-left" />
+                <div className="corner-gradient-horizontal top-right" />
+                <div className="corner-gradient-horizontal bottom-right" />
+                <div className="corner-gradient-vertical bottom-left" />
+                <div className="corner-gradient-vertical bottom-right" />
+                <div className="corner-gradient-vertical top-left" />
+                <div className="corner-gradient-vertical top-right" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="cta-section v1">
+        <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
+          <div className="inner-container _430px">
+            <div className="subtitle">Early Access</div>
+            <div className="mg-top-3x-extra-small">
+              <h2 className="text-titles-dm">DAL Office 正在打磨中</h2>
+            </div>
+            <div className="mg-top-4x-extra-small">
+              <p className="text-paragraph-dm">
+                核心编辑器已可用，AI 能力持续上线。留下联系方式，第一时间获得体验资格。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="secondary-button w-inline-block">
+                  <div className="button-content">
+                    <div>预约体验</div>
+                    <div className="button-icon-wrapper secondary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg bg-neutral-800" />
+                      <div className="button-icon-bg-inside bg-neutral-600" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

app/page.tsx

@@ -1,5 +1,17 @@
 import type { Metadata } from "next"
-import { HeroSection, IntegrationsSection, PrinciplesSection, CtaSection, BlogPreviewSection } from "@/components/home"
+import {
+  HeroSection,
+  IntegrationsSection,
+  PrinciplesSection,
+  ProductEcosystem,
+  WorkflowSteps,
+  CtaSection,
+  FeatureGrid,
+  EcosystemSection,
+  FaqSection,
+  BottomCta,
+  BlogPreviewSection,
+} from "@/components/home"
 import { SITE_BRAND, SITE_DESCRIPTION } from "@/lib/site-content"
 
 export const metadata: Metadata = {
@@ -17,7 +29,13 @@ export default function HomePage() {
       <HeroSection />
       <IntegrationsSection />
       <PrinciplesSection />
+      <ProductEcosystem />
+      <WorkflowSteps />
       <CtaSection />
+      <FeatureGrid />
+      <EcosystemSection />
+      <FaqSection />
+      <BottomCta />
       <BlogPreviewSection />
     </main>
   )

app/platform/page.tsx

@@ -0,0 +1,159 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "DeepAILab API Platform — 一层路由，连通所有模型",
+  description:
+    "20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。",
+}
+
+const CAPABILITIES = [
+  {
+    title: "智能路由",
+    description: "按任务类型、延迟要求和成本预算自动选择最优模型，策略统一管控。",
+  },
+  {
+    title: "密钥管理",
+    description: "BYOK 直连供应商 API，也支持平台托管。多团队、多项目独立配额。",
+  },
+  {
+    title: "用量分析",
+    description: "token 消耗、模型分布、成本趋势——实时仪表盘，数据驱动决策。",
+  },
+  {
+    title: "审计日志",
+    description: "每条请求可追溯：谁、什么时候、用了哪个模型、花了多少。满足企业合规需求。",
+  },
+]
+
+export default function PlatformPage() {
+  return (
+    <main>
+      <section className="section hero-v1">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="platform-hero"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="inner-container _480px _100-tablet"
+          >
+            <div className="subtitle">DeepAILab API Platform</div>
+            <h1>一层路由，连通所有模型</h1>
+            <div className="mg-top-4x-extra-small">
+              <p>
+                20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <a
+                  href="https://deepailab.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="primary-button w-inline-block"
+                >
+                  <div className="button-content">
+                    <div>进入平台</div>
+                    <div className="button-icon-wrapper primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg" />
+                      <div className="button-icon-bg-inside" />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section overflow-hidden">
+        <div className="w-layout-blockcontainer container-default w-container">
+          <div
+            data-w-id="platform-caps-title"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="text-center"
+          >
+            <div className="subtitle">Capabilities</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>不是中转站，是基础设施</h2>
+            </div>
+            <div className="mg-top-4x-extra-small">
+              <p>
+                DeepAILab 不只转发请求。它理解任务、选择模型、管控成本、记录审计——是团队级的 AI 基础设施。
+              </p>
+            </div>
+          </div>
+          <div className="mg-top-large">
+            <div
+              data-w-id="platform-caps-grid"
+              style={{ opacity: "0", filter: "blur(8px)" }}
+              className="corner-gradient-container"
+            >
+              <div className="border-wrapper">
+                <div
+                  className="w-layout-grid"
+                  style={{ gridTemplateColumns: "1fr 1fr" }}
+                >
+                  {CAPABILITIES.map((cap) => (
+                    <div key={cap.title} className="card principles-card">
+                      <div>
+                        <h3 className="display-4">{cap.title}</h3>
+                        <div className="mg-top-5x-extra-small">
+                          <p>{cap.description}</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
+                <div className="corner-gradient-horizontal top-left" />
+                <div className="corner-gradient-horizontal bottom-left" />
+                <div className="corner-gradient-horizontal top-right" />
+                <div className="corner-gradient-horizontal bottom-right" />
+                <div className="corner-gradient-vertical bottom-left" />
+                <div className="corner-gradient-vertical bottom-right" />
+                <div className="corner-gradient-vertical top-left" />
+                <div className="corner-gradient-vertical top-right" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="cta-section v1">
+        <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
+          <div className="inner-container _430px">
+            <div className="subtitle">Get Started</div>
+            <div className="mg-top-3x-extra-small">
+              <h2 className="text-titles-dm">开始接入</h2>
+            </div>
+            <div className="mg-top-4x-extra-small">
+              <p className="text-paragraph-dm">
+                注册即可使用。团队版支持统一计费、成员管理和审计日志。
+              </p>
+            </div>
+            <div className="mg-top-2x-extra-small">
+              <div className="buttons-row left">
+                <Link href="/contact" className="secondary-button w-inline-block">
+                  <div className="button-content">
+                    <div>联系团队</div>
+                    <div className="button-icon-wrapper secondary">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
+                        <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
+                      </svg>
+                      <div className="button-icon-bg bg-neutral-800" />
+                      <div className="button-icon-bg-inside bg-neutral-600" />
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

app/pricing/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next"
+import { getTranslations } from "next-intl/server"
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("pricingPage.hero")
+  return { title: t("headline") }
+}
+
+export default async function PricingPage() {
+  const t = await getTranslations("pricingPage.hero")
+
+  return (
+    <section className="min-h-screen pt-32 pb-20 px-6">
+      <div className="max-w-4xl mx-auto text-center">
+        <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
+          {t("label")}
+        </p>
+        <h1 className="font-display text-4xl md:text-6xl font-bold text-text-primary leading-tight">
+          {t("headline")}
+        </h1>
+        <p className="mt-6 text-lg text-text-secondary max-w-2xl mx-auto leading-relaxed">
+          {t("subheadline")}
+        </p>
+        <div className="mt-16 text-text-muted text-sm">
+          Pricing details coming soon
+        </div>
+      </div>
+    </section>
+  )
+}

components/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
           <div className="footer-top">
             <div className="footer-logo-wrapper">
               <Link href="/" className="logo-link w-inline-block w--current">
-                <Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a73cf7c58867b86184dc28_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="DAL Code logo" className="logo-icon w-variant-7662d6cb-8aa5-f783-c60a-07a613bd9733" />
+                <Image src="/assets/dalcode-logo-dark.svg" width={54} height={54} alt="DAL Code" className="logo-icon" />
               </Link>
             </div>
             <Link href="/contact" className="footer-button w-inline-block">

components/Header.tsx

@@ -6,6 +6,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useTranslations } from "next-intl"
 import ThemeToggle from "@/components/ThemeToggle"
+import LocaleSwitcher from "@/components/LocaleSwitcher"
 import { NAV_GROUPS, NAV_LINKS } from "@/lib/site-content"
 
 function ChevronIcon() {
@@ -57,12 +58,12 @@ export default function Header() {
         <div className="header-logo-wrapper">
           <div className="show-light-mode">
             <Link href="/" className="logo-link w-inline-block">
-              <Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a43b922d3d1ca923f36385_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="Logo" className="logo-icon" />
+              <Image src="/assets/dalcode-app-icon.svg" width={54} height={54} alt="DAL Code" className="logo-icon" />
             </Link>
           </div>
           <div className="show-dark-mode">
             <Link href="/" className="logo-link w-inline-block">
-              <Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a73cf7c58867b86184dc28_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="Logo" className="logo-icon" />
+              <Image src="/assets/dalcode-logo-dark.svg" width={54} height={54} alt="DAL Code" className="logo-icon" />
             </Link>
           </div>
         </div>
@@ -171,6 +172,7 @@ export default function Header() {
             </div>
           </div>
           <ThemeToggle />
+          <LocaleSwitcher />
           <button
             className={`hamburger-menu w-nav-button ${mobileOpen ? "w--open" : ""}`}
             onClick={toggleMobile}

components/PixelTextReveal.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { useRef, useEffect } from "react"
+
+interface PixelTextRevealProps {
+  lines?: string[]
+  className?: string
+}
+
+export default function PixelTextReveal({
+  lines = ["DAL", "Ecosystem"],
+  className,
+}: PixelTextRevealProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    const drawCtx = ctx
+
+    const dpr = window.devicePixelRatio || 1
+    const width = canvas.clientWidth
+    const height = canvas.clientHeight
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    ctx.scale(dpr, dpr)
+
+    const cellSize = 5
+    const gap = 1.5
+    const step = cellSize + gap
+    const cols = Math.floor(width / step)
+    const rows = Math.floor(height / step)
+
+    const scale = 6
+    const offW = cols * scale
+    const offH = rows * scale
+    const offscreen = document.createElement("canvas")
+    offscreen.width = offW
+    offscreen.height = offH
+    const offCtx = offscreen.getContext("2d")!
+    offCtx.fillStyle = "#000"
+    offCtx.fillRect(0, 0, offW, offH)
+    offCtx.fillStyle = "#fff"
+    offCtx.textAlign = "center"
+    offCtx.textBaseline = "middle"
+
+    const primarySize = Math.max(48, Math.floor(offH * 0.38))
+    const secondarySize = Math.max(36, Math.floor(offH * 0.26))
+    const lineGap = Math.floor(offH * 0.06)
+
+    const totalH = primarySize + (lines.length > 1 ? secondarySize + lineGap : 0)
+    const baseY = (offH - totalH) / 2
+
+    lines.forEach((line, i) => {
+      const size = i === 0 ? primarySize : secondarySize
+      offCtx.font = `${i === 0 ? 900 : 800} ${size}px "Inter", "SF Pro Display", system-ui, sans-serif`
+      offCtx.letterSpacing = i === 0 ? "0.05em" : "0.02em"
+      const y = i === 0
+        ? baseY + primarySize / 2
+        : baseY + primarySize + lineGap + secondarySize / 2
+      offCtx.fillText(line, offW / 2, y)
+    })
+
+    const imgData = offCtx.getImageData(0, 0, offW, offH)
+    const textMap: boolean[][] = []
+    for (let gy = 0; gy < rows; gy++) {
+      textMap[gy] = []
+      for (let gx = 0; gx < cols; gx++) {
+        let sum = 0
+        for (let sy = 0; sy < scale; sy++) {
+          for (let sx = 0; sx < scale; sx++) {
+            sum += imgData.data[((gy * scale + sy) * offW + gx * scale + sx) * 4]
+          }
+        }
+        textMap[gy][gx] = sum / (scale * scale) > 60
+      }
+    }
+
+    const centerX = cols / 2
+    const centerY = rows / 2
+
+    const cells = Array.from({ length: rows }, (_, y) =>
+      Array.from({ length: cols }, (_, x) => {
+        const isText = textMap[y][x]
+        const dist = Math.hypot(x - centerX, y - centerY)
+        return {
+          opacity: 0,
+          target: isText ? 1.0 : 0.006 + Math.random() * 0.014,
+          delay: isText
+            ? dist * 12 + Math.random() * 200
+            : Math.random() * 600,
+          isText,
+        }
+      })
+    )
+
+    let fg = document.documentElement.classList.contains("dark")
+      ? "255,255,255"
+      : "5,5,5"
+
+    const observer = new MutationObserver(() => {
+      fg = document.documentElement.classList.contains("dark")
+        ? "255,255,255"
+        : "5,5,5"
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    const startTime = performance.now()
+    let raf: number
+
+    function draw(now: number) {
+      const elapsed = now - startTime
+      drawCtx.clearRect(0, 0, width, height)
+
+      for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+          const c = cells[y][x]
+          if (elapsed > c.delay) {
+            c.opacity += (c.target - c.opacity) * 0.06
+          }
+          if (c.opacity < 0.004) continue
+
+          drawCtx.fillStyle = `rgba(${fg},${c.opacity})`
+          drawCtx.fillRect(x * step, y * step, cellSize, cellSize)
+        }
+      }
+
+      raf = requestAnimationFrame(draw)
+    }
+
+    raf = requestAnimationFrame(draw)
+    return () => {
+      cancelAnimationFrame(raf)
+      observer.disconnect()
+    }
+  }, [lines])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ width: "100%", height: "100%", display: "block" }}
+    />
+  )
+}

components/ScrollReveal.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+interface ScrollRevealProps {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+}
+
+export default function ScrollReveal({
+  children,
+  className = "",
+  delay = 0,
+}: ScrollRevealProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            el.classList.add("reveal-visible")
+          }, delay)
+          observer.unobserve(el)
+        }
+      },
+      { threshold: 0.1 },
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [delay])
+
+  return (
+    <div ref={ref} className={`reveal-up ${className}`}>
+      {children}
+    </div>
+  )
+}

components/about/MissionSection.tsx

@@ -28,7 +28,7 @@ export default function MissionSection() {
               </div>
               <Link href="/contact" className="tertiary-button w-inline-block">
                 <div className="button-content">
-                  <div>申请试用</div>
+                  <div>联系我们</div>
                   <div className="button-icon-wrapper secondary">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"

components/home/BlogPreviewSection.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image"
 import Link from "next/link"
 import { BLOG_POSTS } from "@/lib/blog-data"
 
@@ -42,8 +41,19 @@ export default function BlogPreviewSection() {
                   <div className="blog-featured-v1-wrapper">
                     <div className="border-wrapper">
                       <Link href={`/blog-posts/${post.slug}`} className="blog-card-v1 w-inline-block">
-                        <div className="blog-v1-image-wrapper">
-                          <Image alt={post.imageAlt} src={post.image} sizes="(max-width: 767px) 100vw, (max-width: 991px) 95vw, 939.96533203125px" className="image" fill style={{ objectFit: "cover" }} />
+                        <div className="blog-v1-image-wrapper" style={{
+                          background: "linear-gradient(135deg, var(--core--colors--neutral--200) 0%, var(--core--colors--neutral--300) 100%)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                        }}>
+                          <span style={{
+                            fontSize: "0.75rem",
+                            fontWeight: 600,
+                            letterSpacing: "0.08em",
+                            textTransform: "uppercase",
+                            color: "var(--core--colors--neutral--500)",
+                          }}>{post.category}</span>
                         </div>
                         <div className="blog-v1-content">
                           <div className="inner-container _420px">

components/home/BottomCta.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link"
+import LottiePlayer from "@/components/LottiePlayer"
+
+export default function BottomCta() {
+  return (
+    <section className="cta-section v1">
+      <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
+        <div className="inner-container _430px">
+          <div className="subtitle">Get Started</div>
+          <div className="mg-top-3x-extra-small">
+            <h2 className="text-titles-dm">
+              下一步：聊聊你的场景
+            </h2>
+          </div>
+          <div className="mg-top-4x-extra-small">
+            <p className="text-paragraph-dm">
+              独立开发者、团队 Lead、企业 CTO——不同角色，同一个起点：一次关于你真实需求的对话。
+            </p>
+          </div>
+          <div className="mg-top-2x-extra-small">
+            <div className="buttons-row left">
+              <Link
+                href="/contact"
+                className="secondary-button w-inline-block"
+              >
+                <div className="button-content">
+                  <div>联系我们</div>
+                  <div className="button-icon-wrapper secondary">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="100%"
+                      viewBox="0 0 17 17"
+                      fill="none"
+                      className="squared-icon"
+                    >
+                      <path
+                        d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="square"
+                      />
+                    </svg>
+                    <div className="button-icon-bg bg-neutral-800" />
+                    <div className="button-icon-bg-inside bg-neutral-600" />
+                  </div>
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <LottiePlayer
+        src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1df78b3b45295434b5c6a_cta-animation-waterfall.json"
+        className="cta-image"
+        loop
+        autoplay
+      />
+    </section>
+  )
+}

components/home/EcosystemSection.tsx

@@ -0,0 +1,96 @@
+import { PLATFORM_ADVANTAGES } from "@/lib/site-content"
+
+export default function EcosystemSection() {
+  return (
+    <section className="section bg-neutral overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="eco-title"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="text-center"
+        >
+          <div className="subtitle">Platform</div>
+          <div className="mg-top-4x-extra-small">
+            <h2>DeepAILab — 开发者的 AI 基础设施</h2>
+          </div>
+          <div className="mg-top-4x-extra-small">
+            <p>
+              账户统一、路由统一、治理统一。四条产品线共享同一个平台底座，能力互通，数据不割裂。
+            </p>
+          </div>
+        </div>
+        <div className="mg-top-large">
+          <div
+            data-w-id="eco-cards"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="corner-gradient-container"
+          >
+            <div className="border-wrapper">
+              <div className="w-layout-grid principles-grid">
+                {PLATFORM_ADVANTAGES.map((adv) => (
+                  <div key={adv.title} className="card principles-card">
+                    <div>
+                      <h3 className="display-4">{adv.title}</h3>
+                      <div className="mg-top-5x-extra-small">
+                        <p>{adv.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div
+              data-wf--corner-gradient-outline--variant="base"
+              className="corner-gradient-wrapper"
+            >
+              <div className="corner-gradient-horizontal top-left" />
+              <div className="corner-gradient-horizontal bottom-left" />
+              <div className="corner-gradient-horizontal top-right" />
+              <div className="corner-gradient-horizontal bottom-right" />
+              <div className="corner-gradient-vertical bottom-left" />
+              <div className="corner-gradient-vertical bottom-right" />
+              <div className="corner-gradient-vertical top-left" />
+              <div className="corner-gradient-vertical top-right" />
+            </div>
+          </div>
+        </div>
+        <div className="mg-top-regular">
+          <div
+            data-w-id="eco-cta"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="buttons-row"
+          >
+            <a
+              href="https://deepailab.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="secondary-button w-inline-block"
+            >
+              <div className="button-content">
+                <div>了解 DeepAILab 平台</div>
+                <div className="button-icon-wrapper secondary">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="100%"
+                    viewBox="0 0 17 17"
+                    fill="none"
+                    className="squared-icon"
+                  >
+                    <path
+                      d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="square"
+                    />
+                  </svg>
+                  <div className="button-icon-bg bg-neutral-800" />
+                  <div className="button-icon-bg-inside bg-neutral-600" />
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/home/FaqSection.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { useState } from "react"
+import { HOME_FAQS } from "@/lib/site-content"
+
+export default function FaqSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  return (
+    <section className="section overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="faq-wrapper"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="w-layout-grid faqs-v1-wrapper"
+        >
+          <div>
+            <div className="subtitle">FAQ</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>常见问题</h2>
+            </div>
+          </div>
+          <div className="w-layout-grid faqs-v1-grid" role="list">
+            {HOME_FAQS.map((faq, i) => (
+              <div
+                key={faq.question}
+                className="card accordion-card-v1"
+                role="listitem"
+                style={{ cursor: "pointer" }}
+                onClick={() => setOpenIndex(openIndex === i ? null : i)}
+              >
+                <div className="accordion-number">
+                  {String(i + 1).padStart(2, "0")}
+                </div>
+                <div className="accordion-body">
+                  <div className="accordion-title">{faq.question}</div>
+                  <div
+                    className="accordion-content"
+                    style={{
+                      maxHeight: openIndex === i ? "200px" : "0",
+                      overflow: "hidden",
+                      transition: "max-height 0.3s ease-out",
+                      opacity: openIndex === i ? 1 : 0,
+                    }}
+                  >
+                    <p>{faq.answer}</p>
+                  </div>
+                </div>
+                <div className="accordion-arrow">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="100%"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    style={{
+                      transform: openIndex === i ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 0.3s ease-out",
+                    }}
+                  >
+                    <path
+                      d="M4 6L8 10L12 6"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/home/FeatureGrid.tsx

@@ -0,0 +1,44 @@
+import { FEATURE_ITEMS } from "@/lib/site-content"
+
+export default function FeatureGrid() {
+  return (
+    <section className="section overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="feature-title"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="text-center"
+        >
+          <div className="subtitle">Core Capabilities</div>
+          <div className="mg-top-4x-extra-small">
+            <h2>不是更多的 prompt 技巧，是更对的工程架构</h2>
+          </div>
+          <div className="mg-top-4x-extra-small">
+            <p>
+              意图理解、模型选择、质量保障——这些能力应该内建在平台里，而不是靠用户自己摸索。
+            </p>
+          </div>
+        </div>
+        <div className="mg-top-large">
+          <div
+            data-w-id="feature-grid"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+          >
+            <div className="w-layout-grid values-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
+              {FEATURE_ITEMS.map((item) => (
+                <div key={item.title} className="value-item">
+                  <div>
+                    <h3 className="display-4">{item.title}</h3>
+                    <div className="mg-top-5x-extra-small">
+                      <p style={{ fontSize: "0.875rem" }}>{item.description}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/home/HeroSection.tsx

@@ -1,6 +1,5 @@
-import Image from "next/image"
 import Link from "next/link"
-import LottiePlayer from "@/components/LottiePlayer"
+import PixelTextReveal from "@/components/PixelTextReveal"
 
 export default function HeroSection() {
   return (
@@ -67,7 +66,7 @@ export default function HeroSection() {
               <div className="hero-v1-bg-gradient" />
             </div>
           </div>
-          <LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1a7d9c54a9b73191bb531_hero-v1-animation-quantum-webflow-template.json" className="hero-v1-lottie" loop autoplay />
+          <PixelTextReveal lines={["DAL", "Ecosystem"]} className="hero-v1-lottie" />
         </div>
         <div id="about-us" data-w-id="bce231a0-6e79-c8d3-8883-56d99499b3ad" style={{ opacity: "0", filter: "blur(8px)" }} className="about-section-wrapper">
           <div className="about-section-top-content">
@@ -82,13 +81,22 @@ export default function HeroSection() {
           </div>
           <div className="about-section-bottom-content">
             <Link href="/about" className="lightbox-link w-inline-block">
-              <Image
-                src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg"
-                width={660}
-                height={372}
-                alt="DAL Code product overview"
+              <div
                 className="lightbox-thumbnail"
-              />
+                style={{
+                  width: 660,
+                  height: 372,
+                  background: "linear-gradient(135deg, var(--core--colors--neutral--200) 0%, var(--core--colors--neutral--300) 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "0.875rem",
+                  color: "var(--core--colors--neutral--500)",
+                  letterSpacing: "0.05em",
+                }}
+              >
+                PRODUCT DEMO
+              </div>
             </Link>
             <div className="position-relative---z-index-1">
               <div className="hidden-on-mobile-portrait">

components/home/IntegrationsSection.tsx

@@ -1,34 +1,82 @@
-import Image from "next/image"
-import { INTEGRATION_ITEMS } from "@/lib/site-content"
+const ECOSYSTEM_ITEMS = [
+  "DAL Code",
+  "DAL CLI",
+  "DAL Office",
+  "API Platform",
+  "Intent Capture",
+  "Mission Mode",
+  "Smart Routing",
+  "Skills Engine",
+  "Context Compression",
+  "Diff Review",
+  "BYOK",
+  "Private Deploy",
+]
 
-const MARQUEE_ROWS = Array.from({ length: 3 }, () => INTEGRATION_ITEMS)
+const MARQUEE_ROWS = [ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS]
 
 export default function IntegrationsSection() {
   return (
     <section className="section-small bg-neutral overflow-hidden">
       <div className="w-layout-blockcontainer container-default w-container">
-        <div data-w-id="ee652702-222a-0ca5-2508-17b1a107582a" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right">
+        <div
+          data-w-id="ee652702-222a-0ca5-2508-17b1a107582a"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="title-left-content-right"
+        >
           <div className="inner-container _400px _100-tablet">
-            <div className="subtitle">Work Surfaces</div>
+            <div className="subtitle">Ecosystem</div>
             <div className="mg-top-4x-extra-small">
-              <h2>一个产品里，接住从需求澄清到工程交付的整条链路</h2>
+              <h2>四条产品线，统一平台底座</h2>
             </div>
           </div>
           <div className="inner-container _400px _100-tablet">
             <p>
-              DAL Code 把 Desktop IDE、Web Workspace、Mobile Review、Mission Planner、RAG、Tools、Diff 审批和企业治理放到同一条体验链上。
+              IDE、终端、文档、API——不同入口共享同一套意图引导、模型路由和工程治理能力。
             </p>
           </div>
         </div>
         <div className="mg-top-regular">
-          <div data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3" style={{ opacity: "0", filter: "blur(8px)" }} className="integrations-marquee-wrapper marquee-hover-stop" {...{ "tr-marquee-speed": "50", "tr-marquee-element": "component", "tr-marquee-scrolldirection": "true", "tr-marquee-scrollscrub": "false" }}>
+          <div
+            data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="integrations-marquee-wrapper marquee-hover-stop"
+            {...{
+              "tr-marquee-speed": "40",
+              "tr-marquee-element": "component",
+              "tr-marquee-scrolldirection": "true",
+              "tr-marquee-scrollscrub": "false",
+            }}
+          >
             {MARQUEE_ROWS.map((items, rowIndex) => (
               <div key={rowIndex} className="integrations-marquee marquee-scroll-item">
-                {items.map((item) => (
-                  <a key={`${rowIndex}-${item.label}`} href="/about" className="integration-marquee-item w-inline-block">
-                    <Image src={item.icon} width={94} height={94} alt={item.label} style={{ filter: "invert(0%)" }} className="integration-marquee-item-image" />
-                    <div style={{ width: "0%", height: "100%" }} className="integration-marquee-item-bg" />
-                  </a>
+                {items.map((label, i) => (
+                  <div
+                    key={`${rowIndex}-${i}`}
+                    className="integration-marquee-item"
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "12px 24px",
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: "0.875rem",
+                        fontWeight: 600,
+                        letterSpacing: "0.04em",
+                        whiteSpace: "nowrap",
+                        color: "var(--font--colors--paragraph)",
+                      }}
+                    >
+                      {label}
+                    </span>
+                    <div
+                      style={{ width: "0%", height: "100%" }}
+                      className="integration-marquee-item-bg"
+                    />
+                  </div>
                 ))}
               </div>
             ))}

components/home/ProductEcosystem.tsx

@@ -0,0 +1,91 @@
+import Link from "next/link"
+import { PRODUCT_ITEMS } from "@/lib/site-content"
+
+export default function ProductEcosystem() {
+  return (
+    <section className="section overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="prod-eco-title"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="text-center"
+        >
+          <div className="subtitle">Product Ecosystem</div>
+          <div className="mg-top-4x-extra-small">
+            <h2>四条产品线，一套方法论</h2>
+          </div>
+          <div className="mg-top-4x-extra-small">
+            <p>
+              IDE、终端、文档、API——不同入口，同一套意图引导和模型路由。登录一次，能力全通。
+            </p>
+          </div>
+        </div>
+        <div className="mg-top-large">
+          <div
+            data-w-id="prod-eco-grid"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="corner-gradient-container"
+          >
+            <div className="border-wrapper">
+              <div
+                className="w-layout-grid"
+                style={{ gridTemplateColumns: "1fr 1fr" }}
+              >
+                {PRODUCT_ITEMS.map((product) => (
+                  <Link
+                    key={product.name}
+                    href={product.href}
+                    className="card principles-card w-inline-block"
+                    style={{ textDecoration: "none" }}
+                  >
+                    <div>
+                      <div className="subtitle" style={{ fontSize: "0.75rem" }}>
+                        {product.name}
+                      </div>
+                      <h3 className="display-4">{product.tagline}</h3>
+                      <div className="mg-top-5x-extra-small">
+                        <p>{product.description}</p>
+                      </div>
+                      <div
+                        className="mg-top-4x-extra-small"
+                        style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}
+                      >
+                        {product.features.map((f) => (
+                          <span
+                            key={f}
+                            style={{
+                              padding: "2px 8px",
+                              fontSize: "0.75rem",
+                              border: "1px solid var(--core--colors--neutral--400)",
+                              borderRadius: "4px",
+                              color: "var(--font--colors--paragraph)",
+                            }}
+                          >
+                            {f}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+            <div
+              data-wf--corner-gradient-outline--variant="base"
+              className="corner-gradient-wrapper"
+            >
+              <div className="corner-gradient-horizontal top-left" />
+              <div className="corner-gradient-horizontal bottom-left" />
+              <div className="corner-gradient-horizontal top-right" />
+              <div className="corner-gradient-horizontal bottom-right" />
+              <div className="corner-gradient-vertical bottom-left" />
+              <div className="corner-gradient-vertical bottom-right" />
+              <div className="corner-gradient-vertical top-left" />
+              <div className="corner-gradient-vertical top-right" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/home/WorkflowSteps.tsx

@@ -0,0 +1,75 @@
+import { WORKFLOW_ITEMS } from "@/lib/site-content"
+
+export default function WorkflowSteps() {
+  return (
+    <section className="section bg-neutral overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="workflow-title"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="title-left-content-right"
+        >
+          <div className="inner-container _400px _100-tablet">
+            <div className="subtitle">How It Works</div>
+            <div className="mg-top-4x-extra-small">
+              <h2>三步，从想法到可交付的工程结果</h2>
+            </div>
+          </div>
+          <div className="inner-container _400px _100-tablet">
+            <p>
+              大多数 AI 编程工具从「你输入 prompt」开始。DAL Code 从「AI 采访你」开始——先搞清楚要做什么，再决定怎么做。
+            </p>
+          </div>
+        </div>
+        <div className="mg-top-large">
+          <div
+            data-w-id="workflow-cards"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="corner-gradient-container"
+          >
+            <div className="border-wrapper">
+              <div className="w-layout-grid principles-grid">
+                {WORKFLOW_ITEMS.map((step) => (
+                  <div key={step.number} className="card principles-card">
+                    <div
+                      style={{
+                        fontSize: "3rem",
+                        fontWeight: 700,
+                        lineHeight: 1,
+                        color: "var(--core--colors--neutral--400)",
+                      }}
+                    >
+                      {step.number}
+                    </div>
+                    <div>
+                      <div className="subtitle" style={{ fontSize: "0.75rem" }}>
+                        {step.name}
+                      </div>
+                      <h3 className="display-4">{step.title}</h3>
+                      <div className="mg-top-5x-extra-small">
+                        <p>{step.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div
+              data-wf--corner-gradient-outline--variant="base"
+              className="corner-gradient-wrapper"
+            >
+              <div className="corner-gradient-horizontal top-left" />
+              <div className="corner-gradient-horizontal bottom-left" />
+              <div className="corner-gradient-horizontal top-right" />
+              <div className="corner-gradient-horizontal bottom-right" />
+              <div className="corner-gradient-vertical bottom-left" />
+              <div className="corner-gradient-vertical bottom-right" />
+              <div className="corner-gradient-vertical top-left" />
+              <div className="corner-gradient-vertical top-right" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/home/index.ts

@@ -1,5 +1,11 @@
 export { default as BlogPreviewSection } from "./BlogPreviewSection"
+export { default as BottomCta } from "./BottomCta"
 export { default as CtaSection } from "./CtaSection"
+export { default as EcosystemSection } from "./EcosystemSection"
+export { default as FaqSection } from "./FaqSection"
+export { default as FeatureGrid } from "./FeatureGrid"
 export { default as HeroSection } from "./HeroSection"
 export { default as IntegrationsSection } from "./IntegrationsSection"
 export { default as PrinciplesSection } from "./PrinciplesSection"
+export { default as ProductEcosystem } from "./ProductEcosystem"
+export { default as WorkflowSteps } from "./WorkflowSteps"

docs/superpowers/specs/2026-05-23-website-redesign-design.md

@@ -0,0 +1,281 @@
+# DAL Website Redesign — Design Spec
+
+## Overview
+
+Redesign the DAL official website from a single-product landing page into a **product-matrix platform site** covering DAL Code, DAL CLI, DAL Office, and DeepAILab API Platform. Inspired by Kiro (spec-driven card flow, FAQ, CLI install in hero) and Antigravity (product ecosystem cards, scroll-driven animations, dark theme).
+
+**Current state:** Webflow-template-based site with Chinese copy, light/dark toggle, 5 homepage sections (Hero, Integrations marquee, Principles, CTA, Blog preview). Minimal feature presentation, no product screenshots, no CLI presence, no ecosystem overview.
+
+**Target state:** Dark-themed platform site with bilingual support (zh/en), product matrix, 3-step workflow, feature grid, ecosystem section, FAQ, and dedicated subpages for each product.
+
+## Design Decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| Theme | Dark only | Industry standard for dev tools (Kiro, Antigravity, Cursor all dark). Remove light/dark toggle. |
+| Language | Bilingual zh/en via next-intl | Keep existing i18n infra, serve global audience |
+| CLI presence | Dedicated `/cli` page + hero CTA + ecosystem card | User requested full presence for both Code and CLI |
+| Scope | Full site redesign | All pages, navigation, footer |
+| CSS approach | Replace webflow.css with Tailwind | Current webflow.css is 254KB of unused styles |
+| Animations | Keep GSAP, drop Lottie | Replace Lottie JSON animations with product screenshots + CSS effects |
+| Positioning | Open AI Development Platform | Not "better Cursor", but "complete ecosystem" |
+| BYOK | Feature grid item, not primary pitch | Mentioned but not hero-level messaging |
+| DeepAILab.ai | "AI Developer Platform", never "中转站" | Position as intelligent platform, not proxy |
+
+## Homepage Sections
+
+### S1: Navigation (fixed top, dark)
+
+```
+[DAL Logo]   Products▾   Docs   Pricing   Blog   Community     [Downloads]  [Sign In]  🌐
+```
+
+- Products dropdown: DAL Code / DAL CLI / DAL Office / API Platform
+- Language switcher (zh/en) on the right
+- Scrolled state: backdrop blur + subtle border-bottom
+- Mobile: hamburger → slide-in menu
+
+### S2: Hero
+
+- Subtitle: `by DeepAILab`
+- Headline (en): `The Open AI Development Platform`
+- Headline (zh): `开放的 AI 开发平台`
+- Sub-copy (en): `From idea to production. Choose your models, bring your tools, one account for everything.`
+- Sub-copy (zh): `从想法到产品的完整 AI 开发平台。自由选模型，全链路覆盖，一个账号搞定一切。`
+- Primary CTA: `Download Code`
+- Secondary CTA: `Install CLI`
+- Inline CLI command: `$ curl -fsSL https://cli.deepailab.ai/install | bash`
+- Below CTAs: product UI screenshot or animated GIF showing Code editor + CLI terminal
+- Background: gradient + particle/glow animation (GSAP)
+
+### S3: Product Ecosystem (2×2 grid)
+
+Label: `PRODUCT ECOSYSTEM`
+Heading (zh): `一个平台，覆盖 AI 开发全场景`
+Heading (en): `One platform, every AI development scenario`
+
+Cards (2×2 grid, top row larger):
+
+| Card | Title | Tagline (zh) | Tagline (en) | Keywords |
+|------|-------|-------------|-------------|----------|
+| DAL Code | AI-Native IDE | AI 原生的智能开发环境 | The AI-native development environment | Intent Capture, Mission Mode, Multi-model routing |
+| DAL CLI | Terminal AI Partner | 终端里的 AI 开发搭档 | Your AI development partner in the terminal | Lightweight, Agent execution, Pipeline-friendly |
+| DAL Office | AI Document Workspace | AI 驱动的文档工作台 | AI-powered document workspace | Word, Excel, PPT |
+| API Platform | Unified AI Platform | 统一 AI 开发者平台 | The unified AI developer platform | Model aggregation, Smart routing, API discounts |
+
+Each card: icon + product name + tagline + 3 keywords + "Learn more →" link
+Links to: `/code`, `/cli`, `/office`, `/platform`
+Animation: staggered fade-in on scroll
+
+### S4: 3-Step Workflow
+
+Label: `HOW IT WORKS`
+Heading (zh): `不是更好的 prompt，是更好的工作方式`
+Heading (en): `Not a better prompt. A better workflow.`
+
+| Step | Name | Description (zh) | Description (en) |
+|------|------|-----------------|-----------------|
+| 01 | INTENT | AI 主动采访，把模糊想法变成结构化工程需求 | AI interviews you, turning vague ideas into structured engineering requirements |
+| 02 | BUILD | Agent 拆解任务，智能选模型，并行执行 | Agents decompose tasks, route to optimal models, execute in parallel |
+| 03 | SHIP | 代码、测试、文档一起交付，关键操作可审批 | Code, tests, and docs delivered together. Critical actions require approval |
+
+Each step card has a product UI screenshot/GIF below the description.
+Bottom: connecting line animation, steps highlight sequentially on scroll.
+Shared workflow for both Code (GUI) and CLI (terminal).
+
+### S5: Feature Grid
+
+Label: `EVERYTHING YOU NEED`
+Heading (zh): `为认真做产品的开发者而建`
+Heading (en): `Built for developers who ship`
+
+3×2 + 2 grid (8 cards):
+
+| Feature | Description (zh) | Description (en) |
+|---------|-----------------|-----------------|
+| Multi-model Smart Routing | 同一工作流里不同子任务自动选最优模型，质量/速度/成本动态平衡 | Auto-select the optimal model for each subtask. Balance quality, speed, and cost dynamically. |
+| Skills Engine | 不是 prompt 模板，是经验封装成的引导式工作流 | Not prompt templates — experience packaged as guided workflows. |
+| Mission Mode | 长任务拆解、进度追踪、断点续跑 | Long-task decomposition, progress tracking, resume from breakpoints. |
+| BYOK (Bring Your Own Key) | 用自己的 API Key，不被平台锁定 | Use your own API keys. No vendor lock-in. |
+| Context Engine | 5 层压缩，超长项目也能保持上下文连贯 | 5-layer compression keeps context coherent across massive projects. |
+| Approval & Audit | 危险操作需人工确认，全过程可追溯可审计 | Critical actions require human approval. Full audit trail. |
+| RAG Knowledge | 接入私有知识库和文档，AI 回答基于你的上下文 | Connect private knowledge bases. AI answers grounded in your context. |
+| Cost Transparency | 每次 AI 交互的成本实时可见，用量一目了然 | Real-time cost visibility for every AI interaction. |
+
+Card design: icon + title + 2-3 line description.
+Hover: subtle glow/border gradient.
+Animation: staggered fade-in (100ms offset per card).
+
+### S6: Ecosystem — DeepAILab Platform
+
+Label: `ONE PLATFORM, ONE ACCOUNT`
+Heading (zh): `DeepAILab — 连接一切的 AI 开发者平台`
+Heading (en): `DeepAILab — The AI developer platform that connects everything`
+
+Top: architecture diagram visualization — DeepAILab node at center, four product nodes branching out. Animated connection lines.
+
+Bottom: 3 advantage cards:
+
+| Card | Title (zh) | Title (en) | Description (zh) | Description (en) |
+|------|-----------|-----------|-----------------|-----------------|
+| One Account | 一个账号 | One Account | 一次登录，Code/CLI/Office/API 全部打通 | Single sign-on across Code, CLI, Office, and API |
+| API Discounts | API 折扣 | API Discounts | 通过平台调用比直连各厂商更优惠 | Better rates than connecting to providers directly |
+| Cost Dashboard | 成本仪表盘 | Cost Dashboard | 跨产品的用量统计和成本分析，一目了然 | Cross-product usage analytics and cost breakdown at a glance |
+
+CTA: `Explore DeepAILab Platform →` linking to DeepAILab.ai
+Background: gradient section (deep blue/purple) to create visual separation.
+
+### S7: CTA (Bottom)
+
+Dark gradient background with particle/glow animation, echoing Hero.
+
+Heading (zh): `准备好用新方式开发了吗？`
+Heading (en): `Ready to build the new way?`
+Sub-copy (zh): `从一次 Intent 采访开始，让 AI 先帮你想清楚要做什么。`
+Sub-copy (en): `Start with an Intent interview. Let AI help you figure out what to build.`
+
+Repeat: `[Download Code]` + `[Install CLI]` + inline curl command.
+
+### S8: FAQ
+
+Label: `FAQ`
+Heading (zh): `常见问题`
+Heading (en): `Frequently Asked Questions`
+
+Accordion with 6 items:
+
+1. DAL Code 和 Cursor / Windsurf 的区别？ / How is DAL Code different from Cursor / Windsurf?
+2. DAL CLI 和 Claude Code 的区别？ / How is DAL CLI different from Claude Code?
+3. 我可以用自己的 API Key 吗？ / Can I use my own API keys?
+4. DeepAILab 平台的 API 折扣怎么算？ / How do DeepAILab API discounts work?
+5. 支持哪些 AI 模型？ / Which AI models are supported?
+6. 支持企业私有化部署吗？ / Do you support enterprise private deployment?
+
+## Subpages
+
+### `/code` — DAL Code Product Page
+
+- Hero with product screenshot
+- Feature deep-dive sections (Intent Capture, Mission Mode, Smart Routing, Skills, Context Engine)
+- Download CTA (macOS / Windows / Linux)
+- Comparison table vs Cursor/Windsurf (optional, can be added later)
+
+### `/cli` — DAL CLI Product Page
+
+- Hero with terminal screenshot/GIF
+- Feature sections (Agent execution, Pipeline integration, BYOK, lightweight)
+- Install command prominently displayed
+- Usage examples / code snippets
+
+### `/office` — DAL Office Page
+
+- Hero with document editing screenshots
+- Word / Excel / PPT capability showcase
+- Integration with Code and CLI workflow
+
+### `/platform` — DeepAILab API Platform
+
+- Supported models list
+- Pricing / credit system
+- SDK / API documentation links
+- Smart routing explanation
+
+### `/pricing` — Unified Pricing
+
+- Tiered pricing cards (Free / Pro / Team / Enterprise)
+- Per-product feature comparison table
+- FAQ specific to billing
+
+### `/blog` — Blog (restyled)
+
+- Keep existing blog infrastructure
+- Restyle to dark theme
+- Grid layout for posts
+
+### `/about` — About DeepAILab
+
+- Mission & vision
+- Team (if applicable)
+- Company stats
+
+### `/contact` — Contact & Trial
+
+- Contact form (keep existing React Hook Form + Zod)
+- Trial application
+- Contact channels
+
+## Navigation
+
+**Top nav:** `Products▾` · `Docs` · `Pricing` · `Blog` · `Community` · `[Downloads]` · `[Sign In]` · `🌐`
+
+Products dropdown mega-menu:
+- DAL Code — AI-Native IDE
+- DAL CLI — Terminal AI Partner
+- DAL Office — AI Document Workspace
+- API Platform — Unified AI Platform
+
+**Footer (4 columns):**
+
+| Products | Resources | Community | Company |
+|----------|-----------|-----------|---------|
+| DAL Code | Docs | Discord | About |
+| DAL CLI | Blog | GitHub | Careers |
+| DAL Office | Changelog | X/Twitter | Contact |
+| API Platform | FAQ | | |
+| Pricing | | | |
+
+Bottom row: `© 2026 DeepAILab` · Privacy · Terms · Language switcher
+
+## Technical Decisions
+
+| Area | Decision |
+|------|----------|
+| Styling | Remove webflow.css (254KB), rewrite with Tailwind CSS 4 |
+| Animations | Keep GSAP for scroll-driven effects. Remove Lottie dependency. Use CSS transitions for hover states. |
+| i18n | Keep next-intl. All content strings in locale JSON files (zh/en). |
+| Fonts | Keep Inter + Inter Tight (Google Fonts) |
+| Images | Product screenshots as WebP. Placeholder images until real screenshots available. |
+| Theme | Dark only. Remove next-themes + ThemeToggle component. |
+| Components | Refactor all components to use Tailwind classes instead of webflow CSS classes. |
+| Forms | Keep React Hook Form + Zod for contact/newsletter forms. |
+
+## Files to Create
+
+- `app/code/page.tsx` — DAL Code product page
+- `app/cli/page.tsx` — DAL CLI product page
+- `app/office/page.tsx` — DAL Office page
+- `app/platform/page.tsx` — API Platform page
+- `app/pricing/page.tsx` — Unified pricing page
+- `components/home/ProductEcosystem.tsx` — 2×2 product grid
+- `components/home/WorkflowSteps.tsx` — 3-step flow
+- `components/home/FeatureGrid.tsx` — 8-feature grid
+- `components/home/EcosystemSection.tsx` — DeepAILab platform section
+- `components/home/FaqSection.tsx` — Accordion FAQ
+- `components/home/BottomCta.tsx` — Bottom CTA section
+- `components/ProductDropdown.tsx` — Mega menu for nav
+
+## Files to Modify
+
+- `app/page.tsx` — New homepage section composition
+- `app/layout.tsx` — Remove ThemeProvider, remove webflow.css import, dark theme as default
+- `components/Header.tsx` — New navigation structure with Products dropdown
+- `components/Footer.tsx` — New 4-column layout
+- `lib/site-content.ts` — Update all content data structures
+- `messages/zh.json` + `messages/en.json` — Bilingual content
+
+## Files to Delete
+
+- `app/webflow.css` — Replace with Tailwind
+- `components/ThemeToggle.tsx` — No more theme switching
+- `components/LottiePlayer.tsx` — Removing Lottie dependency
+- `components/home/IntegrationsSection.tsx` — Replaced by ProductEcosystem
+- `components/home/PrinciplesSection.tsx` — Replaced by WorkflowSteps
+- `components/home/BlogPreviewSection.tsx` — Removed from homepage
+
+## Out of Scope
+
+- Real product screenshots (use placeholders, replace later)
+- Backend API integration for sign-in/downloads
+- Docs site content (can link externally)
+- Blog post migration
+- Analytics / tracking setup

lib/site-content.ts

@@ -65,7 +65,7 @@ export const NAV_GROUPS: LinkGroup[] = [
     links: [
       { href: "/", label: "首页" },
       { href: "/about", label: "为什么是 DAL Code" },
-      { href: "/contact", label: "申请试用" },
+      { href: "/contact", label: "联系我们" },
     ],
   },
   {
@@ -282,3 +282,160 @@ export const SOCIAL_LINKS = [
   { label: "Blog", href: "/blog" },
   { label: "Contact", href: "/contact" },
 ]
+
+export interface ProductItem {
+  name: string
+  tagline: string
+  description: string
+  features: string[]
+  href: string
+}
+
+export const PRODUCT_ITEMS: ProductItem[] = [
+  {
+    name: "DAL Code",
+    tagline: "写代码之前，先把事情想清楚",
+    description:
+      "AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。",
+    features: ["Intent Capture", "Mission Mode", "Smart Routing", "Diff 审批"],
+    href: "/code",
+  },
+  {
+    name: "DAL CLI",
+    tagline: "终端不退出，AI 已就位",
+    description:
+      "同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。",
+    features: ["Shell 集成", "Task 管道", "BYOK 直连", "离线可用"],
+    href: "/cli",
+  },
+  {
+    name: "DAL Office",
+    tagline: "文档也该有 AI 原生体验",
+    description:
+      "文字、表格、演示文稿——内置 AI 辅助起草、数据洞察和版式生成，非技术团队也能高效产出。",
+    features: ["智能排版", "数据洞察", "演示生成", "协作审批"],
+    href: "/office",
+  },
+  {
+    name: "DeepAILab API",
+    tagline: "一层路由，连通所有模型",
+    description:
+      "20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。",
+    features: ["模型路由", "用量分析", "Key 管理", "审计日志"],
+    href: "/platform",
+  },
+]
+
+export interface WorkflowStep {
+  number: string
+  name: string
+  title: string
+  description: string
+}
+
+export const WORKFLOW_ITEMS: WorkflowStep[] = [
+  {
+    number: "01",
+    name: "Intent Capture",
+    title: "你说方向，AI 来追问细节",
+    description:
+      "别再纠结怎么写 prompt。AI 会用结构化问题把你的模糊想法收敛成可执行的工程规格。",
+  },
+  {
+    number: "02",
+    name: "Smart Routing",
+    title: "每个子任务，自动选对模型",
+    description:
+      "架构设计用强模型，格式化用快模型。路由策略统一管控，质量和成本不再互相妥协。",
+  },
+  {
+    number: "03",
+    name: "Engineering Delivery",
+    title: "代码、测试、文档，一次交付",
+    description:
+      "不是丢一段代码让你自己善后。测试、文档、变更审批全在一条流水线上，过程透明可回溯。",
+  },
+]
+
+export interface FeatureItem {
+  title: string
+  description: string
+}
+
+export const FEATURE_ITEMS: FeatureItem[] = [
+  {
+    title: "意图引导",
+    description: "AI 先问你想做什么，不是等你写出完美的技术指令",
+  },
+  {
+    title: "多模型路由",
+    description: "Claude 做推理，Haiku 做分类——按任务特征自动匹配，不用你手动切换",
+  },
+  {
+    title: "Mission Mode",
+    description: "一个目标拆成十步计划，逐步推进，关键节点等你确认再继续",
+  },
+  {
+    title: "上下文压缩",
+    description: "对话再长也不丢关键信息，五层压缩策略让 token 花在刀刃上",
+  },
+  {
+    title: "Skills 引擎",
+    description: "把团队最佳实践封装成可复用工作流，新人上手即用",
+  },
+  {
+    title: "开源客户端",
+    description: "核心代码开源，数据路径透明，危险操作必须经过审批",
+  },
+]
+
+export interface AdvantageItem {
+  title: string
+  description: string
+}
+
+export const PLATFORM_ADVANTAGES: AdvantageItem[] = [
+  {
+    title: "一个账户，全线产品",
+    description:
+      "Code、CLI、Office、API——登录一次，额度共享，体验连贯。",
+  },
+  {
+    title: "Bring Your Own Key",
+    description:
+      "你的 Key 直连 OpenAI、Anthropic、Google，请求不绕路、数据不留痕。",
+  },
+  {
+    title: "企业级治理",
+    description:
+      "SSO、审计日志、用量配额、私有化部署——合规不是附加功能，是默认配置。",
+  },
+]
+
+export const HOME_FAQS: FaqItem[] = [
+  {
+    question: "和 Cursor、Windsurf 这些工具有什么本质区别？",
+    answer:
+      "它们优化的是「写代码更快」，DAL Code 解决的是「写什么代码」。核心差异在 Intent Capture——AI 先采访需求，再拆解、执行、审批，交付的是工程结果而不是代码片段。",
+  },
+  {
+    question: "多模型路由听起来复杂，实际用起来呢？",
+    answer:
+      "对用户完全透明。你只管提需求，系统自动决定哪个子任务用哪个模型——推理用强模型，格式化用快模型。团队统一管控策略，不用每个人自己选模型。",
+  },
+  {
+    question: "BYOK 模式下数据经过你们的服务器吗？",
+    answer:
+      "不经过。你的 API Key 直连模型供应商，我们看不到请求内容。客户端开源，数据路径可以自行审计。",
+  },
+  {
+    question: "产品现在能用吗？",
+    answer:
+      "核心工作流已可用，正在和早期用户一起迭代。适合有明确场景的团队先跑起来，边用边打磨。",
+  },
+  {
+    question: "企业私有化部署怎么开始？",
+    answer:
+      "从一个约束清晰的场景切入，验证效果后逐步扩展。联系团队聊具体需求，我们会给出落地方案。",
+  },
+]

messages/en.json

@@ -12,7 +12,7 @@
     "contact": "Contact",
     "explore": "Explore",
     "toggleMenu": "Toggle menu",
-    "applyTrial": "Apply for trial",
+    "applyTrial": "Contact us",
     "groups": {
       "product": "Product",
       "content": "Content"
@@ -20,13 +20,13 @@
     "groupLinks": {
       "home": "Home",
       "whyDalCode": "Why DAL Code",
-      "applyTrial": "Apply for trial",
+      "applyTrial": "Contact us",
       "insights": "Product insights",
       "buildingRoles": "Build areas"
     }
   },
   "footer": {
-    "applyTrial": "Apply for trial",
+    "applyTrial": "Contact us",
     "learnPositioning": "Learn positioning",
     "copyright": "Copyright © 2026 DAL Code by DeepAILab. This website continues to evolve on the existing Next.js foundation.",
     "groups": {

messages/zh-CN.json

@@ -12,7 +12,7 @@
     "contact": "联系",
     "explore": "Explore",
     "toggleMenu": "Toggle menu",
-    "applyTrial": "申请试用",
+    "applyTrial": "联系我们",
     "groups": {
       "product": "产品",
       "content": "内容"
@@ -20,13 +20,13 @@
     "groupLinks": {
       "home": "首页",
       "whyDalCode": "为什么是 DAL Code",
-      "applyTrial": "申请试用",
+      "applyTrial": "联系我们",
       "insights": "产品洞察",
       "buildingRoles": "建设中的角色"
     }
   },
   "footer": {
-    "applyTrial": "申请试用",
+    "applyTrial": "联系我们",
     "learnPositioning": "了解产品定位",
     "copyright": "Copyright © 2026 DAL Code by DeepAILab. 官网基于现有 Next.js 骨架持续演进。",
     "groups": {

public/assets/dalcode-app-icon.svg

@@ -0,0 +1,5 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1024" height="1024" rx="224" fill="#FFFFFF"/>
+  <path d="M340 360L470 506L314 664" stroke="#050505" stroke-width="66" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M552 608H700" stroke="#050505" stroke-width="58" stroke-linecap="round"/>
+</svg>

public/assets/dalcode-logo-dark.svg

@@ -0,0 +1,5 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1024" height="1024" rx="224" fill="#141414"/>
+  <path d="M340 360L470 506L314 664" stroke="#F5F5F5" stroke-width="66" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M552 608H700" stroke="#F5F5F5" stroke-width="58" stroke-linecap="round"/>
+</svg>