シングルテスティモニアル

1import Image from "next/image";
2
3// acsim.appスタイル: コーナードット、subtle border
4// 1つの大きな引用を中央に配置したシングルテスティモニアル
5// ダーク/ライトモード両対応
6export function TestimonialSingle001() {
7  const testimonial = {
8    content:
9      "Working with this team has been transformative for our business. Their attention to detail, commitment to excellence, and innovative approach have helped us achieve results we never thought possible. I cannot recommend them highly enough.",
10    author: "Alexandra Chen",
11    role: "Chief Executive Officer",
12    company: "Nexus Technologies",
13    avatar:
14      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
15  };
16
17  return (
18    <section className="bg-background py-32">
19      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
20        {/* Main testimonial container */}
21        <div className="relative border border-border bg-card/20 p-12 md:p-16">
22          {/* Corner dots */}
23          <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
24          <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
25          <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
26          <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
27
28          {/* Quote icon */}
29          <div className="mb-8 flex justify-center">
30            <div className="flex h-12 w-12 items-center justify-center border border-border bg-muted/50">
31              <svg
32                className="h-6 w-6 text-muted-foreground"
33                fill="currentColor"
34                viewBox="0 0 24 24"
35              >
36                <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" />
37              </svg>
38            </div>
39          </div>
40
41          {/* Quote text */}
42          <blockquote className="text-center">
43            <p className="text-xl leading-relaxed tracking-wide text-foreground/90 md:text-2xl md:leading-relaxed">
44              &ldquo;{testimonial.content}&rdquo;
45            </p>
46          </blockquote>
47
48          {/* Author info */}
49          <div className="mt-12 flex flex-col items-center">
50            <Image
51              src={testimonial.avatar}
52              alt={testimonial.author}
53              width={64}
54              height={64}
55              className="rounded-full object-cover grayscale"
56            />
57            <div className="mt-4 text-center">
58              <p className="text-base font-medium tracking-wide text-foreground">
59                {testimonial.author}
60              </p>
61              <p className="mt-1 text-sm tracking-wider text-muted-foreground">
62                {testimonial.role}
63              </p>
64              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground/70">
65                {testimonial.company}
66              </p>
67            </div>
68          </div>
69        </div>
70      </div>
71    </section>
72  );
73}