Zoeken...  ⌘K GitHub

TestimonialsHighlight Social Proof

TestimonialsHighlight component.

/testimonials-highlight
src/components/social-proof/TestimonialsHighlight.astro
---
// TestimonialsHighlight, recovered from blurr-components.pages.dev
---

<section class="th th--light"> <div class="th-inner"> <div class="th-left"> <p class="th-eyebrow">Wat klanten zeggen</p> <div class="th-stats"> <div class="th-stat"> <span class="th-stat-val">200+</span> <span class="th-stat-lbl">Tevreden klanten</span> </div><div class="th-stat"> <span class="th-stat-val">94%</span> <span class="th-stat-lbl">Retentiepercentage</span> </div><div class="th-stat"> <span class="th-stat-val">4.9</span> <span class="th-stat-lbl">Gemiddeld cijfer</span> </div> </div> </div> <div class="th-quotes"> <blockquote class="th-quote"> <p class="th-quote-text">"Het beste marketingbureau waarmee we hebben samengewerkt. Resultaten zijn meetbaar en indrukwekkend."</p> <footer class="th-quote-footer"> <img data-allow-img src="/img/ext/pravatar-40-5-40475a.jpg" alt="Annelies de Vries" class="th-avatar" loading="lazy" decoding="async" > <div> <cite class="th-name">Annelies de Vries</cite> <span class="th-role">Directeur, TechFlow B.V.</span> </div> </footer> </blockquote><blockquote class="th-quote"> <p class="th-quote-text">"In 6 maanden steeg onze organische traffic met 380%. BLURR leverde precies wat ze beloofden."</p> <footer class="th-quote-footer"> <img data-allow-img src="/img/ext/pravatar-40-8-7968ce.jpg" alt="Thomas van den Berg" class="th-avatar" loading="lazy" decoding="async" > <div> <cite class="th-name">Thomas van den Berg</cite> <span class="th-role">CMO, GreenBuild</span> </div> </footer> </blockquote> </div> </div> </section>

<style>
.th{padding:5rem 2rem}
.th--white{background:#fff;border-top:1px solid #e5e7eb}
.th--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.th-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:start}
.th-eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin:0 0 2rem}
.th-stats{display:flex;flex-direction:column;gap:1.75rem}
.th-stat{display:flex;flex-direction:column}
.th-stat-val{font-size:3rem;font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1}
.th-stat-lbl{font-size:.875rem;color:#6b7280;margin-top:.25rem}
.th-quotes{display:flex;flex-direction:column;gap:1.5rem}
.th-quote{margin:0;padding:2rem;border-radius:1rem}
.th--white .th-quote{background:#f8fafc;border:1px solid #e5e7eb}
.th--light .th-quote{background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 12px #0000000d}
.th-quote-text{font-size:1rem;line-height:1.65;font-style:italic;color:#374151;margin:0 0 1.25rem}
.th-quote-footer{display:flex;align-items:center;gap:.75rem}
.th-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.th-name{display:block;font-size:.9375rem;font-weight:700;color:#0a0a0a;font-style:normal}
.th-role{display:block;font-size:.8125rem;color:#9ca3af}
.th-inner{grid-template-columns:1fr;gap:2.5rem}
</style>