src/components/video/VideoCtaOverlay.astro
---
// VideoCtaOverlay, recovered from blurr-components.pages.dev
---
<div class="vco"> <div class="vco__player"> <div class="vco__placeholder" aria-label="Video met CTA"> <svg width="48" height="48" viewBox="0 0 48 48"> <circle cx="24" cy="24" r="24" fill="rgba(99,102,241,0.85)"></circle> <polygon points="19,12 41,24 19,36" fill="#fff"></polygon> </svg> </div> <div class="vco__overlay"> <div class="vco__cta-box"> <h3 class="vco__cta-title">Bekijk hoe wij werken</h3> <p class="vco__cta-body">Plan gratis een gesprek na het bekijken van de video.</p> <a class="vco__cta-btn" href="#">Plan gesprek</a> </div> </div> </div> </div>
<style>
.vco__player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111}
.vco__poster{width:100%;height:100%;object-fit:cover}
.vco__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vco__overlay{position:absolute;inset:0;background:#0a0a0aa6;display:flex;align-items:center;justify-content:center;padding:2rem}
.vco__cta-box{background:#fffffff2;border-radius:12px;padding:2rem 2.5rem;text-align:center;max-width:400px;box-shadow:0 12px 40px #0000004d}
.vco__cta-title{font-size:1.4rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .75rem}
.vco__cta-body{font-size:.9rem;color:#666;line-height:1.6;margin:0 0 1.5rem}
.vco__cta-btn{display:inline-block;padding:.8rem 2rem;background:var(--color-accent, #6366f1);color:#fff;text-decoration:none;border-radius:8px;font-weight:700;font-size:.95rem;transition:opacity .2s}
.vco__cta-btn:hover{opacity:.85}
</style>