水平グリッドチーム紹介

1function AvatarPlaceholder({ initials }: { initials: string }) {
2  return (
3    <svg
4      viewBox="0 0 200 200"
5      className="h-full w-full"
6      aria-hidden="true"
7    >
8      <rect width="200" height="200" className="fill-muted" />
9      <text
10        x="100"
11        y="108"
12        textAnchor="middle"
13        dominantBaseline="middle"
14        className="fill-muted-foreground/40 text-4xl font-light"
15        style={{ fontSize: "48px" }}
16      >
17        {initials}
18      </text>
19    </svg>
20  );
21}
22
23const members = [
24  {
25    name: "田中 美咲",
26    initials: "TM",
27    role: "CEO & Founder",
28    description:
29      "プロダクト戦略とビジョンを統括。10年以上のスタートアップ経験を持つ。",
30  },
31  {
32    name: "佐藤 健一",
33    initials: "SK",
34    role: "CTO",
35    description:
36      "技術アーキテクチャとエンジニアリング組織を率いる。分散システムの専門家。",
37  },
38  {
39    name: "鈴木 あかり",
40    initials: "SA",
41    role: "Design Lead",
42    description:
43      "デザインシステムとUX戦略を担当。ユーザー中心設計を推進する。",
44  },
45  {
46    name: "山本 大輝",
47    initials: "YD",
48    role: "Engineering",
49    description:
50      "フロントエンドからインフラまで幅広く担当。パフォーマンス最適化が得意領域。",
51  },
52  {
53    name: "中村 由紀",
54    initials: "NY",
55    role: "Product",
56    description:
57      "ユーザーリサーチと機能設計を担当。データドリブンな意思決定を重視する。",
58  },
59];
60
61export function TeamHorizontal001() {
62  return (
63    <section className="bg-background py-28">
64      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
65        {/* ヘッダー */}
66        <div className="mb-16 flex flex-col items-start gap-6 sm:flex-row sm:items-end sm:justify-between">
67          <div>
68            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
69              Our Team
70            </p>
71            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
72              チームを紹介します
73            </h2>
74          </div>
75          <p className="max-w-xs text-sm font-light leading-relaxed text-muted-foreground">
76            多様なバックグラウンドを持つメンバーが、一つのビジョンのもとに集まっています。
77          </p>
78        </div>
79
80        <div className="h-px w-full bg-border/40" />
81
82        {/* メンバーリスト */}
83        <div className="mt-12 grid grid-cols-1 gap-px bg-border/40 sm:grid-cols-2 lg:grid-cols-5">
84          {members.map((member, index) => (
85            <div
86              key={member.name}
87              className="group flex flex-col bg-background p-6"
88            >
89              {/* 番号 */}
90              <p className="text-[10px] tabular-nums tracking-[0.2em] text-muted-foreground/40">
91                {String(index + 1).padStart(2, "0")}
92              </p>
93
94              {/* アバター */}
95              <div className="mt-5 h-16 w-16 overflow-hidden rounded-full border border-border transition-colors duration-300 group-hover:border-foreground/30">
96                <AvatarPlaceholder initials={member.initials} />
97              </div>
98
99              {/* 情報 */}
100              <p className="mt-5 text-sm font-medium tracking-wide text-foreground">
101                {member.name}
102              </p>
103              <p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
104                {member.role}
105              </p>
106
107              {/* 説明 */}
108              <p className="mt-4 text-xs font-light leading-relaxed text-muted-foreground/70">
109                {member.description}
110              </p>
111            </div>
112          ))}
113        </div>
114
115        {/* フッター */}
116        <div className="mt-14 flex items-center justify-between">
117          <div className="flex items-center gap-3">
118            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
119            <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
120              {members.length} members
121            </p>
122          </div>
123          <a
124            href="#"
125            className="group inline-flex items-center gap-2 text-xs tracking-[0.15em] text-muted-foreground transition-colors hover:text-foreground"
126          >
127            採用情報を見る
128            <svg
129              className="h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
130              fill="none"
131              stroke="currentColor"
132              viewBox="0 0 24 24"
133            >
134              <path
135                strokeLinecap="round"
136                strokeLinejoin="round"
137                strokeWidth={1.5}
138                d="M17 8l4 4m0 0l-4 4m4-4H3"
139              />
140            </svg>
141          </a>
142        </div>
143      </div>
144    </section>
145  );
146}