TextQuote text

---
/**
 * TextQuote
 * Groot blockquote met attributie
 */
interface Props {
  quote?: string;
  author?: string;
  role?: string;
}
const { quote = 'BLURR heeft ons marketingbudget niet verhoogd — ze hebben het effectiever gemaakt. In zes maanden verdubbelden we ons aantal kwalitatieve leads terwijl de kosten per acquisitie met 38% daalden.', author = 'Michiel van den Berg', role = 'CEO, Groeikracht B.V.' } = Astro.props;
---

<blockquote class="tquote-wrap">
  <span class="tquote-mark">"</span>
  <p class="tquote-text">{quote}</p>
  <footer class="tquote-footer">
    <span class="tquote-author">{author}</span>
    {role && <span class="tquote-role">{role}</span>}
  </footer>
</blockquote>

<style>
  .tquote-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    margin: 0;
    padding: 40px 40px 40px 56px;
    position: relative;
    max-width: 680px;
    font-family: system-ui, sans-serif;
    border-left: 4px solid var(--color-accent);
    background: #fafafa;
    border-radius: 0 12px 12px 0;
  }
  .tquote-mark {
    position: absolute;
    top: 16px;
    left: 14px;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.3;
    font-family: Georgia, serif;
    font-weight: 900;
  }
  .tquote-text {
    margin: 0 0 20px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-primary);
    font-style: italic;
  }
  .tquote-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tquote-author {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .tquote-role {
    font-size: 0.8rem;
    color: #6b7280;
  }
</style>