統計付きテスティモニアル

1import Image from "next/image";
2
3// acsim.appスタイル: コーナードット、subtle border
4// 統計データと引用を組み合わせたテスティモニアル
5// ダーク/ライトモード両対応
6export function TestimonialStats001() {
7  const stats = [
8    { value: "10K+", label: "Active Users" },
9    { value: "99.9%", label: "Uptime" },
10    { value: "4.9/5", label: "Rating" },
11    { value: "50M+", label: "API Requests" },
12  ];
13
14  const testimonial = {
15    content:
16      "We evaluated dozens of solutions before choosing this platform. The performance, reliability, and developer experience are simply unmatched. Our team has never been more productive.",
17    author: "Jennifer Martinez",
18    role: "VP of Engineering",
19    company: "Quantum Labs",
20    avatar:
21      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",
22  };
23
24  return (
25    <section className="bg-background py-24">
26      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
27        {/* Header */}
28        <div className="mb-16 text-center">
29          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
30            By the numbers
31          </p>
32          <h2 className="text-3xl font-light tracking-tight text-foreground">
33            Trusted at scale
34          </h2>
35        </div>
36
37        {/* Stats Grid */}
38        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
39          {stats.map((stat, index) => (
40            <div
41              key={index}
42              className="group relative border border-border bg-card/20 p-6 text-center"
43            >
44              {/* Corner dots */}
45              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/20" />
46              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/20" />
47
48              <p className="text-3xl font-light tracking-tight text-foreground md:text-4xl">
49                {stat.value}
50              </p>
51              <p className="mt-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
52                {stat.label}
53              </p>
54            </div>
55          ))}
56        </div>
57
58        {/* Featured Testimonial */}
59        <div className="relative mt-12 border border-border bg-card/30 p-8 md:p-12">
60          {/* Corner dots */}
61          <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
62          <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
63          <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
64          <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-muted-foreground/30" />
65
66          <div className="flex flex-col items-center gap-8 md:flex-row md:items-start md:gap-12">
67            {/* Avatar */}
68            <div className="shrink-0">
69              <Image
70                src={testimonial.avatar}
71                alt={testimonial.author}
72                width={80}
73                height={80}
74                className="rounded-full object-cover grayscale"
75              />
76            </div>
77
78            {/* Content */}
79            <div className="flex-1">
80              {/* Quote */}
81              <div className="mb-6 flex h-8 w-8 items-center justify-center border border-border text-muted-foreground">
82                <svg
83                  className="h-4 w-4"
84                  fill="currentColor"
85                  viewBox="0 0 24 24"
86                >
87                  <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" />
88                </svg>
89              </div>
90
91              <p className="text-lg leading-relaxed tracking-wide text-muted-foreground md:text-xl">
92                &ldquo;{testimonial.content}&rdquo;
93              </p>
94
95              {/* Author info */}
96              <div className="mt-8 flex items-center gap-4">
97                <div>
98                  <p className="text-sm font-medium tracking-wide text-foreground">
99                    {testimonial.author}
100                  </p>
101                  <p className="text-xs tracking-wider text-muted-foreground">
102                    {testimonial.role}
103                  </p>
104                </div>
105                <span className="text-muted-foreground/50">|</span>
106                <span className="text-xs uppercase tracking-[0.15em] text-muted-foreground">
107                  {testimonial.company}
108                </span>
109              </div>
110            </div>
111          </div>
112        </div>
113
114        {/* Bottom accent */}
115        <div className="mt-12 flex items-center justify-center gap-8">
116          <span className="h-px w-16 bg-border" />
117          <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
118            Join 10,000+ teams
119          </span>
120          <span className="h-px w-16 bg-border" />
121        </div>
122      </div>
123    </section>
124  );
125}