TextTimeline text

---
/**
 * TextTimeline
 * Tijdlijn van tekstitems
 */
interface TimelineItem {
  year: string;
  title: string;
  text: string;
}
interface Props {
  items?: TimelineItem[];
}
const { items = [
  { year: '2018', title: 'Oprichting BLURR', text: 'Gestart vanuit een zolderkamer met één klant en een simpele belofte: marketing die aantoonbaar werkt.' },
  { year: '2020', title: 'Eerste 25 klanten', text: 'Ons team groeide naar 8 mensen. We beheerden campagnes voor scale-ups in e-commerce en SaaS.' },
  { year: '2022', title: 'Eigen methodologie', text: 'Introductie van het BLURR Growth Framework — onze bewezen aanpak voor duurzame marketing-ROI.' },
  { year: '2024', title: '100+ projecten', text: 'We passeerden de mijlpaal van honderd succesvolle projecten met een gemiddelde klanttevredenheid van 9,2.' },
  { year: 'Nu', title: 'Jouw groeiverhaal', text: 'We zijn klaar voor de volgende fase. Ben jij dat ook? Boek een gratis strategiegesprek.' },
] } = Astro.props;
---

<div class="ttl-wrap">
  {items.map((item, i) => (
    <div class={`ttl-item ${i === items.length - 1 ? '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">{item.year}</span>
        <h3 class="ttl-title">{item.title}</h3>
        <p class="ttl-text">{item.text}</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: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .ttl-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .ttl-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: #6b7280;
  }
</style>