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

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