TextGradient text

---
interface Props {
  text: string;
  sub?: string;
  from?: string;
  to?: string;
}
const { text = "Digitale marketing die écht werkt.", sub = "Ontdek hoe BLURR jouw groei versnelt.", from = "#6366f1", to = "#ec4899" } = Astro.props;
---

<div class="tx-grad">
  <p class="tx-grad__text" style={`background: linear-gradient(135deg, ${from} 0%, ${to} 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;`}>
    {text}
  </p>
  {sub && <p class="tx-grad__sub">{sub}</p>}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-grad { text-align: center; padding: 2rem 0; }
  .tx-grad__text {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.025em;
    display: inline-block;
  }
  .tx-grad__sub {
    margin: 0;
    font-size: 1.05rem;
    color: #666;
  }
</style>