フィーチャードチーム

1export function TeamFeatured001() {
2  const members = [
3    {
4      name: "田中 美咲",
5      role: "CEO & Co-Founder",
6      description:
7        "プロダクト戦略とビジョンを統括。10年以上のスタートアップ経験を持つ。",
8      initial: "M",
9    },
10    {
11      name: "佐藤 健一",
12      role: "CTO",
13      description:
14        "技術基盤とアーキテクチャ設計を担当。大規模システムの構築に精通。",
15      initial: "K",
16    },
17    {
18      name: "鈴木 あかり",
19      role: "Design Lead",
20      description:
21        "ブランドとプロダクトデザインを主導。ユーザー体験の最適化に注力。",
22      initial: "A",
23    },
24    {
25      name: "山田 拓也",
26      role: "Engineering Manager",
27      description:
28        "開発チームのマネジメントとデリバリーを統括。品質と速度の両立を追求。",
29      initial: "T",
30    },
31  ];
32
33  return (
34    <section className="relative bg-background py-28">
35      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
36        {/* ヘッダー */}
37        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
38          <div>
39            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
40              Our Team
41            </p>
42            <h2 className="mt-3 text-3xl font-medium tracking-wide text-foreground sm:text-4xl">
43              私たちのチーム
44            </h2>
45          </div>
46          <p className="max-w-xs text-sm font-light leading-relaxed text-muted-foreground">
47            多様なバックグラウンドを持つメンバーが、一つのビジョンに向かって共創しています。
48          </p>
49        </div>
50
51        {/* 区切り線 */}
52        <div className="mt-10 h-px bg-border/40" />
53
54        {/* メンバーリスト */}
55        <div className="mt-12 grid gap-6 sm:grid-cols-2">
56          {members.map((member, index) => (
57            <div
58              key={member.name}
59              className="group relative border border-border/60 p-6 transition-colors duration-300 hover:border-foreground/20"
60            >
61              {/* 番号 */}
62              <span className="absolute right-6 top-6 text-[10px] tracking-[0.2em] text-muted-foreground/40">
63                {String(index + 1).padStart(2, "0")}
64              </span>
65
66              {/* アバター + 名前 */}
67              <div className="flex items-center gap-4">
68                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-border bg-muted transition-colors duration-300 group-hover:border-foreground/20">
69                  <span className="text-sm font-medium tracking-wider text-foreground">
70                    {member.initial}
71                  </span>
72                </div>
73                <div>
74                  <p className="text-sm font-medium tracking-wide text-foreground">
75                    {member.name}
76                  </p>
77                  <p className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
78                    {member.role}
79                  </p>
80                </div>
81              </div>
82
83              {/* 説明文 */}
84              <p className="mt-5 text-sm font-light leading-relaxed text-muted-foreground">
85                {member.description}
86              </p>
87
88              {/* コーナードット */}
89              <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/10 transition-colors duration-300 group-hover:bg-foreground/20" />
90              <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/10 transition-colors duration-300 group-hover:bg-foreground/20" />
91            </div>
92          ))}
93        </div>
94
95        {/* フッター */}
96        <div className="mt-12 flex items-center justify-between border-t border-border/40 pt-8">
97          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
98            4 members
99          </p>
100          <a
101            href="#"
102            className="group inline-flex items-center gap-2 text-sm font-light tracking-wide text-foreground transition-colors duration-200 hover:text-muted-foreground"
103          >
104            全メンバーを見る
105            <svg
106              className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5"
107              fill="none"
108              stroke="currentColor"
109              viewBox="0 0 24 24"
110            >
111              <path
112                strokeLinecap="round"
113                strokeLinejoin="round"
114                strokeWidth={1.5}
115                d="M17 8l4 4m0 0l-4 4m4-4H3"
116              />
117            </svg>
118          </a>
119        </div>
120      </div>
121    </section>
122  );
123}