プログレスバー付き統計セクション

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.5 w-1.5 rounded-full bg-muted-foreground/40" />
5      <div className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-muted-foreground/40" />
6      <div className="absolute bottom-0 left-0 h-1.5 w-1.5 rounded-full bg-muted-foreground/40" />
7      <div className="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-muted-foreground/40" />
8    </div>
9  );
10}
11
12export function StatsProgress001() {
13  const stats = [
14    {
15      value: "98.7%",
16      label: "稼働率",
17      description: "過去12ヶ月間のサービス稼働率",
18      progress: 98.7,
19    },
20    {
21      value: "4.8 / 5",
22      label: "顧客満足度",
23      description: "直近四半期のアンケート結果",
24      progress: 96,
25    },
26    {
27      value: "1.2秒",
28      label: "平均応答速度",
29      description: "グローバルエッジネットワーク経由",
30      progress: 88,
31    },
32    {
33      value: "85%",
34      label: "継続率",
35      description: "年間契約の更新率",
36      progress: 85,
37    },
38  ];
39
40  return (
41    <section className="relative bg-background py-28">
42      <CornerDots className="left-6 top-6" />
43      <CornerDots className="right-6 top-6" />
44      <CornerDots className="bottom-6 left-6" />
45      <CornerDots className="bottom-6 right-6" />
46
47      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
48        {/* ヘッダー */}
49        <div className="mb-20">
50          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
51            Performance
52          </p>
53          <div className="mt-4 h-px w-12 bg-border/40" />
54          <h2 className="mt-6 text-2xl font-light tracking-wide text-foreground sm:text-3xl">
55            信頼性の指標
56          </h2>
57          <p className="mt-4 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
58            継続的なモニタリングと改善により、高い水準のサービス品質を維持しています。
59          </p>
60        </div>
61
62        {/* 統計リスト */}
63        <div className="space-y-10">
64          {stats.map((stat, index) => (
65            <div key={index} className="group">
66              <div className="flex items-baseline justify-between">
67                <div>
68                  <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
69                    {stat.label}
70                  </p>
71                  <p className="mt-1 text-sm font-light leading-relaxed text-muted-foreground/60">
72                    {stat.description}
73                  </p>
74                </div>
75                <p className="text-2xl font-light tracking-wider text-foreground sm:text-3xl">
76                  {stat.value}
77                </p>
78              </div>
79              {/* プログレスバー */}
80              <div className="mt-4 h-px w-full bg-border/30">
81                <div
82                  className="h-px bg-foreground/25 transition-all duration-700"
83                  style={{ width: `${stat.progress}%` }}
84                />
85              </div>
86            </div>
87          ))}
88        </div>
89      </div>
90    </section>
91  );
92}