Responsive Fashion Showcase Hero Section

<section class="sm:p-8 ring-1 ring-white/10 bg-white/5 rounded-3xl mt-8 mr-8 ml-8 pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <div class="flex gap-2 text-sm text-white/70 mb-2 items-center">

    <span class="font-normal font-geist">Editor's Picks</span>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
    <div class="">
      <h2
        class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] font-medium text-white tracking-tighter font-geist">
        This season's essentials.</h2>
      <p class="mt-3 text-base text-white/70 font-normal font-geist">Hand-picked pieces that work across
        occasions—versatile foundations for any wardrobe.</p>

      <div class="mt-6 space-y-4">
        <div class="flex items-center gap-3">
          <div class="h-2 w-2 rounded-full bg-emerald-400"></div>
          <span class="text-sm text-white/80 font-geist">Sustainable materials from verified suppliers</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="h-2 w-2 rounded-full bg-blue-400"></div>
          <span class="text-sm text-white/80 font-geist">Size-inclusive fits across all categories</span>
        </div>
        <div class="flex items-center gap-3">
          <div class="h-2 w-2 rounded-full bg-purple-400"></div>
          <span class="text-sm text-white/80 font-geist">Curated by AI and human stylists</span>
        </div>
      </div>

      <div class="mt-8 flex items-center gap-4">
        <button class="inline-flex items-center gap-2 rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-semibold hover:bg-white/90 transition 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" data-lucide="shopping-cart" class="lucide lucide-shopping-cart h-4 w-4"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
          Shop the edit
        </button>
        <a href="#"
          class="inline-flex items-center gap-2 text-sm font-medium text-white/80 hover:text-white transition font-geist">
          View lookbook
          <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </a>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4">
      <div class="space-y-4">
        <div
          class="relative group overflow-hidden ring-1 ring-white/15 aspect-[3/4] bg-white/10 rounded-2xl backdrop-blur">
          <img src="https://cdn.midjourney.com/23068c2c-3629-4025-af2a-629137790bb1/0_0.png?w=800&amp;q=80" alt="Essential blazer" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-4 left-4 right-4">
            <h3 class="text-white font-semibold text-sm font-geist">Tailored Blazer</h3>
            <p class="text-xs text-white/70 font-geist">From $229</p>
          </div>
        </div>
        <div
          class="relative group overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/15 backdrop-blur aspect-square">
          <img src="https://cdn.midjourney.com/a97909da-1df2-400c-adf2-e3a6c64428d9/0_0.png?w=800&amp;q=80" alt="Classic denim" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style="outline: rgb(245, 158, 11) solid 2px; outline-offset: 2px; transition: outline 0.1s ease-in-out;">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-4 left-4 right-4">
            <h3 class="text-white font-semibold text-sm font-geist">Perfect Denim</h3>
            <p class="text-white/70 text-xs font-geist">From $125</p>
          </div>
        </div>
      </div>
      <div class="space-y-4">
        <div
          class="relative group overflow-hidden ring-1 ring-white/15 aspect-square bg-white/10 rounded-2xl backdrop-blur">
          <img src="https://cdn.midjourney.com/451d0227-f7f5-456d-a595-fb08ce364854/0_0.png?w=800&amp;q=80" alt="Silk blouse" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-4 left-4 right-4">
            <h3 class="text-white font-semibold text-sm font-geist">Silk Essential</h3>
            <p class="text-xs text-white/70 font-geist">From $449</p>
          </div>
        </div>
        <div
          class="relative group overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/15 backdrop-blur aspect-[3/4]">
          <img src="https://cdn.midjourney.com/3a5159e3-f6ae-4db1-8294-53743054e08c/0_0.png?w=800&amp;q=80" alt="Statement dress" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-4 left-4 right-4">
            <h3 class="text-white font-semibold text-sm font-geist">Midi Dress</h3>
            <p class="text-white/70 text-xs font-geist">From $225</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="flex mt-8 items-center justify-between">
    <div class="flex items-center gap-4">
      <div class="flex -space-x-2">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/daf48e37-0de1-4805-9bdf-a256c7d5d35a_320w.jpg" alt="Customer" class="h-8 w-8 rounded-full ring-2 ring-white/20 object-cover" style="">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c0f45607-be3b-4145-aba4-31e067ee618b_320w.jpg" alt="Customer" class="h-8 w-8 rounded-full ring-2 ring-white/20 object-cover">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc856f12-4738-4299-91f7-4f7be1502a47_320w.jpg" alt="Customer" class="h-8 w-8 rounded-full ring-2 ring-white/20 object-cover" style="">
        <div
          class="h-8 w-8 ring-2 ring-white/20 flex bg-white/20 rounded-full backdrop-blur-md items-center justify-center">
          <span class="text-xs text-white/80 font-semibold font-geist">+2K</span>
        </div>
      </div>
      <p class="text-sm text-white/70 font-geist">Styled by our community</p>
    </div>
    <div class="flex items-center gap-1">
      <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="star"
        class="lucide lucide-star h-4 w-4 text-amber-400 fill-current">
        <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"
          class=""></path>
      </svg>
      <span class="text-sm text-white/80 font-semibold font-geist">4.9</span>
      <span class="text-sm text-white/60 font-geist">(2,847 reviews)</span>
    </div>
  </div>
</section>