SaaS Metrics / Stats — Neo-Brutalism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!--
Snippet Name: SaaS Metrics / Stats — Neo-Brutalism
Description: Brutalist metrics section with a giant stat block, count-up ticker, and an offset grid of accent stat cards.
Author: DevSnips Contributors
Usage Example: Drop into a stats/results band. The count-up animates on load via a scoped IntersectionObserver script.
-->
<section class="relative w-full overflow-hidden px-5 py-16 sm:px-8 sm:py-24" data-metrics="nb">

  <div class="pointer-events-none absolute inset-0 -z-10 nb-grid-bg opacity-[0.05]" aria-hidden="true"></div>

  <div class="mx-auto max-w-6xl">
    <!-- Header divider -->
    <div class="mb-12 flex items-center gap-4">
      <span class="border-2 border-black bg-black px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-[#FFE600] shadow-[3px_3px_0_0_#000]">/ by the numbers</span>
      <span class="h-px flex-1 bg-black"></span>
      <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/50">Q3 · 2026</span>
    </div>

    <!-- Giant stat + copy -->
    <div class="grid grid-cols-1 gap-8 lg:grid-cols-[1.2fr_1fr] lg:items-center">
      <div class="border-2 border-black bg-[#FFE600] p-8 shadow-[10px_10px_0_0_#000] sm:p-10">
        <p class="font-mono text-[12px] font-bold uppercase tracking-wider text-black/70">Events processed / day</p>
        <p class="font-archivo mt-3 text-[72px] font-extrabold uppercase leading-none tabular-nums sm:text-[120px]"><span data-count="3.4" data-suffix="B">0</span></p>
        <p class="font-mono mt-4 text-[13px] font-bold uppercase text-black/70">↑ 218% YoY · zero dropped events</p>
      </div>
      <div>
        <h2 class="font-archivo text-[34px] font-extrabold uppercase leading-[0.95] tracking-tight sm:text-[44px]">Numbers our<br>customers ship<br>by.</h2>
        <p class="font-mono mt-5 max-w-md text-[13px] font-medium leading-relaxed text-black/70">Every stat below is computed live from production, not a marketing deck. We publish the methodology too.</p>
      </div>
    </div>

    <!-- Stat grid -->
    <div class="mt-10 grid grid-cols-2 gap-px border-2 border-black bg-black lg:grid-cols-4">
      <div class="bg-white p-5 transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px]">
        <div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#FF4FA3] text-white shadow-[2px_2px_0_0_#000]">
          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
        </div>
        <p class="font-archivo mt-4 text-4xl font-extrabold tabular-nums"><span data-count="98" data-suffix="%">0</span></p>
        <p class="font-mono mt-1 text-[11px] font-bold uppercase tracking-wider text-black/55">CSAT score</p>
      </div>
      <div class="bg-white p-5 transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px]">
        <div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#00C2FF] text-white shadow-[2px_2px_0_0_#000]">
          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        </div>
        <p class="font-archivo mt-4 text-4xl font-extrabold tabular-nums"><span data-count="1.7" data-suffix="m">0</span></p>
        <p class="font-mono mt-1 text-[11px] font-bold uppercase tracking-wider text-black/55">Median first reply</p>
      </div>
      <div class="bg-white p-5 transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px]">
        <div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#00E676] shadow-[2px_2px_0_0_#000]">
          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.5 2 12l3.5 6.5h17L22 12 18.5 5.5z"/></svg>
        </div>
        <p class="font-archivo mt-4 text-4xl font-extrabold tabular-nums"><span data-count="4200" data-suffix="+">0</span></p>
        <p class="font-mono mt-1 text-[11px] font-bold uppercase tracking-wider text-black/55">Teams onboarded</p>
      </div>
      <div class="bg-white p-5 transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px]">
        <div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-black shadow-[2px_2px_0_0_#000]">
          <svg class="h-6 w-6 text-[#FFE600]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <p class="font-archivo mt-4 text-4xl font-extrabold tabular-nums"><span data-count="99.99" data-suffix="%">0</span></p>
        <p class="font-mono mt-1 text-[11px] font-bold uppercase tracking-wider text-black/55">Uptime SLA</p>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-metrics]');
      const els = root.querySelectorAll('[data-count]');
      let done = false;
      function run() {
        els.forEach(el => {
          const target = parseFloat(el.dataset.count);
          const suffix = el.dataset.suffix || "";
          const decimals = (el.dataset.count.split('.')[1] || '').length;
          const dur = 1400; const start = performance.now();
          function step(now) {
            const t = Math.min(1, (now - start) / dur);
            const ease = 1 - Math.pow(1 - t, 3);
            const val = target * ease;
            el.textContent = (decimals ? val.toFixed(decimals) : Math.round(val).toLocaleString('en-US')) + suffix;
            if (t < 1) requestAnimationFrame(step);
            else el.textContent = (decimals ? target.toFixed(decimals) : target.toLocaleString('en-US')) + suffix;
          }
          requestAnimationFrame(step);
        });
      }
      const io = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting && !done) { done = true; run(); } });
      }, { threshold: 0.25 });
      io.observe(root);
    })();
  </script>
</section>