TextIntro text

---
/**
 * TextIntro — korte intro met eyebrow, kop en lead-zin.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - body?: string
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  body?: string;
}
const {
  eyebrow = 'Over ons',
  headline = 'Jouw digitale groeipartner',
  body = 'Wij zijn een full-service digitaal marketingbureau.',
} = Astro.props;
---

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

<style>
.tx-intro__eyebrow{margin:0 0 .5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent)}
.tx-intro__headline{margin:0 0 .85rem;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:800;color:var(--color-primary);line-height:1.25;letter-spacing:-.015em}
.tx-intro__body{margin:0;font-size:1rem;color:#555;line-height:1.7}
</style>