CTA Open Source

<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">

    <div class="overflow-hidden rounded-2xl border border-[var(--ws-cta-border)]">
      <div class="grid md:grid-cols-2">

        <!-- Left: Copy -->
        <div class="p-10">
          <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--ws-cta-border)] px-3 py-1.5 text-xs font-semibold text-[var(--ws-cta-text)]">
            <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
            </svg>
            Open Source
          </div>
          <h2 class="mb-4 text-3xl font-bold tracking-tight text-[var(--ws-cta-text)]">
            Built in public, for everyone
          </h2>
          <p class="mb-8 text-[var(--ws-cta-text-soft)]">
            Every line of code is open. Audit it, fork it, contribute to it. We believe great software is built with the community.
          </p>
          <a href="#" class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-cta-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-cta-action-text)] transition hover:bg-[var(--ws-cta-action-bg-hover)]">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
            </svg>
            Star on GitHub
          </a>
        </div>

        <!-- Right: Stats -->
        <div class="border-t border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-10 md:border-l md:border-t-0">
          <dl class="space-y-8">
            <div>
              <dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">GitHub Stars</dt>
              <dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">
                42,000<span class="text-2xl text-[var(--ws-cta-action-bg)]">+</span>
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">Open Issues</dt>
              <dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">1,240</dd>
            </div>
            <div>
              <dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">Contributors</dt>
              <dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">
                280<span class="text-2xl text-[var(--ws-cta-action-bg)]">+</span>
              </dd>
            </div>
          </dl>
        </div>

      </div>
    </div>

  </div>
</section>