Montech_Landing/apps/landing/components/StatsSection.vue

<template>
  <section class="border-y border-white/[0.07] bg-coal px-6 py-20 md:px-10 md:py-28">
    <div class="mx-auto grid max-w-[1500px] gap-10 sm:grid-cols-2 lg:grid-cols-4">
      <div v-for="(s, i) in data.items" :key="i">
        <p class="font-display text-5xl font-extrabold tracking-[-0.03em] text-volt md:text-6xl">
          {{ s.value }}{{ s.suffix }}
        </p>
        <p class="mt-3 font-mono text-[11px] tracking-[0.14em] text-ash md:tracking-[0.2em]">{{ s.label }}</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  data: {
    items: Array<{ value: number; suffix: string; label: string }>;
  };
}>();
</script>