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

@@ -1,34 +1,82 @@
-import Image from "next/image"
-import { INTEGRATION_ITEMS } from "@/lib/site-content"
+const ECOSYSTEM_ITEMS = [
+  "DAL Code",
+  "DAL CLI",
+  "DAL Office",
+  "API Platform",
+  "Intent Capture",
+  "Mission Mode",
+  "Smart Routing",
+  "Skills Engine",
+  "Context Compression",
+  "Diff Review",
+  "BYOK",
+  "Private Deploy",
+]
 
-const MARQUEE_ROWS = Array.from({ length: 3 }, () => INTEGRATION_ITEMS)
+const MARQUEE_ROWS = [ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS]
 
 export default function IntegrationsSection() {
   return (
     <section className="section-small bg-neutral overflow-hidden">
       <div className="w-layout-blockcontainer container-default w-container">
-        <div data-w-id="ee652702-222a-0ca5-2508-17b1a107582a" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right">
+        <div
+          data-w-id="ee652702-222a-0ca5-2508-17b1a107582a"
+          style={{ opacity: "0", filter: "blur(8px)" }}
+          className="title-left-content-right"
+        >
           <div className="inner-container _400px _100-tablet">
-            <div className="subtitle">Work Surfaces</div>
+            <div className="subtitle">Ecosystem</div>
             <div className="mg-top-4x-extra-small">
-              <h2>一个产品里，接住从需求澄清到工程交付的整条链路</h2>
+              <h2>四条产品线，统一平台底座</h2>
             </div>
           </div>
           <div className="inner-container _400px _100-tablet">
             <p>
-              DAL Code 把 Desktop IDE、Web Workspace、Mobile Review、Mission Planner、RAG、Tools、Diff 审批和企业治理放到同一条体验链上。
+              IDE、终端、文档、API——不同入口共享同一套意图引导、模型路由和工程治理能力。
             </p>
           </div>
         </div>
         <div className="mg-top-regular">
-          <div data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3" style={{ opacity: "0", filter: "blur(8px)" }} className="integrations-marquee-wrapper marquee-hover-stop" {...{ "tr-marquee-speed": "50", "tr-marquee-element": "component", "tr-marquee-scrolldirection": "true", "tr-marquee-scrollscrub": "false" }}>
+          <div
+            data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3"
+            style={{ opacity: "0", filter: "blur(8px)" }}
+            className="integrations-marquee-wrapper marquee-hover-stop"
+            {...{
+              "tr-marquee-speed": "40",
+              "tr-marquee-element": "component",
+              "tr-marquee-scrolldirection": "true",
+              "tr-marquee-scrollscrub": "false",
+            }}
+          >
             {MARQUEE_ROWS.map((items, rowIndex) => (
               <div key={rowIndex} className="integrations-marquee marquee-scroll-item">
-                {items.map((item) => (
-                  <a key={`${rowIndex}-${item.label}`} href="/about" className="integration-marquee-item w-inline-block">
-                    <Image src={item.icon} width={94} height={94} alt={item.label} style={{ filter: "invert(0%)" }} className="integration-marquee-item-image" />
-                    <div style={{ width: "0%", height: "100%" }} className="integration-marquee-item-bg" />
-                  </a>
+                {items.map((label, i) => (
+                  <div
+                    key={`${rowIndex}-${i}`}
+                    className="integration-marquee-item"
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "12px 24px",
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontSize: "0.875rem",
+                        fontWeight: 600,
+                        letterSpacing: "0.04em",
+                        whiteSpace: "nowrap",
+                        color: "var(--font--colors--paragraph)",
+                      }}
+                    >
+                      {label}
+                    </span>
+                    <div
+                      style={{ width: "0%", height: "100%" }}
+                      className="integration-marquee-item-bg"
+                    />
+                  </div>
                 ))}
               </div>
             ))}