heicode-win/website/components/hero.tsx

import { Button } from "@/components/ui/button";
import { ArrowRight, Play } from "lucide-react";

export function Hero() {
  return (
    <section className="relative overflow-hidden pt-32 pb-20 sm:pt-40 sm:pb-32">
      {/* Background Grid */}
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px]" />
      
      {/* Gradient Glow */}
      <div className="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 h-[500px] w-[800px] bg-accent/5 blur-[120px] rounded-full" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <p className="mb-4 text-sm font-medium tracking-widest text-accent uppercase">
            个人与团队的软件交付智能体平台
          </p>
          
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-balance">
            让交付过程
            <br />
            <span className="text-muted-foreground">可追溯、可复述</span>
          </h1>

          <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground leading-relaxed text-pretty">
            无论是个人开发者还是多人团队，在复杂环境与迭代条件下，让对齐方式、责任边界与可追溯性默认成立。
            智能体承接标准化、可重复的环节，人机分工由个人或组织策略定义。
          </p>

          <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button size="lg" className="gap-2">
              开始使用
              <ArrowRight className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="lg" className="gap-2">
              <Play className="h-4 w-4" />
              观看演示
            </Button>
          </div>
        </div>

        {/* Architecture Diagram Preview */}
        <div className="mx-auto mt-20 max-w-4xl">
          <div className="rounded-xl border border-border bg-card/50 p-8 backdrop-blur-sm">
            <div className="flex flex-col items-center gap-4">
              <div className="w-full max-w-md rounded-lg border border-border bg-secondary/50 px-6 py-4 text-center">
                <p className="text-sm text-muted-foreground">人机入口</p>
                <p className="mt-1 font-medium">官网 · 控制台 · CLI / Desktop</p>
              </div>
              
              <div className="h-8 w-px bg-border" />
              <p className="text-xs text-muted-foreground">同一身份与策略边界</p>
              <div className="h-8 w-px bg-border" />

              <div className="flex w-full max-w-lg items-center justify-center gap-4">
                <div className="flex-1 rounded-lg border border-border bg-secondary/50 px-4 py-3 text-center">
                  <p className="text-sm font-medium">Heicode Manager</p>
                </div>
                <div className="flex h-px w-8 bg-border items-center justify-center">
                  <span className="bg-background px-1 text-xs text-muted-foreground">↔</span>
                </div>
                <div className="flex-1 rounded-lg border border-border bg-secondary/50 px-4 py-3 text-center">
                  <p className="text-sm font-medium">Heicode 客户端</p>
                </div>
              </div>

              <div className="h-8 w-px bg-border" />

              <div className="w-full max-w-md rounded-lg border border-border bg-secondary/50 px-6 py-4 text-center">
                <p className="text-sm text-muted-foreground">资产与环境</p>
                <p className="mt-1 font-medium">仓库 · 流水线 · 运行环境与观测</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}