TextWide text

---
/**
 * TextWide
 * Volledige breedte tekst met grote typografie
 */
interface Props {
  headline?: string;
  sub?: string;
}
const { headline = 'Jouw groei is onze missie', sub = 'Van strategie tot conversie — BLURR is jouw marketingpartner voor de lange termijn' } = Astro.props;
---

<section class="twid-section">
  <div class="twid-inner">
    <h1 class="twid-headline">{headline}</h1>
    {sub && <p class="twid-sub">{sub}</p>}
  </div>
</section>

<style>
  .twid-section {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    padding: 80px 32px;
    font-family: system-ui, sans-serif;
    background: #fff;
    overflow: hidden;
  }
  .twid-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .twid-headline {
    margin: 0 0 20px;
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.035em;
    line-height: 1.0;
    animation: twid-in 0.6s ease both;
  }
  @keyframes twid-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .twid-sub {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.35rem);
    color: #6b7280;
    line-height: 1.5;
    max-width: 640px;
    animation: twid-in 0.6s 0.1s ease both;
  }
</style>