Freelancer Availability & Contact Card

<div
  class="relative sm:p-6 lg:p-7 ring-1 ring-white/10 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-slate-900/70 rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-xl">


  <h3 class="text-xl sm:text-2xl text-white tracking-tighter font-geist font-light" style="">Availability &amp; Contact
  </h3>
  <p class="mt-1 text-sm text-slate-300/80 font-geist">Booking limited projects each quarter. Replies within 24h.</p>

  <div class="mt-5 grid grid-cols-2 gap-3">
    <div class="rounded-2xl bg-white/5 p-3 ring-1 ring-white/10">
      <label class="flex items-center gap-2 text-slate-300/80 text-xs font-medium font-geist">

                    Next opening
                  </label>
      <div class="mt-1.5 flex items-center justify-between">
        <span class="text-white font-medium font-geist">Oct 2025</span>

      </div>
      <p class="mt-1 text-[11px] text-slate-400/80 font-geist">Waitlist available</p>
    </div>

    <div class="rounded-2xl bg-white/5 p-3 ring-1 ring-white/10">
      <label class="flex items-center gap-2 text-slate-300/80 text-xs font-medium font-geist">

                    Response time
                  </label>
      <div class="mt-1.5 flex items-center justify-between">
        <span class="text-white font-medium font-geist">Under 24h</span>

      </div>
      <p class="mt-1 text-[11px] text-slate-400/80 font-geist">Mon–Fri SGT (UTC+8)</p>
    </div>
  </div>

  <div class="mt-3 grid grid-cols-2 gap-3">
    <div class="rounded-2xl bg-white/5 p-3 ring-1 ring-white/10">
      <label class="flex items-center gap-2 text-slate-300/80 text-xs font-medium font-geist">

                    Preferred scope
                  </label>
      <div class="mt-1.5 flex items-center justify-between">
        <span class="text-white font-medium font-geist">Design systems</span>

      </div>
    </div>

    <div class="rounded-2xl bg-white/5 p-3 ring-1 ring-white/10">
      <label class="flex items-center gap-2 text-slate-300/80 text-xs font-medium font-geist">

                    Intro call
                  </label>
      <div class="mt-1.5 flex items-center justify-between">
        <span class="text-white font-medium font-geist">15 minutes</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check h-4 w-4 text-emerald-300">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
    </div>
  </div>

  <div class="flex mt-6 items-end justify-between">
    <div class="">
      <div class="text-xl text-white tracking-tighter font-geist font-light" style="">From
        S$900<span class="text-sm font-medium text-slate-300 font-geist"> / day</span></div>
      <div class="text-[10px] text-slate-400/80 font-geist">Projects &amp; retainers available</div>
    </div>
    <a href="#contact"
      class="inline-flex gap-2 hover:bg-white/90 transition font-medium text-slate-900 bg-white rounded-full pt-2 pr-4 pb-2 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] items-center text-sm font-geist">
      Start a project
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        data-lucide="arrow-right" class="lucide lucide-arrow-right h-3.5 w-3.5">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </a>
  </div>
</div>