Responsive E-commerce Promo Card Grid

<main class="sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 max-w-7xl mt-6 px-4">
      <!-- Card 1 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight">Welcome to Arcade | Your savings hub</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#picks" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/37a49907-6611-4060-8c21-3b360eec751a_320w.jpg" alt="Today's Picks" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Today's Picks</div>
            </a>
            <a href="#bestsellers" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9f33933d-8ba3-40f9-9eb6-cc19773a375b_320w.jpg" alt="Best Sellers" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Best Sellers</div>
            </a>
            <a href="#new" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d3f047ea-08c5-4539-ad82-b9121e91be9f_320w.jpg" alt="New Arrivals" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">New Arrivals</div>
            </a>
            <a href="#perks" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://images.unsplash.com/photo-1633526544365-a98d534c9201?w=320&amp;q=80" alt="Payment Perks" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Payment Perks</div>
            </a>
          </div>
          <a href="#shop" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Shop now <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight font-sans">Claim your Arcade vouchers</h2>
          <div class="mt-3 rounded-md overflow-hidden border border-neutral-200">
            <img src="https://images.unsplash.com/photo-1542992015-4a0b729b1385?q=80&amp;w=1200&amp;auto=format&amp;fit=crop" alt="Voucher box" class="h-56 w-full object-cover">
          </div>
          <a href="#vouchers" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Collect now <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" data-lucide="percent" class="lucide lucide-percent w-4 h-4"><line x1="19" x2="5" y1="5" y2="19" class=""></line><circle cx="6.5" cy="6.5" r="2.5" class=""></circle><circle cx="17.5" cy="17.5" r="2.5" class=""></circle></svg>
          </a>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight">Self‑Care favorites | under $25</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#skincare" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8c09615d-a59e-4e70-a69c-f85d41f58008_320w.jpg" alt="Skin Care" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Skin Care</div>
            </a>
            <a href="#makeup" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/112ee649-d9d1-4a8b-9cd2-0321b370df6e_320w.jpg" alt="Makeup" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Makeup</div>
            </a>
            <a href="#haircare" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0b5319c5-f48e-48c0-9dc6-867575352031_320w.jpg" alt="Hair care" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Hair Care</div>
            </a>
            <a href="#fragrances" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/23dd0807-794e-46bb-be7d-db3ea2a37bb9_320w.jpg" alt="Fragrances" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Fragrances</div>
            </a>
          </div>
          <a href="#selfcare" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Shop now <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight">Shop for your home essentials</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#cleaning" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://cdn.midjourney.com/18688d6c-e88b-4270-a411-67fafb15b2bc/0_0.png?w=800&amp;q=80" alt="Cleaning" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Cleaning &amp; Vacuums</div>
            </a>
            <a href="#storage" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://cdn.midjourney.com/41e7bad9-4ca9-492a-812e-491116008d5c/0_0.png?w=800&amp;q=80" alt="Storage" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Home Storage</div>
            </a>
            <a href="#decor" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://cdn.midjourney.com/59b1196e-eac4-4632-88f8-efa082b7a03c/0_0.png?w=800&amp;q=80" alt="Decor" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Home Décor</div>
            </a>
            <a href="#bedding" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://cdn.midjourney.com/4f308fba-3bbd-4f70-821e-5ec9153f7dba/0_0.png?w=800&amp;q=80" alt="Bedding" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Bedding</div>
            </a>
          </div>
          <a href="#home" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Discover more in Home <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 5 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight font-sans">Same‑day FREE delivery on Arcade Fresh</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#fresh" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e60d722c-7dcf-453b-be8f-e268aebe2ccb_320w.jpg" alt="Fresh" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Market Fresh</div>
            </a>
            <a href="#produce" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c3b74a90-1596-42ce-8bed-f602d6fe0073_320w.jpg" alt="Fruits" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Fruits &amp; Veg</div>
            </a>
          </div>
          <a href="#fresh-section" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Explore Fresh <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 6 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight font-sans">Most‑loved tech | under $100</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#headphones" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9119de3c-a4ae-492b-82ab-541edaa20da6_320w.jpg" alt="Headphones" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Headphones</div>
            </a>
            <a href="#wearables" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ea93e918-9c05-41e8-a4e7-7bf40550736f_320w.jpg" alt="Smartwatch" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Wearables</div>
            </a>
          </div>
          <a href="#tech" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Shop Tech <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 7 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight font-sans">Discover luxury beauty for you</h2>
        </div>
        <div class="px-4 pb-4 grid grid-cols-2 gap-3">
          <a href="#luxury-skincare" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/532c0208-00e8-4cae-a16b-d9b79a5d081c_320w.jpg" alt="Skincare" class="h-24 w-full object-cover">
            <div class="p-2 text-sm font-medium font-sans">Skincare</div>
          </a>
          <a href="#luxury-makeup" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/be811948-4d7f-4f36-822c-ad7744b64788_320w.jpg" alt="Makeup" class="h-24 w-full object-cover">
            <div class="p-2 text-sm font-medium font-sans">Makeup</div>
          </a>
        </div>
        <div class="px-4 pb-4">
          <a href="#beauty" class="inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Curate your routine <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>

      <!-- Card 8 -->
      <article class="bg-white rounded-lg border border-neutral-200">
        <div class="p-4">
          <h2 class="text-xl font-semibold tracking-tight font-sans">Try Arcade+ free for 30 days</h2>
          <div class="mt-3 grid grid-cols-2 gap-3">
            <a href="#fast-delivery" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://cdn.midjourney.com/5ce01a3a-da69-4361-899f-3bff10437c0c/0_0.png?w=800&amp;q=80" alt="Fast delivery boxes" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Fast delivery</div>
            </a>
            <a href="#streaming" class="group rounded-md overflow-hidden border border-neutral-200 transition-opacity hover:opacity-80">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/acc9920c-5738-43c2-9651-17f7ed3c6090_320w.jpg" alt="Streaming tablet" class="h-24 w-full object-cover">
              <div class="p-2 text-sm font-medium font-sans">Shows &amp; more</div>
            </a>
          </div>
          <a href="#trial" class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-colors font-sans">
            Start free trial <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" data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
          </a>
        </div>
      </article>
    </main>