ミニマル統計

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 StatsMinimal001() {
14  const stats = [
15    { value: "50K+", label: "Downloads" },
16    { value: "4.9", label: "Rating" },
17    { value: "99%", label: "Satisfaction" },
18    { value: "24/7", label: "Support" },
19  ];
20
21  return (
22    <section className="relative bg-background py-16">
23      {/* コーナードット装飾 */}
24      <CornerDots className="left-6 top-6" />
25      <CornerDots className="right-6 top-6" />
26      <CornerDots className="bottom-6 left-6" />
27      <CornerDots className="bottom-6 right-6" />
28
29      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
30        <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 md:gap-x-20">
31          {stats.map((stat, index) => (
32            <div key={index} className="text-center">
33              <p className="text-3xl font-light tracking-wider text-foreground sm:text-4xl">
34                {stat.value}
35              </p>
36              <p className="mt-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
37                {stat.label}
38              </p>
39            </div>
40          ))}
41        </div>
42      </div>
43    </section>
44  );
45}