From 97db9ee8c71b6b24ce763945e9dcfff87413ece0 Mon Sep 17 00:00:00 2001 From: Leon-in Date: Sat, 30 May 2026 14:00:18 +0800 Subject: [PATCH] feat(site): redesign with product pages, ecosystem sections and pixel reveal Add cli/code/office/platform/pricing pages, new home sections (Ecosystem, FeatureGrid, Faq, WorkflowSteps, BottomCta, ProductEcosystem), ScrollReveal and PixelTextReveal animation components, brand assets, and expanded site-content. Co-Authored-By: Claude Opus 4.8 --- app/cli/page.tsx | 151 ++++++++++++++++++++++ app/code/page.tsx | 150 ++++++++++++++++++++++ app/globals.css | 154 ++++++++++++++++++++++- app/office/page.tsx | 142 +++++++++++++++++++++ app/page.tsx | 20 ++- app/platform/page.tsx | 159 ++++++++++++++++++++++++ app/pricing/page.tsx | 30 +++++ components/Footer.tsx | 2 +- components/Header.tsx | 6 +- components/PixelTextReveal.tsx | 150 ++++++++++++++++++++++ components/ScrollReveal.tsx | 42 +++++++ components/about/MissionSection.tsx | 2 +- components/home/BlogPreviewSection.tsx | 16 ++- components/home/BottomCta.tsx | 60 +++++++++ components/home/EcosystemSection.tsx | 96 ++++++++++++++ components/home/FaqSection.tsx | 76 +++++++++++ components/home/FeatureGrid.tsx | 44 +++++++ components/home/HeroSection.tsx | 26 ++-- components/home/IntegrationsSection.tsx | 74 +++++++++-- components/home/ProductEcosystem.tsx | 91 ++++++++++++++ components/home/WorkflowSteps.tsx | 75 +++++++++++ components/home/index.ts | 6 + lib/site-content.ts | 159 +++++++++++++++++++++++- public/assets/dalcode-app-icon-192.png | Bin 0 -> 1193 bytes public/assets/dalcode-app-icon-512.png | Bin 0 -> 3895 bytes public/assets/dalcode-app-icon.svg | 5 + public/assets/dalcode-logo-dark.svg | 5 + 27 files changed, 1709 insertions(+), 32 deletions(-) create mode 100644 app/cli/page.tsx create mode 100644 app/code/page.tsx create mode 100644 app/office/page.tsx create mode 100644 app/platform/page.tsx create mode 100644 app/pricing/page.tsx create mode 100644 components/PixelTextReveal.tsx create mode 100644 components/ScrollReveal.tsx create mode 100644 components/home/BottomCta.tsx create mode 100644 components/home/EcosystemSection.tsx create mode 100644 components/home/FaqSection.tsx create mode 100644 components/home/FeatureGrid.tsx create mode 100644 components/home/ProductEcosystem.tsx create mode 100644 components/home/WorkflowSteps.tsx create mode 100644 public/assets/dalcode-app-icon-192.png create mode 100644 public/assets/dalcode-app-icon-512.png create mode 100644 public/assets/dalcode-app-icon.svg create mode 100644 public/assets/dalcode-logo-dark.svg diff --git a/app/cli/page.tsx b/app/cli/page.tsx new file mode 100644 index 0000000..e05dce4 --- /dev/null +++ b/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 ( +
+
+
+
+
DAL CLI
+

终端不退出，AI 已就位

+
+

+ 同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。 +

+
+
+
+ $ + npx dalcode +
+
+
+
+
+ +
+
+
+
Features
+
+

为终端用户设计，不是 IDE 的简化版

+
+
+
+
+
+
+ {FEATURES.map((feat) => ( +
+
+

{feat.title}

+
+

{feat.description}

+
+
+
+ ))} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
Get Started
+
+

在终端里试试

+
+
+

+ 一条命令启动，用你自己的 Key，不需要注册。 +

+
+
+
+ +
+
了解更多
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+ ) +} diff --git a/app/code/page.tsx b/app/code/page.tsx new file mode 100644 index 0000000..ef42d87 --- /dev/null +++ b/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 ( +
+
+
+
+
DAL Code
+

写代码之前，先把事情想清楚

+
+

+ AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。 +

+
+
+
+ +
+
联系我们
+
+ + + +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
Capabilities
+
+

不是更多的功能，是更对的架构

+
+
+
+
+
+ {CAPABILITIES.map((cap) => ( +
+
+

{cap.title}

+
+

{cap.description}

+
+
+
+ ))} +
+
+
+
+
+ +
+
+
+
Next Step
+
+

聊聊你的开发场景

+
+
+

+ 无论是独立项目还是团队协作，DAL Code 都从同一个起点开始——一次结构化的需求对话。 +

+
+
+
+ +
+
联系团队
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+ ) +} diff --git a/app/globals.css b/app/globals.css index 8c03755..fec6215 100644 --- a/app/globals.css +++ b/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; +} + diff --git a/app/office/page.tsx b/app/office/page.tsx new file mode 100644 index 0000000..64b2a39 --- /dev/null +++ b/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 ( +
+
+
+
+
DAL Office
+

文档也该有 AI 原生体验

+
+

+ 文字、表格、演示文稿——内置 AI 辅助起草、数据洞察和版式生成，非技术团队也能高效产出。 +

+
+
+
+ +
+
申请体验
+
+ + + +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
Editors
+
+

三种编辑器，一套 AI 能力

+
+
+
+
+
+
+ {EDITORS.map((editor) => ( +
+
+

{editor.name}

+
+

{editor.description}

+
+
+
+ ))} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
Early Access
+
+

DAL Office 正在打磨中

+
+
+

+ 核心编辑器已可用，AI 能力持续上线。留下联系方式，第一时间获得体验资格。 +

+
+
+
+ +
+
预约体验
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+ ) +} diff --git a/app/page.tsx b/app/page.tsx index eed35f2..3cab335 100644 --- a/app/page.tsx +++ b/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() { + + + + + + ) diff --git a/app/platform/page.tsx b/app/platform/page.tsx new file mode 100644 index 0000000..8dc02e5 --- /dev/null +++ b/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 ( +
+
+
+
+
DeepAILab API Platform
+

一层路由，连通所有模型

+
+

+ 20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。 +

+
+ +
+ +
+
+
+
Capabilities
+
+

不是中转站，是基础设施

+
+
+

+ DeepAILab 不只转发请求。它理解任务、选择模型、管控成本、记录审计——是团队级的 AI 基础设施。 +

+
+
+
+
+
+
+ {CAPABILITIES.map((cap) => ( +
+
+

{cap.title}

+
+

{cap.description}

+
+
+
+ ))} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
Get Started
+
+

开始接入

+
+
+

+ 注册即可使用。团队版支持统一计费、成员管理和审计日志。 +

+
+
+
+ +
+
联系团队
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+ ) +} diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx new file mode 100644 index 0000000..3eaba5e --- /dev/null +++ b/app/pricing/page.tsx @@ -0,0 +1,30 @@ +import type { Metadata } from "next" +import { getTranslations } from "next-intl/server" + +export async function generateMetadata(): Promise { + const t = await getTranslations("pricingPage.hero") + return { title: t("headline") } +} + +export default async function PricingPage() { + const t = await getTranslations("pricingPage.hero") + + return ( +
+
+

+ {t("label")} +

+

+ {t("headline")} +

+

+ {t("subheadline")} +

+
+ Pricing details coming soon +
+
+
+ ) +} diff --git a/components/Footer.tsx b/components/Footer.tsx index ec7a7ee..e4463b3 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -17,7 +17,7 @@ export default function Footer() {
- DAL Code logo + DAL Code
diff --git a/components/Header.tsx b/components/Header.tsx index 08e2148..288b273 100644 --- a/components/Header.tsx +++ b/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() {
- Logo + DAL Code
- Logo + DAL Code
@@ -171,6 +172,7 @@ export default function Header() {
+