Stats

export default function Stats01() {
  const stats = [
    { value: "10K+", label: "Active Users" },
    { value: "99.9%", label: "Uptime" },
    { value: "150+", label: "Countries" },
    { value: "4.9/5", label: "Customer Rating" },
  ]

  return (
    <section className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="text-4xl font-bold tracking-tight text-foreground">
                {stat.value}
              </div>
              <div className="mt-2 text-sm text-muted-foreground">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

import {
  UsersIcon,
  GlobeIcon,
  ZapIcon,
  ShieldCheckIcon,
} from "lucide-react"

export default function Stats02() {
  const stats = [
    {
      icon: UsersIcon,
      value: "50,000+",
      description: "Teams trust our platform to power their workflows daily",
    },
    {
      icon: GlobeIcon,
      value: "120+",
      description: "Countries with active users across every continent",
    },
    {
      icon: ZapIcon,
      value: "99.99%",
      description: "Guaranteed uptime backed by enterprise-grade SLAs",
    },
    {
      icon: ShieldCheckIcon,
      value: "2M+",
      description: "API requests processed securely every single day",
    },
  ]

  return (
    <section className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid grid-cols-2 gap-x-8 gap-y-12 md:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.value} className="flex flex-col items-center text-center md:items-start md:text-left">
              <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <stat.icon className="size-5" />
              </div>
              <div className="mt-4 text-3xl font-bold tracking-tight text-foreground">
                {stat.value}
              </div>
              <p className="mt-1 text-sm text-muted-foreground">
                {stat.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}