CTA Dark

<!--
  Day 37: CTA Dark

  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 Dark -->
<div
  class="mx-auto w-full max-w-5xl rounded-3xl bg-white/40 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <div
    class="relative overflow-hidden rounded-2xl bg-zinc-950 px-5 py-12 text-center md:px-12 md:py-16"
  >
    <div
      class="absolute inset-0 flex items-end justify-center"
      aria-hidden="true"
    >
      <div
        class="absolute -bottom-40 h-64 w-2/3 rounded-full bg-radial from-indigo-700 to-zinc-950 opacity-75 blur-3xl"
      ></div>
      <div
        class="absolute -bottom-44 h-64 w-1/3 rounded-full bg-radial from-purple-500 to-zinc-950 blur-3xl"
      ></div>
    </div>
    <div class="relative">
      <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-12 -rotate-45 text-indigo-400"
      >
        <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>
      <h2 class="mt-8 text-3xl font-black text-white lg:text-4xl">
        Start building amazing web apps today.
      </h2>
      <h3 class="mt-3 font-medium text-balance text-zinc-400">
        Join thousands of satisfied customers and transform your digital
        experience today. Our premium solutions are just a click away.
      </h3>
      <div class="mt-8">
        <a
          href="javascript:void(0)"
          class="group inline-flex items-center justify-center gap-2 rounded-xl border border-indigo-600 bg-indigo-600 px-6 py-4 text-sm leading-5 font-medium text-white ring-4 ring-white/10 hover:border-indigo-700 hover:bg-indigo-700 hover:text-white hover:ring-indigo-400/10 active:border-indigo-600 active:bg-indigo-600"
        >
          <span>Get Started</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-arrow-right-circle inline-block size-4 opacity-50 transition duration-150 group-hover:translate-x-1 group-hover:opacity-100"
          >
            <path
              fill-rule="evenodd"
              d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0ZM4.75 7.25a.75.75 0 0 0 0 1.5h4.69L8.22 9.97a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 0 0-1.06 1.06l1.22 1.22H4.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
<!-- END CTA Dark -->