アニメーション統計

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 StatsAnimated001() {
14  const stats = [
15    { value: "10M+", label: "Active Users", description: "Trust our platform" },
16    {
17      value: "99.9%",
18      label: "Uptime",
19      description: "Reliable infrastructure",
20    },
21    { value: "150+", label: "Countries", description: "Global presence" },
22    { value: "24/7", label: "Support", description: "Always available" },
23  ];
24
25  return (
26    <section className="relative bg-background py-24">
27      {/* コーナードット装飾 */}
28      <CornerDots className="left-6 top-6" />
29      <CornerDots className="right-6 top-6" />
30      <CornerDots className="bottom-6 left-6" />
31      <CornerDots className="bottom-6 right-6" />
32
33      {/* 背景グリッド */}
34      <div className="absolute inset-0 opacity-20">
35        <div
36          className="absolute inset-0"
37          style={{
38            backgroundImage: `linear-gradient(to right, var(--color-border) 1px, transparent 1px),
39                             linear-gradient(to bottom, var(--color-border) 1px, transparent 1px)`,
40            backgroundSize: "60px 60px",
41          }}
42        />
43      </div>
44
45      <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
46        {/* ヘッダー */}
47        <div className="mb-16 text-center">
48          <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
49            Our Impact
50          </p>
51          <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
52            Trusted by millions
53          </h2>
54          <p className="mx-auto mt-4 max-w-2xl text-base tracking-wide text-muted-foreground">
55            Our numbers speak for themselves. Join the growing community of
56            satisfied users.
57          </p>
58        </div>
59
60        {/* 統計グリッド */}
61        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
62          {stats.map((stat, index) => (
63            <div
64              key={index}
65              className="group relative border border-border bg-muted/30 p-8 text-center transition-all hover:border-border/80 hover:bg-muted/50"
66            >
67              {/* コーナードット */}
68              <div className="absolute left-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/30" />
69              <div className="absolute right-2 top-2 h-1 w-1 rounded-full bg-muted-foreground/30" />
70              <div className="absolute bottom-2 left-2 h-1 w-1 rounded-full bg-muted-foreground/30" />
71              <div className="absolute bottom-2 right-2 h-1 w-1 rounded-full bg-muted-foreground/30" />
72
73              {/* 数値 */}
74              <p className="text-4xl font-light tracking-wider text-foreground sm:text-5xl">
75                {stat.value}
76              </p>
77
78              {/* ラベル */}
79              <p className="mt-4 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
80                {stat.label}
81              </p>
82
83              {/* 説明 */}
84              <p className="mt-2 text-sm tracking-wide text-muted-foreground">
85                {stat.description}
86              </p>
87            </div>
88          ))}
89        </div>
90
91        {/* CTA */}
92        <div className="mt-16 border border-border bg-muted/30 p-8">
93          <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
94            <div className="text-center sm:text-left">
95              <p className="text-xl font-light tracking-wide text-foreground">
96                Ready to join them?
97              </p>
98              <p className="mt-1 text-sm tracking-wide text-muted-foreground">
99                Start your free trial today. No credit card required.
100              </p>
101            </div>
102            <button className="border border-border bg-foreground px-8 py-3 text-xs font-medium uppercase tracking-[0.2em] text-background transition-all hover:bg-foreground/90">
103              Get Started
104            </button>
105          </div>
106        </div>
107      </div>
108    </section>
109  );
110}