Cleaning Service Hero Section with CTA & Steps

<section class="relative mt-40 mb-8">
  <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
  <div class="grid gap-10 md:grid-cols-2 md:items-center pr-40 pl-40">
    <div class="pt-2 pb-2">
      <h1 class="mt-5 text-4xl sm:text-6xl lg:text-7xl tracking-tight font-geist font-semibold">
        Your space, spotless
      </h1>
      <p class="mt-4 text-base sm:text-lg text-black/70 font-geist">
        Professional cleaning services for homes and offices. Eco‑friendly products, flexible scheduling, and a 100% satisfaction guarantee.
      </p>
      <div class="mt-6 flex flex-col sm:flex-row gap-3">
        <a href="#" class="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-medium bg-black text-neutral-100 hover:bg-black/90 font-geist">
          <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-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>
          Schedule cleaning
        </a>
        <a href="#" class="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-medium border bg-gray-100 text-black hover:bg-gray-200 border-white/20 font-geist">
          <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-4 w-4"><rect width="16" height="20" x="4" y="2" rx="2" class=""></rect><line x1="8" x2="16" y1="6" y2="6" class=""></line><line x1="16" x2="16" y1="14" y2="18" class=""></line><path d="M16 10h.01" class=""></path><path d="M12 10h.01" class=""></path><path d="M8 10h.01" class=""></path><path d="M12 14h.01" class=""></path><path d="M8 14h.01" class=""></path><path d="M12 18h.01" class=""></path><path d="M8 18h.01" class=""></path></svg>
          Get quote
        </a>
      </div>

      <!-- Steps -->
      <div class="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-2xl border p-4 border-white/20 bg-white shadow-sm">
          <div class="flex items-center gap-2 text-sm font-medium font-geist">
            <span class="inline-flex h-6 w-6 items-center justify-center text-[#000000]/50 font-geist bg-slate-50/15 ring-slate-950/10 ring-1 rounded-md">01</span>
            Book online
          </div>
          <p class="mt-2 text-xs text-black/60 font-geist">Schedule in 60 seconds with our easy booking system.</p>
        </div>
        <div class="rounded-2xl border p-4 border-white/20 bg-white shadow-sm">
          <div class="flex gap-2 text-sm font-medium font-geist items-center">
            <span class="inline-flex h-6 w-6 items-center justify-center text-[#000000]/50 font-geist bg-slate-50/15 ring-slate-950/10 ring-1 rounded-md">02</span>
            We clean
          </div>
          <p class="mt-2 text-xs text-black/60 font-geist">Licensed, insured team arrives with supplies.</p>
        </div>
        <div class="rounded-2xl border p-4 border-white/20 bg-white shadow-sm">
          <div class="flex items-center gap-2 text-sm font-medium font-geist">
            <span class="inline-flex h-6 w-6 items-center justify-center text-[#000000]/50 font-geist bg-slate-50/15 ring-slate-950/10 ring-1 rounded-md">03</span>
            You relax
          </div>
          <p class="mt-2 text-xs text-black/60 font-geist">Come home to a sparkling clean space.</p>
        </div>
      </div>
    </div>

    <div class="relative">
      <div class="relative overflow-hidden bg-white rounded-3xl shadow-sm">
        <img src="https://cdn.midjourney.com/750da74f-ec69-4676-b50f-066f0d7a01a0/0_0.png?w=800&amp;q=80" alt="Clean modern kitchen" class="h-80 w-full sm:h-[28rem] object-cover">
        <div class="absolute inset-x-0 bottom-0 p-4 sm:p-6">
          <div class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs backdrop-blur border bg-white/70 text-black/80 border-white/30 font-geist">
            <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-4 w-4"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
            Deep cleaned to perfection
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>