TextPullQuote text

---
interface Props {
  quote: string;
  attribution?: string;
  role?: string;
}
const { quote = "Wij geloven niet in marketing als kostenpost. Wij zien het als de meest directe investering in groei die een bedrijf kan maken.", attribution = "Joost de Vries", role = "Oprichter BLURR" } = Astro.props;
---

<figure class="tx-pq">
  <blockquote class="tx-pq__quote">
    <span class="tx-pq__mark" aria-hidden="true">"</span>
    {quote}
  </blockquote>
  {attribution && (
    <figcaption class="tx-pq__caption">
      <span class="tx-pq__name">{attribution}</span>
      {role && <span class="tx-pq__role">{role}</span>}
    </figcaption>
  )}
</figure>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-pq {
    margin: 0;
    padding: 2rem 0;
    border-top: 3px solid var(--color-accent);
  }
  .tx-pq__quote {
    position: relative;
    margin: 0 0 1.25rem;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .tx-pq__mark {
    position: absolute;
    top: -0.5rem;
    left: -0.25rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.15;
    font-family: Georgia, serif;
    pointer-events: none;
  }
  .tx-pq__caption { display: flex; flex-direction: column; gap: 0.15rem; }
  .tx-pq__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .tx-pq__role {
    font-size: 0.8rem;
    color: #888;
  }
</style>