src/components/ui/ReviewStars.astro
---
// ReviewStars, recovered from blurr-components.pages.dev
---
<section class="rvs rvs--white"> <div class="rvs-inner"> <div class="rvs-summary"> <div class="rvs-score-block"> <span class="rvs-score">4.8</span> <span class="rvs-max">/5</span> </div> <div class="rvs-detail"> <div class="rvs-stars"> <span class="rvs-star"></span><span class="rvs-star"></span><span class="rvs-star"></span><span class="rvs-star"></span> <span class="rvs-star rvs-star--half"></span> </div> <p class="rvs-count">127 beoordelingen op Google</p> </div> </div> <div class="rvs-reviews"> <div class="rvs-review"> <div class="rvs-review-stars"> <span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span> </div> <p class="rvs-review-text">"Uitstekende service en merkbare resultaten. Onze ROI is verdriedubbeld in 6 maanden."</p> <span class="rvs-review-author">- Jan Pietersen</span> </div><div class="rvs-review"> <div class="rvs-review-stars"> <span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span> </div> <p class="rvs-review-text">"Professioneel team dat echt begrijpt wat ze doen. Aanrader voor ieder bedrijf."</p> <span class="rvs-review-author">- Roos van Dijk</span> </div><div class="rvs-review"> <div class="rvs-review-stars"> <span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span><span class="rvs-star rvs-star--sm"></span> </div> <p class="rvs-review-text">"Transparante communicatie en indrukwekkende resultaten. Al 2 jaar blij klant."</p> <span class="rvs-review-author">- Mark de Bruin</span> </div> </div> </div> </section>
<style>
.rvs{padding:4rem 2rem}
.rvs--white{background:#fff;border-top:1px solid #e5e7eb}
.rvs--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.rvs-inner{max-width:1100px;margin:0 auto}
.rvs-summary{display:flex;align-items:center;gap:1.5rem;justify-content:center;margin-bottom:3rem}
.rvs-score-block{display:flex;align-items:baseline;gap:.125rem}
.rvs-score{font-size:4rem;font-weight:900;color:#0a0a0a;line-height:1;letter-spacing:-.04em}
.rvs-max{font-size:1.25rem;color:#9ca3af}
.rvs-stars{display:flex;gap:.25rem;margin-bottom:.375rem}
.rvs-star{color:#f59e0b;font-size:1.5rem;line-height:1}
.rvs-star--half{opacity:.4}
.rvs-star--sm{font-size:.875rem}
.rvs-count{font-size:.875rem;color:#6b7280;margin:0}
.rvs-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.rvs-review{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1.5rem}
.rvs--white .rvs-review{background:#f8fafc}
.rvs-review-stars{display:flex;gap:.2rem;margin-bottom:.75rem}
.rvs-review-text{font-size:.9375rem;color:#374151;line-height:1.6;font-style:italic;margin:0 0 .75rem}
.rvs-review-author{font-size:.8125rem;color:#9ca3af;font-weight:600}
</style>