ラージ統計

1// コーナードット装飾コンポーネント
2function CornerDots({ className = "" }: { className?: string }) {
3  return (
4    <div className={`absolute h-3 w-3 ${className}`}>
5      <div className="absolute left-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
6      <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
7      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
8      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
9    </div>
10  );
11}
12
13export function StatsLarge001() {
14  const stats = [
15    { value: "10M+", label: "Active Users" },
16    { value: "99.9%", label: "Uptime" },
17    { value: "150+", label: "Countries" },
18  ];
19
20  return (
21    <section className="relative bg-background py-32">
22      {/* コーナードット装飾 */}
23      <CornerDots className="left-6 top-6" />
24      <CornerDots className="right-6 top-6" />
25      <CornerDots className="bottom-6 left-6" />
26      <CornerDots className="bottom-6 right-6" />
27
28      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
29        {/* ヘッダー */}
30        <div className="text-center">
31          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
32            By The Numbers
33          </p>
34        </div>
35
36        {/* 大きな統計数値 */}
37        <div className="mt-16 grid grid-cols-1 gap-12 md:grid-cols-3">
38          {stats.map((stat, index) => (
39            <div
40              key={index}
41              className="group relative border-t border-border pt-8 text-center transition-all hover:border-muted-foreground"
42            >
43              {/* 数値 */}
44              <p className="text-6xl font-extralight tracking-wider text-foreground sm:text-7xl md:text-8xl">
45                {stat.value}
46              </p>
47
48              {/* ラベル */}
49              <p className="mt-6 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
50                {stat.label}
51              </p>
52
53              {/* ホバー時のドット */}
54              <div className="absolute left-1/2 top-0 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
55            </div>
56          ))}
57        </div>
58
59        {/* キャプション */}
60        <div className="mt-20 text-center">
61          <p className="mx-auto max-w-lg text-sm leading-relaxed tracking-wide text-muted-foreground">
62            Trusted by developers and teams worldwide. Our infrastructure
63            handles billions of requests every day.
64          </p>
65        </div>
66      </div>
67    </section>
68  );
69}