グリッド統計

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 StatsGrid001() {
14  const stats = [
15    {
16      value: "500+",
17      label: "Enterprise Clients",
18      description: "Fortune 500 companies trust us",
19    },
20    {
21      value: "99.99%",
22      label: "Availability",
23      description: "Industry-leading uptime",
24    },
25    {
26      value: "10ms",
27      label: "Latency",
28      description: "Edge network response time",
29    },
30    {
31      value: "50PB",
32      label: "Data Processed",
33      description: "Monthly throughput",
34    },
35    {
36      value: "200+",
37      label: "Integrations",
38      description: "Connect with your tools",
39    },
40    {
41      value: "24/7",
42      label: "Support",
43      description: "Expert help anytime",
44    },
45  ];
46
47  return (
48    <section className="relative bg-background py-24">
49      {/* コーナードット装飾 */}
50      <CornerDots className="left-6 top-6" />
51      <CornerDots className="right-6 top-6" />
52      <CornerDots className="bottom-6 left-6" />
53      <CornerDots className="bottom-6 right-6" />
54
55      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
56        {/* ヘッダー */}
57        <div className="mx-auto max-w-2xl text-center">
58          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
59            Platform Stats
60          </p>
61          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
62            Built for scale
63          </h2>
64        </div>
65
66        {/* 統計グリッド */}
67        <div className="mt-16 grid grid-cols-1 gap-px overflow-hidden border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
68          {stats.map((stat, index) => (
69            <div
70              key={index}
71              className="group relative bg-background p-8 transition-all hover:bg-muted/50"
72            >
73              {/* コーナードット */}
74              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-border transition-colors group-hover:bg-muted-foreground" />
75              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-border transition-colors group-hover:bg-muted-foreground" />
76              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-border transition-colors group-hover:bg-muted-foreground" />
77              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-border transition-colors group-hover:bg-muted-foreground" />
78
79              {/* 数値 */}
80              <p className="text-4xl font-light tracking-wider text-foreground">
81                {stat.value}
82              </p>
83
84              {/* ラベル */}
85              <p className="mt-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
86                {stat.label}
87              </p>
88
89              {/* 説明 */}
90              <p className="mt-2 text-sm tracking-wide text-muted-foreground">
91                {stat.description}
92              </p>
93            </div>
94          ))}
95        </div>
96      </div>
97    </section>
98  );
99}