インライン統計

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 StatsInline001() {
14  return (
15    <section className="relative bg-background py-24">
16      {/* コーナードット装飾 */}
17      <CornerDots className="left-6 top-6" />
18      <CornerDots className="right-6 top-6" />
19      <CornerDots className="bottom-6 left-6" />
20      <CornerDots className="bottom-6 right-6" />
21
22      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
23        {/* メインテキスト */}
24        <p className="text-center text-2xl font-light leading-relaxed tracking-wide text-foreground sm:text-3xl md:text-4xl">
25          We&apos;ve helped{" "}
26          <span className="border-b border-border text-muted-foreground">
27            10,000+
28          </span>{" "}
29          companies grow their revenue by{" "}
30          <span className="border-b border-border text-muted-foreground">40%</span>{" "}
31          on average. Our platform processes{" "}
32          <span className="border-b border-border text-muted-foreground">
33            $2B+
34          </span>{" "}
35          in transactions annually with{" "}
36          <span className="border-b border-border text-muted-foreground">
37            99.99%
38          </span>{" "}
39          uptime.
40        </p>
41
42        {/* 区切り線 */}
43        <div className="mx-auto mt-12 h-px w-16 bg-border" />
44
45        {/* サブテキスト */}
46        <p className="mt-8 text-center text-sm tracking-wide text-muted-foreground">
47          Trusted by industry leaders worldwide
48        </p>
49
50        {/* ロゴプレースホルダー */}
51        <div className="mt-8 flex flex-wrap items-center justify-center gap-8 opacity-40">
52          {Array.from({ length: 5 }).map((_, i) => (
53            <div
54              key={i}
55              className="h-8 w-20 rounded bg-muted"
56            />
57          ))}
58        </div>
59      </div>
60    </section>
61  );
62}