タイムライン型チーム紹介

1export function TeamTimeline001() {
2  const members = [
3    {
4      name: "田中 美咲",
5      role: "CEO / 共同創業者",
6      year: "2020",
7      description:
8        "事業構想とプロダクト戦略を統括。10年以上のスタートアップ経験を持つ。",
9      initials: "MT",
10    },
11    {
12      name: "佐藤 健一",
13      role: "CTO / 共同創業者",
14      year: "2020",
15      description:
16        "技術基盤の設計とエンジニアリング組織を牽引。分散システムの専門家。",
17      initials: "KS",
18    },
19    {
20      name: "鈴木 あかり",
21      role: "デザインリード",
22      year: "2021",
23      description:
24        "プロダクトのUI/UXデザインを担当。ユーザー中心設計のアプローチを推進。",
25      initials: "AS",
26    },
27    {
28      name: "山本 拓也",
29      role: "エンジニアリングマネージャー",
30      year: "2022",
31      description:
32        "バックエンド開発チームを率いる。大規模システムの運用経験が豊富。",
33      initials: "TY",
34    },
35    {
36      name: "中村 優子",
37      role: "プロダクトマネージャー",
38      year: "2023",
39      description:
40        "ユーザーリサーチとプロダクトロードマップの策定を推進。",
41      initials: "YN",
42    },
43  ];
44
45  return (
46    <section className="relative bg-background py-28">
47      {/* コーナードット装飾 */}
48      <div className="absolute left-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/15" />
49      <div className="absolute right-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/15" />
50      <div className="absolute bottom-6 left-6 h-1.5 w-1.5 rounded-full bg-foreground/15" />
51      <div className="absolute bottom-6 right-6 h-1.5 w-1.5 rounded-full bg-foreground/15" />
52
53      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
54        {/* ヘッダー */}
55        <div className="mb-20 text-center">
56          <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
57            Our Team
58          </p>
59          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
60            チームの歩み
61          </h2>
62          <div className="mx-auto mt-6 h-px w-12 bg-foreground/20" />
63        </div>
64
65        {/* タイムライン */}
66        <div className="relative">
67          {/* 中央線 */}
68          <div className="absolute left-6 top-0 bottom-0 w-px bg-border/40 sm:left-1/2 sm:-translate-x-px" />
69
70          <div className="space-y-12">
71            {members.map((member, index) => {
72              const isLeft = index % 2 === 0;
73
74              return (
75                <div key={member.name} className="relative">
76                  {/* タイムラインドット */}
77                  <div className="absolute left-6 z-10 -translate-x-1/2 sm:left-1/2">
78                    <div className="flex h-3 w-3 items-center justify-center rounded-full border border-border bg-background">
79                      <div className="h-1 w-1 rounded-full bg-foreground/40" />
80                    </div>
81                  </div>
82
83                  {/* カード */}
84                  <div
85                    className={`ml-14 sm:ml-0 sm:w-[calc(50%-2rem)] ${
86                      isLeft
87                        ? "sm:mr-auto sm:pr-0"
88                        : "sm:ml-auto sm:pl-0"
89                    }`}
90                  >
91                    <div className="group">
92                      {/* 年ラベル */}
93                      <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
94                        {member.year}
95                      </p>
96
97                      <div className="mt-4 flex items-start gap-5">
98                        {/* アバタープレースホルダー */}
99                        <div className="flex h-12 w-12 shrink-0 items-center justify-center border border-border bg-muted/30 transition-colors group-hover:border-foreground/20">
100                          <span className="text-[10px] font-medium uppercase tracking-[0.15em] text-muted-foreground">
101                            {member.initials}
102                          </span>
103                        </div>
104
105                        <div className="min-w-0">
106                          <h3 className="text-sm font-medium tracking-wide text-foreground">
107                            {member.name}
108                          </h3>
109                          <p className="mt-0.5 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
110                            {member.role}
111                          </p>
112                          <p className="mt-3 text-sm font-light leading-relaxed text-foreground/60">
113                            {member.description}
114                          </p>
115                        </div>
116                      </div>
117                    </div>
118                  </div>
119                </div>
120              );
121            })}
122          </div>
123        </div>
124
125        {/* フッター */}
126        <div className="mt-20 border-t border-border/40 pt-10 text-center">
127          <p className="text-sm font-light tracking-wide text-muted-foreground">
128            私たちと一緒に働きませんか？
129          </p>
130          <a
131            href="#"
132            className="mt-4 inline-flex items-center gap-2 border border-border px-6 py-3 text-[10px] font-medium uppercase tracking-[0.2em] text-foreground/60 transition-colors hover:border-foreground/30 hover:text-foreground"
133          >
134            採用情報を見る
135            <svg
136              className="h-3 w-3"
137              fill="none"
138              viewBox="0 0 24 24"
139              stroke="currentColor"
140              strokeWidth={1.5}
141            >
142              <path
143                strokeLinecap="round"
144                strokeLinejoin="round"
145                d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
146              />
147            </svg>
148          </a>
149        </div>
150      </div>
151    </section>
152  );
153}