Leon-in
97db9ee8c7
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>
76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { WORKFLOW_ITEMS } from "@/lib/site-content"
|
||
|
||
export default function WorkflowSteps() {
|
||
return (
|
||
<section className="section bg-neutral overflow-hidden">
|
||
<div className="w-layout-blockcontainer container-default w-container">
|
||
<div
|
||
data-w-id="workflow-title"
|
||
style={{ opacity: "0", filter: "blur(8px)" }}
|
||
className="title-left-content-right"
|
||
>
|
||
<div className="inner-container _400px _100-tablet">
|
||
<div className="subtitle">How It Works</div>
|
||
<div className="mg-top-4x-extra-small">
|
||
<h2>三步，从想法到可交付的工程结果</h2>
|
||
</div>
|
||
</div>
|
||
<div className="inner-container _400px _100-tablet">
|
||
<p>
|
||
大多数 AI 编程工具从「你输入 prompt」开始。DAL Code 从「AI 采访你」开始——先搞清楚要做什么，再决定怎么做。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="mg-top-large">
|
||
<div
|
||
data-w-id="workflow-cards"
|
||
style={{ opacity: "0", filter: "blur(8px)" }}
|
||
className="corner-gradient-container"
|
||
>
|
||
<div className="border-wrapper">
|
||
<div className="w-layout-grid principles-grid">
|
||
{WORKFLOW_ITEMS.map((step) => (
|
||
<div key={step.number} className="card principles-card">
|
||
<div
|
||
style={{
|
||
fontSize: "3rem",
|
||
fontWeight: 700,
|
||
lineHeight: 1,
|
||
color: "var(--core--colors--neutral--400)",
|
||
}}
|
||
>
|
||
{step.number}
|
||
</div>
|
||
<div>
|
||
<div className="subtitle" style={{ fontSize: "0.75rem" }}>
|
||
{step.name}
|
||
</div>
|
||
<h3 className="display-4">{step.title}</h3>
|
||
<div className="mg-top-5x-extra-small">
|
||
<p>{step.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>
|
||
)
|
||
}
|