ContentLead content

---
interface Props {
  eyebrow?: string;
  lead: string;
  subtext?: string;
  align?: "left" | "center";
}

const {
  eyebrow = "Case study",
  lead = "Hoe BLURR een e-commerce merk in 6 maanden van €50K naar €400K maandelijkse omzet bracht via een integrale paid + SEO strategie.",
  subtext = "Een combinatie van Google Shopping, Meta Dynamic Ads en technische SEO-verbeteringen zorgde voor een doorbraak die het merk blijvend op de kaart zette.",
  align = "left",
} = Astro.props;
---

<div class={`cld-wrap cld-wrap--${align}`}>
  {eyebrow && <span class="cld-eyebrow">{eyebrow}</span>}
  <p class="cld-lead">{lead}</p>
  {subtext && <p class="cld-subtext">{subtext}</p>}
</div>

<style>
  .cld-wrap {
    padding: 2.5rem 0 1.5rem;
    max-width: 760px;
  }
  .cld-wrap--center {
    text-align: center;
    margin: 0 auto;
  }
  .cld-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent, #6366f1);
    background: #eef2ff;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
  }
  .cld-lead {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.55;
    color: var(--color-primary, #0a0a0a);
    font-weight: 500;
    margin: 0 0 1.25rem;
  }
  .cld-subtext {
    font-size: 1rem;
    line-height: 1.75;
    color: #666;
    margin: 0;
  }
</style>