VideoRecap video

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

<section class="vrc"> <div class="vrc__player"> <div class="vrc__placeholder" aria-label="BLURR Growth Sprint 2025, Aftermovie"> <svg width="52" height="52" viewBox="0 0 52 52"> <circle cx="26" cy="26" r="26" fill="rgba(99,102,241,0.85)"></circle> <polygon points="21,13 43,26 21,39" fill="#fff"></polygon> </svg> </div> </div> <div class="vrc__sidebar"> <h3 class="vrc__title">BLURR Growth Sprint 2025, Aftermovie</h3> <p class="vrc__label">Hoofdstukken</p> <ol class="vrc__chapters"> <li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">0:00</span> <span class="vrc__ch-title">Inleiding: wat is merkstrategie?</span> </a> </li><li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">4:20</span> <span class="vrc__ch-title">Stap 1: Doelgroep definiëren</span> </a> </li><li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">9:45</span> <span class="vrc__ch-title">Stap 2: Positionering bepalen</span> </a> </li><li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">16:10</span> <span class="vrc__ch-title">Stap 3: Visuele identiteit bouwen</span> </a> </li><li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">23:30</span> <span class="vrc__ch-title">Stap 4: Campagnes lanceren</span> </a> </li><li class="vrc__chapter"> <a class="vrc__chapter-link" href="#"> <span class="vrc__ch-time">30:05</span> <span class="vrc__ch-title">Conclusie &amp; actieplan</span> </a> </li> </ol> </div> </section>

<style>
.vrc{display:grid;grid-template-columns:3fr 2fr;gap:2rem;align-items:start;padding:2rem 0}
.vrc__player{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.vrc__poster{width:100%;height:100%;object-fit:cover}
.vrc__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vrc__title{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1rem;line-height:1.4}
.vrc__label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#999;margin:0 0 .5rem}
.vrc__chapters{list-style:none;padding:0;margin:0;border:1px solid #eee;border-radius:8px;overflow:hidden}
.vrc__chapter{border-bottom:1px solid #eee}
.vrc__chapter:last-child{border-bottom:none}
.vrc__chapter-link{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;text-decoration:none;transition:background .15s}
.vrc__chapter-link:hover{background:#f8f8ff}
.vrc__ch-time{font-size:.72rem;font-weight:700;color:var(--color-accent, #6366f1);white-space:nowrap;flex-shrink:0}
.vrc__ch-title{font-size:.82rem;color:var(--color-primary, #0a0a0a);font-weight:500;line-height:1.3}
.vrc{grid-template-columns:1fr}
</style>