since3-website/modules/landingPage/ui/components/stats-section.tsx

import { stats } from "@/modules/landingPage/data/content"

import { CountUp } from "./count-up"

export function StatsSection() {
  return (
    <section aria-label="since3 in Zahlen" data-theme="light" className="py-section">
      <dl className="container-site grid grid-cols-2 gap-y-12 lg:grid-cols-4">
        {stats.map((stat) => (
          <div key={stat.label} className="flex flex-col gap-3 border-l border-line pl-4 md:pl-6">
            <dt className="order-2 max-w-[20ch] font-mono text-label text-fg-muted">
              {stat.label}
            </dt>
            <dd className="order-1 text-display leading-none tabular-nums type-poster">
              {stat.prefix}
              <CountUp value={stat.value} />
              <span className="normal-case">{stat.suffix}</span>
            </dd>
          </div>
        ))}
      </dl>
    </section>
  )
}