VideoAnnotated video

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

<section class="van"> <div class="van__player"> <div class="van__placeholder" aria-label="Case walkthrough: TechFlow campagne"> <span class="van__play-hint" aria-hidden="true">▶</span> </div> <div class="van__timeline"> <div class="van__marker" title="Intro"> <span class="van__marker-dot" aria-hidden="true"></span> <span class="van__marker-time">0:00</span> </div><div class="van__marker" title="Strategie"> <span class="van__marker-dot" aria-hidden="true"></span> <span class="van__marker-time">1:20</span> </div><div class="van__marker" title="Lancering"> <span class="van__marker-dot" aria-hidden="true"></span> <span class="van__marker-time">3:45</span> </div><div class="van__marker" title="Resultaten"> <span class="van__marker-dot" aria-hidden="true"></span> <span class="van__marker-time">6:10</span> </div> </div> </div> <div class="van__notes"> <h3 class="van__title">Case walkthrough: TechFlow campagne</h3> <ol class="van__list"> <li class="van__note"> <span class="van__time">0:00</span> <div class="van__note-content"> <p class="van__note-label">Intro</p> <p class="van__note-text">Uitgangssituatie en doelstelling</p> </div> </li><li class="van__note"> <span class="van__time">1:20</span> <div class="van__note-content"> <p class="van__note-label">Strategie</p> <p class="van__note-text">Hoe we de doelgroep definieerden</p> </div> </li><li class="van__note"> <span class="van__time">3:45</span> <div class="van__note-content"> <p class="van__note-label">Lancering</p> <p class="van__note-text">Eerste campagneweek live</p> </div> </li><li class="van__note"> <span class="van__time">6:10</span> <div class="van__note-content"> <p class="van__note-label">Resultaten</p> <p class="van__note-text">+280% leads in 90 dagen</p> </div> </li> </ol> </div> </section>

<style>
.van{display:grid;grid-template-columns:3fr 2fr;gap:2rem;align-items:start;padding:2rem 0}
.van__player{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.van__poster{width:100%;height:100%;object-fit:cover}
.van__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;font-size:3rem;color:#ffffff4d}
.van__timeline{position:absolute;bottom:0;left:0;right:0;height:3rem;background:#0a0a0acc;display:flex;align-items:center;padding:0 1rem;gap:1.5rem}
.van__marker{display:flex;flex-direction:column;align-items:center;gap:.2rem;cursor:pointer}
.van__marker-dot{width:8px;height:8px;background:var(--color-accent, #6366f1);border-radius:50%}
.van__marker-time{font-size:.65rem;color:#ffffffb3;font-weight:600}
.van__title{font-size:1.1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem}
.van__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.van__note{display:flex;gap:1rem;align-items:flex-start;padding:.75rem;border-radius:8px;border:1px solid #eee;cursor:pointer;transition:background .15s}
.van__note:hover{background:#f5f5f5}
.van__time{font-size:.75rem;font-weight:700;color:var(--color-accent, #6366f1);white-space:nowrap;flex-shrink:0;margin-top:.15rem}
.van__note-label{font-size:.85rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .2rem}
.van__note-text{font-size:.8rem;color:#777;margin:0}
.van{grid-template-columns:1fr}
</style>