TextBlockquote text

---
interface Props {
  quote: string;
  source?: string;
}
const { quote = "BLURR heeft onze online verkopen in 6 maanden verdrievoudigd. Geen marketingpraat, gewoon resultaat.", source = "Sarah K., eigenaar webshop" } = Astro.props;
---

<figure class="tx-bq">
  <blockquote class="tx-bq__block">
    <p>{quote}</p>
  </blockquote>
  {source && <figcaption class="tx-bq__source">— {source}</figcaption>}
</figure>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-bq {
    margin: 0;
    padding: 0;
  }
  .tx-bq__block {
    margin: 0 0 0.75rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--color-accent);
    background: rgba(99,102,241,0.05);
    border-radius: 0 0.5rem 0.5rem 0;
  }
  .tx-bq__block p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-primary);
    font-style: italic;
    line-height: 1.65;
  }
  .tx-bq__source {
    font-size: 0.825rem;
    color: #888;
    padding-left: 1.75rem;
  }
</style>