比較統計セクション

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 StatsComparison001() {
13  const metrics = [
14    {
15      label: "レスポンス速度",
16      before: "1.2s",
17      after: "0.08s",
18      improvement: "15x",
19    },
20    {
21      label: "稼働率",
22      before: "95.2%",
23      after: "99.99%",
24      improvement: "+4.79%",
25    },
26    {
27      label: "処理能力",
28      before: "1K/秒",
29      after: "50K/秒",
30      improvement: "50x",
31    },
32    {
33      label: "エラー率",
34      before: "2.4%",
35      after: "0.01%",
36      improvement: "-99.6%",
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-5xl px-4 sm:px-6 lg:px-8">
48        {/* ヘッダー */}
49        <div className="mx-auto max-w-2xl text-center">
50          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
51            Before &amp; After
52          </p>
53          <h2 className="mt-4 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
54            パフォーマンスの変革
55          </h2>
56          <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
57            導入前後の主要指標を比較し、改善効果を可視化します。
58          </p>
59        </div>
60
61        <div className="mt-6 h-px bg-border/40" />
62
63        {/* 比較テーブル */}
64        <div className="mt-14">
65          {/* ヘッダー行 */}
66          <div className="mb-6 hidden items-center sm:flex">
67            <div className="flex-1" />
68            <div className="flex w-64 justify-between lg:w-80">
69              <span className="w-24 text-center text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60 lg:w-28">
70                Before
71              </span>
72              <span className="w-24 text-center text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60 lg:w-28">
73                After
74              </span>
75            </div>
76            <div className="w-20 text-center text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60 lg:w-24">
77              改善
78            </div>
79          </div>
80
81          {/* メトリクス行 */}
82          <div className="space-y-0">
83            {metrics.map((metric, index) => (
84              <div key={index}>
85                {index > 0 && <div className="h-px bg-border/30" />}
86                <div className="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:gap-0">
87                  {/* ラベル */}
88                  <div className="flex-1">
89                    <p className="text-sm font-medium tracking-wide text-foreground">
90                      {metric.label}
91                    </p>
92                  </div>
93
94                  {/* Before / After 値 */}
95                  <div className="flex w-full items-center justify-between sm:w-64 lg:w-80">
96                    <div className="w-24 text-center lg:w-28">
97                      <span className="text-xs uppercase tracking-[0.15em] text-muted-foreground/50 sm:hidden">
98                        Before:{" "}
99                      </span>
100                      <span className="text-lg font-light tracking-wider text-muted-foreground/60">
101                        {metric.before}
102                      </span>
103                    </div>
104
105                    {/* 矢印 */}
106                    <div className="flex items-center justify-center">
107                      <svg
108                        className="h-4 w-4 text-foreground/20"
109                        fill="none"
110                        stroke="currentColor"
111                        viewBox="0 0 24 24"
112                      >
113                        <path
114                          strokeLinecap="round"
115                          strokeLinejoin="round"
116                          strokeWidth={1.5}
117                          d="M17 8l4 4m0 0l-4 4m4-4H3"
118                        />
119                      </svg>
120                    </div>
121
122                    <div className="w-24 text-center lg:w-28">
123                      <span className="text-xs uppercase tracking-[0.15em] text-muted-foreground/50 sm:hidden">
124                        After:{" "}
125                      </span>
126                      <span className="text-lg font-light tracking-wider text-foreground">
127                        {metric.after}
128                      </span>
129                    </div>
130                  </div>
131
132                  {/* 改善値 */}
133                  <div className="w-20 text-center sm:text-right lg:w-24">
134                    <span className="inline-flex items-center border border-border bg-muted/50 px-3 py-1 text-xs font-medium tracking-wider text-foreground">
135                      {metric.improvement}
136                    </span>
137                  </div>
138                </div>
139              </div>
140            ))}
141          </div>
142
143          <div className="h-px bg-border/30" />
144        </div>
145      </div>
146    </section>
147  );
148}