src/components/ui/CheckList.astro
---
// CheckList, recovered from blurr-components.pages.dev
---
<section class="chl__section chl__cols-2 chl__variant-check"> <div class="chl__header"> <p class="chl__eyebrow">Wat je krijgt</p> <h2 class="chl__headline">Alles inbegrepen, geen verborgen kosten</h2> </div> <ul class="chl__list" role="list"> <li class="chl__item" style="--delay: 0ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">Dedicated accountmanager</span> <span class="chl__desc">Één aanspreekpunt, altijd bereikbaar.</span> </span> </li><li class="chl__item" style="--delay: 75ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">Wekelijkse campagne-optimalisatie</span> <span class="chl__desc">Op basis van live data.</span> </span> </li><li class="chl__item" style="--delay: 150ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">Maandelijkse rapportage</span> <span class="chl__desc">Helder dashboard, geen Excel bijlagen.</span> </span> </li><li class="chl__item" style="--delay: 225ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">A/B testing van advertenties</span> <span class="chl__desc">Continu testen = continu beter.</span> </span> </li><li class="chl__item" style="--delay: 300ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">Conversie-tracking setup</span> <span class="chl__desc">Zodat we weten wat werkt.</span> </span> </li><li class="chl__item" style="--delay: 375ms"> <span class="chl__marker" aria-hidden="true"> <span class="chl__check-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 8.5L6.5 12L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> </span> <span class="chl__content"> <span class="chl__title">Geen langlopend contract</span> <span class="chl__desc">Maand-op-maand opzegbaar.</span> </span> </li> </ul> <div class="chl__cta"> <a href="#" class="chl__cta-btn">Bekijk prijzen</a> </div> </section>
<style>
.chl__section{padding:5rem 1.5rem;max-width:56rem;margin-inline:auto}
.chl__header{margin-bottom:2.5rem}
.chl__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .75rem}
.chl__headline{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--color-primary);margin:0 0 1rem;line-height:1.15}
.chl__sub{font-size:1.0625rem;color:var(--color-muted);margin:0;line-height:1.65}
.chl__list{list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.chl__cols-2 .chl__list{grid-template-columns:repeat(2,1fr)}
.chl__item{display:flex;align-items:flex-start;gap:.875rem;opacity:0;transform:translateY(14px)}
.chl__item--visible{animation:chl-reveal .45s ease forwards;animation-delay:var(--delay, 0ms)}
.chl__marker{flex-shrink:0;margin-top:.1rem}
.chl__variant-check .chl__check-icon,.chl__variant-accent .chl__check-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
.chl__variant-check .chl__check-icon{background:#22c55e1a;color:#16a34a}
.chl__variant-accent .chl__check-icon{background:#6366f11a;color:var(--color-accent)}
.chl__check-icon svg{width:14px;height:14px}
.chl__variant-numbered .chl__number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.chl__content{display:flex;flex-direction:column;gap:.25rem}
.chl__title{font-size:1rem;font-weight:700;color:var(--color-primary);line-height:1.3}
.chl__desc{font-size:.9rem;color:var(--color-muted);line-height:1.65}
.chl__cta{margin-top:2.5rem}
.chl__cta-btn{display:inline-flex;align-items:center;padding:.75rem 1.5rem;border-radius:var(--radius);background:var(--color-accent);color:#fff;font-size:.9375rem;font-weight:600;text-decoration:none;transition:opacity .18s ease,transform .18s ease}
.chl__cta-btn:hover{opacity:.9;transform:translateY(-1px)}
.chl__cols-2 .chl__list{grid-template-columns:1fr}
</style>