HeroCta Hero

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

<section class="hcf"> <div class="hcf-inner"> <div class="hcf-text"> <span class="hcf-eyebrow">Gratis Audit</span> <h1 class="hcf-headline">Weet jij hoeveel budget je verspilt?</h1> <p class="hcf-sub">Vraag een gratis Google Ads audit aan en ontdek binnen 24 uur waar jij winst laat liggen.</p> <ul class="hcf-trust"> <li class="hcf-trust-item"><span>&#10003;</span>Geen verborgen kosten</li><li class="hcf-trust-item"><span>&#10003;</span>Direct inzicht</li><li class="hcf-trust-item"><span>&#10003;</span>Google Certified</li> </ul> </div> <div class="hcf-card"> <p class="hcf-form-title">Ontvang jouw gratis audit</p> <form action="#" class="hcf-form"> <input type="email" placeholder="jouw@email.nl" class="hcf-input" required> <button type="submit" class="hcf-submit">Audit aanvragen &rarr;</button> </form> <p class="hcf-disclaimer">Gratis, vrijblijvend. 24u reactietijd.</p> </div> </div> </section>

<style>
.hcf{padding:5rem 2rem;background:linear-gradient(135deg,#f8fafc,#fff 60%)}
.hcf-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:4rem;align-items:center}
.hcf-eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:1rem}
.hcf-headline{font-size:clamp(2rem,3.5vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#0f172a;margin:0 0 1.25rem}
.hcf-sub{font-size:1.0625rem;color:#64748b;line-height:1.65;margin:0 0 2rem}
.hcf-trust{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.hcf-trust-item{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;color:#334155}
.hcf-trust-item span{color:var(--color-accent,#6366f1);font-weight:700}
.hcf-card{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 4px 24px #00000014,0 0 0 1px #0000000a}
.hcf-form-title{font-size:1.125rem;font-weight:700;color:#0f172a;margin:0 0 1.25rem}
.hcf-form{display:flex;flex-direction:column;gap:.75rem}
.hcf-input{padding:.8125rem 1rem;border:1.5px solid #e2e8f0;border-radius:.5rem;font-size:.9375rem;outline:none;transition:border-color .2s}
.hcf-input:focus{border-color:var(--color-accent,#6366f1)}
.hcf-submit{padding:.875rem 1rem;background:var(--color-accent,#6366f1);color:#fff;border:none;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.hcf-submit:hover{opacity:.9}
.hcf-disclaimer{font-size:.75rem;color:#94a3b8;margin-top:.75rem;line-height:1.5}
.hcf-inner{grid-template-columns:1fr}
</style>