src/components/hero/HeroBento.astro
---
// HeroBento, recovered from blurr-components.pages.dev
---
<section class="hbt"> <div class="hbt-grid"> <div class="hbt-main"> <span class="hbt-eyebrow">Data-driven bureau</span> <h1 class="hbt-headline">Marketing die je kunt bewijzen.</h1> <p class="hbt-sub">Elk besluit gebaseerd op data. Elke euro meetbaar.</p> <a href="#" class="hbt-cta">Gesprek inplannen →</a> </div> <div class="hbt-card hbt-card--0"> <span class="hbt-card-icon">→</span> <span class="hbt-card-value">4.2×</span> <span class="hbt-card-title">Gemiddeld ROAS</span> </div><div class="hbt-card hbt-card--1"> <span class="hbt-card-icon">→</span> <span class="hbt-card-value">93%</span> <span class="hbt-card-title">Klantretentie</span> </div><div class="hbt-card hbt-card--2"> <span class="hbt-card-icon">→</span> <span class="hbt-card-title">Live in 48u</span> <span class="hbt-card-body">Van briefing tot live campagne</span> </div> </div> </section>
<style>
.hbt{padding:3rem 2rem;background:#f1f5f9}
.hbt-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:1rem}
.hbt-main{grid-column:span 2;background:#0f172a;border-radius:1.25rem;padding:3rem;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px}
.hbt-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:1rem}
.hbt-headline{font-size:clamp(2rem,3.5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 1rem}
.hbt-sub{font-size:1rem;color:#ffffff8c;line-height:1.6;margin:0 0 2rem;max-width:400px}
.hbt-cta{display:inline-flex;align-items:center;padding:.75rem 1.5rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:.5rem;font-weight:600;font-size:.9375rem;text-decoration:none;width:fit-content}
.hbt-cta:hover{opacity:.9}
.hbt-image-card{background:#e2e8f0;border-radius:1.25rem;overflow:hidden}
.hbt-img{width:100%;height:100%;object-fit:cover}
.hbt-card{background:#fff;border-radius:1.25rem;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.hbt-card-icon{font-size:1.5rem}
.hbt-card-value{font-size:2rem;font-weight:800;color:#0f172a;letter-spacing:-.03em}
.hbt-card-title{font-size:.9375rem;font-weight:600;color:#334155}
.hbt-card-body{font-size:.8125rem;color:#94a3b8;line-height:1.5}
.hbt-grid{grid-template-columns:1fr}
.hbt-main{grid-column:span 1}
</style>