ContentComparison Sections

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

<div class="ccp-wrap"> <h2 class="ccp-heading">Traditioneel bureau vs. BLURR</h2> <div class="ccp-grid"> <div class="ccp-col ccp-col--left"> <div class="ccp-label ccp-label--left">Traditioneel bureau</div> <ul class="ccp-list"> <li class="ccp-item ccp-item--left"> <span class="ccp-icon" aria-hidden="true"></span> Lange onboarding van 4–8 weken </li><li class="ccp-item ccp-item--left"> <span class="ccp-icon" aria-hidden="true"></span> Vaste formats, weinig flexibiliteit </li><li class="ccp-item ccp-item--left"> <span class="ccp-icon" aria-hidden="true"></span> Rapportages eens per kwartaal </li> </ul> </div> <div class="ccp-divider" aria-hidden="true">vs</div> <div class="ccp-col ccp-col--right"> <div class="ccp-label ccp-label--right">BLURR aanpak</div> <ul class="ccp-list"> <li class="ccp-item ccp-item--right"> <span class="ccp-icon" aria-hidden="true">&#10003;</span> Live binnen 2 weken </li><li class="ccp-item ccp-item--right"> <span class="ccp-icon" aria-hidden="true">&#10003;</span> Maatwerk campagnes per kanaal </li><li class="ccp-item ccp-item--right"> <span class="ccp-icon" aria-hidden="true">&#10003;</span> Wekelijkse data &amp; inzichten </li> </ul> </div> </div> </div>

<style>
.ccp-wrap{padding:2.5rem 0}
.ccp-heading{font-size:2rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 2rem;text-align:center}
.ccp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:start}
.ccp-grid{grid-template-columns:1fr}
.ccp-divider{display:none}
.ccp-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.5rem 1rem;border-radius:4px;margin-bottom:1rem;text-align:center}
.ccp-label--left{background:#fee2e2;color:#b91c1c}
.ccp-label--right{background:#dcfce7;color:#15803d}
.ccp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.ccp-item{display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem;line-height:1.5;color: #e8e8e8;padding:.75rem;border-radius:6px;background:#f9f9f9}
.ccp-item--left .ccp-icon{color:#ef4444}
.ccp-item--right .ccp-icon{color:#22c55e}
.ccp-icon{font-style:normal;font-weight:700;flex-shrink:0;margin-top:.05rem}
.ccp-divider{font-size:1.25rem;font-weight:800;color:#ccc;padding-top:3.5rem}
</style>