ミニマルチーム

1import Image from "next/image";
2
3// コーナードット装飾コンポーネント
4function CornerDots({ className = "" }: { className?: string }) {
5  return (
6    <div className={`absolute h-3 w-3 ${className}`}>
7      <div className="absolute left-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
8      <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
9      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
10      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
11    </div>
12  );
13}
14
15export function TeamMinimal001() {
16  const team = [
17    {
18      name: "Sarah Chen",
19      role: "CEO",
20      image:
21        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=face",
22    },
23    {
24      name: "Michael Rodriguez",
25      role: "CTO",
26      image:
27        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
28    },
29    {
30      name: "Emily Watson",
31      role: "Design Lead",
32      image:
33        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face",
34    },
35    {
36      name: "David Kim",
37      role: "Engineering",
38      image:
39        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face",
40    },
41    {
42      name: "Lisa Park",
43      role: "Product",
44      image:
45        "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=face",
46    },
47    {
48      name: "James Wilson",
49      role: "Operations",
50      image:
51        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=face",
52    },
53  ];
54
55  return (
56    <section className="relative bg-background py-24">
57      {/* コーナードット装飾 */}
58      <CornerDots className="left-6 top-6" />
59      <CornerDots className="right-6 top-6" />
60      <CornerDots className="bottom-6 left-6" />
61      <CornerDots className="bottom-6 right-6" />
62
63      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
64        {/* ヘッダー */}
65        <div className="text-center">
66          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
67            Team
68          </p>
69          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
70            The people behind
71          </h2>
72        </div>
73
74        {/* チームグリッド */}
75        <div className="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-6">
76          {team.map((member) => (
77            <div key={member.name} className="group text-center">
78              {/* アバター */}
79              <div className="relative mx-auto h-20 w-20 overflow-hidden rounded-full border border-border transition-all group-hover:border-muted-foreground/60">
80                <Image
81                  src={member.image}
82                  alt={member.name}
83                  fill
84                  className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
85                />
86              </div>
87
88              {/* 情報 */}
89              <p className="mt-4 text-sm font-medium tracking-wide text-foreground">
90                {member.name}
91              </p>
92              <p className="mt-1 text-xs uppercase tracking-[0.15em] text-muted-foreground">
93                {member.role}
94              </p>
95            </div>
96          ))}
97        </div>
98
99        {/* フッターテキスト */}
100        <div className="mt-16 border-t border-border pt-8 text-center">
101          <p className="text-sm tracking-wide text-muted-foreground">
102            We&apos;re always looking for talented individuals.{" "}
103            <a
104              href="#"
105              className="text-foreground underline underline-offset-4 transition-colors hover:text-muted-foreground"
106            >
107              Join us
108            </a>
109          </p>
110        </div>
111      </div>
112    </section>
113  );
114}