src/components/social-proof/TestimonialsMinimal.astro
---
// TestimonialsMinimal, recovered from blurr-components.pages.dev
---
<section class="tm tm--white"> <div class="tm-inner"> <div class="tm-header"> <span class="tm-eyebrow">Klantervaringen</span> <h2 class="tm-headline">Wat onze klanten vinden</h2> </div> <div class="tm-list"> <div class="tm-item"> <div class="tm-stars"> <span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span> </div> <p class="tm-quote">"Dankzij BLURR zijn we nu zichtbaar op de zoekwoorden die ertoe doen. Meer aanvragen dan ooit."</p> <div class="tm-meta"> <span class="tm-name">Bas Koopmans</span> <span class="tm-sep">·</span> <span class="tm-role">Directeur Acquisitie, FlexBuild</span> </div> </div><div class="tm-item"> <div class="tm-stars"> <span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span> </div> <p class="tm-quote">"Ze zijn eerlijk, direct en leveren resultaat. Precies wat je wil van een marketingbureau."</p> <div class="tm-meta"> <span class="tm-name">Eva Jansen</span> <span class="tm-sep">·</span> <span class="tm-role">Marketing Manager, RetailX</span> </div> </div><div class="tm-item"> <div class="tm-stars"> <span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span><span class="tm-star"></span> </div> <p class="tm-quote">"Onze e-commerce omzet via Meta Ads is verdrievoudigd. Absoluut aanrader."</p> <div class="tm-meta"> <span class="tm-name">Sven de Groot</span> <span class="tm-sep">·</span> <span class="tm-role">E-commerce Eigenaar</span> </div> </div><div class="tm-item"> <p class="tm-quote">"Geweldig om te werken met een team dat écht begrijpt wat conversie drijft."</p> <div class="tm-meta"> <span class="tm-name">Lisa Mulder</span> <span class="tm-sep">·</span> <span class="tm-role">CMO, DataDriven</span> </div> </div> </div> </div> </section>
<style>
.tm{padding:5rem 2rem}
.tm--white{background:#fff;border-top:1px solid #e5e7eb}
.tm--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.tm-inner{max-width:1100px;margin:0 auto}
.tm-header{text-align:center;margin-bottom:3.5rem}
.tm-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.tm-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0}
.tm-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem 3rem}
.tm-item{display:flex;flex-direction:column;gap:.875rem;padding-bottom:2.5rem;border-bottom:1px solid #e5e7eb}
.tm-stars{display:flex;gap:.2rem}
.tm-star{color:#f59e0b;font-size:.875rem}
.tm-quote{font-size:1rem;line-height:1.7;color:#374151;font-style:italic;margin:0}
.tm-meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.tm-name{font-weight:700;color:#0a0a0a}
.tm-sep{color:#d1d5db}
.tm-role{color:#9ca3af}
</style>