テスティモニアルカード

1import Image from "next/image";
2
3// acsim.appスタイル: コーナードット、subtle border
4// カードスタイルのテスティモニアル
5// ダーク/ライトモード両対応
6export function TestimonialCards001() {
7  const testimonials = [
8    {
9      content:
10        "The level of craftsmanship is unmatched. Every interaction feels intentional and polished.",
11      author: "Sophie Anderson",
12      role: "Product Designer",
13      company: "Craft Studio",
14      avatar:
15        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face",
16      rating: 5,
17    },
18    {
19      content:
20        "Finally, a solution that understands the nuances of modern design. Highly recommended.",
21      author: "Thomas Wright",
22      role: "Creative Director",
23      company: "Pixel Perfect",
24      avatar:
25        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
26      rating: 5,
27    },
28    {
29      content:
30        "Streamlined our entire workflow. The ROI speaks for itself.",
31      author: "Rachel Kim",
32      role: "Head of Engineering",
33      company: "Scale Systems",
34      avatar:
35        "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100&h=100&fit=crop&crop=face",
36      rating: 5,
37    },
38    {
39      content:
40        "A game-changer for our team. We shipped faster than ever before.",
41      author: "Marcus Chen",
42      role: "Startup Founder",
43      company: "Velocity",
44      avatar:
45        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
46      rating: 5,
47    },
48  ];
49
50  return (
51    <section className="bg-background py-24">
52      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
53        {/* Header */}
54        <div className="mb-16 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
55          <div>
56            <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
57              Testimonials
58            </p>
59            <h2 className="text-3xl font-light tracking-tight text-foreground">
60              Trusted by industry leaders
61            </h2>
62          </div>
63          <p className="max-w-md text-sm tracking-wide text-muted-foreground">
64            See why teams choose us to build their most ambitious projects.
65          </p>
66        </div>
67
68        {/* Cards Grid */}
69        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
70          {testimonials.map((testimonial, index) => (
71            <div
72              key={index}
73              className="group relative border border-border bg-card/20 p-8 transition-colors hover:border-border/80 hover:bg-card/40"
74            >
75              {/* Corner dots */}
76              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/20 transition-colors group-hover:bg-muted-foreground/30" />
77              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/20 transition-colors group-hover:bg-muted-foreground/30" />
78              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-muted-foreground/20 transition-colors group-hover:bg-muted-foreground/30" />
79              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-muted-foreground/20 transition-colors group-hover:bg-muted-foreground/30" />
80
81              {/* Rating */}
82              <div className="mb-6 flex gap-1">
83                {[...Array(testimonial.rating)].map((_, i) => (
84                  <svg
85                    key={i}
86                    className="h-3.5 w-3.5 text-muted-foreground"
87                    fill="currentColor"
88                    viewBox="0 0 20 20"
89                  >
90                    <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" />
91                  </svg>
92                ))}
93              </div>
94
95              {/* Quote */}
96              <p className="mb-8 text-base leading-relaxed tracking-wide text-muted-foreground">
97                &ldquo;{testimonial.content}&rdquo;
98              </p>
99
100              {/* Author */}
101              <div className="flex items-center justify-between">
102                <div className="flex items-center gap-4">
103                  <Image
104                    src={testimonial.avatar}
105                    alt={testimonial.author}
106                    width={40}
107                    height={40}
108                    className="rounded-full object-cover grayscale"
109                  />
110                  <div>
111                    <p className="text-sm font-medium tracking-wide text-foreground">
112                      {testimonial.author}
113                    </p>
114                    <p className="text-xs tracking-wider text-muted-foreground">
115                      {testimonial.role}
116                    </p>
117                  </div>
118                </div>
119                <span className="text-xs uppercase tracking-[0.15em] text-muted-foreground">
120                  {testimonial.company}
121                </span>
122              </div>
123            </div>
124          ))}
125        </div>
126      </div>
127    </section>
128  );
129}