TextMark text

---
interface Props {
  segments: Array<{ text: string; marked?: boolean }>;
}
const { segments = [
  { text: "Met de juiste strategie kan elk bedrijf online groeien. Maar " },
  { text: "zonder data ben je blind", marked: true },
  { text: ". Wij geloven dat " },
  { text: "meten de basis is van alles", marked: true },
  { text: " — van advertenties tot content tot conversieoptimalisatie." },
] } = Astro.props;
---

<p class="tx-mark">
  {segments.map(seg => (
    seg.marked
      ? <mark class="tx-mark__mark">{seg.text}</mark>
      : <span>{seg.text}</span>
  ))}
</p>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-mark {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #444;
    line-height: 1.7;
    max-width: 660px;
  }
  .tx-mark__mark {
    background: linear-gradient(to bottom, transparent 55%, rgba(99,102,241,0.3) 55%);
    color: var(--color-primary);
    font-weight: 700;
    padding: 0 0.1em;
  }
</style>