heicode-win/website/components/products.tsx

import { Layers, Terminal } from "lucide-react";

const products = [
  {
    icon: Layers,
    name: "Heicode Manager",
    description:
      "面向代码交付的团队控制台。把需求、实现、验证、发布与回溯串成一条可执行的工程链路。",
    features: ["代码任务编排", "质量门禁", "交付追踪", "审计回溯"],
  },
  {
    icon: Terminal,
    name: "Heicode 客户端",
    description:
      "终端与桌面侧人机编程客户端及本地服务。与 Manager 协同，在统一策略边界下工作，适配个人与团队工作流。",
    features: ["IDE 集成", "本地服务", "会话管理", "安全连接"],
  },
];

export function Products() {
  return (
    <section id="products" className="py-20 sm:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium tracking-widest text-accent uppercase">
            产品矩阵
          </p>
          <h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
            个人与团队通用的交付平台
          </h2>
          <p className="mt-4 text-muted-foreground">
            无论规模如何，Manager 与客户端共同服务于统一的交付故事线
          </p>
        </div>

        <div className="mt-16 grid gap-8 md:grid-cols-2">
          {products.map((product) => (
            <div
              key={product.name}
              className="group relative rounded-xl border border-border bg-card/50 p-8 transition-colors hover:border-accent/50 hover:bg-card"
            >
              <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-lg bg-secondary">
                <product.icon className="h-6 w-6 text-accent" />
              </div>
              
              <h3 className="text-xl font-semibold">{product.name}</h3>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                {product.description}
              </p>

              <div className="mt-6 flex flex-wrap gap-2">
                {product.features.map((feature) => (
                  <span
                    key={feature}
                    className="rounded-full bg-secondary px-3 py-1 text-xs text-muted-foreground"
                  >
                    {feature}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}