Portrait Photography Pricing Grid

<div class="relative max-w-7xl sm:px-6 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6">
            <div class="flex items-center justify-between mb-8">
              <p class="text-xs font-medium text-white/60 uppercase tracking-wide" style="">/Services</p>
              <span class="text-xs font-medium text-white/60" style="">(03)</span>
            </div>
            
            <h2 class="text-4xl sm:text-6xl md:text-7xl text-white leading-tight mb-8 font-light tracking-tight" style="">
              Portrait packages designed for clarity and results.
            </h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <!-- Quick Session -->
  <article class="ring-1 ring-neutral-200 bg-white rounded-3xl pt-1 pr-1 pb-1 pl-1 flex">
    <div class="rounded-2xl bg-white p-6 sm:p-8 flex flex-col flex-1">
      <p class="text-xs text-neutral-500 text-center uppercase tracking-wide" style="">( Ready within 3 days )</p>
      <h3 class="mt-2 text-2xl text-neutral-900 text-center font-light tracking-tight" style="">Quick Session</h3>
      <p class="mt-2 text-xs sm:text-sm text-neutral-600 text-center uppercase tracking-wide" style="">Perfect for a fast and focused portrait session</p>

      <div class="mt-5 overflow-hidden rounded-xl bg-neutral-900 text-white flex divide-x divide-white/10">
        <div class="flex-1 py-3 text-center text-sm font-medium uppercase tracking-wide" style="">30 Minutes</div>
        <div class="flex-1 py-3 text-center text-sm font-semibold" style="">$ 299</div>
      </div>

      <ul class="mt-5 text-sm flex-1">
        <li class="flex items-center gap-3 py-3">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">+20 edited photos</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">One location</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Portraits or headshots</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="minus" class="lucide lucide-minus h-4 w-4 text-neutral-400"><path d="M5 12h14" class=""></path></svg>
          <span class="text-neutral-400" style="">Outfit changes</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="minus" class="lucide lucide-minus h-4 w-4 text-neutral-400"><path d="M5 12h14" class=""></path></svg>
          <span class="text-neutral-400" style="">Styled direction</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="minus" class="lucide lucide-minus h-4 w-4 text-neutral-400"><path d="M5 12h14" class=""></path></svg>
          <span class="text-neutral-400" style="">Lighting setups</span>
        </li>
      </ul>

      <button class="mt-6 w-full inline-flex items-center justify-center rounded-xl bg-neutral-900 px-4 py-3 text-sm font-medium text-white hover:bg-black transition" style="">
        Reserve Now
      </button>
    </div>
  </article>

  <!-- Full Portrait (Most Popular) -->
  <article class="bg-white rounded-3xl p-1 ring-1 ring-neutral-200 flex">
    <div class="rounded-2xl bg-white p-6 sm:p-8 flex flex-col flex-1">
      <div class="flex justify-center">
        <span class="inline-flex items-center rounded-full bg-neutral-900 text-white px-3 py-1 text-[11px] font-medium uppercase tracking-wide" style="">Most popular</span>
      </div>
      <p class="mt-3 text-xs text-neutral-500 text-center uppercase tracking-wide" style="">( Ready within 5 days )</p>
      <h3 class="mt-2 text-2xl text-neutral-900 text-center font-light tracking-tight" style="">Full Portrait</h3>
      <p class="mt-2 text-xs sm:text-sm text-neutral-600 text-center uppercase tracking-wide" style="">Ideal for personal portraits, couples, brands</p>

      <div class="mt-5 overflow-hidden rounded-xl bg-neutral-900 text-white flex divide-x divide-white/10">
        <div class="flex-1 py-3 text-center text-sm font-medium uppercase tracking-wide" style="">1.5 Hours</div>
        <div class="flex-1 py-3 text-center text-sm font-semibold" style="">$ 499</div>
      </div>

      <ul class="mt-5 text-sm flex-1">
        <li class="flex items-center gap-3 py-3">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">+50 edited photos</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">1–2 locations</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Portraits &amp; details</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">1–2 outfit changes</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Basic styled direction</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="minus" class="lucide lucide-minus h-4 w-4 text-neutral-400"><path d="M5 12h14" class=""></path></svg>
          <span class="text-neutral-400" style="">Lighting setups</span>
        </li>
      </ul>

      <button class="mt-6 w-full inline-flex items-center justify-center rounded-xl bg-neutral-900 px-4 py-3 text-sm font-medium text-white hover:bg-black transition" style="">
        Reserve Now
      </button>
    </div>
  </article>

  <!-- Creative Day -->
  <article class="bg-white rounded-3xl p-1 ring-1 ring-neutral-200 flex">
    <div class="rounded-2xl bg-white p-6 sm:p-8 flex flex-col flex-1">
      <p class="text-xs text-neutral-500 text-center uppercase tracking-wide" style="">( Ready within 1 week )</p>
      <h3 class="mt-2 text-2xl text-neutral-900 text-center font-light tracking-tight" style="">Creative Day</h3>
      <p class="mt-2 text-xs sm:text-sm text-neutral-600 text-center uppercase tracking-wide" style="">A half‑day session for full creative freedom</p>

      <div class="mt-5 overflow-hidden rounded-xl bg-neutral-900 text-white flex divide-x divide-white/10">
        <div class="flex-1 py-3 text-center text-sm font-medium uppercase tracking-wide" style="">3–4 Hours</div>
        <div class="flex-1 py-3 text-center text-sm font-semibold" style="">$ 999</div>
      </div>

      <ul class="mt-5 text-sm flex-1">
        <li class="flex items-center gap-3 py-3">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">+120 edited photos</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Multiple locations</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Portraits, details &amp; candid shots</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Unlimited outfit changes</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Advanced styled direction</span>
        </li>
        <li class="flex items-center gap-3 py-3 border-t border-dotted border-neutral-200">
          <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" data-lucide="check" class="lucide lucide-check h-4 w-4 text-neutral-900"><path d="M20 6 9 17l-5-5" class=""></path></svg>
          <span class="text-neutral-800" style="">Advanced lighting setups</span>
        </li>
      </ul>

      <button class="mt-6 w-full inline-flex items-center justify-center rounded-xl bg-neutral-900 px-4 py-3 text-sm font-medium text-white hover:bg-black transition" style="">
        Reserve Now
      </button>
    </div>
  </article>
</div>
            
            <p class="mt-6 text-xs text-white/60" style="">All sessions include a private online gallery and high‑resolution downloads.</p>
          </div>