CTA Card

<!--
  Day 83: CTA Card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- CTA Card -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="px-8 py-12 text-center">
    <!-- Header -->
    <div class="mb-6">
      <div
        class="mx-auto mb-4 flex size-20 items-center justify-center rounded-full bg-indigo-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-rocket inline-block size-8 text-indigo-600"
        >
          <path
            d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
          />
          <path
            d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
          />
          <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
          <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-zinc-800">
        Launch your business
      </h2>
      <p class="mt-3 text-zinc-600">
        Join thousands of businesses already using our platform to scale their
        operations and reach new heights.
      </p>
    </div>
    <!-- END Header -->

    <!-- CTA Buttons -->
    <div class="flex flex-col gap-3">
      <button
        type="button"
        class="w-full rounded-xl bg-indigo-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-indigo-500/25 hover:bg-indigo-700 hover:shadow-indigo-500/50"
      >
        Get started now
      </button>
      <button
        type="button"
        class="w-full rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-2.5 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-100"
      >
        Live preview
      </button>
    </div>
    <!-- END CTA Buttons -->

    <!-- Social Proof -->
    <div class="mt-8 border-t border-dashed border-zinc-200 pt-8">
      <p class="mb-3 text-xs text-zinc-500">Trusted by 10,000+ companies</p>
      <div class="flex items-center justify-center gap-3">
        <div
          class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
        >
          TechCorp
        </div>
        <div
          class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
        >
          StartupX
        </div>
        <div
          class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
        >
          InnovateLab
        </div>
      </div>
    </div>
    <!-- END Social Proof -->
  </div>
</div>
<!-- END CTA Card -->