ミニマルテスティモニアル

1// acsim.appスタイル: コーナードット、subtle border
2// シンプルで洗練されたミニマルテスティモニアル
3// ダーク/ライトモード両対応
4export function TestimonialMinimal001() {
5  const testimonials = [
6    {
7      content: "Exceptional quality and attention to detail.",
8      author: "David Park",
9      role: "Founder",
10    },
11    {
12      content: "Changed the way we approach design systems.",
13      author: "Maria Santos",
14      role: "Design Director",
15    },
16    {
17      content: "Fast, reliable, and beautifully crafted.",
18      author: "James Liu",
19      role: "Tech Lead",
20    },
21  ];
22
23  return (
24    <section className="bg-background py-24">
25      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
26        {/* Header */}
27        <div className="mb-20 text-center">
28          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
29            Testimonials
30          </p>
31        </div>
32
33        {/* Testimonials */}
34        <div className="space-y-16">
35          {testimonials.map((testimonial, index) => (
36            <div
37              key={index}
38              className="group relative flex flex-col items-center text-center"
39            >
40              {/* Quote */}
41              <p className="max-w-2xl text-2xl font-light leading-relaxed tracking-wide text-foreground/90 md:text-3xl">
42                &ldquo;{testimonial.content}&rdquo;
43              </p>
44
45              {/* Author */}
46              <div className="mt-8 flex items-center gap-3">
47                <span className="h-px w-8 bg-border" />
48                <span className="text-sm tracking-wide text-muted-foreground">
49                  {testimonial.author}
50                </span>
51                <span className="text-muted-foreground/50">/</span>
52                <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
53                  {testimonial.role}
54                </span>
55                <span className="h-px w-8 bg-border" />
56              </div>
57            </div>
58          ))}
59        </div>
60
61        {/* Bottom accent */}
62        <div className="mt-20 flex justify-center">
63          <div className="flex items-center gap-2">
64            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
65            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
66            <div className="h-1 w-1 rounded-full bg-muted-foreground/30" />
67          </div>
68        </div>
69      </div>
70    </section>
71  );
72}