ショーケース型チーム紹介

1// ショーケース型チーム紹介セクション
2function CornerDots({ className = "" }: { className?: string }) {
3  return (
4    <div className={`absolute h-3 w-3 ${className}`}>
5      <div className="absolute left-0 top-0 h-1.5 w-1.5 rounded-full bg-foreground/20" />
6      <div className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-foreground/20" />
7      <div className="absolute bottom-0 left-0 h-1.5 w-1.5 rounded-full bg-foreground/20" />
8      <div className="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-foreground/20" />
9    </div>
10  );
11}
12
13// SVGアバタープレースホルダー
14function AvatarPlaceholder({ initials }: { initials: string }) {
15  return (
16    <div className="flex h-full w-full items-center justify-center bg-muted">
17      <span className="text-lg font-medium tracking-wider text-muted-foreground/60">
18        {initials}
19      </span>
20    </div>
21  );
22}
23
24export function TeamShowcase001() {
25  const members = [
26    {
27      name: "佐藤 美咲",
28      role: "CEO / 共同創業者",
29      initials: "MS",
30      bio: "10年以上のプロダクト開発経験を持ち、ユーザー体験を軸にしたビジョンでチームを牽引。",
31    },
32    {
33      name: "田中 健太",
34      role: "CTO / 共同創業者",
35      initials: "KT",
36      bio: "分散システムとクラウドアーキテクチャのスペシャリスト。スケーラブルな基盤設計を担当。",
37    },
38    {
39      name: "山本 理恵",
40      role: "デザインリード",
41      initials: "RY",
42      bio: "ブランドからプロダクトまで一貫したデザインシステムの構築を推進。",
43    },
44    {
45      name: "鈴木 大輝",
46      role: "エンジニアリング",
47      initials: "DS",
48      bio: "フロントエンドからインフラまで幅広い技術領域をカバーするフルスタックエンジニア。",
49    },
50    {
51      name: "中村 あかり",
52      role: "プロダクト",
53      initials: "AN",
54      bio: "データドリブンなアプローチでプロダクトの成長戦略を設計・実行。",
55    },
56    {
57      name: "高橋 翔太",
58      role: "マーケティング",
59      initials: "ST",
60      bio: "コンテンツとコミュニティを軸に、ブランドの認知拡大と信頼構築を推進。",
61    },
62  ];
63
64  return (
65    <section className="relative bg-background py-28">
66      <CornerDots className="left-6 top-6" />
67      <CornerDots className="right-6 top-6" />
68
69      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
70        {/* ヘッダー */}
71        <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between">
72          <div>
73            <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
74              Team
75            </p>
76            <h2 className="mt-3 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
77              私たちのチーム
78            </h2>
79          </div>
80          <p className="max-w-sm text-sm font-light leading-relaxed text-muted-foreground">
81            多様なバックグラウンドを持つメンバーが、
82            ひとつのビジョンに向かって協働しています。
83          </p>
84        </div>
85
86        {/* 区切り線 */}
87        <div className="mt-10 h-px bg-border/40" />
88
89        {/* メンバーグリッド */}
90        <div className="mt-14 grid grid-cols-1 gap-px bg-border/40 sm:grid-cols-2 lg:grid-cols-3">
91          {members.map((member, index) => (
92            <div
93              key={member.name}
94              className="group relative bg-background p-8"
95            >
96              {/* 番号 */}
97              <span className="text-[10px] font-light tracking-[0.2em] text-muted-foreground/40">
98                {String(index + 1).padStart(2, "0")}
99              </span>
100
101              {/* アバター */}
102              <div className="mt-5 h-14 w-14 overflow-hidden rounded-full border border-border transition-colors duration-300 group-hover:border-foreground/30">
103                <AvatarPlaceholder initials={member.initials} />
104              </div>
105
106              {/* 情報 */}
107              <h3 className="mt-5 text-sm font-medium tracking-wide text-foreground">
108                {member.name}
109              </h3>
110              <p className="mt-1 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
111                {member.role}
112              </p>
113
114              {/* バイオ */}
115              <p className="mt-4 text-xs font-light leading-relaxed text-foreground/50">
116                {member.bio}
117              </p>
118            </div>
119          ))}
120        </div>
121
122        {/* フッター */}
123        <div className="mt-14 h-px bg-border/40" />
124        <div className="mt-8 text-center">
125          <p className="text-xs font-light tracking-wide text-muted-foreground">
126            一緒に働きませんか？{" "}
127            <a
128              href="#"
129              className="text-foreground underline underline-offset-4 transition-colors duration-200 hover:text-muted-foreground"
130            >
131              採用情報を見る
132            </a>
133          </p>
134        </div>
135      </div>
136
137      <CornerDots className="bottom-6 left-6" />
138      <CornerDots className="bottom-6 right-6" />
139    </section>
140  );
141}