src/components/ui/ComparisonTable.astro
---
// ComparisonTable, recovered from blurr-components.pages.dev
---
<section class="cmp__section"> <div class="cmp__header"> <p class="cmp__eyebrow">Vergelijking</p> <h2 class="cmp__headline">Waarom kiezen voor BLURR?</h2> </div> <div class="cmp__table-wrap"> <table class="cmp__table" role="table"> <thead> <tr class="cmp__head-row"> <th class="cmp__th cmp__th--label" scope="col"></th> <th class="cmp__th cmp__th--ours" scope="col"> <span class="cmp__our-pill">BLURR</span> </th> <th class="cmp__th cmp__th--theirs" scope="col"> <span class="cmp__their-label">Andere bureaus</span> </th> </tr> </thead> <tbody> <tr class="cmp__row"> <td class="cmp__td cmp__td--label">Dedicated accountmanager</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(0,0,0,0.06)"/><path d="M6 6L12 12M12 6L6 12" stroke="#9ca3af" stroke-width="1.75" stroke-linecap="round"/></svg></td> </tr><tr class="cmp__row cmp__row--even"> <td class="cmp__td cmp__td--label">Wekelijkse optimalisaties</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(0,0,0,0.06)"/><path d="M6 6L12 12M12 6L6 12" stroke="#9ca3af" stroke-width="1.75" stroke-linecap="round"/></svg></td> </tr><tr class="cmp__row"> <td class="cmp__td cmp__td--label">Realtime rapportage dashboard</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(0,0,0,0.06)"/><path d="M6 6L12 12M12 6L6 12" stroke="#9ca3af" stroke-width="1.75" stroke-linecap="round"/></svg></td> </tr><tr class="cmp__row cmp__row--even"> <td class="cmp__td cmp__td--label">Geen langlopend contract</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(0,0,0,0.06)"/><path d="M6 6L12 12M12 6L6 12" stroke="#9ca3af" stroke-width="1.75" stroke-linecap="round"/></svg></td> </tr><tr class="cmp__row"> <td class="cmp__td cmp__td--label">Transparante prijzen</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><span class="cmp__cell-text">Soms</span></td> </tr><tr class="cmp__row cmp__row--even"> <td class="cmp__td cmp__td--label">A/B testing inbegrepen</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><span class="cmp__cell-text">Meerprijs</span></td> </tr><tr class="cmp__row"> <td class="cmp__td cmp__td--label">Multi-channel strategie</td> <td class="cmp__td cmp__td--ours"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> <td class="cmp__td cmp__td--theirs"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="9" cy="9" r="9" fill="rgba(34,197,94,0.12)"/><path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="#16a34a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></td> </tr> </tbody> </table> </div> </section>
<style>
.cmp__section{padding:5rem 1.5rem;max-width:56rem;margin-inline:auto}
.cmp__header{text-align:center;margin-bottom:2.5rem}
.cmp__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .75rem}
.cmp__headline{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--color-primary);margin:0;line-height:1.15}
.cmp__table-wrap{overflow-x:auto;border-radius:.875rem;border:1px solid rgba(0,0,0,.09);box-shadow:0 2px 12px #0000000d}
.cmp__table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--color-bg);border-radius:.875rem;overflow:hidden}
.cmp__head-row{background:#f9f9fb;border-bottom:1px solid rgba(0,0,0,.08)}
.cmp__th{padding:1rem 1.25rem;text-align:center;font-weight:600;font-size:.875rem;color:var(--color-muted)}
.cmp__th--label{text-align:left;width:45%}
.cmp__th--ours{background:var(--color-accent);width:27.5%}
.cmp__th--theirs{width:27.5%}
.cmp__our-pill{display:inline-flex;align-items:center;padding:.25em .9em;border-radius:999px;background:#fff;color:var(--color-accent);font-size:.8125rem;font-weight:700;letter-spacing:.03em}
.cmp__their-label{color:var(--color-muted)}
.cmp__row{border-bottom:1px solid rgba(0,0,0,.06);transition:background .15s ease}
.cmp__row:last-child{border-bottom:none}
.cmp__row--even{background:#00000004}
.cmp__row:hover{background:#6366f108}
.cmp__td{padding:.9rem 1.25rem;font-size:.9375rem;vertical-align:middle;text-align:center}
.cmp__td--label{text-align:left;color:var(--color-primary);font-weight:500}
.cmp__td--ours{background:#6366f10a}
.cmp__td--ours svg,.cmp__td--theirs svg{display:inline-block;vertical-align:middle}
.cmp__cell-text{font-size:.875rem;color:var(--color-primary);font-weight:500}
.cmp__td,.cmp__th{padding:.65rem .75rem;font-size:.8125rem}
.cmp__th--label,.cmp__td--label{font-size:.8125rem}
</style>