Hero Feature Card with CTA

<article class="relative overflow-hidden h-80 bg-stone-900 rounded-3xl shadow-lg">
  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d7d9b7c8-28b9-4129-953f-61dd5c9ecc6c_800w.jpg" alt="" class="h-full w-full object-cover">
  <div class="absolute inset-0 bg-gradient-to-tr to-transparent from-stone-900/70 via-stone-900/10 shadow-lg"></div>
  <div class="absolute bottom-5 left-5 right-5">
    <p class="text-2xl md:text-3xl font-semibold tracking-tight text-white">Ignite Your Momentum</p>
    <p class="mt-1 text-sm text-stone-200">Daily habits that compound into lasting results.</p>
  </div>
  <button class="absolute right-5 bottom-5 inline-flex h-11 w-11 items-center justify-center rounded-full shadow-md ring-1 bg-white text-stone-900 ring-stone-200 hover:bg-stone-50" aria-label="Start">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
      <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path>
    </svg>
  </button>
</article>