TestimonialsWall Social Proof

---
// TestimonialsWall, recovered from blurr-components.pages.dev
---

<section class="tw tw--light"> <div class="tw-inner"> <div class="tw-header"> <span class="tw-eyebrow">Klanten aan het woord</span> <h2 class="tw-headline">Wat onze klanten zeggen</h2> </div> <div class="tw-wall"> <div class="tw-item"> <div class="tw-stars"> <span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span> </div> <p class="tw-quote">"Beste marketingbureau waarmee ik heb samengewerkt. Resultaten zijn sprekend."</p> <div class="tw-meta"> <span class="tw-name">Thomas B.</span> <span class="tw-role">CEO, GreenTech</span> </div> </div><div class="tw-item"> <div class="tw-stars"> <span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span> </div> <p class="tw-quote">"Onze kostprijs per lead is met 40% gedaald. Meer dan verwacht!"</p> <div class="tw-meta"> <span class="tw-name">Sophie V.</span> <span class="tw-role">Marketing Manager</span> </div> </div><div class="tw-item">  <p class="tw-quote">"Transparant, snel en doelgericht. Precies wat we zochten."</p> <div class="tw-meta"> <span class="tw-name">Bas K.</span> <span class="tw-role">Directeur</span> </div> </div><div class="tw-item"> <div class="tw-stars"> <span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span> </div> <p class="tw-quote">"Na 2 maanden zagen we al een sterke stijging in organisch verkeer."</p> <div class="tw-meta"> <span class="tw-name">Femke D.</span> <span class="tw-role">E-commerce Manager</span> </div> </div><div class="tw-item"> <div class="tw-stars"> <span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span> </div> <p class="tw-quote">"Geweldig team dat echt met je meedenkt en meer doet dan verwacht."</p> <div class="tw-meta"> <span class="tw-name">Lars M.</span> <span class="tw-role">Ondernemer</span> </div> </div><div class="tw-item">  <p class="tw-quote">"De rapportages zijn helder en de resultaten kloppen met de praktijk."</p> <div class="tw-meta"> <span class="tw-name">Iris W.</span> <span class="tw-role">Marketing Lead</span> </div> </div><div class="tw-item">  <p class="tw-quote">"We zijn eindelijk zichtbaar op de zoekwoorden die tellen."</p> <div class="tw-meta"> <span class="tw-name">Joris P.</span> <span class="tw-role">Oprichter</span> </div> </div><div class="tw-item"> <div class="tw-stars"> <span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span><span class="tw-star"></span> </div> <p class="tw-quote">"Professioneel, betrokken en altijd bereikbaar. Sterk bureau!"</p> <div class="tw-meta"> <span class="tw-name">Nina R.</span> <span class="tw-role">Brand Manager</span> </div> </div> </div> </div> </section>

<style>
.tw{padding:5rem 2rem}
.tw--white{background:#fff;border-top:1px solid #e5e7eb}
.tw--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.tw--dark{background:#0a0a0a}
.tw-inner{max-width:1200px;margin:0 auto}
.tw-header{text-align:center;margin-bottom:3rem}
.tw-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.tw-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin:0}
.tw--white .tw-headline,.tw--light .tw-headline{color:#0a0a0a}
.tw--dark .tw-headline{color:#fff}
.tw-wall{columns:3 300px;gap:1.25rem}
.tw-item{break-inside:avoid;margin-bottom:1.25rem;padding:1.5rem;border-radius:.875rem}
.tw--white .tw-item{background:#f8fafc;border:1px solid #e5e7eb}
.tw--light .tw-item{background:#fff;border:1px solid #e5e7eb}
.tw--dark .tw-item{background:#ffffff0a;border:1px solid rgba(255,255,255,.07)}
.tw-stars{display:flex;gap:.2rem;margin-bottom:.625rem}
.tw-star{color:#f59e0b;font-size:.875rem}
.tw-quote{font-size:.9375rem;line-height:1.65;margin:0 0 .875rem;font-style:italic}
.tw--white .tw-quote,.tw--light .tw-quote{color:#374151}
.tw--dark .tw-quote{color:#ffffffb3}
.tw-meta{display:flex;flex-direction:column;gap:.125rem}
.tw-name{font-size:.875rem;font-weight:700}
.tw--white .tw-name,.tw--light .tw-name{color:#0a0a0a}
.tw--dark .tw-name{color:#fff}
.tw-role{font-size:.8125rem}
.tw--white .tw-role,.tw--light .tw-role{color:#9ca3af}
.tw--dark .tw-role{color:#ffffff4d}
</style>