src/components/ui/SocialProofBanner.astro
---
// SocialProofBanner, recovered from blurr-components.pages.dev
---
<div class="spb spb--light"> <div class="spb-inner"> <div class="spb-avatars"> <img data-allow-img src="/img/ext/pravatar-32-1-d03803.jpg" alt="" class="spb-avatar" style="z-index:5" loading="lazy" decoding="async" ><img data-allow-img src="/img/ext/pravatar-32-2-37bba7.jpg" alt="" class="spb-avatar" style="z-index:4" loading="lazy" decoding="async" ><img data-allow-img src="/img/ext/pravatar-32-3-28a30a.jpg" alt="" class="spb-avatar" style="z-index:3" loading="lazy" decoding="async" ><img data-allow-img src="/img/ext/pravatar-32-4-71e3d3.jpg" alt="" class="spb-avatar" style="z-index:2" loading="lazy" decoding="async" > </div> <div class="spb-text"> <span class="spb-main">Vertrouwd door 120+ bedrijven</span> <span class="spb-sub">Gemiddeld 4.8/5 tevredenheid</span> </div> <div class="spb-rating"> <div class="spb-stars"> <span></span><span></span><span></span><span></span><span></span> </div> <span class="spb-count">127+ reviews</span> </div> </div> </div>
<style>
.spb{padding:1rem 2rem}
.spb--white{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem}
.spb--light{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.75rem}
.spb--dark{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.75rem}
.spb-inner{max-width:700px;margin:0 auto;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center}
.spb-avatars{display:flex}
.spb-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px}
.spb-avatar:first-child{margin-left:0}
.spb-text{display:flex;flex-direction:column}
.spb-main{font-size:.9375rem;font-weight:700}
.spb--white .spb-main,.spb--light .spb-main{color:#0a0a0a}
.spb--dark .spb-main{color:#fff}
.spb-sub{font-size:.8125rem}
.spb--white .spb-sub,.spb--light .spb-sub{color:#6b7280}
.spb--dark .spb-sub{color:#ffffff73}
.spb-rating{display:flex;flex-direction:column;align-items:center}
.spb-stars{color:#f59e0b;font-size:.875rem;letter-spacing:.05em}
.spb-count{font-size:.75rem}
.spb--white .spb-count,.spb--light .spb-count{color:#9ca3af}
.spb--dark .spb-count{color:#ffffff4d}
</style>