スプリットチーム紹介

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-muted-foreground/40" />
6    </div>
7  );
8}
9
10// メンバーデータ
11const members = [
12  {
13    name: "田中 美咲",
14    role: "CEO & Co-Founder",
15    description:
16      "10年以上のプロダクト開発経験を持ち、テクノロジーとデザインの融合を追求。",
17    initials: "TM",
18  },
19  {
20    name: "佐藤 健一",
21    role: "CTO",
22    description:
23      "分散システムとクラウドアーキテクチャの専門家。オープンソースコミュニティに貢献。",
24    initials: "SK",
25  },
26  {
27    name: "鈴木 彩花",
28    role: "Head of Design",
29    description:
30      "ユーザー中心設計のスペシャリスト。アクセシビリティを重視したデザインシステムを構築。",
31    initials: "SA",
32  },
33  {
34    name: "山田 翔太",
35    role: "Lead Engineer",
36    description:
37      "フルスタックエンジニアとして複数のスタートアップで成長を牽引してきた経験を持つ。",
38    initials: "YS",
39  },
40];
41
42export function TeamSplit001() {
43  return (
44    <section className="relative bg-background py-28">
45      {/* コーナードット装飾 */}
46      <CornerDots className="left-6 top-6" />
47      <CornerDots className="right-6 top-6" />
48      <CornerDots className="bottom-6 left-6" />
49      <CornerDots className="bottom-6 right-6" />
50
51      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
52        {/* ヘッダー部分：左右分割 */}
53        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-20">
54          {/* 左：タイトル */}
55          <div>
56            <div className="flex items-center gap-4">
57              <div className="h-px w-8 bg-border/40" />
58              <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
59                Our Team
60              </p>
61            </div>
62            <h2 className="mt-6 text-3xl font-medium tracking-wide text-foreground sm:text-4xl">
63              ビジョンを共有する
64              <br />
65              チーム
66            </h2>
67          </div>
68
69          {/* 右：説明文 */}
70          <div className="flex items-end">
71            <p className="text-sm font-light leading-relaxed text-muted-foreground lg:max-w-sm">
72              多様なバックグラウンドを持つメンバーが集まり、
73              テクノロジーの力で社会に新しい価値を届けることを目指しています。
74              一人ひとりの専門性が、プロダクトの品質を支えています。
75            </p>
76          </div>
77        </div>
78
79        {/* 区切り線 */}
80        <div className="my-16 h-px bg-border/40" />
81
82        {/* メンバーリスト */}
83        <div className="grid grid-cols-1 gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-2">
84          {members.map((member) => (
85            <div
86              key={member.name}
87              className="group relative bg-background p-8 transition-colors duration-300 hover:bg-muted/30 sm:p-10"
88            >
89              {/* 番号とイニシャル */}
90              <div className="flex items-start justify-between">
91                <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border text-foreground/60 transition-colors duration-300 group-hover:border-foreground/20 group-hover:text-foreground">
92                  <span className="text-xs font-medium tracking-wider">
93                    {member.initials}
94                  </span>
95                </div>
96                <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
97              </div>
98
99              {/* メンバー情報 */}
100              <div className="mt-6">
101                <h3 className="text-base font-medium tracking-wide text-foreground">
102                  {member.name}
103                </h3>
104                <p className="mt-1.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
105                  {member.role}
106                </p>
107              </div>
108
109              {/* 説明 */}
110              <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
111                {member.description}
112              </p>
113
114              {/* 区切り装飾 */}
115              <div className="mt-6 flex items-center gap-3">
116                <div className="h-px w-6 bg-border/40" />
117                <div className="h-1 w-1 rounded-full bg-foreground/10" />
118              </div>
119            </div>
120          ))}
121        </div>
122
123        {/* フッター */}
124        <div className="mt-12 flex flex-col items-center justify-between gap-4 sm:flex-row">
125          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
126            {members.length}名のコアメンバー
127          </p>
128          <p className="text-sm tracking-wide text-muted-foreground">
129            仲間を募集しています。{" "}
130            <a
131              href="#"
132              className="text-foreground underline underline-offset-4 transition-colors hover:text-muted-foreground"
133            >
134              採用情報を見る
135            </a>
136          </p>
137        </div>
138      </div>
139    </section>
140  );
141}