src/components/cta/CtaPhone.astro
---
// CtaPhone, recovered from blurr-components.pages.dev
---
<section class="ctaph"> <div class="ctaph-inner"> <span class="ctaph-eyebrow">Direct contact</span> <h2 class="ctaph-headline">Liever even bellen?</h2> <p class="ctaph-sub">Onze specialisten staan klaar voor al je vragen over online marketing. Geen wachttijden.</p> <div class="ctaph-contact"> <a href="tel:0201234567" class="ctaph-phone-btn"> <span class="ctaph-phone-icon">→</span> <span> <span class="ctaph-phone-label">Bel ons direct</span> <span class="ctaph-phone-num">020 123 45 67</span> </span> </a> <p class="ctaph-hours">Maandag t/m vrijdag · 09:00 – 17:30</p> <a href="mailto:info@blurr.nl" class="ctaph-secondary">Of stuur een e-mail</a> </div> </div> </section>
<style>
.ctaph{background:#fff;padding:5rem 2rem;border-top:1px solid #e5e7eb}
.ctaph-inner{max-width:700px;margin:0 auto;text-align:center}
.ctaph-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.ctaph-headline{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 .875rem}
.ctaph-sub{font-size:1.0625rem;color:#6b7280;line-height:1.65;margin:0 0 2.5rem}
.ctaph-contact{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ctaph-phone-btn{display:inline-flex;align-items:center;gap:1rem;padding:1.125rem 2.5rem;background:#0a0a0a;color:#fff;border-radius:.75rem;text-decoration:none;transition:opacity .2s}
.ctaph-phone-btn:hover{opacity:.85}
.ctaph-phone-icon{font-size:1.5rem}
.ctaph-phone-label{display:block;font-size:.75rem;color:#ffffff80;text-align:left}
.ctaph-phone-num{display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.02em}
.ctaph-hours{font-size:.8125rem;color:#9ca3af;margin:0}
.ctaph-secondary{font-size:.9375rem;color:var(--color-accent,#6366f1);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ctaph-secondary:hover{border-color:var(--color-accent,#6366f1)}
</style>