src/components/social-proof/TestimonialsSingle.astro
---
// TestimonialsSingle, recovered from blurr-components.pages.dev
---
<section class="tss tss--white"> <div class="tss-inner"> <div class="tss-stars"> <span class="tss-star"></span><span class="tss-star"></span><span class="tss-star"></span><span class="tss-star"></span><span class="tss-star"></span> </div> <blockquote class="tss-quote">"BLURR heeft onze Google Ads-kosten met 35% verlaagd terwijl onze omzet met 60% steeg. Ongelooflijk resultaat in slechts 4 maanden."</blockquote> <footer class="tss-footer"> <img data-allow-img src="/img/ext/pravatar-52-5-bfecaa.jpg" alt="Annelies de Vries" class="tss-avatar" loading="lazy" decoding="async" > <div class="tss-meta"> <cite class="tss-name">Annelies de Vries</cite> <span class="tss-role">Marketingdirecteur, TechFlow B.V.</span> </div> </footer> </div> </section>
<style>
.tss{padding:6rem 2rem}
.tss--white{background:#fff}
.tss--light{background:#f8fafc}
.tss--dark{background:#0a0a0a}
.tss-inner{max-width:820px;margin:0 auto;text-align:center}
.tss-stars{display:flex;justify-content:center;gap:.25rem;margin-bottom:1.5rem}
.tss-star{color:#f59e0b;font-size:1.25rem}
.tss-quote{font-size:clamp(1.375rem,2.5vw,2rem);line-height:1.55;font-style:italic;margin:0 0 2.5rem}
.tss--white .tss-quote,.tss--light .tss-quote{color:#0a0a0a}
.tss--dark .tss-quote{color:#ffffffd9}
.tss-footer{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.tss-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover}
.tss-meta{text-align:left}
.tss-name{display:block;font-size:1rem;font-weight:700;font-style:normal}
.tss--white .tss-name,.tss--light .tss-name{color:#0a0a0a}
.tss--dark .tss-name{color:#fff}
.tss-role{display:block;font-size:.875rem}
.tss--white .tss-role,.tss--light .tss-role{color:#6b7280}
.tss--dark .tss-role{color:#ffffff73}
.tss-logo{height:28px;opacity:.4;filter:grayscale(1);margin-left:1.5rem}
</style>