チームリスト

1import Image from "next/image";
2import Link from "next/link";
3
4// コーナードット装飾コンポーネント
5function CornerDots({ className = "" }: { className?: string }) {
6  return (
7    <div className={`absolute h-3 w-3 ${className}`}>
8      <div className="absolute left-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
9      <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
10      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
11      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
12    </div>
13  );
14}
15
16export function TeamList001() {
17  const team = [
18    {
19      name: "Sarah Chen",
20      role: "CEO & Co-founder",
21      bio: "Former VP at Google with 15+ years leading tech teams. Passionate about building products that matter.",
22      image:
23        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=face",
24      links: { twitter: "#", linkedin: "#" },
25    },
26    {
27      name: "Michael Rodriguez",
28      role: "CTO & Co-founder",
29      bio: "Ex-Amazon principal engineer with a deep love for open source. Built systems serving millions.",
30      image:
31        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
32      links: { twitter: "#", linkedin: "#" },
33    },
34    {
35      name: "Emily Watson",
36      role: "Head of Design",
37      bio: "Award-winning designer from Figma. Believes design should be invisible yet impactful.",
38      image:
39        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face",
40      links: { twitter: "#", linkedin: "#" },
41    },
42    {
43      name: "David Kim",
44      role: "Head of Engineering",
45      bio: "Built and scaled systems at Netflix. Obsessed with performance and developer experience.",
46      image:
47        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face",
48      links: { twitter: "#", linkedin: "#" },
49    },
50  ];
51
52  return (
53    <section className="relative bg-background py-24">
54      {/* コーナードット装飾 */}
55      <CornerDots className="left-6 top-6" />
56      <CornerDots className="right-6 top-6" />
57      <CornerDots className="bottom-6 left-6" />
58      <CornerDots className="bottom-6 right-6" />
59
60      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
61        {/* ヘッダー */}
62        <div className="border-b border-border pb-8">
63          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
64            Leadership
65          </p>
66          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
67            Our Team
68          </h2>
69          <p className="mt-4 max-w-xl text-base tracking-wide text-muted-foreground">
70            A small team of dedicated professionals building the future of
71            technology.
72          </p>
73        </div>
74
75        {/* チームリスト */}
76        <div className="divide-y divide-border">
77          {team.map((member, index) => (
78            <div
79              key={member.name}
80              className="group flex flex-col gap-6 py-8 sm:flex-row sm:items-start"
81            >
82              {/* 番号 */}
83              <div className="hidden w-12 shrink-0 sm:block">
84                <span className="text-xs font-medium tracking-wider text-muted-foreground/60">
85                  {String(index + 1).padStart(2, "0")}
86                </span>
87              </div>
88
89              {/* アバター */}
90              <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-full border border-border transition-all group-hover:border-muted-foreground/60">
91                <Image
92                  src={member.image}
93                  alt={member.name}
94                  fill
95                  className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
96                />
97              </div>
98
99              {/* 情報 */}
100              <div className="flex-1">
101                <div className="flex items-center justify-between">
102                  <div>
103                    <h3 className="text-lg font-medium tracking-wide text-foreground">
104                      {member.name}
105                    </h3>
106                    <p className="mt-1 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
107                      {member.role}
108                    </p>
109                  </div>
110
111                  {/* ソーシャルリンク */}
112                  <div className="flex gap-3">
113                    <Link
114                      href={member.links.twitter}
115                      className="text-muted-foreground/60 transition-colors hover:text-foreground"
116                    >
117                      <svg
118                        className="h-4 w-4"
119                        fill="currentColor"
120                        viewBox="0 0 24 24"
121                      >
122                        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
123                      </svg>
124                    </Link>
125                    <Link
126                      href={member.links.linkedin}
127                      className="text-muted-foreground/60 transition-colors hover:text-foreground"
128                    >
129                      <svg
130                        className="h-4 w-4"
131                        fill="currentColor"
132                        viewBox="0 0 24 24"
133                      >
134                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
135                      </svg>
136                    </Link>
137                  </div>
138                </div>
139
140                <p className="mt-4 text-sm leading-relaxed tracking-wide text-muted-foreground">
141                  {member.bio}
142                </p>
143              </div>
144            </div>
145          ))}
146        </div>
147      </div>
148    </section>
149  );
150}