# 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