Blurred Gradient Background Ornaments

<div
  class="overflow-hidden sm:p-8 flex flex-col sm:flex-row gap-6 text-white bg-gradient-to-r from-slate-900 via-slate-900 to-slate-800 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative items-center max-w-lg mx-auto m-8">
  <div class="opacity-30 absolute top-0 right-0 bottom-0 left-0">
    <div class="absolute -left-20 -top-20 w-64 h-64 bg-lime-300/10 rounded-full blur-3xl"></div>
    <div class="absolute right-0 bottom-0 w-72 h-72 bg-cyan-300/10 rounded-full blur-3xl"></div>
  </div>

  <div class="relative flex-1">
    <div class="flex items-center gap-3 mb-4">
      <div class="w-9 h-9 rounded-2xl bg-lime-300 flex items-center justify-center">
        <span class="text-slate-900 text-lg font-semibold">S</span>
      </div>
      <div class="">
        <p class="text-sm font-medium tracking-tight">Skilltrack</p>
        <p class="text-xs text-slate-300">Learning companion</p>
      </div>
    </div>
    <h2 class="text-2xl sm:text-[26px] tracking-tight font-semibold leading-snug">
      Learn at your pace,<br class="hidden sm:block"> from anywhere.
    </h2>
    <p class="mt-3 text-sm text-slate-300 max-w-xs">
      Stay on track with structured paths, live sessions, and daily micro‑lessons.
    </p>

    <div class="mt-5 flex flex-wrap items-center gap-3">
      <button class="inline-flex items-center gap-2 rounded-full bg-white text-slate-900 px-4 py-2 text-xs font-medium hover:bg-slate-100 transition">
              <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="download-cloud" class="lucide lucide-download-cloud w-4 h-4"><path d="M12 13v8l-4-4" class=""></path><path d="m12 21 4-4" class=""></path><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" class=""></path></svg>
              Download for iOS
            </button>
      <button class="inline-flex items-center gap-2 rounded-full border border-white/20 px-4 py-2 text-xs font-medium text-slate-100 hover:bg-white/5 transition">
              <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="link" class="lucide lucide-link w-3.5 h-3.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path></svg>
              skilltrack.app
            </button>
    </div>
  </div>

  <div class="relative flex-1 max-w-xs">
    <div class="rounded-3xl overflow-hidden bg-slate-800/40 border border-white/10">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fdfe2974-cc7c-4584-98e1-9a5522963759_800w.webp" alt="Smiling learner" class="w-full h-full object-cover">
    </div>
  </div>
</div>