Deal of the Day Base

<section class="ws-deal-of-the-day ws-deal-of-day bg-[var(--ws-color-surface)] py-12">
  <div class="mx-auto max-w-6xl px-6">
    <!-- Header with countdown -->
    <div class="mb-8 flex flex-wrap items-center justify-between gap-4">
      <div>
        <h2 class="text-2xl font-bold text-slate-900">Deal of the Day</h2>
        <p class="mt-1 text-sm text-slate-500">Grab these items before the offer expires</p>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-xs font-medium uppercase tracking-wider text-red-500">Ends in:</span>
        <div class="flex gap-1.5">
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">08</div>
          <span class="self-center text-red-500 font-bold">:</span>
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">42</div>
          <span class="self-center text-red-500 font-bold">:</span>
          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">15</div>
        </div>
      </div>
    </div>

    <!-- Product cards grid -->
    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <!-- Deal card 1 -->
      <div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
        <div class="relative aspect-square bg-slate-100">
          <span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−30%</span>
          <div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
            <span>02d</span><span>:</span><span>08h</span><span>:</span><span>42m</span>
          </div>
        </div>
        <div class="p-4">
          <p class="text-xs text-slate-400">Category</p>
          <h3 class="mt-1 text-sm font-semibold text-slate-900">Premium Wireless Headphones</h3>
          <div class="mt-2 flex items-center gap-2">
            <span class="text-sm text-slate-400 line-through">€129.00</span>
            <span class="text-sm font-bold text-red-500">€89.90</span>
          </div>
        </div>
      </div>

      <!-- Deal card 2 -->
      <div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
        <div class="relative aspect-square bg-slate-100">
          <span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−20%</span>
          <div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
            <span>01d</span><span>:</span><span>15h</span><span>:</span><span>30m</span>
          </div>
        </div>
        <div class="p-4">
          <p class="text-xs text-slate-400">Category</p>
          <h3 class="mt-1 text-sm font-semibold text-slate-900">Ergonomic Office Chair</h3>
          <div class="mt-2 flex items-center gap-2">
            <span class="text-sm text-slate-400 line-through">€349.00</span>
            <span class="text-sm font-bold text-red-500">€279.20</span>
          </div>
        </div>
      </div>

      <!-- Deal card 3 -->
      <div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
        <div class="relative aspect-square bg-slate-100">
          <span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−40%</span>
          <div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
            <span>00d</span><span>:</span><span>06h</span><span>:</span><span>12m</span>
          </div>
        </div>
        <div class="p-4">
          <p class="text-xs text-slate-400">Category</p>
          <h3 class="mt-1 text-sm font-semibold text-slate-900">Leather Crossbody Bag</h3>
          <div class="mt-2 flex items-center gap-2">
            <span class="text-sm text-slate-400 line-through">€89.00</span>
            <span class="text-sm font-bold text-red-500">€53.40</span>
          </div>
        </div>
      </div>

      <!-- Deal card 4 -->
      <div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
        <div class="relative aspect-square bg-slate-100">
          <span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−15%</span>
          <div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
            <span>03d</span><span>:</span><span>22h</span><span>:</span><span>55m</span>
          </div>
        </div>
        <div class="p-4">
          <p class="text-xs text-slate-400">Category</p>
          <h3 class="mt-1 text-sm font-semibold text-slate-900">Smart Fitness Watch</h3>
          <div class="mt-2 flex items-center gap-2">
            <span class="text-sm text-slate-400 line-through">€199.00</span>
            <span class="text-sm font-bold text-red-500">€169.15</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>