カルーセルテスティモニアル

1// acsim.appスタイル: 深いダーク背景、白テキスト、広いletter-spacing、コーナードット、subtle border
2export function TestimonialCarousel001() {
3  const testimonials = [
4    {
5      content:
6        "This product has completely transformed how our team works. The intuitive interface and powerful features have increased our productivity by 40%.",
7      author: "Sarah Chen",
8      role: "CEO at TechStart",
9      avatar: "S",
10    },
11    {
12      content:
13        "I've tried many similar tools, but nothing comes close to this. The attention to detail and user experience is unmatched.",
14      author: "Michael Rodriguez",
15      role: "Product Designer at Creative Co",
16      avatar: "M",
17    },
18    {
19      content:
20        "Outstanding support and continuous improvements. They actually listen to customer feedback and implement it quickly.",
21      author: "Emily Watson",
22      role: "Engineering Lead at DevFlow",
23      avatar: "E",
24    },
25  ];
26
27  return (
28    <section className="bg-zinc-950 py-24">
29      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
30        {/* ヘッダー */}
31        <div className="mb-16 text-center">
32          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-zinc-500">
33            What people say
34          </p>
35          <h2 className="mb-4 text-3xl font-light tracking-tight text-white sm:text-4xl">
36            Loved by developers
37          </h2>
38          <p className="mx-auto max-w-2xl text-lg tracking-wide text-zinc-400">
39            Join thousands of satisfied customers who have transformed their
40            workflow.
41          </p>
42        </div>
43
44        {/* テスティモニアルグリッド */}
45        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
46          {testimonials.map((testimonial, index) => (
47            <div
48              key={index}
49              className="group relative border border-zinc-800/50 bg-zinc-900/30 p-8"
50            >
51              {/* Corner dots */}
52              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
53              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-zinc-700" />
54              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-zinc-700" />
55              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-zinc-700" />
56
57              {/* 引用符 */}
58              <div className="mb-6 flex h-8 w-8 items-center justify-center border border-zinc-800 text-zinc-600">
59                <svg
60                  className="h-4 w-4"
61                  fill="currentColor"
62                  viewBox="0 0 24 24"
63                >
64                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
65                </svg>
66              </div>
67
68              {/* コンテンツ */}
69              <p className="mb-8 text-base leading-relaxed tracking-wide text-zinc-300">
70                {testimonial.content}
71              </p>
72
73              {/* 著者 */}
74              <div className="flex items-center gap-3">
75                <div className="flex h-10 w-10 items-center justify-center border border-zinc-700 bg-zinc-800 text-sm font-medium tracking-wider text-zinc-300">
76                  {testimonial.avatar}
77                </div>
78                <div>
79                  <p className="text-sm font-medium tracking-wide text-white">
80                    {testimonial.author}
81                  </p>
82                  <p className="text-xs tracking-wider text-zinc-500">
83                    {testimonial.role}
84                  </p>
85                </div>
86              </div>
87            </div>
88          ))}
89        </div>
90
91        {/* 評価バッジ */}
92        <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row sm:gap-8">
93          <div className="flex items-center gap-1">
94            {[...Array(5)].map((_, i) => (
95              <svg
96                key={i}
97                className="h-4 w-4 text-zinc-600"
98                fill="currentColor"
99                viewBox="0 0 20 20"
100              >
101                <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" />
102              </svg>
103            ))}
104          </div>
105          <p className="text-sm tracking-wide text-zinc-500">
106            4.9/5 average rating from 2,000+ reviews
107          </p>
108        </div>
109      </div>
110    </section>
111  );
112}