Hero met statistiek-rij

<!-- Hero met statistiek-rij · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="hsr">
  <div class="hsr__inner">
    <span class="hsr__eyebrow">/ resultaat boven esthetiek</span>
    <h2 class="hsr__h1">Sites die werken<br>terwijl jij slaapt.</h2>
    <p class="hsr__lead">Snel, vindbaar en gebouwd om te verkopen. Wij meten alles, zodat jij groeit.</p>
    <a href="#" class="hsr__btn">Vraag een audit aan →</a>
  </div>
  <div class="hsr__stats">
    <div class="hsr__stat"><span class="hsr__val" data-to="40" data-suf="+">0</span><span class="hsr__lab">Live projecten</span></div>
    <div class="hsr__stat"><span class="hsr__val" data-to="98" data-suf="">0</span><span class="hsr__lab">Gem. Lighthouse-score</span></div>
    <div class="hsr__stat"><span class="hsr__val" data-to="2.1" data-suf="x" data-dec="1">0</span><span class="hsr__lab">Gem. conversie-groei</span></div>
    <div class="hsr__stat"><span class="hsr__val" data-to="0" data-suf="" data-pre="€">0</span><span class="hsr__lab">Verborgen kosten</span></div>
  </div>
</section>
</div>

/* Hero met statistiek-rij · NedDev · eigen werk. */
.hsr{width:100%;box-sizing:border-box;background:#f4f3f1;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.hsr__inner{max-width:900px;margin:0 auto;padding:52px 28px 38px;box-sizing:border-box}
.hsr__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.hsr__h1{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(36px,6vw,64px);line-height:.95;letter-spacing:-.02em;margin:18px 0 16px}
.hsr__lead{font-family:'Switzer',sans-serif;font-size:16px;color:#444;max-width:42ch;line-height:1.5;margin:0 0 26px}
.hsr__btn{font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;color:#fff;background:#0a0a0a;padding:13px 24px;border-radius:2px;text-decoration:none;transition:background .25s}
.hsr__btn:hover{background:#F5480F}
.hsr__stats{max-width:900px;margin:0 auto;padding:0 28px 46px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(10,10,10,.12);border-top:1px solid rgba(10,10,10,.12);box-sizing:border-box}
.hsr__stat{background:#f4f3f1;padding:22px 16px 4px;display:flex;flex-direction:column}
.hsr__val{font-family:'Boldonse',sans-serif;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.02em}
.hsr__lab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:#777;margin-top:8px;text-transform:uppercase}
@media(max-width:680px){.hsr__stats{grid-template-columns:1fr 1fr}}

// Hero met statistiek-rij · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hsr')||root;
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var vals=[].slice.call(root.querySelectorAll('.hsr__val'));
function setv(el,n){var dec=+el.dataset.dec||0;el.textContent=(el.dataset.pre||'')+n.toFixed(dec)+(el.dataset.suf||'');}
function run(){vals.forEach(function(el){var to=+el.dataset.to;if(reduce){setv(el,to);return;}var t0=null,d=1100;function step(ts){if(!t0)t0=ts;var p=Math.min((ts-t0)/d,1);setv(el,(1-Math.pow(1-p,3))*to);if(p<1)requestAnimationFrame(step);}requestAnimationFrame(step);});}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){run();io.disconnect();}});},{threshold:.4});io.observe(root.querySelector('.hsr__stats'));
}
init(document.querySelector('.jouw-container'));