src/components/sections/FeaturesIconBar.astro
---
// FeaturesIconBar, recovered from blurr-components.pages.dev
---
<section class="fib fib--bg-light" data-component="features-icon-bar"> <div class="fib__inner"> <div class="fib__header"> <p class="fib__eyebrow">Alles inbegrepen</p> <h2 class="fib__title">Wat je krijgt met BLURR</h2> </div> <div class="fib__grid" style="--cols: 4"> <div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span> </div> <h3 class="fib__item-headline">Geen contracten</h3> <p class="fib__item-body">Maandelijks opzegbaar. Wij verdienen je vertrouwen elke maand opnieuw.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></span> </div> <h3 class="fib__item-headline">Snel live</h3> <p class="fib__item-body">Campagnes actief binnen 48 uur na onboarding.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></span> </div> <h3 class="fib__item-headline">Live dashboard</h3> <p class="fib__item-body">Altijd inzicht in je resultaten via ons dashboard.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></span> </div> <h3 class="fib__item-headline">Dedicated team</h3> <p class="fib__item-body">Vaste contactpersoon die jouw business kent.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span> </div> <h3 class="fib__item-headline">Transparante prijs</h3> <p class="fib__item-body">Geen verborgen kosten. Wat je ziet is wat je betaalt.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg></span> </div> <h3 class="fib__item-headline">Bewezen resultaten</h3> <p class="fib__item-body">Gemiddeld 4.2× ROAS voor onze e-commerce klanten.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span> </div> <h3 class="fib__item-headline">Snelle support</h3> <p class="fib__item-body">We reageren binnen 2 uur op werkdagen.</p> </div><div class="fib__item"> <div class="fib__icon-wrap"> <span class="fib__icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></span> </div> <h3 class="fib__item-headline">Continue optimalisatie</h3> <p class="fib__item-body">Wekelijkse tests, maandelijkse rapportage.</p> </div> </div> </div> </section>
<style>
.fib{padding:5rem 1.5rem}
.fib--bg-white{background:var(--color-bg, #fff)}
.fib--bg-light{background:#f5f5f7}
.fib--bg-dark{background:var(--color-primary, #0a0a0a)}
.fib__inner{max-width:1200px;margin:0 auto}
.fib__header{text-align:center;margin-bottom:3.5rem;max-width:640px;margin-left:auto;margin-right:auto}
.fib__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.fib__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.fib--bg-dark .fib__title{color:#fff}
.fib__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.fib__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.65}
.fib--bg-dark .fib__sub{color:#ffffff8c}
.fib__grid{display:grid;grid-template-columns:repeat(var(--cols, 4),1fr);gap:2.5rem}
.fib__item{display:flex;flex-direction:column}
.fib__icon-wrap{width:48px;height:48px;background:color-mix(in srgb,var(--color-accent, #6366f1) 12%,transparent);border-radius:calc(var(--radius, .5rem) * 1.25);display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6366f1);margin-bottom:1.25rem;font-size:1.375rem;flex-shrink:0}
.fib__icon-wrap svg{width:22px;height:22px}
.fib__item-headline{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.5rem}
.fib--bg-dark .fib__item-headline{color:#fff}
.fib__item-body{font-size:.9rem;line-height:1.65;color:var(--color-muted, #6b7280)}
.fib--bg-dark .fib__item-body{color:#ffffff80}
.fib__grid{grid-template-columns:repeat(2,1fr)}
.fib__grid{grid-template-columns:1fr}
</style>