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

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