TextTimeline text

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

<div class="ttl-wrap"> <div class="ttl-item "> <div class="ttl-marker-col"> <div class="ttl-dot"></div> <div class="ttl-line"></div> </div> <div class="ttl-content"> <span class="ttl-year">2018</span> <h3 class="ttl-title">Oprichting BLURR</h3> <p class="ttl-text">Gestart vanuit een zolderkamer met één klant en een simpele belofte: marketing die aantoonbaar werkt.</p> </div> </div><div class="ttl-item "> <div class="ttl-marker-col"> <div class="ttl-dot"></div> <div class="ttl-line"></div> </div> <div class="ttl-content"> <span class="ttl-year">2020</span> <h3 class="ttl-title">Eerste 25 klanten</h3> <p class="ttl-text">Ons team groeide naar 8 mensen. We beheerden campagnes voor scale-ups in e-commerce en SaaS.</p> </div> </div><div class="ttl-item "> <div class="ttl-marker-col"> <div class="ttl-dot"></div> <div class="ttl-line"></div> </div> <div class="ttl-content"> <span class="ttl-year">2022</span> <h3 class="ttl-title">Eigen methodologie</h3> <p class="ttl-text">Introductie van het BLURR Growth Framework, onze bewezen aanpak voor duurzame marketing-ROI.</p> </div> </div><div class="ttl-item "> <div class="ttl-marker-col"> <div class="ttl-dot"></div> <div class="ttl-line"></div> </div> <div class="ttl-content"> <span class="ttl-year">2024</span> <h3 class="ttl-title">100+ projecten</h3> <p class="ttl-text">We passeerden de mijlpaal van honderd succesvolle projecten met een gemiddelde klanttevredenheid van 9,2.</p> </div> </div><div class="ttl-item ttl-item--last"> <div class="ttl-marker-col"> <div class="ttl-dot"></div> <div class="ttl-line"></div> </div> <div class="ttl-content"> <span class="ttl-year">Nu</span> <h3 class="ttl-title">Jouw groeiverhaal</h3> <p class="ttl-text">We zijn klaar voor de volgende fase. Ben jij dat ook? Boek een gratis strategiegesprek.</p> </div> </div> </div>

<style>
.ttl-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;flex-direction:column;gap:0;max-width:560px;padding:24px;font-family:system-ui,sans-serif}
.ttl-item{display:flex;gap:20px}
.ttl-marker-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.ttl-dot{width:14px;height:14px;border-radius:50%;background:var(--color-accent);flex-shrink:0;margin-top:4px;box-shadow:0 0 0 3px #f0f0ff}
.ttl-line{width:2px;flex:1;background:#e5e7eb;margin:4px 0;min-height:20px}
.ttl-item--last .ttl-line{display:none}
.ttl-content{padding-bottom:28px;display:flex;flex-direction:column;gap:4px}
.ttl-item--last .ttl-content{padding-bottom:0}
.ttl-year{font-size:.75rem;font-weight:700;color:var(--color-accent);text-transform:uppercase;letter-spacing:.08em}
.ttl-title{margin:0;font-size:1rem;font-weight:700;color:var(--color-primary)}
.ttl-text{margin:0;font-size:.875rem;line-height:1.65;color:#6b7280}
</style>