dalcode-website/components/home/ProductEcosystem.tsx

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>
  )
}