Gradient CTA Card with Email & Project Buttons

<div
  class="relative overflow-hidden sm:p-8 shadow-[0_8px_30px_rgba(0,0,0,0.08)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] bg-white border-white/20 border rounded-[40px] pt-6 pr-6 pb-6 pl-6">
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
  </div>
  <div class="relative">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
      <div class="">
        <p class="text-sm text-gray-500 font-geist">Ready to create something amazing?</p>
        <h3 class="mt-1 text-xl sm:text-2xl text-gray-900 font-geist tracking-tighter">Let's bring your vision to life.
        </h3>
      </div>
      <div class="flex items-center gap-3">
        <a href="mailto:hello@studiomeridian.co"
          class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-gray-700 bg-gray-100 hover:bg-gray-200 border border-white/20">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail"
            class="lucide lucide-mail w-4 h-4 stroke-1.5">
            <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
          </svg>
          <span class="font-geist">hello@studiomeridian.co</span>
        </a>
        <a href="#"
          class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-blue-600 hover:bg-blue-700 border border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="message-circle" class="lucide lucide-message-circle w-4 h-4 stroke-1.5">
            <path
              d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">
            </path>
          </svg>
          <span class="font-geist">Start Project</span>
        </a>
      </div>
    </div>
  </div>
</div>