src/components/video/VideoShowcase.astro
---
// VideoShowcase, recovered from blurr-components.pages.dev
---
<section class="vsh"> <div class="vsh__media"> <div class="vsh__player"> <div class="vsh__placeholder" aria-label="Video placeholder"> <div class="vsh__play-btn" aria-hidden="true"> <svg width="56" height="56" viewBox="0 0 56 56" fill="none"> <circle cx="28" cy="28" r="28" fill="rgba(99,102,241,0.9)"></circle> <polygon points="22,16 46,28 22,40" fill="white"></polygon> </svg> </div> </div> </div> </div> <div class="vsh__content"> <span class="vsh__label">Featured video</span> <h2 class="vsh__title">De BLURR aanpak in 3 minuten</h2> <p class="vsh__desc">Bekijk hoe wij van strategie naar meetbaar resultaat gaan.</p> <a class="vsh__cta" href="#">Start een gesprek</a> </div> </section>
<style>
.vsh{display:grid;grid-template-columns:3fr 2fr;gap:3rem;align-items:center;padding:3rem 0}
.vsh__player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.vsh__video{width:100%;height:100%;object-fit:cover}
.vsh__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0f0f2a,#1a1a4a);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vsh__label{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.vsh__title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem;line-height:1.2}
.vsh__desc{font-size:1rem;color:#666;line-height:1.7;margin:0 0 2rem}
.vsh__cta{display:inline-block;padding:.85rem 2rem;background:var(--color-accent, #6366f1);color:#fff;text-decoration:none;border-radius:8px;font-weight:700;font-size:.95rem;transition:opacity .2s}
.vsh__cta:hover{opacity:.85}
.vsh{grid-template-columns:1fr}
</style>