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