src/components/ui/RatingBreakdown.astro
---
// RatingBreakdown, recovered from blurr-components.pages.dev
---
<section class="rb rb--white"> <div class="rb-inner"> <h2 class="rb-headline">Hoe klanten ons beoordelen</h2> <div class="rb-content"> <div class="rb-summary"> <div class="rb-big-score">4.8</div> <div class="rb-stars"> <span class="rb-star"></span><span class="rb-star"></span><span class="rb-star"></span><span class="rb-star"></span><span class="rb-star"></span> </div> <p class="rb-count">127 reviews op Google</p> </div> <div class="rb-bars"> <div class="rb-bar-row"> <span class="rb-bar-label">Resultaten</span> <div class="rb-bar-track"> <div class="rb-bar-fill" style="width: 98%"></div> </div> <span class="rb-bar-score">4.9</span> </div><div class="rb-bar-row"> <span class="rb-bar-label">Communicatie</span> <div class="rb-bar-track"> <div class="rb-bar-fill" style="width: 96%"></div> </div> <span class="rb-bar-score">4.8</span> </div><div class="rb-bar-row"> <span class="rb-bar-label">Betrouwbaarheid</span> <div class="rb-bar-track"> <div class="rb-bar-fill" style="width: 98%"></div> </div> <span class="rb-bar-score">4.9</span> </div><div class="rb-bar-row"> <span class="rb-bar-label">Prijs-kwaliteit</span> <div class="rb-bar-track"> <div class="rb-bar-fill" style="width: 94%"></div> </div> <span class="rb-bar-score">4.7</span> </div><div class="rb-bar-row"> <span class="rb-bar-label">Snelheid</span> <div class="rb-bar-track"> <div class="rb-bar-fill" style="width: 92%"></div> </div> <span class="rb-bar-score">4.6</span> </div> </div> </div> </div> </section>
<style>
.rb{padding:5rem 2rem}
.rb--white{background:#fff;border-top:1px solid #e5e7eb}
.rb--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.rb-inner{max-width:800px;margin:0 auto}
.rb-headline{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#0a0a0a;letter-spacing:-.03em;line-height:1.2;margin:0 0 2.5rem;text-align:center}
.rb-content{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
.rb-summary{text-align:center}
.rb-big-score{font-size:5rem;font-weight:900;color:#0a0a0a;letter-spacing:-.05em;line-height:1}
.rb-stars{display:flex;justify-content:center;gap:.25rem;margin:.5rem 0}
.rb-star{color:#f59e0b;font-size:1.25rem}
.rb-count{font-size:.8125rem;color:#9ca3af;margin:0;white-space:nowrap}
.rb-bars{display:flex;flex-direction:column;gap:1rem}
.rb-bar-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center}
.rb-bar-label{font-size:.9375rem;color:#374151;font-weight:500}
.rb-bar-track{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;min-width:180px}
.rb-bar-fill{height:100%;background:var(--color-accent,#6366f1);border-radius:4px}
.rb-bar-score{font-size:.875rem;font-weight:700;color:#0a0a0a;min-width:2.5rem;text-align:right}
.rb-content{grid-template-columns:1fr}
.rb-summary{display:flex;align-items:center;gap:1.5rem}
</style>