Hero Section with Booking Card

<section class="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 items-end">
  <div class="lg:col-span-7 xl:col-span-8">
    <div class="max-w-2xl lg:max-w-3xl">
      <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-semibold tracking-tight leading-[0.95]">
        <span class="block text-white font-medium tracking-tighter">Where Silence</span><span class="block text-white/70 font-medium tracking-tighter">Meets</span><span class="block bg-clip-text text-transparent bg-gradient-to-b from-white to-white/70 font-medium tracking-tighter">The Pines</span>
      </h1>
      <p class="mt-6 text-base sm:text-lg text-slate-200/90">Handpicked retreats tucked between evergreens and alpine
        lakes. Unplug, warm up by the fire, and rediscover the simple things.</p>
      <div class="mt-6 flex flex-wrap items-center gap-4">
        <div class="inline-flex items-center gap-2 rounded-full bg-black/30 px-3 py-1.5 ring-1 ring-white/15"><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"
            class="h-4 w-4 text-amber-300">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
            </path>
          </svg><span class="text-white font-medium">4.8</span><span class="text-slate-300/80">from 2,400+ stays</span>
        </div>
        <div class="inline-flex items-center gap-2 rounded-full bg-black/30 px-3 py-1.5 ring-1 ring-white/15"><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"
            class="h-4 w-4 text-emerald-300">
            <path
              d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
            </path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg><span class="text-slate-100">Cascades, PNW</span></div>
      </div>
    </div>
  </div>
  <div class="lg:col-span-5 xl:col-span-4">
    <div
      class="relative rounded-3xl bg-slate-900/70 p-5 sm:p-6 lg:p-7 ring-1 ring-white/10 backdrop-blur-xl shadow-2xl">
      <button class="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 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" class="h-4.5 w-4.5 text-slate-200"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg></button>
      <h3 class="text-xl sm:text-2xl text-white font-medium tracking-tighter">Silverpine Ridge Cabin</h3>
      <p class="mt-1 text-sm text-slate-300/80">2 bedrooms • Wood stove • Riverside deck</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"><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" class="h-4 w-4 text-slate-200"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Check-in</label>
          <div class="mt-1.5 flex items-center justify-between"><span class="text-white font-medium">Apr 14</span><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"
              class="h-4 w-4 text-slate-300/80">
              <path d="m6 9 6 6 6-6"></path>
            </svg></div>
          <p class="mt-1 text-[11px] text-slate-400/80">After 2:00 PM</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"><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" class="h-4 w-4 text-slate-200"><path d="M16 14v2.2l1.6 1"></path><path d="M16 2v4"></path><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"></path><path d="M3 10h5"></path><path d="M8 2v4"></path><circle cx="16" cy="16" r="6"></circle></svg>Check-out</label>
          <div class="mt-1.5 flex items-center justify-between"><span class="text-white font-medium">Apr 18</span><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"
              class="h-4 w-4 text-slate-300/80">
              <path d="m6 9 6 6 6-6"></path>
            </svg></div>
          <p class="mt-1 text-[11px] text-slate-400/80">Until 11:00 AM</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"><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" class="h-4 w-4 text-slate-200"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>Guests</label>
          <div class="mt-1.5 flex items-center justify-between">
            <span class="text-white font-medium">2–5 people</span><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" class="h-4 w-4 text-slate-300/80">
              <path d="m6 9 6 6 6-6"></path>
            </svg></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"><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" class="h-4 w-4 text-slate-200"><path d="M11.25 16.25h1.5L12 17z"></path><path d="M16 14v.5"></path><path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309"></path><path d="M8 14v.5"></path><path d="M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"></path></svg>Pet-friendly</label>
          <div class="mt-1.5 flex items-center justify-between"><span class="text-white font-medium">Yes</span><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"
              class="h-4 w-4 text-emerald-300">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></div>
        </div>
      </div>
      <div class="mt-6 flex items-end justify-between">
        <div class="">
          <div class="text-2xl text-white font-medium tracking-tighter">
            $329<span class="text-base font-medium text-slate-300"> / night</span></div>
          <div class="text-xs text-slate-400/80">Taxes and fees not included</div>
        </div>
        <button class="inline-flex gap-2 hover:bg-white/90 transition font-medium text-slate-900 bg-white rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-2xl items-center">Reserve<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" class="h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button>
      </div>
    </div>
  </div>
</section>