チームグリッド

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 TeamGrid001() {
17  const team = [
18    {
19      name: "Sarah Chen",
20      role: "CEO & Co-founder",
21      image:
22        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=face",
23      bio: "Former VP at Google. 15+ years in tech.",
24    },
25    {
26      name: "Michael Rodriguez",
27      role: "CTO & Co-founder",
28      image:
29        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
30      bio: "Ex-Amazon principal engineer. Open source advocate.",
31    },
32    {
33      name: "Emily Watson",
34      role: "Head of Design",
35      image:
36        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face",
37      bio: "Award-winning designer. Previously at Figma.",
38    },
39    {
40      name: "David Kim",
41      role: "Head of Engineering",
42      image:
43        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face",
44      bio: "Built systems at scale for Netflix.",
45    },
46  ];
47
48  return (
49    <section className="relative bg-zinc-950 py-24">
50      {/* コーナードット装飾 */}
51      <CornerDots className="left-6 top-6" />
52      <CornerDots className="right-6 top-6" />
53      <CornerDots className="bottom-6 left-6" />
54      <CornerDots className="bottom-6 right-6" />
55
56      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
57        {/* ヘッダー */}
58        <div className="mx-auto max-w-2xl text-center">
59          <p className="text-xs font-medium uppercase tracking-[0.3em] text-zinc-500">
60            The People
61          </p>
62          <h2 className="mt-4 text-3xl font-light tracking-wide text-white sm:text-4xl">
63            Meet our team
64          </h2>
65          <p className="mt-4 text-base tracking-wide text-zinc-400">
66            We&apos;re a passionate group of people working together to build
67            something amazing.
68          </p>
69        </div>
70
71        {/* チームグリッド */}
72        <div className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
73          {team.map((member) => (
74            <div
75              key={member.name}
76              className="group relative border border-zinc-800 bg-zinc-900/30 p-6 transition-all hover:border-zinc-700 hover:bg-zinc-900/50"
77            >
78              {/* コーナードット */}
79              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
80              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
81              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-zinc-700" />
82              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-zinc-700" />
83
84              {/* アバター */}
85              <div className="relative mx-auto h-28 w-28 overflow-hidden rounded-full border border-zinc-800">
86                <Image
87                  src={member.image}
88                  alt={member.name}
89                  fill
90                  className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
91                />
92              </div>
93
94              {/* 情報 */}
95              <div className="mt-6 text-center">
96                <h3 className="text-base font-medium tracking-wide text-white">
97                  {member.name}
98                </h3>
99                <p className="mt-1 text-xs font-medium uppercase tracking-[0.2em] text-zinc-500">
100                  {member.role}
101                </p>
102                <p className="mt-3 text-sm leading-relaxed tracking-wide text-zinc-400">
103                  {member.bio}
104                </p>
105              </div>
106
107              {/* ソーシャルリンク */}
108              <div className="mt-5 flex justify-center gap-3">
109                <Link
110                  href="#"
111                  className="text-zinc-600 transition-colors hover:text-white"
112                >
113                  <svg
114                    className="h-4 w-4"
115                    fill="currentColor"
116                    viewBox="0 0 24 24"
117                  >
118                    <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" />
119                  </svg>
120                </Link>
121                <Link
122                  href="#"
123                  className="text-zinc-600 transition-colors hover:text-white"
124                >
125                  <svg
126                    className="h-4 w-4"
127                    fill="currentColor"
128                    viewBox="0 0 24 24"
129                  >
130                    <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" />
131                  </svg>
132                </Link>
133              </div>
134            </div>
135          ))}
136        </div>
137      </div>
138    </section>
139  );
140}