src/components/video/VideoIntro.astro
---
// VideoIntro, recovered from blurr-components.pages.dev
---
<section class="vit"> <div class="vit__text"> <p class="vit__eyebrow">Hoe wij werken</p> <h2 class="vit__title">Strategie, executie en groei, in één team</h2> <p class="vit__body">Geen grote bureaustructuren of losse freelancers.</p> <ul class="vit__bullets"> <li class="vit__bullet"> <span class="vit__bullet-icon" aria-hidden="true">✓</span> Eén aanspreekpunt, volledige verantwoordelijkheid </li><li class="vit__bullet"> <span class="vit__bullet-icon" aria-hidden="true">✓</span> Data-gedreven beslissingen in elke stap </li><li class="vit__bullet"> <span class="vit__bullet-icon" aria-hidden="true">✓</span> Maandelijkse rapportages met harde cijfers </li> </ul> </div> <div class="vit__media"> <div class="vit__player"> <div class="vit__placeholder" aria-label="Intro video placeholder"> <div class="vit__play-icon" aria-hidden="true"> <svg width="50" height="50" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="25" fill="rgba(99,102,241,0.85)"></circle> <polygon points="20,14 40,25 20,36" fill="#fff"></polygon> </svg> </div> <span class="vit__duration-hint">3:28</span> </div> </div> </div> </section>
<style>
.vit{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:3rem 0}
.vit__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:0 0 .75rem}
.vit__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}
.vit__body{font-size:1.05rem;color:#666;line-height:1.7;margin:0 0 1.75rem}
.vit__bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.vit__bullet{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color: #e8e8e8;line-height:1.5}
.vit__bullet-icon{color:var(--color-accent, #6366f1);font-weight:700;flex-shrink:0;margin-top:.1em}
.vit__player{aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.vit__video{width:100%;height:100%;object-fit:cover}
.vit__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a20,#1a1a40);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;cursor:pointer}
.vit__duration-hint{font-size:.8rem;color:#ffffff80;font-weight:600}
.vit{grid-template-columns:1fr;gap:2rem}
</style>