CtaUrgent CTA

---
// CtaUrgent, recovered from blurr-components.pages.dev
---

<section class="ctaurg"> <div class="ctaurg-inner"> <span class="ctaurg-urgency">→ Nog 3 plekken beschikbaar in Q2</span> <h2 class="ctaurg-headline">Start nu, voordat jouw concurrent het doet</h2> <p class="ctaurg-sub">We begeleiden maximaal 8 nieuwe klanten per kwartaal. Zorg dat jij erbij bent.</p> <div class="ctaurg-signals"> <div class="ctaurg-signal"> <div class="ctaurg-bar"> <div class="ctaurg-bar-fill" style="width: 15%"></div> </div> <span class="ctaurg-spots">Nog <strong>3</strong> plekken beschikbaar</span> </div> <p class="ctaurg-deadline">→ Aanbod geldig t/m 30 april 2025</p> </div> <a href="#" class="ctaurg-btn">Claim mijn plek → →</a> </div> </section>

<style>
.ctaurg{background:#fff7ed;border:1px solid #fed7aa;padding:4rem 2rem}
.ctaurg-inner{max-width:640px;margin:0 auto;text-align:center}
.ctaurg-urgency{display:inline-block;padding:.3125rem .875rem;background:#ff6b35;color:#fff;font-size:.8125rem;font-weight:700;border-radius:2rem;margin-bottom:1.5rem}
.ctaurg-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 .875rem}
.ctaurg-sub{font-size:1.0625rem;color:#6b7280;line-height:1.65;margin:0 0 1.75rem}
.ctaurg-signals{margin-bottom:2rem;display:flex;flex-direction:column;gap:.875rem;align-items:center}
.ctaurg-signal{width:100%;max-width:400px}
.ctaurg-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:.375rem}
.ctaurg-bar-fill{height:100%;background:linear-gradient(90deg,#10b981,#059669);border-radius:4px}
.ctaurg-spots{font-size:.875rem;color:#374151}
.ctaurg-deadline{font-size:.875rem;color:#92400e;font-weight:500;margin:0}
.ctaurg-btn{display:inline-flex;align-items:center;padding:.9375rem 2.5rem;background:#0a0a0a;color:#fff;font-weight:700;font-size:1rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ctaurg-btn:hover{opacity:.85}
</style>