IconComparison icon

---
// IconComparison, recovered from blurr-components.pages.dev
---

<section class="icmpr"> <h2 class="icmpr__title">BLURR vs traditioneel bureau</h2> <div class="icmpr__table"> <div class="icmpr__header"> <div class="icmpr__h-feature"></div> <div class="icmpr__h-col icmpr__h-col--a">Traditioneel bureau</div> <div class="icmpr__h-col icmpr__h-col--b">BLURR</div> </div> <div class="icmpr__row"> <div class="icmpr__feature">Één aanspreekpunt</div> <div class="icmpr__val icmpr__val--a"> <span class="icmpr__bool icmpr__bool--no">  </span> </div> <div class="icmpr__val icmpr__val--b"> <span class="icmpr__bool icmpr__bool--yes"> &#10003; </span> </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Realtime dashboard</div> <div class="icmpr__val icmpr__val--a"> <span class="icmpr__bool icmpr__bool--no">  </span> </div> <div class="icmpr__val icmpr__val--b"> <span class="icmpr__bool icmpr__bool--yes"> &#10003; </span> </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Wekelijkse optimalisatie</div> <div class="icmpr__val icmpr__val--a"> <span class="icmpr__bool icmpr__bool--no">  </span> </div> <div class="icmpr__val icmpr__val--b"> <span class="icmpr__bool icmpr__bool--yes"> &#10003; </span> </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Vaste maandprijs</div> <div class="icmpr__val icmpr__val--a"> <span class="icmpr__bool icmpr__bool--no">  </span> </div> <div class="icmpr__val icmpr__val--b"> <span class="icmpr__bool icmpr__bool--yes"> &#10003; </span> </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Resultaatgarantie</div> <div class="icmpr__val icmpr__val--a"> <span class="icmpr__bool icmpr__bool--no">  </span> </div> <div class="icmpr__val icmpr__val--b"> <span class="icmpr__bool icmpr__bool--yes"> &#10003; </span> </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Contractduur</div> <div class="icmpr__val icmpr__val--a"> 12 maanden </div> <div class="icmpr__val icmpr__val--b"> Maand tot maand </div> </div><div class="icmpr__row"> <div class="icmpr__feature">Opzegtermijn</div> <div class="icmpr__val icmpr__val--a"> 3 maanden </div> <div class="icmpr__val icmpr__val--b"> 1 maand </div> </div> </div> </section>

<style>
.icmpr{padding:2rem 0}
.icmpr__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 2rem}
.icmpr__table{border:1px solid #eee;border-radius:12px;overflow:hidden}
.icmpr__header,.icmpr__row{display:grid;grid-template-columns:2fr 1fr 1fr}
.icmpr__header{background:#f9f9f9;border-bottom:2px solid #eee}
.icmpr__h-feature,.icmpr__h-col{padding:.9rem 1.25rem;font-size:.85rem;font-weight:700;color:#555}
.icmpr__h-col--b{color:var(--color-accent, #6366f1);background:#6366f10a}
.icmpr__row{border-bottom:1px solid #f0f0f0}
.icmpr__row:last-child{border-bottom:none}
.icmpr__row:hover{background:#fafafa}
.icmpr__feature{padding:.85rem 1.25rem;font-size:.9rem;color:var(--color-primary, #0a0a0a);font-weight:500;display:flex;align-items:center}
.icmpr__val{padding:.85rem 1.25rem;display:flex;align-items:center;font-size:.88rem;color:#666}
.icmpr__val--b{background:#6366f108}
.icmpr__bool{font-size:1rem;font-weight:700}
.icmpr__bool--yes{color:#16a34a}
.icmpr__bool--no{color:#dc2626}
</style>