チームカード

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-zinc-600" />
9      <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-zinc-600" />
10      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-zinc-600" />
11      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-zinc-600" />
12    </div>
13  );
14}
15
16export function TeamCards001() {
17  const team = [
18    {
19      name: "Sarah Chen",
20      role: "CEO & Founder",
21      bio: "Sarah brings 15 years of experience in tech leadership. Previously VP at Google.",
22      image:
23        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=face",
24      social: {
25        twitter: "#",
26        linkedin: "#",
27      },
28    },
29    {
30      name: "Michael Rodriguez",
31      role: "CTO",
32      bio: "Michael is an open-source advocate and former principal engineer at Amazon.",
33      image:
34        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
35      social: {
36        twitter: "#",
37        linkedin: "#",
38      },
39    },
40    {
41      name: "Emily Watson",
42      role: "Head of Design",
43      bio: "Emily is an award-winning designer with a passion for accessible design systems.",
44      image:
45        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face",
46      social: {
47        twitter: "#",
48        linkedin: "#",
49      },
50    },
51  ];
52
53  return (
54    <section className="relative bg-zinc-950 py-24">
55      {/* コーナードット装飾 */}
56      <CornerDots className="left-6 top-6" />
57      <CornerDots className="right-6 top-6" />
58      <CornerDots className="bottom-6 left-6" />
59      <CornerDots className="bottom-6 right-6" />
60
61      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
62        {/* ヘッダー */}
63        <div className="mx-auto max-w-2xl text-center">
64          <p className="text-xs font-medium uppercase tracking-[0.3em] text-zinc-500">
65            Our Team
66          </p>
67          <h2 className="mt-4 text-3xl font-light tracking-wide text-white sm:text-4xl">
68            Leadership Team
69          </h2>
70          <p className="mt-4 text-base tracking-wide text-zinc-400">
71            Meet the people driving our mission forward
72          </p>
73        </div>
74
75        {/* チームカード */}
76        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
77          {team.map((member) => (
78            <div
79              key={member.name}
80              className="group relative overflow-hidden border border-zinc-800 bg-zinc-900/50 transition-all hover:border-zinc-700"
81            >
82              {/* コーナードット */}
83              <div className="absolute left-3 top-3 h-1 w-1 rounded-full bg-zinc-700" />
84              <div className="absolute right-3 top-3 h-1 w-1 rounded-full bg-zinc-700" />
85              <div className="absolute bottom-3 left-3 h-1 w-1 rounded-full bg-zinc-700" />
86              <div className="absolute bottom-3 right-3 h-1 w-1 rounded-full bg-zinc-700" />
87
88              {/* 画像 */}
89              <div className="relative aspect-[4/3] overflow-hidden">
90                <Image
91                  src={member.image}
92                  alt={member.name}
93                  fill
94                  className="object-cover grayscale transition-all duration-500 group-hover:grayscale-0"
95                />
96                <div className="absolute inset-0 bg-zinc-950/20" />
97              </div>
98
99              {/* コンテンツ */}
100              <div className="p-6">
101                <h3 className="text-lg font-medium tracking-wide text-white">
102                  {member.name}
103                </h3>
104                <p className="mt-1 text-xs font-medium uppercase tracking-[0.2em] text-zinc-500">
105                  {member.role}
106                </p>
107                <p className="mt-4 text-sm leading-relaxed tracking-wide text-zinc-400">
108                  {member.bio}
109                </p>
110
111                {/* ソーシャルリンク */}
112                <div className="mt-6 flex gap-4">
113                  <Link
114                    href={member.social.twitter}
115                    className="text-zinc-600 transition-colors hover:text-white"
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.social.linkedin}
127                    className="text-zinc-600 transition-colors hover:text-white"
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            </div>
140          ))}
141        </div>
142      </div>
143    </section>
144  );
145}