# DAL Website Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Transform dalcode-website from a single-product Webflow-template site into a product-matrix platform site for DAL Code, DAL CLI, DAL Office, and DeepAILab API Platform.

**Architecture:** Replace webflow.css (11K lines) with Tailwind utility classes. Keep GSAP for scroll animations, remove Lottie. Remove next-themes (dark-only). Retain next-intl for zh-CN/en bilingual support. All new content goes through i18n message files.

**Tech Stack:** Next.js 16.2.4, React 19, Tailwind CSS 4, GSAP 3, next-intl 4, React Hook Form + Zod

**Key constraint:** All copy must be smart, polished, and sophisticated — not generic/cheap-sounding. The user explicitly said "文案一定要智能灵活，不要太 low".

**AGENTS.md warning:** Next.js 16 may have breaking API changes. Before writing any code, check `node_modules/next/dist/docs/` for current conventions. Key findings from review: `page.tsx`, `layout.tsx`, `not-found.tsx` conventions unchanged. `middleware` is deprecated in favor of `proxy`.

---

## File Structure

### New files

```
app/
├── globals.css                    (REWRITE — pure Tailwind, no webflow refs)
├── code/page.tsx                  (DAL Code product page)
├── cli/page.tsx                   (DAL CLI product page)
├── office/page.tsx                (DAL Office page)
├── platform/page.tsx              (API Platform page)
├── pricing/page.tsx               (Unified pricing page)

components/
├── Header.tsx                     (REWRITE — new nav with Products dropdown)
├── Footer.tsx                     (REWRITE — 4-column layout)
├── GsapAnimations.tsx             (MODIFY — update selectors for new sections)
├── ScrollReveal.tsx               (NEW — reusable scroll-reveal wrapper)
├── home/
│   ├── HeroSection.tsx            (REWRITE)
│   ├── ProductEcosystem.tsx       (NEW — 2×2 product cards)
│   ├── WorkflowSteps.tsx          (NEW — 3-step Intent/Build/Ship)
│   ├── FeatureGrid.tsx            (NEW — 8-feature grid)
│   ├── EcosystemSection.tsx       (NEW — DeepAILab platform)
│   ├── BottomCta.tsx              (NEW — bottom CTA)
│   ├── FaqSection.tsx             (NEW — accordion FAQ)
│   └── index.ts                   (REWRITE — export new components)

lib/
├── site-content.ts                (REWRITE — new data structures)
```

### Files to delete

```
app/webflow.css                    (11K lines, replaced by Tailwind)
components/ThemeToggle.tsx         (no more theme switching)
components/LottiePlayer.tsx        (removing Lottie)
components/home/IntegrationsSection.tsx  (replaced by ProductEcosystem)
components/home/PrinciplesSection.tsx    (replaced by WorkflowSteps)
components/home/BlogPreviewSection.tsx   (removed from homepage)
components/home/CtaSection.tsx           (replaced by BottomCta)
```

### Message files to rewrite

```
messages/zh-CN.json                (full rewrite with new content)
messages/en.json                   (full rewrite with new content)
```

---

## Task 1: Foundation — Remove webflow.css, set up dark Tailwind base

**Files:**
- Delete: `app/webflow.css`
- Rewrite: `app/globals.css`
- Modify: `app/layout.tsx`
- Delete: `components/ThemeToggle.tsx`
- Delete: `components/LottiePlayer.tsx`

- [ ] **Step 1: Create the new globals.css**

Replace the entire `app/globals.css` with a Tailwind-first dark theme foundation:

```css
@import "tailwindcss";

@theme {
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-card: #161616;
  --color-bg-card-hover: #1a1a1a;
  --color-border: #222222;
  --color-border-hover: #333333;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #666666;
  --color-accent: #6366f1;
  --color-accent-hover: #818cf8;
  --color-accent-glow: rgba(99, 102, 241, 0.15);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-inter-tight), var(--font-sans);
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-bg-primary text-text-primary antialiased;
  font-family: var(--font-sans);
}

::selection {
  @apply bg-accent/30 text-text-primary;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* Shared animation classes used by GSAP */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Glow effect for cards */
.card-glow {
  position: relative;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, var(--color-accent-glow), transparent);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-glow:hover::before {
  opacity: 1;
}

/* Stagger children animation delay */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}
```

- [ ] **Step 2: Update layout.tsx — remove webflow.css, ThemeProvider, Lottie**

Replace `app/layout.tsx`:

```tsx
import type { Metadata } from "next"
import { Inter, Inter_Tight } from "next/font/google"
import { NextIntlClientProvider } from "next-intl"
import { getLocale, getMessages } from "next-intl/server"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
import GsapAnimations from "@/components/GsapAnimations"
import { SITE_BRAND, SITE_DESCRIPTION, SITE_NAME } from "@/lib/site-content"
import "./globals.css"

const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-inter",
  display: "swap",
})

const interTight = Inter_Tight({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-inter-tight",
  display: "swap",
})

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000"

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: SITE_BRAND,
    template: `%s | ${SITE_NAME}`,
  },
  description: SITE_DESCRIPTION,
  icons: {
    icon: "/favicon.ico",
    apple: "/assets/dalcode-app-icon-192.png",
  },
  openGraph: {
    type: "website",
    siteName: SITE_BRAND,
    title: SITE_BRAND,
    description: SITE_DESCRIPTION,
  },
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const locale = await getLocale()
  const messages = await getMessages()

  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <html
        lang={locale}
        className={`${inter.variable} ${interTight.variable}`}
      >
        <body className={inter.className}>
          <Header />
          <main>{children}</main>
          <Footer />
          <GsapAnimations />
        </body>
      </html>
    </NextIntlClientProvider>
  )
}
```

- [ ] **Step 3: Delete obsolete files**

```bash
rm app/webflow.css
rm components/ThemeToggle.tsx
rm components/LottiePlayer.tsx
rm components/RevealObserver.tsx
rm components/PageTransition.tsx
```

- [ ] **Step 4: Verify build compiles**

```bash
cd /Users/leon/本地开发项目/claude-code/dalcode-website && npx next build 2>&1 | tail -20
```

Expected: Build may fail due to import references in other files. That's OK — we'll fix them in subsequent tasks. The goal here is that `globals.css` and `layout.tsx` are correct.

- [ ] **Step 5: Commit**

```bash
git add -A
git commit -m "chore: remove webflow.css and theme toggle, set up dark Tailwind foundation"
```

---

## Task 2: i18n Content — Rewrite all message files

**Files:**
- Rewrite: `messages/zh-CN.json`
- Rewrite: `messages/en.json`

The copy below is the heart of the redesign. Every string must be polished — no filler, no "lorem ipsum energy".

- [ ] **Step 1: Write zh-CN.json**

```json
{
  "site": {
    "name": "DAL",
    "brand": "DAL by DeepAILab",
    "tagline": "The Open AI Development Platform",
    "description": "从想法到产品的完整 AI 开发平台。自由选模型，全链路覆盖，一个账号搞定一切。"
  },
  "nav": {
    "products": "产品",
    "docs": "文档",
    "pricing": "定价",
    "blog": "博客",
    "community": "社区",
    "downloads": "下载",
    "signIn": "登录",
    "toggleMenu": "切换菜单",
    "productItems": {
      "code": { "name": "DAL Code", "tagline": "AI 原生开发环境" },
      "cli": { "name": "DAL CLI", "tagline": "终端里的 AI 搭档" },
      "office": { "name": "DAL Office", "tagline": "AI 文档工作台" },
      "platform": { "name": "API Platform", "tagline": "统一 AI 开发者平台" }
    }
  },
  "hero": {
    "badge": "by DeepAILab",
    "headline": "开放的 AI 开发平台",
    "subheadline": "从想法到产品，自由选模型，从代码到文档全覆盖。一个账号，完整生态。",
    "ctaPrimary": "下载 DAL Code",
    "ctaSecondary": "安装 CLI",
    "cliCommand": "curl -fsSL https://cli.deepailab.ai/install | bash"
  },
  "ecosystem": {
    "label": "PRODUCT ECOSYSTEM",
    "title": "一个平台，覆盖 AI 开发全场景",
    "products": {
      "code": {
        "name": "DAL Code",
        "tagline": "AI 原生开发环境",
        "description": "不只是写代码的编辑器，而是从需求澄清到工程交付的完整工作台。",
        "features": ["Intent Capture", "Mission Mode", "多模型路由"],
        "cta": "了解 DAL Code"
      },
      "cli": {
        "name": "DAL CLI",
        "tagline": "终端里的 AI 开发搭档",
        "description": "轻量、快速、管道友好。在终端里完成从 Agent 任务到代码交付的全流程。",
        "features": ["Agent 执行", "管道集成", "轻量高速"],
        "cta": "了解 DAL CLI"
      },
      "office": {
        "name": "DAL Office",
        "tagline": "AI 驱动的文档工作台",
        "description": "用 AI 生成和编辑文档、表格、演示文稿——开发者的工作不只有代码。",
        "features": ["Word", "Excel", "PPT"],
        "cta": "了解 DAL Office"
      },
      "platform": {
        "name": "API Platform",
        "tagline": "统一 AI 开发者平台",
        "description": "模型聚合、智能路由、成本优化——所有 DAL 产品背后的基础设施。",
        "features": ["模型聚合", "智能路由", "API 折扣"],
        "cta": "探索平台"
      }
    }
  },
  "workflow": {
    "label": "HOW IT WORKS",
    "title": "不是更好的 prompt，是更好的工作方式",
    "steps": {
      "intent": {
        "number": "01",
        "name": "INTENT",
        "title": "先把需求想清楚",
        "description": "AI 主动采访你，用结构化问题把模糊想法变成可执行的工程需求——不是等你写出完美的 prompt。"
      },
      "build": {
        "number": "02",
        "name": "BUILD",
        "title": "智能拆解，并行执行",
        "description": "Agent 自动分解任务，为每个子任务选择最优模型，多线并行推进——你监督方向，它负责落地。"
      },
      "ship": {
        "number": "03",
        "name": "SHIP",
        "title": "代码、测试、文档一起交付",
        "description": "不只是输出代码片段。测试、文档同步生成，关键操作需要你的审批，结果全程可追溯。"
      }
    }
  },
  "features": {
    "label": "EVERYTHING YOU NEED",
    "title": "为认真做产品的开发者而建",
    "items": {
      "routing": {
        "title": "多模型智能路由",
        "description": "同一工作流里，不同子任务自动匹配最优模型。质量、速度、成本不再是单选题。"
      },
      "skills": {
        "title": "Skills 引擎",
        "description": "把工程经验封装成可复用的引导式工作流。不是 prompt 模板，是方法论的产品化。"
      },
      "mission": {
        "title": "Mission Mode",
        "description": "复杂任务自动拆解，进度实时可见，断点可续跑。长任务终于不再是黑盒。"
      },
      "byok": {
        "title": "自带 API Key",
        "description": "用你自己的 API Key 接入任何模型。不被平台绑定，完全掌控成本和数据流向。"
      },
      "context": {
        "title": "上下文引擎",
        "description": "五层智能压缩，让百万行项目也能保持上下文连贯。大项目不再是 AI 的盲区。"
      },
      "audit": {
        "title": "审批与审计",
        "description": "危险操作需人工确认，每一步操作可追溯可审计。给个人效率，给团队安全感。"
      },
      "rag": {
        "title": "知识库接入",
        "description": "连接你的私有文档和知识库，AI 的回答基于你的真实上下文，而不是通用训练数据。"
      },
      "cost": {
        "title": "成本透明化",
        "description": "每次 AI 交互的成本实时可见。花了多少、省了多少，用数据说话。"
      }
    }
  },
  "platform": {
    "label": "ONE PLATFORM, ONE ACCOUNT",
    "title": "DeepAILab — 连接一切的 AI 开发者平台",
    "advantages": {
      "account": {
        "title": "一个账号",
        "description": "登录一次，Code、CLI、Office、API Platform 全部打通。无缝切换，统一管理。"
      },
      "discount": {
        "title": "API 折扣",
        "description": "通过平台调用主流模型，费率优于直连。用得越多，省得越多。"
      },
      "dashboard": {
        "title": "成本仪表盘",
        "description": "跨产品的用量统计和成本拆解，一目了然。告别月底账单惊喜。"
      }
    },
    "cta": "探索 DeepAILab 平台"
  },
  "bottomCta": {
    "headline": "准备好用新方式开发了吗？",
    "subheadline": "从一次 Intent 采访开始，让 AI 先帮你想清楚要做什么。",
    "ctaPrimary": "下载 DAL Code",
    "ctaSecondary": "安装 CLI"
  },
  "faq": {
    "label": "FAQ",
    "title": "常见问题",
    "items": {
      "vsCursor": {
        "q": "DAL Code 和 Cursor / Windsurf 有什么不同？",
        "a": "Cursor 和 Windsurf 的核心是让你写更好的代码。DAL Code 的起点更早——它先帮你把需求想清楚，再把任务拆解、执行和交付。同时，DAL 不绑定单一模型，支持多模型智能路由和自带 API Key。"
      },
      "vsClaude": {
        "q": "DAL CLI 和 Claude Code CLI 有什么不同？",
        "a": "Claude Code 绑定 Anthropic 模型生态。DAL CLI 支持多模型路由，可以用你自己的 API Key，并且和 DAL Code、DAL Office 共享同一个账号和工作流体系。"
      },
      "byok": {
        "q": "我可以用自己的 API Key 吗？",
        "a": "可以。DAL 支持接入你自己的 API Key，包括 OpenAI、Anthropic、Google 等主流提供商。你也可以使用 DeepAILab 平台提供的 API 折扣。"
      },
      "apiDiscount": {
        "q": "DeepAILab API 折扣怎么计算？",
        "a": "通过 DeepAILab 平台统一调用模型 API，费率低于各厂商直连价格。具体折扣取决于用量层级，详见定价页面。"
      },
      "models": {
        "q": "支持哪些 AI 模型？",
        "a": "支持 Claude (Opus/Sonnet/Haiku)、GPT 系列、Gemini 系列等 20+ 主流模型，并持续接入新模型。Smart Routing 会根据任务类型自动选择最合适的模型。"
      },
      "enterprise": {
        "q": "支持企业私有化部署吗？",
        "a": "私有化部署、SSO、审计日志和自定义安全策略是产品路线的重点方向。如果你的团队有明确需求，欢迎联系我们从一个具体场景开始落地。"
      }
    }
  },
  "footer": {
    "newsletter": {
      "placeholder": "输入邮箱，订阅产品动态",
      "submit": "订阅",
      "success": "已订阅。",
      "error": "订阅失败，请重试。"
    },
    "groups": {
      "products": "产品",
      "resources": "资源",
      "community": "社区",
      "company": "公司"
    },
    "links": {
      "code": "DAL Code",
      "cli": "DAL CLI",
      "office": "DAL Office",
      "apiPlatform": "API Platform",
      "pricing": "定价",
      "docs": "文档",
      "blog": "博客",
      "changelog": "更新日志",
      "faq": "FAQ",
      "discord": "Discord",
      "github": "GitHub",
      "twitter": "X / Twitter",
      "about": "关于",
      "careers": "加入我们",
      "contact": "联系"
    },
    "copyright": "© 2026 DeepAILab. All rights reserved.",
    "privacy": "隐私政策",
    "terms": "服务条款"
  },
  "codePage": {
    "hero": {
      "label": "DAL CODE",
      "headline": "不只是编辑器，是 AI 工程工作台",
      "subheadline": "从需求采访到代码交付，一个工作台覆盖完整开发流程。Intent Capture 让 AI 先帮你想清楚要做什么，Mission Mode 让复杂任务自动拆解执行。",
      "cta": "下载 DAL Code"
    }
  },
  "cliPage": {
    "hero": {
      "label": "DAL CLI",
      "headline": "终端里的 AI 开发搭档",
      "subheadline": "轻量、快速、管道友好。在你熟悉的终端环境里，用 Agent 完成从需求到代码的全流程。",
      "cta": "安装 DAL CLI",
      "cliCommand": "curl -fsSL https://cli.deepailab.ai/install | bash"
    }
  },
  "officePage": {
    "hero": {
      "label": "DAL OFFICE",
      "headline": "AI 驱动的文档工作台",
      "subheadline": "开发者的工作不只有代码。用 AI 生成和编辑 Word 文档、Excel 表格、PPT 演示文稿——和 DAL Code 无缝协作。",
      "cta": "了解 DAL Office"
    }
  },
  "platformPage": {
    "hero": {
      "label": "API PLATFORM",
      "headline": "所有 DAL 产品背后的 AI 基础设施",
      "subheadline": "模型聚合、智能路由、成本优化、用量分析——一个平台，为所有 AI 开发场景提供统一的基础能力。",
      "cta": "探索 API Platform"
    }
  },
  "pricingPage": {
    "hero": {
      "label": "PRICING",
      "headline": "简单透明的定价",
      "subheadline": "从个人开发者到企业团队，选择适合你的方案。"
    }
  },
  "about": {
    "hero": {
      "label": "ABOUT",
      "headline": "我们在构建下一代 AI 开发基础设施",
      "subheadline": "DeepAILab 相信 AI 开发工具应该是开放的、可组合的、为开发者真正服务的。"
    }
  },
  "contact": {
    "hero": {
      "label": "CONTACT",
      "headline": "和我们聊聊你的真实场景",
      "subheadline": "无论是产品试用、企业方案还是生态合作，从一个具体场景开始。"
    }
  },
  "blog": {
    "hero": {
      "label": "BLOG",
      "headline": "产品思考与工程实践",
      "subheadline": "关于 AI 开发工具、多模型路由、工程工作流的深度内容。"
    }
  },
  "common": {
    "learnMore": "了解更多",
    "getStarted": "开始使用",
    "comingSoon": "即将推出",
    "backToHome": "返回首页"
  }
}
```

- [ ] **Step 2: Write en.json**

```json
{
  "site": {
    "name": "DAL",
    "brand": "DAL by DeepAILab",
    "tagline": "The Open AI Development Platform",
    "description": "The complete AI development platform. Choose your models, cover the full workflow, one account for everything."
  },
  "nav": {
    "products": "Products",
    "docs": "Docs",
    "pricing": "Pricing",
    "blog": "Blog",
    "community": "Community",
    "downloads": "Downloads",
    "signIn": "Sign In",
    "toggleMenu": "Toggle menu",
    "productItems": {
      "code": { "name": "DAL Code", "tagline": "AI-native development environment" },
      "cli": { "name": "DAL CLI", "tagline": "Your AI partner in the terminal" },
      "office": { "name": "DAL Office", "tagline": "AI-powered document workspace" },
      "platform": { "name": "API Platform", "tagline": "Unified AI developer platform" }
    }
  },
  "hero": {
    "badge": "by DeepAILab",
    "headline": "The Open AI Development Platform",
    "subheadline": "From idea to production. Choose your models, cover the full workflow from code to docs. One account, complete ecosystem.",
    "ctaPrimary": "Download DAL Code",
    "ctaSecondary": "Install CLI",
    "cliCommand": "curl -fsSL https://cli.deepailab.ai/install | bash"
  },
  "ecosystem": {
    "label": "PRODUCT ECOSYSTEM",
    "title": "One platform, every AI development scenario",
    "products": {
      "code": {
        "name": "DAL Code",
        "tagline": "AI-native development environment",
        "description": "More than a code editor — a complete workspace from requirements clarification to engineering delivery.",
        "features": ["Intent Capture", "Mission Mode", "Multi-model Routing"],
        "cta": "Explore DAL Code"
      },
      "cli": {
        "name": "DAL CLI",
        "tagline": "Your AI development partner in the terminal",
        "description": "Lightweight, fast, pipeline-friendly. Run agent tasks and ship code from your terminal.",
        "features": ["Agent Execution", "Pipeline Integration", "Lightweight"],
        "cta": "Explore DAL CLI"
      },
      "office": {
        "name": "DAL Office",
        "tagline": "AI-powered document workspace",
        "description": "Generate and edit documents, spreadsheets, and presentations with AI — because developers do more than write code.",
        "features": ["Word", "Excel", "PPT"],
        "cta": "Explore DAL Office"
      },
      "platform": {
        "name": "API Platform",
        "tagline": "Unified AI developer platform",
        "description": "Model aggregation, smart routing, cost optimization — the infrastructure behind every DAL product.",
        "features": ["Model Aggregation", "Smart Routing", "API Discounts"],
        "cta": "Explore Platform"
      }
    }
  },
  "workflow": {
    "label": "HOW IT WORKS",
    "title": "Not a better prompt. A better workflow.",
    "steps": {
      "intent": {
        "number": "01",
        "name": "INTENT",
        "title": "Clarify what you're building",
        "description": "AI interviews you with structured questions, turning vague ideas into actionable engineering requirements — no perfect prompt needed."
      },
      "build": {
        "number": "02",
        "name": "BUILD",
        "title": "Decompose and execute in parallel",
        "description": "Agents break down tasks, select the optimal model for each subtask, and execute in parallel — you steer, they build."
      },
      "ship": {
        "number": "03",
        "name": "SHIP",
        "title": "Code, tests, and docs — delivered together",
        "description": "Not just code snippets. Tests and documentation generated in sync, critical actions require your approval, full audit trail."
      }
    }
  },
  "features": {
    "label": "EVERYTHING YOU NEED",
    "title": "Built for developers who ship",
    "items": {
      "routing": {
        "title": "Multi-model Smart Routing",
        "description": "Each subtask automatically matched to the optimal model. Quality, speed, and cost are no longer trade-offs."
      },
      "skills": {
        "title": "Skills Engine",
        "description": "Engineering experience packaged as reusable guided workflows. Not prompt templates — methodology as a product."
      },
      "mission": {
        "title": "Mission Mode",
        "description": "Complex tasks decomposed automatically, progress visible in real time, resume from any breakpoint."
      },
      "byok": {
        "title": "Bring Your Own Key",
        "description": "Connect your own API keys from any provider. No vendor lock-in, full control over cost and data flow."
      },
      "context": {
        "title": "Context Engine",
        "description": "Five-layer intelligent compression keeps context coherent across million-line projects."
      },
      "audit": {
        "title": "Approval & Audit",
        "description": "Critical actions require human confirmation. Every step traceable, every decision auditable."
      },
      "rag": {
        "title": "Knowledge Integration",
        "description": "Connect your private docs and knowledge bases. AI answers grounded in your real context, not generic training data."
      },
      "cost": {
        "title": "Cost Transparency",
        "description": "Real-time cost visibility for every AI interaction. See what you spend and what you save."
      }
    }
  },
  "platform": {
    "label": "ONE PLATFORM, ONE ACCOUNT",
    "title": "DeepAILab — The AI developer platform that connects everything",
    "advantages": {
      "account": {
        "title": "One Account",
        "description": "Sign in once. Code, CLI, Office, and API Platform — all connected, all managed from one place."
      },
      "discount": {
        "title": "API Discounts",
        "description": "Access leading models through the platform at better rates than direct connections."
      },
      "dashboard": {
        "title": "Cost Dashboard",
        "description": "Cross-product usage analytics and cost breakdown at a glance. No more billing surprises."
      }
    },
    "cta": "Explore DeepAILab Platform"
  },
  "bottomCta": {
    "headline": "Ready to build the new way?",
    "subheadline": "Start with an Intent interview. Let AI help you figure out what to build.",
    "ctaPrimary": "Download DAL Code",
    "ctaSecondary": "Install CLI"
  },
  "faq": {
    "label": "FAQ",
    "title": "Frequently Asked Questions",
    "items": {
      "vsCursor": {
        "q": "How is DAL Code different from Cursor or Windsurf?",
        "a": "Cursor and Windsurf focus on helping you write better code. DAL Code starts earlier — it helps you clarify what to build before decomposing, executing, and delivering the work. It also supports multi-model routing and bring-your-own API keys."
      },
      "vsClaude": {
        "q": "How is DAL CLI different from Claude Code?",
        "a": "Claude Code is tied to the Anthropic model ecosystem. DAL CLI supports multi-model routing, your own API keys, and shares the same account and workflow system with DAL Code and DAL Office."
      },
      "byok": {
        "q": "Can I use my own API keys?",
        "a": "Yes. DAL supports connecting your own API keys from OpenAI, Anthropic, Google, and other major providers. You can also take advantage of DeepAILab platform API discounts."
      },
      "apiDiscount": {
        "q": "How do DeepAILab API discounts work?",
        "a": "Calling model APIs through the DeepAILab platform costs less than connecting to providers directly. Exact discounts depend on your usage tier — see the pricing page for details."
      },
      "models": {
        "q": "Which AI models are supported?",
        "a": "We support Claude (Opus/Sonnet/Haiku), GPT series, Gemini series, and 20+ other leading models, with new models added continuously. Smart Routing automatically selects the best model for each task."
      },
      "enterprise": {
        "q": "Do you support enterprise private deployment?",
        "a": "Private deployment, SSO, audit logs, and custom security policies are priority items on our roadmap. If your team has specific requirements, contact us to start with a concrete use case."
      }
    }
  },
  "footer": {
    "newsletter": {
      "placeholder": "Your email for product updates",
      "submit": "Subscribe",
      "success": "Subscribed.",
      "error": "Failed to subscribe. Please try again."
    },
    "groups": {
      "products": "Products",
      "resources": "Resources",
      "community": "Community",
      "company": "Company"
    },
    "links": {
      "code": "DAL Code",
      "cli": "DAL CLI",
      "office": "DAL Office",
      "apiPlatform": "API Platform",
      "pricing": "Pricing",
      "docs": "Docs",
      "blog": "Blog",
      "changelog": "Changelog",
      "faq": "FAQ",
      "discord": "Discord",
      "github": "GitHub",
      "twitter": "X / Twitter",
      "about": "About",
      "careers": "Careers",
      "contact": "Contact"
    },
    "copyright": "© 2026 DeepAILab. All rights reserved.",
    "privacy": "Privacy",
    "terms": "Terms"
  },
  "codePage": {
    "hero": {
      "label": "DAL CODE",
      "headline": "Not just an editor. An AI engineering workspace.",
      "subheadline": "From requirements interview to code delivery, one workspace covering the complete development workflow. Intent Capture helps you think clearly, Mission Mode handles the heavy lifting.",
      "cta": "Download DAL Code"
    }
  },
  "cliPage": {
    "hero": {
      "label": "DAL CLI",
      "headline": "Your AI development partner in the terminal",
      "subheadline": "Lightweight, fast, pipeline-friendly. Use agents to go from requirements to shipped code, right in your terminal.",
      "cta": "Install DAL CLI",
      "cliCommand": "curl -fsSL https://cli.deepailab.ai/install | bash"
    }
  },
  "officePage": {
    "hero": {
      "label": "DAL OFFICE",
      "headline": "AI-powered document workspace",
      "subheadline": "Developers do more than write code. Generate and edit Word documents, Excel spreadsheets, and PowerPoint presentations with AI — seamlessly connected to DAL Code.",
      "cta": "Explore DAL Office"
    }
  },
  "platformPage": {
    "hero": {
      "label": "API PLATFORM",
      "headline": "The AI infrastructure behind every DAL product",
      "subheadline": "Model aggregation, smart routing, cost optimization, usage analytics — one platform providing unified capabilities for every AI development scenario.",
      "cta": "Explore API Platform"
    }
  },
  "pricingPage": {
    "hero": {
      "label": "PRICING",
      "headline": "Simple, transparent pricing",
      "subheadline": "From individual developers to enterprise teams, choose the plan that fits."
    }
  },
  "about": {
    "hero": {
      "label": "ABOUT",
      "headline": "Building next-generation AI development infrastructure",
      "subheadline": "DeepAILab believes AI development tools should be open, composable, and built to genuinely serve developers."
    }
  },
  "contact": {
    "hero": {
      "label": "CONTACT",
      "headline": "Tell us about your real-world scenario",
      "subheadline": "Whether it's a product trial, enterprise deployment, or ecosystem partnership — start with a concrete use case."
    }
  },
  "blog": {
    "hero": {
      "label": "BLOG",
      "headline": "Product thinking and engineering practice",
      "subheadline": "Deep dives on AI development tools, multi-model routing, and engineering workflows."
    }
  },
  "common": {
    "learnMore": "Learn more",
    "getStarted": "Get started",
    "comingSoon": "Coming soon",
    "backToHome": "Back to home"
  }
}
```

- [ ] **Step 3: Commit**

```bash
git add messages/
git commit -m "feat: rewrite i18n content for platform redesign"
```

---

## Task 3: Site content data + ScrollReveal component

**Files:**
- Rewrite: `lib/site-content.ts`
- Create: `components/ScrollReveal.tsx`

- [ ] **Step 1: Rewrite lib/site-content.ts**

```typescript
export const SITE_NAME = "DAL"
export const SITE_BRAND = "DAL by DeepAILab"
export const SITE_TAGLINE = "The Open AI Development Platform"
export const SITE_DESCRIPTION =
  "从想法到产品的完整 AI 开发平台。自由选模型，全链路覆盖，一个账号搞定一切。"

export interface NavProductItem {
  key: string
  href: string
}

export const NAV_PRODUCT_ITEMS: NavProductItem[] = [
  { key: "code", href: "/code" },
  { key: "cli", href: "/cli" },
  { key: "office", href: "/office" },
  { key: "platform", href: "/platform" },
]

export interface FooterGroup {
  key: string
  links: { key: string; href: string; external?: boolean }[]
}

export const FOOTER_GROUPS: FooterGroup[] = [
  {
    key: "products",
    links: [
      { key: "code", href: "/code" },
      { key: "cli", href: "/cli" },
      { key: "office", href: "/office" },
      { key: "apiPlatform", href: "/platform" },
      { key: "pricing", href: "/pricing" },
    ],
  },
  {
    key: "resources",
    links: [
      { key: "docs", href: "/docs" },
      { key: "blog", href: "/blog" },
      { key: "changelog", href: "/coming-soon" },
      { key: "faq", href: "/#faq" },
    ],
  },
  {
    key: "community",
    links: [
      { key: "discord", href: "https://discord.gg/deepailab", external: true },
      { key: "github", href: "https://github.com/deepailab", external: true },
      { key: "twitter", href: "https://x.com/deepailab", external: true },
    ],
  },
  {
    key: "company",
    links: [
      { key: "about", href: "/about" },
      { key: "careers", href: "/careers" },
      { key: "contact", href: "/contact" },
    ],
  },
]

export const PRODUCT_KEYS = ["code", "cli", "office", "platform"] as const
export type ProductKey = (typeof PRODUCT_KEYS)[number]

export const PRODUCT_ICONS: Record<ProductKey, string> = {
  code: "/assets/icons/product-code.svg",
  cli: "/assets/icons/product-cli.svg",
  office: "/assets/icons/product-office.svg",
  platform: "/assets/icons/product-platform.svg",
}

export const PRODUCT_HREFS: Record<ProductKey, string> = {
  code: "/code",
  cli: "/cli",
  office: "/office",
  platform: "/platform",
}

export const WORKFLOW_STEPS = ["intent", "build", "ship"] as const
export type WorkflowStep = (typeof WORKFLOW_STEPS)[number]

export const FEATURE_KEYS = [
  "routing", "skills", "mission", "byok",
  "context", "audit", "rag", "cost",
] as const
export type FeatureKey = (typeof FEATURE_KEYS)[number]

export const FEATURE_ICONS: Record<FeatureKey, string> = {
  routing: "⚡",
  skills: "🧩",
  mission: "🎯",
  byok: "🔑",
  context: "🧠",
  audit: "🛡️",
  rag: "📚",
  cost: "📊",
}

export const PLATFORM_ADVANTAGE_KEYS = ["account", "discount", "dashboard"] as const

export const FAQ_KEYS = [
  "vsCursor", "vsClaude", "byok", "apiDiscount", "models", "enterprise",
] as const
```

- [ ] **Step 2: Create ScrollReveal component**

Create `components/ScrollReveal.tsx`:

```tsx
"use client"

import { useEffect, useRef } from "react"

interface ScrollRevealProps {
  children: React.ReactNode
  className?: string
  delay?: number
  as?: keyof HTMLElementTagNameMap
}

export default function ScrollReveal({
  children,
  className = "",
  delay = 0,
  as: Tag = "div" as any,
}: ScrollRevealProps) {
  const ref = useRef<HTMLElement>(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 (
    <Tag ref={ref} className={`reveal-up ${className}`}>
      {children}
    </Tag>
  )
}
```

- [ ] **Step 3: Commit**

```bash
git add lib/site-content.ts components/ScrollReveal.tsx
git commit -m "feat: add new site content data and ScrollReveal component"
```

---

## Task 4: Header — New navigation with Products dropdown

**Files:**
- Rewrite: `components/Header.tsx`

- [ ] **Step 1: Write new Header.tsx**

```tsx
"use client"

import { useState, useEffect, useCallback } from "react"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useTranslations } from "next-intl"
import LocaleSwitcher from "@/components/LocaleSwitcher"
import { NAV_PRODUCT_ITEMS } from "@/lib/site-content"

export default function Header() {
  const t = useTranslations("nav")
  const [mobileOpen, setMobileOpen] = useState(false)
  const [productsOpen, setProductsOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const pathname = usePathname()

  const closeAll = useCallback(() => {
    setMobileOpen(false)
    setProductsOpen(false)
  }, [])

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20)
    window.addEventListener("scroll", onScroll, { passive: true })
    return () => window.removeEventListener("scroll", onScroll)
  }, [])

  useEffect(() => { closeAll() }, [pathname, closeAll])

  const navLinks = [
    { href: "/docs", label: t("docs") },
    { href: "/pricing", label: t("pricing") },
    { href: "/blog", label: t("blog") },
  ]

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-bg-primary/80 backdrop-blur-xl border-b border-border"
          : "bg-transparent"
      }`}
    >
      <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        {/* Logo */}
        <Link href="/" className="flex items-center gap-2" onClick={closeAll}>
          <Image
            src="/assets/dalcode-app-icon.svg"
            width={32}
            height={32}
            alt="DAL"
          />
          <span className="font-display font-semibold text-lg text-text-primary">
            DAL
          </span>
        </Link>

        {/* Desktop Nav */}
        <nav className="hidden md:flex items-center gap-1">
          {/* Products Dropdown */}
          <div
            className="relative"
            onMouseEnter={() => setProductsOpen(true)}
            onMouseLeave={() => setProductsOpen(false)}
          >
            <button
              type="button"
              className="px-3 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors flex items-center gap-1"
              onClick={() => setProductsOpen((v) => !v)}
            >
              {t("products")}
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${productsOpen ? "rotate-180" : ""}`}>
                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>

            {productsOpen && (
              <div className="absolute top-full left-0 pt-2">
                <div className="bg-bg-card border border-border rounded-xl p-2 min-w-[240px] shadow-2xl">
                  {NAV_PRODUCT_ITEMS.map((item) => (
                    <Link
                      key={item.key}
                      href={item.href}
                      className="flex flex-col gap-0.5 px-3 py-2.5 rounded-lg hover:bg-bg-card-hover transition-colors"
                      onClick={closeAll}
                    >
                      <span className="text-sm font-medium text-text-primary">
                        {t(`productItems.${item.key}.name`)}
                      </span>
                      <span className="text-xs text-text-muted">
                        {t(`productItems.${item.key}.tagline`)}
                      </span>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>

          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`px-3 py-2 text-sm transition-colors ${
                pathname === link.href
                  ? "text-text-primary"
                  : "text-text-secondary hover:text-text-primary"
              }`}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* Right side */}
        <div className="hidden md:flex items-center gap-3">
          <LocaleSwitcher />
          <Link
            href="/contact"
            className="text-sm text-text-secondary hover:text-text-primary transition-colors"
          >
            {t("signIn")}
          </Link>
          <Link
            href="/code"
            className="px-4 py-2 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
          >
            {t("downloads")}
          </Link>
        </div>

        {/* Mobile hamburger */}
        <button
          type="button"
          className="md:hidden p-2"
          onClick={() => setMobileOpen((v) => !v)}
          aria-label={t("toggleMenu")}
        >
          <div className="w-5 flex flex-col gap-1.5">
            <span className={`block h-px bg-text-primary transition-all ${mobileOpen ? "rotate-45 translate-y-[3.5px]" : ""}`} />
            <span className={`block h-px bg-text-primary transition-all ${mobileOpen ? "-rotate-45 -translate-y-[3.5px]" : ""}`} />
          </div>
        </button>
      </div>

      {/* Mobile menu */}
      {mobileOpen && (
        <div className="md:hidden bg-bg-primary border-t border-border">
          <div className="px-6 py-4 flex flex-col gap-2">
            {NAV_PRODUCT_ITEMS.map((item) => (
              <Link
                key={item.key}
                href={item.href}
                className="py-2 text-sm text-text-secondary hover:text-text-primary"
                onClick={closeAll}
              >
                {t(`productItems.${item.key}.name`)}
              </Link>
            ))}
            <hr className="border-border my-2" />
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="py-2 text-sm text-text-secondary hover:text-text-primary"
                onClick={closeAll}
              >
                {link.label}
              </Link>
            ))}
            <hr className="border-border my-2" />
            <Link
              href="/code"
              className="py-2 text-sm font-medium text-accent"
              onClick={closeAll}
            >
              {t("downloads")}
            </Link>
            <LocaleSwitcher />
          </div>
        </div>
      )}
    </header>
  )
}
```

- [ ] **Step 2: Verify Header renders**

```bash
cd /Users/leon/本地开发项目/claude-code/dalcode-website && PORT=55132 npx next dev &
sleep 5
curl -s http://localhost:55132 | head -50
```

- [ ] **Step 3: Commit**

```bash
git add components/Header.tsx
git commit -m "feat: new Header with Products dropdown and dark theme"
```

---

## Task 5: Footer — New 4-column layout

**Files:**
- Rewrite: `components/Footer.tsx`

- [ ] **Step 1: Write new Footer.tsx**

```tsx
"use client"

import Image from "next/image"
import Link from "next/link"
import { useTranslations } from "next-intl"
import NewsletterForm from "@/components/NewsletterForm"
import LocaleSwitcher from "@/components/LocaleSwitcher"
import { FOOTER_GROUPS } from "@/lib/site-content"

export default function Footer() {
  const t = useTranslations("footer")

  return (
    <footer className="border-t border-border bg-bg-primary">
      <div className="max-w-7xl mx-auto px-6">
        {/* Top: logo + newsletter */}
        <div className="py-12 flex flex-col md:flex-row justify-between items-start gap-8">
          <div className="flex items-center gap-2">
            <Image src="/assets/dalcode-app-icon.svg" width={28} height={28} alt="DAL" />
            <span className="font-display font-semibold text-text-primary">DAL</span>
          </div>
          <div className="w-full md:w-80">
            <NewsletterForm />
          </div>
        </div>

        {/* Link columns */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pb-12">
          {FOOTER_GROUPS.map((group) => (
            <div key={group.key}>
              <h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-4">
                {t(`groups.${group.key}`)}
              </h3>
              <ul className="flex flex-col gap-2.5">
                {group.links.map((link) => (
                  <li key={link.key}>
                    <Link
                      href={link.href}
                      className="text-sm text-text-secondary hover:text-text-primary transition-colors"
                      {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                    >
                      {t(`links.${link.key}`)}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div className="border-t border-border py-6 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-text-muted">
          <p>{t("copyright")}</p>
          <div className="flex items-center gap-6">
            <Link href="/privacy" className="hover:text-text-secondary transition-colors">
              {t("privacy")}
            </Link>
            <Link href="/terms" className="hover:text-text-secondary transition-colors">
              {t("terms")}
            </Link>
            <LocaleSwitcher />
          </div>
        </div>
      </div>
    </footer>
  )
}
```

- [ ] **Step 2: Commit**

```bash
git add components/Footer.tsx
git commit -m "feat: new Footer with 4-column layout"
```

---

## Task 6: Homepage sections — Hero + ProductEcosystem

**Files:**
- Rewrite: `components/home/HeroSection.tsx`
- Create: `components/home/ProductEcosystem.tsx`

- [ ] **Step 1: Write new HeroSection.tsx**

```tsx
"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"

export default function HeroSection() {
  const t = useTranslations("hero")

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-accent-glow)_0%,transparent_70%)]" />

      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <ScrollReveal>
          <span className="inline-block px-3 py-1 text-xs font-medium text-accent border border-accent/30 rounded-full mb-8">
            {t("badge")}
          </span>
        </ScrollReveal>

        <ScrollReveal delay={100}>
          <h1 className="font-display text-5xl md:text-7xl font-bold tracking-tight text-text-primary leading-[1.1]">
            {t("headline")}
          </h1>
        </ScrollReveal>

        <ScrollReveal delay={200}>
          <p className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto leading-relaxed">
            {t("subheadline")}
          </p>
        </ScrollReveal>

        <ScrollReveal delay={300}>
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/code"
              className="px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
            >
              {t("ctaPrimary")}
            </Link>
            <Link
              href="/cli"
              className="px-6 py-3 text-sm font-medium text-text-primary border border-border hover:border-border-hover rounded-lg transition-colors"
            >
              {t("ctaSecondary")}
            </Link>
          </div>
        </ScrollReveal>

        <ScrollReveal delay={400}>
          <div className="mt-6 inline-flex items-center gap-2 px-4 py-2 bg-bg-card border border-border rounded-lg font-mono text-sm text-text-muted">
            <span className="text-accent">$</span>
            <span>{t("cliCommand")}</span>
            <button
              type="button"
              className="ml-2 text-text-muted hover:text-text-primary transition-colors"
              onClick={() => navigator.clipboard.writeText(t("cliCommand"))}
              aria-label="Copy command"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
              </svg>
            </button>
          </div>
        </ScrollReveal>

        {/* Product screenshot placeholder */}
        <ScrollReveal delay={500}>
          <div className="mt-16 rounded-xl border border-border bg-bg-card overflow-hidden shadow-2xl">
            <div className="aspect-video flex items-center justify-center text-text-muted">
              <div className="text-center">
                <div className="text-4xl mb-2">⌘</div>
                <p className="text-sm">Product screenshot</p>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}
```

- [ ] **Step 2: Write ProductEcosystem.tsx**

```tsx
"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"
import { PRODUCT_KEYS, PRODUCT_HREFS } from "@/lib/site-content"

export default function ProductEcosystem() {
  const t = useTranslations("ecosystem")

  return (
    <section className="py-32 px-6">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
            {t("label")}
          </p>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary">
            {t("title")}
          </h2>
        </ScrollReveal>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-4">
          {PRODUCT_KEYS.map((key, i) => (
            <ScrollReveal key={key} delay={i * 100}>
              <Link
                href={PRODUCT_HREFS[key]}
                className="group block p-8 rounded-xl border border-border bg-bg-card hover:bg-bg-card-hover hover:border-border-hover transition-all card-glow"
              >
                <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-3">
                  {t(`products.${key}.name`)}
                </p>
                <h3 className="font-display text-xl font-semibold text-text-primary mb-2">
                  {t(`products.${key}.tagline`)}
                </h3>
                <p className="text-sm text-text-secondary mb-6 leading-relaxed">
                  {t(`products.${key}.description`)}
                </p>
                <div className="flex flex-wrap gap-2 mb-6">
                  {(t.raw(`products.${key}.features`) as string[]).map((f: string) => (
                    <span key={f} className="px-2 py-1 text-xs text-text-muted border border-border rounded-md">
                      {f}
                    </span>
                  ))}
                </div>
                <span className="text-sm text-accent group-hover:underline">
                  {t(`products.${key}.cta`)} →
                </span>
              </Link>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 3: Commit**

```bash
git add components/home/HeroSection.tsx components/home/ProductEcosystem.tsx
git commit -m "feat: new Hero and ProductEcosystem sections"
```

---

## Task 7: Homepage sections — WorkflowSteps + FeatureGrid

**Files:**
- Create: `components/home/WorkflowSteps.tsx`
- Create: `components/home/FeatureGrid.tsx`

- [ ] **Step 1: Write WorkflowSteps.tsx**

```tsx
"use client"

import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"
import { WORKFLOW_STEPS } from "@/lib/site-content"

export default function WorkflowSteps() {
  const t = useTranslations("workflow")

  return (
    <section className="py-32 px-6 bg-bg-secondary">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
            {t("label")}
          </p>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary max-w-2xl">
            {t("title")}
          </h2>
        </ScrollReveal>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
          {WORKFLOW_STEPS.map((step, i) => (
            <ScrollReveal key={step} delay={i * 150}>
              <div className="relative p-8 rounded-xl border border-border bg-bg-card h-full">
                <span className="font-display text-6xl font-bold text-border">
                  {t(`steps.${step}.number`)}
                </span>
                <p className="mt-4 text-xs font-semibold uppercase tracking-widest text-accent">
                  {t(`steps.${step}.name`)}
                </p>
                <h3 className="mt-2 font-display text-xl font-semibold text-text-primary">
                  {t(`steps.${step}.title`)}
                </h3>
                <p className="mt-3 text-sm text-text-secondary leading-relaxed">
                  {t(`steps.${step}.description`)}
                </p>
                {/* Screenshot placeholder */}
                <div className="mt-6 rounded-lg border border-border bg-bg-secondary aspect-video flex items-center justify-center">
                  <span className="text-xs text-text-muted">Screenshot</span>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>

        {/* Connecting line */}
        <div className="hidden md:flex items-center justify-center mt-8 gap-2">
          {WORKFLOW_STEPS.map((_, i) => (
            <div key={i} className="flex items-center">
              <div className="w-3 h-3 rounded-full border-2 border-accent bg-bg-primary" />
              {i < WORKFLOW_STEPS.length - 1 && (
                <div className="w-32 h-px bg-gradient-to-r from-accent to-border" />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 2: Write FeatureGrid.tsx**

```tsx
"use client"

import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"
import { FEATURE_KEYS, FEATURE_ICONS } from "@/lib/site-content"

export default function FeatureGrid() {
  const t = useTranslations("features")

  return (
    <section className="py-32 px-6">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
            {t("label")}
          </p>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary">
            {t("title")}
          </h2>
        </ScrollReveal>

        <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {FEATURE_KEYS.map((key, i) => (
            <ScrollReveal key={key} delay={i * 80}>
              <div className="p-6 rounded-xl border border-border bg-bg-card hover:bg-bg-card-hover hover:border-border-hover transition-all card-glow h-full">
                <span className="text-2xl">{FEATURE_ICONS[key]}</span>
                <h3 className="mt-4 font-display text-base font-semibold text-text-primary">
                  {t(`items.${key}.title`)}
                </h3>
                <p className="mt-2 text-sm text-text-secondary leading-relaxed">
                  {t(`items.${key}.description`)}
                </p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 3: Commit**

```bash
git add components/home/WorkflowSteps.tsx components/home/FeatureGrid.tsx
git commit -m "feat: add WorkflowSteps and FeatureGrid homepage sections"
```

---

## Task 8: Homepage sections — EcosystemSection + BottomCta + FaqSection

**Files:**
- Create: `components/home/EcosystemSection.tsx`
- Create: `components/home/BottomCta.tsx`
- Create: `components/home/FaqSection.tsx`

- [ ] **Step 1: Write EcosystemSection.tsx**

```tsx
"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"
import { PLATFORM_ADVANTAGE_KEYS } from "@/lib/site-content"

export default function EcosystemSection() {
  const t = useTranslations("platform")

  return (
    <section className="py-32 px-6 bg-gradient-to-b from-bg-secondary to-[#0d0518]">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
            {t("label")}
          </p>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary max-w-3xl">
            {t("title")}
          </h2>
        </ScrollReveal>

        {/* Architecture diagram */}
        <ScrollReveal delay={200}>
          <div className="mt-16 flex justify-center">
            <div className="relative">
              {/* Center node */}
              <div className="w-40 h-40 rounded-2xl border-2 border-accent bg-bg-card flex flex-col items-center justify-center text-center">
                <span className="text-sm font-semibold text-accent">DeepAILab</span>
                <span className="text-xs text-text-muted mt-1">Platform</span>
              </div>
              {/* Branch nodes positioned absolutely */}
              {(["Code", "CLI", "Office", "API"] as const).map((name, i) => {
                const positions = [
                  "-top-20 left-1/2 -translate-x-1/2",
                  "top-1/2 -right-28 -translate-y-1/2",
                  "-bottom-20 left-1/2 -translate-x-1/2",
                  "top-1/2 -left-28 -translate-y-1/2",
                ]
                return (
                  <div key={name} className={`absolute ${positions[i]} px-3 py-2 rounded-lg border border-border bg-bg-card text-xs text-text-secondary`}>
                    {name}
                  </div>
                )
              })}
            </div>
          </div>
        </ScrollReveal>

        {/* Advantage cards */}
        <div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-4">
          {PLATFORM_ADVANTAGE_KEYS.map((key, i) => (
            <ScrollReveal key={key} delay={i * 100}>
              <div className="p-6 rounded-xl border border-border bg-bg-card/50 backdrop-blur-sm">
                <h3 className="font-display text-lg font-semibold text-text-primary">
                  {t(`advantages.${key}.title`)}
                </h3>
                <p className="mt-2 text-sm text-text-secondary leading-relaxed">
                  {t(`advantages.${key}.description`)}
                </p>
              </div>
            </ScrollReveal>
          ))}
        </div>

        <ScrollReveal delay={400}>
          <div className="mt-12 text-center">
            <a
              href="https://deepailab.ai"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium text-accent border border-accent/30 hover:border-accent rounded-lg transition-colors"
            >
              {t("cta")}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M7 17L17 7M17 7H7M17 7V17" />
              </svg>
            </a>
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}
```

- [ ] **Step 2: Write BottomCta.tsx**

```tsx
"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"

export default function BottomCta() {
  const t = useTranslations("bottomCta")
  const hero = useTranslations("hero")

  return (
    <section className="relative py-32 px-6 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-accent-glow)_0%,transparent_70%)]" />

      <div className="relative z-10 max-w-3xl mx-auto text-center">
        <ScrollReveal>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary">
            {t("headline")}
          </h2>
        </ScrollReveal>

        <ScrollReveal delay={100}>
          <p className="mt-6 text-lg text-text-secondary">
            {t("subheadline")}
          </p>
        </ScrollReveal>

        <ScrollReveal delay={200}>
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/code"
              className="px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
            >
              {t("ctaPrimary")}
            </Link>
            <Link
              href="/cli"
              className="px-6 py-3 text-sm font-medium text-text-primary border border-border hover:border-border-hover rounded-lg transition-colors"
            >
              {t("ctaSecondary")}
            </Link>
          </div>
        </ScrollReveal>

        <ScrollReveal delay={300}>
          <div className="mt-6 inline-flex items-center gap-2 px-4 py-2 bg-bg-card border border-border rounded-lg font-mono text-sm text-text-muted">
            <span className="text-accent">$</span>
            <span>{hero("cliCommand")}</span>
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}
```

- [ ] **Step 3: Write FaqSection.tsx**

```tsx
"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import ScrollReveal from "@/components/ScrollReveal"
import { FAQ_KEYS } from "@/lib/site-content"

export default function FaqSection() {
  const t = useTranslations("faq")
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  return (
    <section id="faq" className="py-32 px-6 bg-bg-secondary">
      <div className="max-w-3xl mx-auto">
        <ScrollReveal>
          <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">
            {t("label")}
          </p>
          <h2 className="font-display text-3xl md:text-5xl font-bold text-text-primary">
            {t("title")}
          </h2>
        </ScrollReveal>

        <div className="mt-12 flex flex-col divide-y divide-border">
          {FAQ_KEYS.map((key, i) => (
            <ScrollReveal key={key} delay={i * 60}>
              <div>
                <button
                  type="button"
                  className="w-full py-5 flex items-center justify-between text-left group"
                  onClick={() => setOpenIndex(openIndex === i ? null : i)}
                >
                  <span className="text-base font-medium text-text-primary group-hover:text-accent transition-colors pr-4">
                    {t(`items.${key}.q`)}
                  </span>
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    className={`flex-shrink-0 text-text-muted transition-transform ${openIndex === i ? "rotate-45" : ""}`}
                  >
                    <path d="M12 5v14M5 12h14" />
                  </svg>
                </button>
                {openIndex === i && (
                  <div className="pb-5 text-sm text-text-secondary leading-relaxed">
                    {t(`items.${key}.a`)}
                  </div>
                )}
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 4: Commit**

```bash
git add components/home/EcosystemSection.tsx components/home/BottomCta.tsx components/home/FaqSection.tsx
git commit -m "feat: add EcosystemSection, BottomCta, and FaqSection"
```

---

## Task 9: Wire up homepage + delete old components

**Files:**
- Rewrite: `app/page.tsx`
- Rewrite: `components/home/index.ts`
- Delete: `components/home/IntegrationsSection.tsx`
- Delete: `components/home/PrinciplesSection.tsx`
- Delete: `components/home/BlogPreviewSection.tsx`
- Delete: `components/home/CtaSection.tsx`

- [ ] **Step 1: Rewrite components/home/index.ts**

```typescript
export { default as HeroSection } from "./HeroSection"
export { default as ProductEcosystem } from "./ProductEcosystem"
export { default as WorkflowSteps } from "./WorkflowSteps"
export { default as FeatureGrid } from "./FeatureGrid"
export { default as EcosystemSection } from "./EcosystemSection"
export { default as BottomCta } from "./BottomCta"
export { default as FaqSection } from "./FaqSection"
```

- [ ] **Step 2: Rewrite app/page.tsx**

```tsx
import type { Metadata } from "next"
import {
  HeroSection,
  ProductEcosystem,
  WorkflowSteps,
  FeatureGrid,
  EcosystemSection,
  BottomCta,
  FaqSection,
} from "@/components/home"
import { SITE_BRAND, SITE_DESCRIPTION } from "@/lib/site-content"

export const metadata: Metadata = {
  title: SITE_BRAND,
  description: SITE_DESCRIPTION,
  openGraph: {
    title: SITE_BRAND,
    description: SITE_DESCRIPTION,
  },
}

export default function HomePage() {
  return (
    <>
      <HeroSection />
      <ProductEcosystem />
      <WorkflowSteps />
      <FeatureGrid />
      <EcosystemSection />
      <BottomCta />
      <FaqSection />
    </>
  )
}
```

- [ ] **Step 3: Delete old components**

```bash
rm components/home/IntegrationsSection.tsx
rm components/home/PrinciplesSection.tsx
rm components/home/BlogPreviewSection.tsx
rm components/home/CtaSection.tsx
```

- [ ] **Step 4: Verify homepage loads**

Start dev server, navigate to `http://localhost:55132`, take a screenshot and verify all 7 sections render.

- [ ] **Step 5: Commit**

```bash
git add -A
git commit -m "feat: wire up new homepage sections, remove old components"
```

---

## Task 10: Subpages — /code, /cli, /office, /platform, /pricing

**Files:**
- Create: `app/code/page.tsx`
- Create: `app/cli/page.tsx`
- Create: `app/office/page.tsx`
- Create: `app/platform/page.tsx`
- Create: `app/pricing/page.tsx`

- [ ] **Step 1: Write app/code/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"
import Link from "next/link"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("codePage.hero")
  return { title: t("headline") }
}

export default async function CodePage() {
  const t = await getTranslations("codePage.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-10">
          <Link
            href="/contact"
            className="px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
          >
            {t("cta")}
          </Link>
        </div>
        <div className="mt-16 rounded-xl border border-border bg-bg-card overflow-hidden">
          <div className="aspect-video flex items-center justify-center text-text-muted">
            <p className="text-sm">DAL Code product screenshots coming soon</p>
          </div>
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 2: Write app/cli/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"
import Link from "next/link"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("cliPage.hero")
  return { title: t("headline") }
}

export default async function CliPage() {
  const t = await getTranslations("cliPage.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-10 flex flex-col items-center gap-4">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-bg-card border border-border rounded-lg font-mono text-sm text-text-muted">
            <span className="text-accent">$</span>
            <span>{t("cliCommand")}</span>
          </div>
        </div>
        <div className="mt-16 rounded-xl border border-border bg-bg-card overflow-hidden">
          <div className="aspect-video flex items-center justify-center text-text-muted bg-[#1a1a2e]">
            <div className="font-mono text-sm text-left max-w-md">
              <p><span className="text-accent">$</span> dal init</p>
              <p className="text-text-muted mt-1">Initializing DAL CLI...</p>
              <p className="text-green-400 mt-1">✓ Connected to DeepAILab Platform</p>
              <p className="text-text-muted mt-1">Ready. Type `dal` to get started.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 3: Write app/office/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"
import Link from "next/link"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("officePage.hero")
  return { title: t("headline") }
}

export default async function OfficePage() {
  const t = await getTranslations("officePage.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-10">
          <Link
            href="/contact"
            className="px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
          >
            {t("cta")}
          </Link>
        </div>
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-4">
          {(["Word", "Excel", "PPT"] as const).map((name) => (
            <div key={name} className="p-8 rounded-xl border border-border bg-bg-card">
              <h3 className="font-display text-lg font-semibold text-text-primary">{name}</h3>
              <p className="mt-2 text-sm text-text-muted">Coming soon</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 4: Write app/platform/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("platformPage.hero")
  return { title: t("headline") }
}

export default async function PlatformPage() {
  const t = await getTranslations("platformPage.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-10">
          <a
            href="https://deepailab.ai"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors"
          >
            {t("cta")}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M7 17L17 7M17 7H7M17 7V17" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 5: Write app/pricing/page.tsx**

```tsx
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>
  )
}
```

- [ ] **Step 6: Commit**

```bash
git add app/code/ app/cli/ app/office/ app/platform/ app/pricing/
git commit -m "feat: add product subpages (code, cli, office, platform, pricing)"
```

---

## Task 11: Update existing subpages (about, blog, contact, careers) for dark theme

**Files:**
- Modify: `app/about/page.tsx`
- Modify: `app/blog/page.tsx`
- Modify: `app/contact/page.tsx`
- Modify: `app/careers/page.tsx`
- Modify: `app/coming-soon/page.tsx`
- Modify: `app/not-found.tsx`

These pages currently use webflow CSS classes. They need to be converted to Tailwind. Since they are secondary pages, we use a minimal hero + content pattern consistent with the new subpages.

- [ ] **Step 1: Rewrite app/about/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("about.hero")
  return { title: t("headline") }
}

export default async function AboutPage() {
  const t = await getTranslations("about.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>
    </section>
  )
}
```

- [ ] **Step 2: Rewrite app/blog/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("blog.hero")
  return { title: t("headline") }
}

export default async function BlogPage() {
  const t = await getTranslations("blog.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>
    </section>
  )
}
```

- [ ] **Step 3: Rewrite app/contact/page.tsx**

```tsx
import type { Metadata } from "next"
import { getTranslations } from "next-intl/server"
import ContactForm from "@/components/ContactForm"

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("contact.hero")
  return { title: t("headline") }
}

export default async function ContactPage() {
  const t = await getTranslations("contact.hero")

  return (
    <section className="min-h-screen pt-32 pb-20 px-6">
      <div className="max-w-4xl mx-auto">
        <div className="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>
        <div className="mt-16 max-w-xl mx-auto">
          <ContactForm />
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 4: Simplify app/careers/page.tsx, app/coming-soon/page.tsx, app/not-found.tsx**

Apply the same pattern: minimal hero with label + headline + description, using Tailwind classes, no webflow references.

For `not-found.tsx`:

```tsx
import Link from "next/link"

export default function NotFound() {
  return (
    <section className="min-h-screen pt-32 pb-20 px-6 flex items-center">
      <div className="max-w-xl mx-auto text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-accent mb-4">404</p>
        <h1 className="font-display text-4xl font-bold text-text-primary">Page not found</h1>
        <p className="mt-4 text-text-secondary">The page you're looking for doesn't exist or has been moved.</p>
        <div className="mt-8">
          <Link href="/" className="px-6 py-3 text-sm font-medium bg-accent hover:bg-accent-hover text-white rounded-lg transition-colors">
            Back to home
          </Link>
        </div>
      </div>
    </section>
  )
}
```

- [ ] **Step 5: Delete old about/blog/contact subcomponents that use webflow classes**

```bash
rm -rf components/about/
rm -rf components/blog/
rm -rf components/contact/
```

- [ ] **Step 6: Commit**

```bash
git add -A
git commit -m "feat: rewrite all subpages for dark Tailwind theme"
```

---

## Task 12: Update GsapAnimations + NewsletterForm + LocaleSwitcher

**Files:**
- Modify: `components/GsapAnimations.tsx`
- Modify: `components/NewsletterForm.tsx`
- Modify: `components/LocaleSwitcher.tsx`

- [ ] **Step 1: Simplify GsapAnimations.tsx**

Remove marquee, counter, and button hover init (no longer needed). Keep scroll reveal and smooth scroll:

```tsx
"use client"

import { useEffect } from "react"

export default function GsapAnimations() {
  useEffect(() => {
    let ctx: ReturnType<typeof import("gsap").gsap.context> | null = null

    import("gsap").then(async ({ gsap }) => {
      const { ScrollTrigger } = await import("gsap/ScrollTrigger")
      gsap.registerPlugin(ScrollTrigger)

      ctx = gsap.context(() => {
        ScrollTrigger.batch(".reveal-up:not(.reveal-visible)", {
          onEnter: (batch) =>
            gsap.to(batch, {
              opacity: 1,
              y: 0,
              stagger: 0.1,
              duration: 0.6,
              ease: "power2.out",
              overwrite: true,
            }),
        })
      })
    })

    return () => { ctx?.revert() }
  }, [])

  return null
}
```

- [ ] **Step 2: Update NewsletterForm.tsx to use Tailwind**

The existing form needs its webflow classes replaced with Tailwind. Update the component to use:
- `bg-bg-card border border-border` for input
- `bg-accent text-white` for submit button
- Use `useTranslations("footer.newsletter")` for all strings

- [ ] **Step 3: Update LocaleSwitcher.tsx to use Tailwind**

Replace webflow classes with:
- `text-sm text-text-muted hover:text-text-primary` styling
- Simple `<select>` or button toggle between zh-CN and en

- [ ] **Step 4: Commit**

```bash
git add components/GsapAnimations.tsx components/NewsletterForm.tsx components/LocaleSwitcher.tsx
git commit -m "refactor: update GsapAnimations, NewsletterForm, LocaleSwitcher for new design"
```

---

## Task 13: Update ContactForm for dark theme

**Files:**
- Modify: `components/ContactForm.tsx`

- [ ] **Step 1: Update ContactForm to use Tailwind classes**

Replace all webflow CSS classes with Tailwind equivalents:
- Inputs: `w-full px-4 py-3 bg-bg-card border border-border rounded-lg text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none`
- Labels: `text-sm text-text-secondary`
- Submit button: `w-full px-6 py-3 bg-accent hover:bg-accent-hover text-white font-medium rounded-lg transition-colors`
- Error messages: `text-xs text-red-400`

Keep all existing React Hook Form + Zod validation logic unchanged.

- [ ] **Step 2: Commit**

```bash
git add components/ContactForm.tsx
git commit -m "refactor: update ContactForm for dark Tailwind theme"
```

---

## Task 14: Full build verification + browser test

**Files:** None (verification only)

- [ ] **Step 1: Run TypeScript check**

```bash
cd /Users/leon/本地开发项目/claude-code/dalcode-website && npx tsc --noEmit 2>&1 | tail -30
```

Expected: No type errors.

- [ ] **Step 2: Run Next.js build**

```bash
npx next build 2>&1 | tail -30
```

Expected: Build succeeds with all pages generated.

- [ ] **Step 3: Start dev server and verify in browser**

```bash
PORT=55132 npx next dev &
```

Navigate to `http://localhost:55132` and verify:
- Homepage: all 7 sections render (Hero, ProductEcosystem, WorkflowSteps, FeatureGrid, EcosystemSection, BottomCta, FAQ)
- Navigation: Products dropdown works, all links navigate correctly
- Subpages: `/code`, `/cli`, `/office`, `/platform`, `/pricing`, `/about`, `/blog`, `/contact` all load
- Footer: 4-column layout renders correctly
- Language switch: toggle between zh-CN and en
- Mobile: responsive layout works at mobile breakpoints
- Scroll animations: sections fade in on scroll

- [ ] **Step 4: Take screenshots of key pages**

Screenshot homepage, `/code`, `/cli` pages and verify visual quality.

- [ ] **Step 5: Final commit if any fixes needed**

```bash
git add -A
git commit -m "fix: address build and visual issues from full verification"
```