Product Grid with Featured Item and Load More

<div class="sm:py-16 pt-12 pb-12">
      <!-- Featured Product -->
      <article class="mb-12 rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
        <div class="grid lg:grid-cols-2 gap-0">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/34fa9afc-3d27-4ab4-b6b5-cd6e89cab95b_1600w.jpg" alt="Canon EOS R5" class="lg:h-[400px] w-full h-[300px] object-cover">
            <div class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full bg-emerald-500/10 text-xs border border-emerald-500/20 text-emerald-300 font-geist" style="">Editor's Choice</div>
          </div>
          <div class="lg:p-12 flex flex-col pt-8 pr-8 pb-8 pl-8 justify-center">
            <h3 class="lg:text-3xl text-2xl mb-4 text-white tracking-tighter font-geist font-medium" style="">Canon EOS
              R5 Mirrorless Camera</h3>
            <p class="text-lg mb-6 text-white/60 font-geist" style="">Professional 45MP full-frame mirrorless camera
              with 8K video recording, perfect for photographers and videographers demanding the highest quality.</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-4">
                <span class="text-2xl text-white tracking-tighter font-geist font-medium" style="">$3,899</span>
                <span class="text-lg text-white/50 line-through font-geist">$4,299</span>
              </div>
              <button class="inline-flex items-center gap-2 h-12 px-6 rounded-xl transition bg-white text-black hover:bg-white/90 font-geist" style="">
                                Add to cart
                                <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" class=""><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.57L20.75 7H5.12" class=""></path></svg>
                            </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Product 1 -->
        <article class="group rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b201fbab-0845-4780-9fa7-7018d249dbca_800w.jpg" alt="Sony A7 IV" class="w-full h-64 object-cover">
            <div class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full text-xs bg-rose-500/10 border border-rose-500/20 text-rose-300 font-geist" style="">Hot Deal</div>
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="p-6">
            <h3 class="text-2xl mb-3 text-white tracking-tighter font-geist font-medium" style="">Sony A7 IV Mirrorless
              Camera</h3>
            <p class="text-base mb-4 text-white/60 font-geist" style="">33MP full-frame sensor with advanced autofocus.
            </p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-white font-geist">$2,499</span>
              <button class="inline-flex items-center gap-2 h-10 px-4 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>

        <!-- Product 2 -->
        <article class="group rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/edab2a0c-3815-44d9-94fb-d7ebea501c33_800w.jpg" alt="Canon RF 24-70mm" class="w-full h-64 object-cover">
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="p-6">
            <h3 class="text-2xl mb-3 text-white tracking-tighter font-geist font-medium" style="">Canon RF 24-70mm
              f/2.8L</h3>
            <p class="text-base mb-4 text-white/60 font-geist" style="">Professional zoom lens with constant f/2.8
              aperture.</p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-white font-geist">$2,299</span>
              <button class="inline-flex items-center gap-2 h-10 px-4 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>

        <!-- Product 3 -->
        <article class="group rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e69626e7-2c40-4d3f-ab56-e183cf1702c4_800w.jpg" alt="DJI Ronin-S" class="w-full h-64 object-cover">
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="p-6">
            <h3 class="text-2xl mb-3 text-white tracking-tighter font-geist font-medium" style="">DJI Ronin-S Gimbal
            </h3>
            <p class="text-base mb-4 text-white/60 font-geist" style="">Professional 3-axis gimbal for smooth video
              shots.</p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-white font-geist">$699</span>
              <button class="inline-flex items-center gap-2 h-10 px-4 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>

        <!-- Product 4 -->
        <article class="group overflow-hidden hover:shadow-xl transition-all duration-300 bg-zinc-50 border-stone-900/5 border rounded-3xl">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dd7739ca-a486-4c3c-9a56-65ed72d536a6_800w.jpg" alt="Nikon Z9" class="w-full h-64 object-cover">
            <div class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full bg-emerald-500/10 text-xs border border-emerald-500/20 text-emerald-300 font-geist" style="">New Arrival</div>
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="pt-6 pr-6 pb-6 pl-6">
            <h3 class="text-2xl font-medium text-zinc-950 tracking-tighter font-geist mb-3">Nikon Z9 Mirrorless
              Camera</h3>
            <p class="text-base text-zinc-950/60 font-geist mb-4">45.7MP full-frame flagship with 8K video.</p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-zinc-950 font-geist">$5,499</span>
              <button class="inline-flex transition hover:bg-white/5 text-zinc-950/70 font-geist bg-zinc-50 h-10 border-zinc-950/5 border rounded-xl px-4 items-center">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>

        <!-- Product 5 -->
        <article class="group rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/cbb7d5a5-338c-4742-aa67-75c898a97678_800w.jpg" alt="Godox Lighting Kit" class="w-full h-64 object-cover">
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="p-6">
            <h3 class="text-2xl mb-3 text-white tracking-tighter font-geist font-medium" style="">Godox Studio Lighting
              Kit</h3>
            <p class="text-base mb-4 text-white/60 font-geist" style="">Complete 3-light studio setup with stands.</p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-white font-geist">$899</span>
              <button class="inline-flex items-center gap-2 h-10 px-4 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>

        <!-- Product 6 -->
        <article class="group rounded-3xl overflow-hidden border hover:shadow-xl transition-all duration-300 bg-black border-white/5">
          <div class="relative">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0d6402f2-db30-4d17-8b51-47ee62c763f1_800w.jpg" alt="Audio Equipment" class="w-full h-64 object-cover">
            <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full border transition bg-black/80 border-white/5 text-white/70 hover:text-white hover:bg-black" aria-label="Add to wishlist">
                            <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="w-4 h-4"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5Z" class=""></path></svg>
                        </button>
          </div>
          <div class="p-6">
            <h3 class="text-2xl mb-3 text-white tracking-tighter font-geist font-medium" style="">Rode Wireless GO II
            </h3>
            <p class="text-base mb-4 text-white/60 font-geist" style="">Dual-channel wireless microphone system.</p>
            <div class="flex items-center justify-between">
              <span class="text-xl font-semibold text-white font-geist">$299</span>
              <button class="inline-flex items-center gap-2 h-10 px-4 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                                Add to cart
                            </button>
            </div>
          </div>
        </article>
      </div>

      <!-- Load More -->
      <div class="mt-12 text-center">
        <button class="inline-flex items-center gap-2 h-12 px-6 rounded-xl border transition border-white/5 bg-black text-white/70 hover:bg-white/5 font-geist" style="">
                    Load more products
                    <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="w-4 h-4"><path d="m6 9 6 6 6-6" class=""></path></svg>
                </button>
      </div>
    </div>