TextStack text

---
interface Props {
  items: Array<{ text: string; style: 'bold' | 'light' | 'accent' | 'muted' }>;
}
const { items = [
  { text: "Meer clicks.", style: "bold" },
  { text: "Minder kosten.", style: "light" },
  { text: "Betere klanten.", style: "bold" },
  { text: "Dat is wat wij doen bij BLURR.", style: "muted" },
  { text: "Elke dag opnieuw.", style: "accent" },
] } = Astro.props;
---

<div class="tx-stack">
  {items.map(item => (
    <p class={`tx-stack__line tx-stack__line--${item.style}`}>{item.text}</p>
  ))}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0;
  }
  .tx-stack__line {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .tx-stack__line--bold {
    font-weight: 900;
    color: var(--color-primary);
  }
  .tx-stack__line--light {
    font-weight: 300;
    color: #444;
  }
  .tx-stack__line--accent {
    font-weight: 800;
    color: var(--color-accent);
  }
  .tx-stack__line--muted {
    font-weight: 400;
    color: #999;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
  }
</style>