TestimonialsCarousel Social Proof

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

<section class="tc tc--white"> <div class="tc-header"> <span class="tc-eyebrow">Klantbeoordelingen</span> <h2 class="tc-headline">Anderen gingen je voor</h2> </div> <div class="tc-track"> <div class="tc-card"> <div class="tc-stars"> <span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span> </div> <p class="tc-quote">"BLURR heeft onze online zichtbaarheid volledig getransformeerd. Meer aanvragen, betere kwaliteit."</p> <footer class="tc-footer">  <div> <cite class="tc-name">Annelies de V.</cite> <span class="tc-role">Directeur, TechFlow</span> </div> </footer> </div><div class="tc-card"> <div class="tc-stars"> <span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span> </div> <p class="tc-quote">"De samenwerking voelt als een verlengstuk van ons eigen marketingteam."</p> <footer class="tc-footer">  <div> <cite class="tc-name">Thomas B.</cite> <span class="tc-role">CMO, GreenBuild</span> </div> </footer> </div><div class="tc-card"> <div class="tc-stars"> <span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span> </div> <p class="tc-quote">"Onze Google Ads-kosten zijn gehalveerd terwijl de omzet verdubbeld is."</p> <footer class="tc-footer">  <div> <cite class="tc-name">Roos K.</cite> <span class="tc-role">E-commerce Manager, Stijlvol Wonen</span> </div> </footer> </div><div class="tc-card"> <div class="tc-stars"> <span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span><span class="tc-star"></span> </div> <p class="tc-quote">"Eindelijk een bureau dat zijn beloften nakomt én inzichtelijk rapporteert."</p> <footer class="tc-footer">  <div> <cite class="tc-name">Lars M.</cite> <span class="tc-role">Oprichter, FlexHR</span> </div> </footer> </div> </div> </section>

<style>
.tc{padding:5rem 0;overflow:hidden}
.tc--white{background:#fff;border-top:1px solid #e5e7eb}
.tc--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.tc--dark{background:#0a0a0a}
.tc-header{text-align:center;padding:0 2rem;margin-bottom:3rem}
.tc-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.tc-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin:0}
.tc--white .tc-headline,.tc--light .tc-headline{color:#0a0a0a}
.tc--dark .tc-headline{color:#fff}
.tc-track{display:flex;gap:1.5rem;overflow-x:auto;padding:.5rem 2rem 2rem;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.tc-track::-webkit-scrollbar{display:none}
.tc-card{flex:0 0 360px;scroll-snap-align:start;padding:2rem;border-radius:1rem;display:flex;flex-direction:column;gap:1.25rem}
.tc--white .tc-card{background:#f8fafc;border:1px solid #e5e7eb}
.tc--light .tc-card{background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 12px #0000000d}
.tc--dark .tc-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08)}
.tc-stars{display:flex;gap:.2rem}
.tc-star{color:#f59e0b;font-size:1rem}
.tc-quote{font-size:.9375rem;line-height:1.65;font-style:italic;margin:0;flex:1}
.tc--white .tc-quote,.tc--light .tc-quote{color:#374151}
.tc--dark .tc-quote{color:#ffffffb3}
.tc-footer{display:flex;align-items:center;gap:.75rem}
.tc-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.tc-name{display:block;font-size:.9375rem;font-weight:700;font-style:normal}
.tc--white .tc-name,.tc--light .tc-name{color:#0a0a0a}
.tc--dark .tc-name{color:#fff}
.tc-role{display:block;font-size:.8125rem}
.tc--white .tc-role,.tc--light .tc-role{color:#6b7280}
.tc--dark .tc-role{color:#fff6}
</style>