ベントーチーム紹介

1export function TeamBento001() {
2  const members = [
3    {
4      name: "田中 美咲",
5      role: "CEO & Founder",
6      desc: "プロダクト戦略とビジョンを統括。10年以上のスタートアップ経験。",
7      initials: "MT",
8      span: "col-span-1 row-span-2",
9    },
10    {
11      name: "佐藤 隆太",
12      role: "CTO",
13      desc: "アーキテクチャ設計とエンジニアリング文化の構築をリード。",
14      initials: "RS",
15      span: "col-span-1 row-span-1",
16    },
17    {
18      name: "鈴木 彩花",
19      role: "Head of Design",
20      desc: "デザインシステムとユーザー体験を統括。",
21      initials: "AS",
22      span: "col-span-1 row-span-1",
23    },
24    {
25      name: "山本 健一",
26      role: "Lead Engineer",
27      desc: "フロントエンドからインフラまで、技術基盤を支える。",
28      initials: "KY",
29      span: "col-span-1 row-span-1",
30    },
31    {
32      name: "中村 優子",
33      role: "Head of Growth",
34      desc: "マーケティング戦略とグロース施策を推進。",
35      initials: "YN",
36      span: "col-span-1 row-span-1",
37    },
38  ];
39
40  return (
41    <section className="relative bg-background py-28">
42      <div className="absolute left-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
43      <div className="absolute right-8 top-8 h-1 w-1 rounded-full bg-foreground/20" />
44      <div className="absolute bottom-8 left-8 h-1 w-1 rounded-full bg-foreground/20" />
45      <div className="absolute bottom-8 right-8 h-1 w-1 rounded-full bg-foreground/20" />
46
47      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
48        <div className="mx-auto max-w-2xl text-center">
49          <div className="mx-auto flex items-center justify-center gap-4">
50            <div className="h-px w-8 bg-border/40" />
51            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
52            <div className="h-px w-8 bg-border/40" />
53          </div>
54          <p className="mt-6 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
55            Our Team
56          </p>
57          <h2 className="mt-3 text-3xl font-medium tracking-wide text-foreground sm:text-4xl">
58            チームを紹介します
59          </h2>
60          <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
61            多様な専門性を持つメンバーが、ひとつのビジョンに向かって取り組んでいます。
62          </p>
63        </div>
64
65        <div className="mt-16 grid grid-cols-1 grid-rows-none gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:grid-rows-[auto_auto]">
66          {members.map((member, index) => (
67            <div
68              key={member.name}
69              className={`group relative border border-border bg-muted/20 p-6 transition-all duration-300 hover:border-foreground/20 hover:bg-muted/40 ${
70                index === 0 ? "sm:row-span-2" : ""
71              }`}
72            >
73              <div className="absolute left-2.5 top-2.5 h-1 w-1 rounded-full bg-muted-foreground/20" />
74              <div className="absolute right-2.5 top-2.5 h-1 w-1 rounded-full bg-muted-foreground/20" />
75
76              <div className="flex items-start gap-4">
77                <div className="flex h-10 w-10 shrink-0 items-center justify-center border border-border bg-background text-xs font-medium tracking-wider text-muted-foreground transition-colors duration-300 group-hover:border-foreground/30 group-hover:text-foreground">
78                  {member.initials}
79                </div>
80                <div className="min-w-0">
81                  <h3 className="text-sm font-medium tracking-wide text-foreground">
82                    {member.name}
83                  </h3>
84                  <p className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
85                    {member.role}
86                  </p>
87                </div>
88              </div>
89
90              <div className="mt-4 h-px w-full bg-border/40" />
91
92              <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground/80">
93                {member.desc}
94              </p>
95
96              {index === 0 && (
97                <div className="mt-6 flex gap-3">
98                  <span className="inline-flex items-center border border-border px-2.5 py-1 text-[10px] uppercase tracking-[0.15em] text-muted-foreground/60">
99                    Strategy
100                  </span>
101                  <span className="inline-flex items-center border border-border px-2.5 py-1 text-[10px] uppercase tracking-[0.15em] text-muted-foreground/60">
102                    Vision
103                  </span>
104                </div>
105              )}
106            </div>
107          ))}
108        </div>
109
110        <div className="mt-12 text-center">
111          <p className="text-xs font-light tracking-wide text-muted-foreground/50">
112            全メンバーがリモートファーストで働いています
113          </p>
114        </div>
115      </div>
116    </section>
117  );
118}