Service Feature Card with Image & CTAs

<div class="group relative overflow-hidden md:col-span-2 md:row-span-2 bg-white border-neutral-200 border rounded-2xl max-w-3xl">
  <div class="relative overflow-hidden">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8eb65de1-5616-4a1b-a6cb-f2a48d70bcb7_1600w.jpg" alt="Sprint workshop" class="aspect-video w-full object-cover">
  </div>
  <div class="p-6">
    <div class="flex items-center gap-2">
      <span class="inline-flex items-center text-xs font-medium text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-3 py-1 font-sans">SPRINTS</span>
      <span class="text-xs text-neutral-600 font-sans">End-to-end product</span>
    </div>
    <h3 class="text-2xl sm:text-5xl text-neutral-900 mt-3 font-bricolage font-medium tracking-tighter" style="">Design
      sprints that move from idea to shipped</h3>
    <p class="text-sm sm:text-base text-neutral-600 mt-2 font-sans">We structure work in focused sprints: align on
      outcomes, explore broadly, converge through testing, and deliver production-ready designs with handoff or code.
    </p>
    <div class="mt-5 flex flex-wrap items-center gap-3">
      <a href="#services"
        class="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-2 text-sm font-medium text-neutral-900 font-sans">
        <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="list-checks" class="lucide lucide-list-checks h-4 w-4">
          <path d="m3 17 2 2 4-4" class=""></path>
          <path d="m3 7 2 2 4-4" class=""></path>
          <path d="M13 6h8" class=""></path>
          <path d="M13 12h8" class=""></path>
          <path d="M13 18h8" class=""></path>
        </svg>
        See process
      </a>
      <a href="#contact"
        class="inline-flex items-center gap-2 text-sm font-medium text-white bg-emerald-600 rounded-lg px-4 py-2 font-sans">
        <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="calendar-plus" class="lucide lucide-calendar-plus h-4 w-4">
          <path d="M16 19h6" class=""></path>
          <path d="M16 2v4" class=""></path>
          <path d="M19 16v6" class=""></path>
          <path d="M21 12.598V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8.5" class=""></path>
          <path d="M3 10h18" class=""></path>
          <path d="M8 2v4" class=""></path>
        </svg>
        Book a intro call
      </a>
    </div>
  </div>
</div>