About Milestones Counter

<!--
  The Tailwind markup is the styled end-state. The count-up itself is behaviour:
  see the React / TypeScript variants, which animate from 0 only when the band
  scrolls into view and skip the animation entirely under prefers-reduced-motion.
-->
<section class="mx-auto w-full max-w-6xl bg-white px-4 py-12 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-counter-title">
  <h2 id="abt-counter-title" class="mb-8 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    Six years, counted
  </h2>

  <dl class="grid grid-cols-2 gap-x-6 gap-y-8 lg:grid-cols-4">
    <div class="flex flex-col-reverse gap-1.5">
      <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Projects shipped</dt>
      <dd class="text-4xl font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-100">148</dd>
    </div>
    <div class="flex flex-col-reverse gap-1.5">
      <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Client retention</dt>
      <dd class="text-4xl font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-100">94%</dd>
    </div>
    <div class="flex flex-col-reverse gap-1.5">
      <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Countries</dt>
      <dd class="text-4xl font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-100">9</dd>
    </div>
    <div class="flex flex-col-reverse gap-1.5">
      <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">People</dt>
      <dd class="text-4xl font-bold leading-none tracking-tight tabular-nums text-gray-900 dark:text-gray-100">12</dd>
    </div>
  </dl>
</section>