Zoeken...  ⌘K GitHub

CounterStats Social Proof

CounterStats component.

/counter-stats
src/components/social-proof/CounterStats.astro
---
// CounterStats, recovered from blurr-components.pages.dev
---

<section class="cs cs--dark"> <div class="cs-inner"> <div class="cs-header"> <span class="cs-eyebrow">Onze impact in cijfers</span> <h2 class="cs-headline">Wat wij voor onze klanten bereikten</h2> </div> <div class="cs-grid"> <div class="cs-stat"> <div class="cs-value-row">  <span class="cs-value">200+</span>  </div> <span class="cs-label">Klanten bediend</span> <p class="cs-desc">Van start-up tot corporate</p> </div><div class="cs-stat"> <div class="cs-value-row"> <span class="cs-prefix">€</span> <span class="cs-value">12M</span> <span class="cs-suffix">+</span> </div> <span class="cs-label">Omzet gegenereerd</span> <p class="cs-desc">Voor klanten in 3 jaar tijd</p> </div><div class="cs-stat"> <div class="cs-value-row">  <span class="cs-value">94%</span>  </div> <span class="cs-label">Klanttevredenheid</span> <p class="cs-desc">Op basis van NPS-scores</p> </div><div class="cs-stat"> <div class="cs-value-row">  <span class="cs-value">3.2x</span>  </div> <span class="cs-label">Gemiddeld ROAS</span> <p class="cs-desc">Rendement op advertentiekosten</p> </div> </div> </div> </section>

<style>
.cs{padding:5rem 2rem}
.cs--white{background:#fff;border-top:1px solid #e5e7eb}
.cs--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.cs--dark{background:#0a0a0a}
.cs-inner{max-width:1100px;margin:0 auto}
.cs-header{text-align:center;margin-bottom:3.5rem}
.cs-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.cs-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin:0}
.cs--white .cs-headline,.cs--light .cs-headline{color:#0a0a0a}
.cs--dark .cs-headline{color:#fff}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem 3rem;text-align:center}
.cs-value-row{display:flex;align-items:baseline;justify-content:center;gap:.125rem;margin-bottom:.5rem}
.cs-prefix,.cs-suffix{font-size:1.5rem;font-weight:700;color:var(--color-accent,#6366f1)}
.cs-value{font-size:3.5rem;font-weight:900;color:var(--color-accent,#6366f1);letter-spacing:-.04em;line-height:1}
.cs-label{display:block;font-size:1rem;font-weight:700}
.cs--white .cs-label,.cs--light .cs-label{color:#0a0a0a}
.cs--dark .cs-label{color:#fff}
.cs-desc{font-size:.875rem;line-height:1.55;margin:.5rem 0 0}
.cs--white .cs-desc,.cs--light .cs-desc{color:#6b7280}
.cs--dark .cs-desc{color:#fff6}
</style>