restructure: move files from qczl-website subfolder to root

src/components/sections/team.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react"
+
+const team = [
+  {
+    name: "吴彧博",
+    handle: "@wuyubo",
+    role: "技术经理",
+    bio: "统筹技术架构与团队管理，把控项目质量与交付节奏。全栈背景，擅长系统设计与技术决策。",
+    skills: ["Go", "Rust", "K8s"],
+    color: "#10b981",
+  },
+  {
+    name: "郝咏",
+    handle: "@haoyong",
+    role: "前端负责人",
+    bio: "专注跨平台前端开发，React Native 与 Taro 专家。追求极致的用户体验与性能优化。",
+    skills: ["React Native", "Taro", "TypeScript"],
+    color: "#3b82f6",
+  },
+  {
+    name: "吴翔宇",
+    handle: "@wuxiangyu",
+    role: "后端负责人",
+    bio: "高并发系统架构师，Go 语言专家。负责服务端架构设计与数据库优化，保障系统稳定。",
+    skills: ["Go", "PostgreSQL", "Redis"],
+    color: "#f97316",
+  },
+  {
+    name: "韩惠子",
+    handle: "@hanhuizi",
+    role: "产品经理",
+    bio: "负责产品规划与需求分析，连接技术与业务。善于将复杂需求转化为清晰的产品方案。",
+    skills: ["Figma", "Product", "Data"],
+    color: "#a855f7",
+  },
+]
+
+export function Team() {
+  const [active, setActive] = useState(0)
+
+  return (
+    <section id="team" className="py-32 relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-accent/[0.02] to-transparent" />
+
+      <div className="max-w-6xl mx-auto px-6 relative">
+        {/* Section header */}
+        <div className="mb-20">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px w-8 bg-accent/50" />
+            <span className="text-[11px] text-accent font-medium tracking-widest uppercase">the team</span>
+          </div>
+          <h2 className="text-4xl sm:text-5xl font-bold text-foreground mb-6 tracking-tight">
+            核心成员
+          </h2>
+          <p className="text-base text-muted-foreground leading-relaxed max-w-2xl">
+            哈工大背景的技术团队，小而精，每个人都是各自领域的专家。
+          </p>
+        </div>
+
+        {/* Horizontal expanding cards */}
+        <div className="flex flex-col lg:flex-row gap-3 min-h-[420px]">
+          {team.map((member, index) => {
+            const isActive = active === index
+
+            return (
+              <div
+                key={member.name}
+                className="group relative cursor-pointer overflow-hidden"
+                style={{
+                  flex: isActive ? 3 : 1,
+                  transition: "flex 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+                }}
+                onMouseEnter={() => setActive(index)}
+              >
+                <div
+                  className={`h-full rounded-2xl border transition-all duration-500 flex flex-col justify-between p-6 min-w-0 ${
+                    isActive
+                      ? "border-border/40 bg-foreground/[0.02]"
+                      : "border-border/20 hover:border-border/30"
+                  }`}
+                >
+                  {/* Background glow */}
+                  <div
+                    className={`absolute inset-0 pointer-events-none transition-opacity duration-500 ${isActive ? "opacity-100" : "opacity-0"}`}
+                    style={{
+                      background: `radial-gradient(ellipse at 80% 100%, ${member.color}08, transparent 60%)`,
+                    }}
+                  />
+
+                  <div className="relative">
+                    {/* Name & role */}
+                    <div className="mb-4">
+                      <h3 className="text-lg font-bold text-foreground tracking-tight mb-1">
+                        {member.name}
+                      </h3>
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="text-[11px] text-muted-foreground font-mono truncate">{member.handle}</span>
+                        <span
+                          className="px-2 py-0.5 text-[9px] font-semibold rounded-full border shrink-0"
+                          style={{
+                            color: member.color,
+                            borderColor: `${member.color}40`,
+                            backgroundColor: `${member.color}10`,
+                          }}
+                        >
+                          {member.role}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Bio - expands on active */}
+                    <p
+                      className={`text-muted-foreground leading-relaxed transition-all duration-500 ${
+                        isActive
+                          ? "text-sm max-w-sm opacity-100"
+                          : "text-[11px] opacity-0 lg:opacity-60 line-clamp-2"
+                      }`}
+                    >
+                      {member.bio}
+                    </p>
+                  </div>
+
+                  {/* Skills */}
+                  <div className="relative flex flex-wrap gap-1.5 mt-4">
+                    {member.skills.map((s) => (
+                      <span
+                        key={s}
+                        className={`font-mono text-muted-foreground border border-border/30 rounded-md transition-all duration-500 ${
+                          isActive ? "px-2.5 py-1 text-[11px]" : "px-2 py-0.5 text-[10px]"
+                        }`}
+                      >
+                        {s}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Bottom accent line */}
+                  <div
+                    className={`absolute bottom-0 left-6 right-6 h-[2px] rounded-full transition-all duration-500 ${isActive ? "opacity-100" : "opacity-0"}`}
+                    style={{ background: `linear-gradient(90deg, transparent, ${member.color}, transparent)` }}
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}