TextDropCap text

---
/**
 * TextDropCap
 * Tekst met een grote drop cap op de eerste letter
 */
interface Props {
  text?: string;
  author?: string;
}
const { text = 'Marketing is geen kostenpost — het is de motor van groei. Bedrijven die structureel investeren in een sterke marktpositie groeien sneller, kopen makkelijker klanten en bouwen duurzame concurrentievoordelen op. Bij BLURR zien we marketing als strategisch instrument, niet als activiteitenkalender. We beginnen altijd bij de vraag: wat wil jij bereiken en wie moet dat met jou ervaren? Pas dan kiezen we kanalen, boodschappen en budgetten die aansluiten op die ambitie.', author = 'Redactioneel — BLURR Marketing Insights' } = Astro.props;
---

<div class="tdc-wrap">
  <p class="tdc-text">{text}</p>
  {author && <span class="tdc-author">— {author}</span>}
</div>

<style>
  .tdc-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 640px;
    padding: 32px;
    font-family: Georgia, 'Times New Roman', serif;
  }
  .tdc-text {
    margin: 0 0 20px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-primary);
  }
  .tdc-text::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.75;
    font-weight: 900;
    color: var(--color-accent);
    margin: 0 12px 0 0;
    padding: 4px 0;
    font-family: system-ui, sans-serif;
  }
  .tdc-author {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    font-family: system-ui, sans-serif;
  }
</style>