CTA Download

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

    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-4xl">Get the App</h2>
      <p class="mt-4 text-lg text-[var(--ws-cta-text-soft)]">Available on all your devices. Start for free.</p>
    </div>

    <div class="grid gap-6 sm:grid-cols-2">

      <!-- Desktop Card -->
      <div class="rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-8 transition hover:border-[var(--ws-cta-action-bg)] hover:shadow-lg">
        <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-cta-action-bg)]">
          <svg class="h-6 w-6 text-[var(--ws-cta-action-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
            <rect x="3" y="4" width="18" height="13" rx="2"/>
            <path d="M8 21h8M12 17v4"/>
          </svg>
        </div>
        <h3 class="mb-2 text-xl font-semibold text-[var(--ws-cta-text)]">Desktop App</h3>
        <p class="mb-6 text-sm text-[var(--ws-cta-text-soft)]">Full-featured experience with offline support and local storage.</p>
        <div class="flex flex-wrap gap-3">
          <a href="#" class="inline-flex items-center gap-2 rounded-lg bg-[var(--ws-cta-action-bg)] px-4 py-2.5 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="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            macOS
          </a>
          <a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-cta-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-[var(--ws-cta-border)]">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z"/>
            </svg>
            Windows
          </a>
        </div>
      </div>

      <!-- Mobile Card -->
      <div class="rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-8 transition hover:border-[var(--ws-cta-action-bg)] hover:shadow-lg">
        <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-cta-action-bg)]">
          <svg class="h-6 w-6 text-[var(--ws-cta-action-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
            <rect x="7" y="2" width="10" height="20" rx="3"/>
            <circle cx="12" cy="18" r="1" fill="currentColor" stroke="none"/>
          </svg>
        </div>
        <h3 class="mb-2 text-xl font-semibold text-[var(--ws-cta-text)]">Mobile App</h3>
        <p class="mb-6 text-sm text-[var(--ws-cta-text-soft)]">Capture ideas on the go. Sync seamlessly with your desktop.</p>
        <div class="flex flex-wrap gap-3">
          <a href="#" class="inline-flex items-center gap-2 rounded-lg bg-[var(--ws-cta-action-bg)] px-4 py-2.5 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="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            App Store
          </a>
          <a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-cta-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-[var(--ws-cta-border)]">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M3.18 23.71l10.85-10.85-3.03-3.03L3.18 7.71v16zM17.5 9.85L14.6 7.05l2.44-2.44c.39-.39.39-1.02 0-1.41l-.85-.85c-.39-.39-1.02-.39-1.41 0l-2.5 2.5L9.85 2.5C9.07 1.72 7.89 1.56 6.95 2.1L13 8.16l4.5-4.5v6.19z"/>
            </svg>
            Google Play
          </a>
        </div>
      </div>

    </div>
  </div>
</section>