TextIntro text

---
interface Props {
  eyebrow?: string;
  headline: string;
  body: string;
}
const { eyebrow = "Wie zijn wij", headline = "Een bureau dat écht begrijpt wat groei betekent.", body = "We zijn niet de grootste, maar wel de meest toegewijde. Elk klanttraject bij BLURR begint met een grondig begrip van jouw markt, jouw concurrenten en jouw doelgroep. Pas dan bouwen wij een strategie die standhoudt." } = Astro.props;
---

<div class="tx-intro">
  {eyebrow && <p class="tx-intro__eyebrow">{eyebrow}</p>}
  <h3 class="tx-intro__headline">{headline}</h3>
  <p class="tx-intro__body">{body}</p>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-intro { max-width: 680px; padding: 1rem 0; }
  .tx-intro__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
  }
  .tx-intro__headline {
    margin: 0 0 0.85rem;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  .tx-intro__body {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
  }
</style>