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/ProductEcosystem.tsx

@@ -0,0 +1,91 @@
+import Link from "next/link"
+import { PRODUCT_ITEMS } from "@/lib/site-content"
+
+export default function ProductEcosystem() {
+  return (
+    <section className="section overflow-hidden">
+      <div className="w-layout-blockcontainer container-default w-container">
+        <div
+          data-w-id="prod-eco-title"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="text-center"
+        >
+          <div className="subtitle">Product Ecosystem</div>
+          <div className="mg-top-4x-extra-small">
+            <h2>四条产品线，一套方法论</h2>
+          </div>
+          <div className="mg-top-4x-extra-small">
+            <p>
+              IDE、终端、文档、API——不同入口，同一套意图引导和模型路由。登录一次，能力全通。
+            </p>
+          </div>
+        </div>
+        <div className="mg-top-large">
+          <div
+            data-w-id="prod-eco-grid"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="corner-gradient-container"
+          >
+            <div className="border-wrapper">
+              <div
+                className="w-layout-grid"
+                style={{ gridTemplateColumns: "1fr 1fr" }}
+              >
+                {PRODUCT_ITEMS.map((product) => (
+                  <Link
+                    key={product.name}
+                    href={product.href}
+                    className="card principles-card w-inline-block"
+                    style={{ textDecoration: "none" }}
+                  >
+                    <div>
+                      <div className="subtitle" style={{ fontSize: "0.75rem" }}>
+                        {product.name}
+                      </div>
+                      <h3 className="display-4">{product.tagline}</h3>
+                      <div className="mg-top-5x-extra-small">
+                        <p>{product.description}</p>
+                      </div>
+                      <div
+                        className="mg-top-4x-extra-small"
+                        style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}
+                      >
+                        {product.features.map((f) => (
+                          <span
+                            key={f}
+                            style={{
+                              padding: "2px 8px",
+                              fontSize: "0.75rem",
+                              border: "1px solid var(--core--colors--neutral--400)",
+                              borderRadius: "4px",
+                              color: "var(--font--colors--paragraph)",
+                            }}
+                          >
+                            {f}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </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>
+  )
+}