IconTimeline icon

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

<section class="itlc"> <h2 class="itlc__title">Van intake tot resultaat</h2> <div class="itlc__list"> <div class="itlc__item"> <div class="itlc__icon-col"> <div class="itlc__icon-wrap"> <span class="itlc__icon" aria-hidden="true">→</span> </div> <span class="itlc__line" aria-hidden="true"></span> </div> <div class="itlc__content"> <p class="itlc__date">Week 1</p> <h3 class="itlc__name">Intake &amp; briefing</h3> <p class="itlc__body">We begrijpen jouw merk, doelen en doelgroep.</p> </div> </div><div class="itlc__item"> <div class="itlc__icon-col"> <div class="itlc__icon-wrap"> <span class="itlc__icon" aria-hidden="true"></span> </div> <span class="itlc__line" aria-hidden="true"></span> </div> <div class="itlc__content"> <p class="itlc__date">Week 2</p> <h3 class="itlc__name">Strategie</h3> <p class="itlc__body">Groeiplan op maat met KPIs en budget verdeling.</p> </div> </div><div class="itlc__item"> <div class="itlc__icon-col"> <div class="itlc__icon-wrap"> <span class="itlc__icon" aria-hidden="true">→</span> </div> <span class="itlc__line" aria-hidden="true"></span> </div> <div class="itlc__content"> <p class="itlc__date">Week 3</p> <h3 class="itlc__name">Creatie</h3> <p class="itlc__body">Campagne-creatives, landingspagina en teksten.</p> </div> </div><div class="itlc__item itlc__item--current"> <div class="itlc__icon-col"> <div class="itlc__icon-wrap"> <span class="itlc__icon" aria-hidden="true">→</span> </div> <span class="itlc__line" aria-hidden="true"></span> </div> <div class="itlc__content"> <p class="itlc__date">Week 4</p> <h3 class="itlc__name">Live</h3> <p class="itlc__body">Campagnes gelanceerd, tracking ingericht.</p> </div> </div><div class="itlc__item"> <div class="itlc__icon-col"> <div class="itlc__icon-wrap"> <span class="itlc__icon" aria-hidden="true">→</span> </div>  </div> <div class="itlc__content"> <p class="itlc__date">Ongoing</p> <h3 class="itlc__name">Groei</h3> <p class="itlc__body">Wekelijkse optimalisaties en maandrapportages.</p> </div> </div> </div> </section>

<style>
.itlc{padding:2rem 0}
.itlc__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2.5rem}
.itlc__list{display:flex;flex-direction:column;gap:0}
.itlc__item{display:grid;grid-template-columns:60px 1fr;gap:1.25rem;align-items:stretch}
.itlc__icon-col{display:flex;flex-direction:column;align-items:center}
.itlc__icon-wrap{width:48px;height:48px;border-radius:50%;background:#f0f0ff;border:2px solid rgba(99,102,241,.2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.itlc__item--current .itlc__icon-wrap{background:var(--color-accent, #6366f1);border-color:var(--color-accent, #6366f1)}
.itlc__line{display:block;width:2px;flex:1;background:#e8e8f8;margin:4px 0}
.itlc__content{padding-bottom:1.75rem}
.itlc__date{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:.5rem 0 .2rem}
.itlc__name{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .3rem}
.itlc__body{font-size:.88rem;color:#777;line-height:1.6;margin:0}
</style>