src/components/social-proof/TestimonialsDark.astro
---
// TestimonialsDark, recovered from blurr-components.pages.dev
---
<section class="tsd"> <div class="tsd-inner"> <div class="tsd-header"> <span class="tsd-eyebrow">Klantbeoordelingen</span> <h2 class="tsd-headline">Bewezen resultaten, tevreden klanten</h2> </div> <div class="tsd-grid"> <div class="tsd-card tsd-card--featured"> <div class="tsd-stars"> <span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span> </div> <p class="tsd-quote">"BLURR is de beste marketing-investering die we ooit gemaakt hebben. Resultaten boven verwachting."</p> <footer class="tsd-footer"> <div> <cite class="tsd-name">Annelies de V.</cite> <span class="tsd-role">Directeur, TechFlow</span> </div> </footer> </div><div class="tsd-card"> <div class="tsd-stars"> <span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span> </div> <p class="tsd-quote">"Onze ROAS steeg van 1.8 naar 4.6 in 6 maanden. Spectaculaire resultaten."</p> <footer class="tsd-footer"> <div> <cite class="tsd-name">Thomas B.</cite> <span class="tsd-role">E-commerce Manager</span> </div> </footer> </div><div class="tsd-card"> <div class="tsd-stars"> <span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span> </div> <p class="tsd-quote">"Eindelijk een bureau dat transparant is over wat werkt en wat niet."</p> <footer class="tsd-footer"> <div> <cite class="tsd-name">Roos K.</cite> <span class="tsd-role">Marketing Director</span> </div> </footer> </div><div class="tsd-card"> <div class="tsd-stars"> <span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span><span class="tsd-star"></span> </div> <p class="tsd-quote">"Meer leads, lagere kosten. Precies wat we nodig hadden."</p> <footer class="tsd-footer"> <div> <cite class="tsd-name">Lars M.</cite> <span class="tsd-role">Oprichter</span> </div> </footer> </div> </div> </div> </section>
<style>
.tsd{background:#0a0a0a;padding:5rem 2rem}
.tsd-inner{max-width:1100px;margin:0 auto}
.tsd-header{text-align:center;margin-bottom:3rem}
.tsd-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.tsd-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.15;margin:0}
.tsd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.tsd-card{padding:2rem;border-radius:1rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:1.25rem}
.tsd-card--featured{background:var(--color-accent,#6366f1);border-color:transparent}
.tsd-stars{display:flex;gap:.2rem}
.tsd-star{color:#f59e0b;font-size:1rem}
.tsd-card--featured .tsd-star{color:#fde68a}
.tsd-quote{font-size:.9375rem;line-height:1.65;font-style:italic;margin:0;flex:1;color:#ffffffbf}
.tsd-card--featured .tsd-quote{color:#ffffffe6}
.tsd-footer{display:flex;align-items:center;gap:.75rem}
.tsd-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.tsd-name{display:block;font-size:.9375rem;font-weight:700;color:#fff;font-style:normal}
.tsd-role{display:block;font-size:.8125rem;color:#fff6}
.tsd-card--featured .tsd-role{color:#ffffffa6}
</style>