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>

components/home/WorkflowSteps.tsx

@@ -0,0 +1,75 @@
+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>
+  )
+}