カード型統計セクション

1function CornerDots({ className = "" }: { className?: string }) {
2  return (
3    <div className={`absolute h-3 w-3 ${className}`}>
4      <div className="absolute left-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
5      <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
6      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
7      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
8    </div>
9  );
10}
11
12export function StatsCards001() {
13  const stats = [
14    {
15      value: "99.9%",
16      label: "稼働率",
17      description: "過去12ヶ月のサービス稼働率",
18    },
19    {
20      value: "2.4M",
21      label: "処理リクエスト",
22      description: "月間のAPI処理リクエスト数",
23    },
24    {
25      value: "140+",
26      label: "導入企業",
27      description: "国内外のパートナー企業数",
28    },
29    {
30      value: "< 50ms",
31      label: "応答速度",
32      description: "平均レスポンスタイム",
33    },
34  ];
35
36  return (
37    <section className="relative bg-background py-28">
38      <CornerDots className="left-6 top-6" />
39      <CornerDots className="right-6 top-6" />
40      <CornerDots className="bottom-6 left-6" />
41      <CornerDots className="bottom-6 right-6" />
42
43      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
44        {/* ヘッダー */}
45        <div className="text-center">
46          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
47            Performance
48          </p>
49          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
50            信頼の実績
51          </h2>
52          <div className="mx-auto mt-6 h-px w-12 bg-foreground/20" />
53        </div>
54
55        {/* カードグリッド */}
56        <div className="mt-16 grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">
57          {stats.map((stat, index) => (
58            <div
59              key={index}
60              className="group relative bg-background p-8 transition-colors hover:bg-muted/30"
61            >
62              {/* インデックス番号 */}
63              <span className="text-[10px] tabular-nums tracking-[0.2em] text-muted-foreground/50">
64                {String(index + 1).padStart(2, "0")}
65              </span>
66
67              {/* 値 */}
68              <p className="mt-4 text-3xl font-light tracking-wider text-foreground">
69                {stat.value}
70              </p>
71
72              {/* 区切り線 */}
73              <div className="mt-4 h-px w-8 bg-foreground/20 transition-all group-hover:w-12 group-hover:bg-foreground/40" />
74
75              {/* ラベル */}
76              <p className="mt-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
77                {stat.label}
78              </p>
79
80              {/* 説明 */}
81              <p className="mt-2 text-xs font-light leading-relaxed tracking-wide text-muted-foreground/60">
82                {stat.description}
83              </p>
84            </div>
85          ))}
86        </div>
87      </div>
88    </section>
89  );
90}