Referral Program Base

<section class="ws-referral-program ws-referral bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <div class="text-center">
      <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">Earn Money</span>
      <h2 class="mt-4 text-3xl font-bold text-slate-900">Referral Program</h2>
      <p class="mt-3 mx-auto max-w-xl text-lg text-slate-500">Invite friends and earn 30% commission on every paid subscription they sign up for.</p>
    </div>

    <!-- Commission highlight -->
    <div class="mx-auto mt-10 max-w-sm rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-8 text-center text-white shadow-lg">
      <p class="text-5xl font-bold">30%</p>
      <p class="mt-2 text-lg font-medium text-emerald-100">Recurring Commission</p>
      <p class="mt-1 text-sm text-emerald-200">For every referral, every month</p>
    </div>

    <!-- How it works -->
    <div class="mt-14 grid gap-8 sm:grid-cols-3">
      <div class="text-center">
        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100">
          <svg class="h-7 w-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Sign Up</h3>
        <p class="mt-2 text-sm text-slate-500">Create your free affiliate account and get your unique referral link.</p>
      </div>
      <div class="text-center">
        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100">
          <svg class="h-7 w-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Share Your Link</h3>
        <p class="mt-2 text-sm text-slate-500">Share with your audience via blog, social media, or email.</p>
      </div>
      <div class="text-center">
        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100">
          <svg class="h-7 w-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-slate-900">Earn Commission</h3>
        <p class="mt-2 text-sm text-slate-500">Earn 30% recurring commission for every paying customer you refer.</p>
      </div>
    </div>

    <!-- CTA -->
    <div class="mt-12 text-center">
      <a href="#" class="rounded-xl bg-[var(--ws-color-text)] px-8 py-3.5 text-sm font-semibold text-white hover:bg-slate-800 dark:hover:bg-slate-100">Join the Program</a>
      <p class="mt-3 text-xs text-slate-400">Free to join · No minimum payout · Monthly payouts via PayPal or bank transfer</p>
    </div>
  </div>
</section>