src/components/social-proof/TestimonialsMasonry.astro
---
// TestimonialsMasonry, recovered from blurr-components.pages.dev
---
<section class="tm" data-component="testimonials-masonry"> <div class="tm__inner"> <div class="tm__header"> <p class="tm__eyebrow">Klanten over ons</p> <h2 class="tm__title">Wat anderen <em>zeggen</em></h2> </div> <div class="tm__masonry"> <div class="tm__card tm__card--featured"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">Binnen 3 maanden was ons aantal leads verdubbeld. BLURR begrijpt ons bedrijf echt en levert resultaten die ertoe doen.</p> <div class="tm__author"> <div> <div class="tm__author-name">Jan Bakker</div> <div class="tm__author-meta"> Eigenaar, Bakker Loodgieters </div> </div> </div> </div><div class="tm__card"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">Eindelijk een bureau dat doet wat het belooft. Onze ROAS ging van 1.8 naar 4.2 in 2 maanden.</p> <div class="tm__author"> <div> <div class="tm__author-name">Sofie de Vries</div> <div class="tm__author-meta"> Marketing Manager, TechCorp BV </div> </div> </div> </div><div class="tm__card"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">Google Ads kostte ons veel geld zonder resultaat. Nu zien we 4× ROAS consistent.</p> <div class="tm__author"> <div> <div class="tm__author-name">Pieter Janssen</div> <div class="tm__author-meta"> Directeur, Janssen Installatie </div> </div> </div> </div><div class="tm__card"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">Super snelle onboarding en direct resultaten. Aanrader voor iedereen die serieus wil groeien.</p> <div class="tm__author"> <div> <div class="tm__author-name">Lisa Hoekstra</div> <div class="tm__author-meta"> Founder, Hoekstra Mode </div> </div> </div> </div><div class="tm__card"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">Transparante rapportages, altijd bereikbaar en echt een partner die meedenkt.</p> <div class="tm__author"> <div> <div class="tm__author-name">Mark Visscher</div> <div class="tm__author-meta"> CEO, Visscher Tech </div> </div> </div> </div><div class="tm__card"> <div class="tm__stars"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> </svg> </div> <p class="tm__text">We hebben eindelijk grip op onze marketing. BLURR maakt het begrijpelijk en effectief.</p> <div class="tm__author"> <div> <div class="tm__author-name">Anne Smits</div> <div class="tm__author-meta"> Operations Manager, Smits BV </div> </div> </div> </div> </div> </div> </section>
<style>
.tm{background:#f5f5f7;padding:5rem 1.5rem}
.tm__inner{max-width:1200px;margin:0 auto}
.tm__header{text-align:center;margin-bottom:3rem}
.tm__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.tm__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a)}
.tm__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.tm__masonry{columns:3;column-gap:1.25rem}
.tm__card{break-inside:avoid;background:#fff;border-radius:calc(var(--radius, .5rem) * 1.5);padding:1.5rem;margin-bottom:1.25rem;border:1px solid rgba(0,0,0,.06);transition:box-shadow .2s,transform .2s}
.tm__card:hover{box-shadow:0 8px 32px #00000014;transform:translateY(-2px)}
.tm__card--featured{background:var(--color-accent, #6366f1);color:#fff;border-color:transparent}
.tm__stars{display:flex;gap:2px;margin-bottom:.875rem;color:#f59e0b}
.tm__card--featured .tm__stars{color:#ffffffe6}
.tm__text{font-size:.9375rem;line-height:1.65;color:var(--color-primary, #0a0a0a);margin-bottom:1.25rem}
.tm__card--featured .tm__text{color:#ffffffe6}
.tm__author{display:flex;align-items:center;gap:.625rem}
.tm__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tm__author-name{font-size:.875rem;font-weight:700;color:var(--color-primary, #0a0a0a)}
.tm__card--featured .tm__author-name{color:#fff}
.tm__author-meta{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.tm__card--featured .tm__author-meta{color:#ffffffa6}
.tm__masonry{columns:2}
.tm__masonry{columns:1}
</style>