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