src/components/sections/FeaturesBento.astro
---
// FeaturesBento, recovered from blurr-components.pages.dev
---
<section class="fbt" data-component="features-bento"> <div class="fbt__inner"> <div class="fbt__header"> <p class="fbt__eyebrow">Onze aanpak</p> <h2 class="fbt__title">Data + <em>creativiteit</em> = groei</h2> </div> <div class="fbt__grid"> <div class="fbt__cell fbt__cell--lg fbt__cell--image"> <img data-allow-img src="/img/ext/photo-1551434678-e076c223a692-w800-09e674.jpg" alt="" class="fbt__cell-img" loading="lazy" decoding="async" > </div><div class="fbt__cell fbt__cell--md fbt__cell--accent"> <div class="fbt__stat"> <div class="fbt__stat-value">4.2×</div> <div class="fbt__stat-label">Gemiddeld ROAS</div> </div> </div><div class="fbt__cell fbt__cell--sm"> <div class="fbt__stat"> <div class="fbt__stat-value">80+</div> <div class="fbt__stat-label">Klanten</div> </div> </div><div class="fbt__cell fbt__cell--sm fbt__cell--dark"> <div class="fbt__stat"> <div class="fbt__stat-value">93%</div> <div class="fbt__stat-label">Retentie</div> </div> </div><div class="fbt__cell fbt__cell--wide"> <div class="fbt__text"> <h3 class="fbt__cell-headline">Altijd transparant over resultaten</h3> <p class="fbt__cell-body">Elke maand een duidelijk rapport. Geen magie, wel meetbare groei.</p> </div> </div><div class="fbt__cell fbt__cell--md fbt__cell--dark"> <div class="fbt__quote"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" opacity="0.3"> <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path> </svg> <p class="fbt__quote-text">BLURR verdubbelde onze leads in 2 maanden.</p> <p class="fbt__quote-author">- Sarah, TechCorp</p> </div> </div><div class="fbt__cell fbt__cell--md fbt__cell--image"> <img data-allow-img src="/img/ext/photo-1504868584819-f8e8b4b6d7e3-w600-1cf55b.jpg" alt="" class="fbt__cell-img" loading="lazy" decoding="async" > </div> </div> </div> </section>
<style>
.fbt{background:#f5f5f7;padding:5rem 1.5rem}
.fbt__inner{max-width:1200px;margin:0 auto}
.fbt__header{text-align:center;margin-bottom:3rem}
.fbt__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.fbt__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a)}
.fbt__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.fbt__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem}
.fbt__cell{background:#fff;border-radius:calc(var(--radius, .5rem) * 2);padding:1.75rem;overflow:hidden;position:relative;display:flex;align-items:flex-end}
.fbt__cell--sm{grid-column:span 1}
.fbt__cell--md{grid-column:span 2}
.fbt__cell--lg{grid-column:span 2;grid-row:span 2}
.fbt__cell--wide{grid-column:span 3}
.fbt__cell--tall{grid-column:span 1;grid-row:span 2}
.fbt__cell--accent{background:var(--color-accent, #6366f1);color:#fff}
.fbt__cell--dark{background:var(--color-primary, #0a0a0a);color:#fff}
.fbt__cell--image{padding:0;align-items:stretch}
.fbt__cell-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fbt__stat{display:flex;flex-direction:column;width:100%}
.fbt__stat-value{font-size:3.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.375rem}
.fbt__cell--accent .fbt__stat-value,.fbt__cell--dark .fbt__stat-value{color:#fff}
.fbt__stat-label{font-size:.875rem;opacity:.6}
.fbt__quote{display:flex;flex-direction:column;width:100%;gap:.75rem}
.fbt__quote-text{font-size:1rem;line-height:1.6;font-weight:500}
.fbt__quote-author{font-size:.8125rem;opacity:.55}
.fbt__text{width:100%}
.fbt__cell-headline{font-size:1.125rem;font-weight:700;margin-bottom:.5rem;color:var(--color-primary, #0a0a0a)}
.fbt__cell--accent .fbt__cell-headline,.fbt__cell--dark .fbt__cell-headline{color:#fff}
.fbt__cell-body{font-size:.9rem;line-height:1.6;color:var(--color-muted, #6b7280)}
.fbt__cell--accent .fbt__cell-body,.fbt__cell--dark .fbt__cell-body{color:#ffffffa6}
.fbt__grid{grid-template-columns:repeat(2,1fr)}
.fbt__cell--wide,.fbt__cell--lg{grid-column:span 2}
.fbt__grid{grid-template-columns:1fr;grid-auto-rows:auto}
.fbt__cell{min-height:160px}
.fbt__cell--sm,.fbt__cell--md,.fbt__cell--lg,.fbt__cell--wide,.fbt__cell--tall{grid-column:span 1;grid-row:span 1}
</style>