"use client";

import { NumberCounter } from "@/components/ui/number-counter";

const stats = [
  {
    label: "Active workspaces",
    value: 12400,
    suffix: "+",
  },
  {
    label: "Weekly growth",
    value: 18.6,
    suffix: "%",
    decimals: 1,
  },
  {
    label: "Hours saved",
    value: 720000,
    suffix: "+",
  },
  {
    label: "Support satisfaction",
    value: 98,
    suffix: "%",
  },
];

export function StatsCounterSection() {
  return (
    <section className="card rounded-3xl bg-card px-6 py-12">
      <div className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
        <div className="space-y-4">
          <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
            By the numbers
          </p>
          <h2 className="text-2xl font-semibold text-foreground md:text-3xl">
            Metrics that move with your team
          </h2>
          <p className="text-sm text-muted-foreground md:text-base">
            Animated counters bring performance highlights to life while keeping
            the layout clean and grounded.
          </p>
        </div>

        <div className="grid gap-6 sm:grid-cols-2">
          {stats.map((stat, index) => (
            <div
              key={stat.label}
              className="rounded-2xl border border-border/60 bg-background/60 p-5"
            >
              <NumberCounter
                value={stat.value}
                suffix={stat.suffix}
                decimals={stat.decimals}
                delay={index * 120}
                className="text-2xl font-semibold text-foreground"
              />
              <p className="mt-2 text-sm text-muted-foreground">
                {stat.label}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Stats Counter Section

Preview

Metrics that move with your team

Installation
