テスティモニアルグリッド

1import Image from "next/image";
2
3// acsim.appスタイル: 深いダーク背景、白テキスト、広いletter-spacing、コーナードット、subtle border
4export function TestimonialGrid001() {
5  const testimonials = [
6    {
7      content:
8        "This platform has completely transformed how we build products. The speed and quality improvements are remarkable.",
9      author: "Sarah Chen",
10      role: "CEO at TechStart",
11      avatar:
12        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",
13      featured: true,
14    },
15    {
16      content:
17        "The best investment we've made for our design team. Collaboration has never been easier.",
18      author: "Michael Rodriguez",
19      role: "Design Lead at Creative Co",
20      avatar:
21        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
22      featured: false,
23    },
24    {
25      content:
26        "Intuitive, fast, and beautiful. Everything a modern tool should be.",
27      author: "Emily Watson",
28      role: "Product Manager at Scale",
29      avatar:
30        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face",
31      featured: false,
32    },
33    {
34      content:
35        "We've cut our development time in half. The ROI has been incredible.",
36      author: "David Kim",
37      role: "CTO at Innovate Labs",
38      avatar:
39        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
40      featured: false,
41    },
42    {
43      content:
44        "Outstanding support team. They went above and beyond to help us succeed.",
45      author: "Lisa Park",
46      role: "Engineering Manager at Growth Inc",
47      avatar:
48        "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100&h=100&fit=crop&crop=face",
49      featured: false,
50    },
51    {
52      content:
53        "The attention to detail is incredible. Every feature feels thoughtfully designed.",
54      author: "James Wilson",
55      role: "Founder at BuildRight",
56      avatar:
57        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face",
58      featured: false,
59    },
60  ];
61
62  return (
63    <section className="bg-zinc-950 py-24">
64      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
65        {/* Header */}
66        <div className="mx-auto max-w-2xl text-center">
67          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-zinc-500">
68            Testimonials
69          </p>
70          <h2 className="text-3xl font-light tracking-tight text-white sm:text-4xl">
71            Loved by thousands
72          </h2>
73          <p className="mt-4 text-lg tracking-wide text-zinc-400">
74            See what our customers have to say about their experience
75          </p>
76        </div>
77
78        {/* Testimonial Grid */}
79        <div className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
80          {testimonials.map((testimonial, index) => (
81            <div
82              key={index}
83              className={`group relative p-8 ${
84                testimonial.featured
85                  ? "border border-zinc-700 bg-zinc-900/50 md:col-span-2 lg:col-span-1"
86                  : "border border-zinc-800/50 bg-zinc-900/30"
87              }`}
88            >
89              {/* Corner dots */}
90              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
91              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
92              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-zinc-700" />
93              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-zinc-700" />
94
95              {/* Rating */}
96              <div className="flex gap-1">
97                {[...Array(5)].map((_, i) => (
98                  <svg
99                    key={i}
100                    className="h-4 w-4 text-zinc-600"
101                    fill="currentColor"
102                    viewBox="0 0 20 20"
103                  >
104                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
105                  </svg>
106                ))}
107              </div>
108
109              {/* Quote */}
110              <p className="mt-6 text-base leading-relaxed tracking-wide text-zinc-300">
111                &ldquo;{testimonial.content}&rdquo;
112              </p>
113
114              {/* Author */}
115              <div className="mt-8 flex items-center gap-4">
116                <Image
117                  src={testimonial.avatar}
118                  alt={testimonial.author}
119                  width={44}
120                  height={44}
121                  className="rounded-full object-cover grayscale"
122                />
123                <div>
124                  <p className="text-sm font-medium tracking-wide text-white">
125                    {testimonial.author}
126                  </p>
127                  <p className="text-xs tracking-wider text-zinc-500">
128                    {testimonial.role}
129                  </p>
130                </div>
131              </div>
132            </div>
133          ))}
134        </div>
135      </div>
136    </section>
137  );
138}