src/components/ui/CalloutBox.astro
---
// CalloutBox, recovered from blurr-components.pages.dev
---
<section class="cb"> <div class="cb-inner"> <div class="cb-box" style="background:#f5f3ff;border-color:#ede9fe;"> <div class="cb-top"> <span class="cb-icon">→</span> <div> <h2 class="cb-headline" style="color:#0a0a0a">Klaar om te groeien?</h2> <p class="cb-body" style="color:#4b5563">Vraag een gratis Google Ads audit aan en ontdek binnen 24 uur hoeveel budget je momenteel verspilt.</p> </div> </div> <a href="#" class="cb-cta" style="background:#6366f1">Gratis audit aanvragen →</a> </div> </div> </section>
<style>
.cb{padding:3rem 2rem}
.cb-inner{max-width:900px;margin:0 auto}
.cb-box{border-radius:1rem;border:1.5px solid;padding:2.5rem}
.cb-top{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:1.5rem}
.cb-icon{font-size:2rem;flex-shrink:0;line-height:1}
.cb-headline{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .5rem}
.cb-body{font-size:1rem;line-height:1.65;margin:0}
.cb-cta{display:inline-flex;align-items:center;padding:.75rem 1.5rem;color:#fff;font-weight:600;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.cb-cta:hover{opacity:.88}
</style>