Hardware Inventory Product Grid

<section id="inventory" class="max-w-[1400px] mx-auto px-6 lg:px-12 py-32"
  style="background-color: #ebedea; font-family: 'Inter', sans-serif;">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&display=swap"
    rel="stylesheet" />
  <script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>

  <style>
    .font-display {
      font-family: "Oswald", sans-serif;
    }

    @keyframes animationIn {
      0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
      }
    }

    .animate-on-scroll {
      animation-play-state: paused !important;
    }

    .animate-on-scroll.animate {
      animation-play-state: running !important;
    }
  </style>

  <div class="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-6">
    <div class="max-w-2xl">
      <h2 class="font-display text-5xl md:text-6xl font-semibold tracking-tighter uppercase mb-4"
        style="color: #2d322f;">
        Hardware <span style="color: #3F556B;">Inventory</span>
      </h2>
      <p class="text-base" style="color: rgba(45, 50, 47, 0.7);">
        Controlled equipment configurations engineered for maximum efficiency, structural weather resistance, and
        tactical deployment.
      </p>
    </div>

    <a href="#"
      class="inline-flex items-center gap-2 px-6 py-3 border text-xs font-semibold uppercase tracking-widest transition-colors shrink-0"
      style="border-color: rgba(45, 50, 47, 0.2); color: #2d322f; background-color: #ebedea;"
      onmouseover="this.style.backgroundColor='#3F556B'; this.style.color='#fff'; this.style.borderColor='#3F556B'"
      onmouseout="this.style.backgroundColor='#ebedea'; this.style.color='#2d322f'; this.style.borderColor='rgba(45, 50, 47, 0.2)'">
      Access Armory
      <iconify-icon icon="solar:arrow-right-linear" width="18" height="18"></iconify-icon>
    </a>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Product 1 -->
    <div class="flex flex-col border transition-shadow duration-300 animate-on-scroll"
      style="background-color: #ebedea; border-color: rgba(45, 50, 47, 0.1); animation: animationIn 0.8s ease-out 0.2s both;">
      <div class="relative aspect-[4/5] bg-white overflow-hidden flex items-center justify-center p-8">
        <span class="absolute top-4 left-4 text-white text-[10px] font-semibold uppercase tracking-[0.2em] px-3 py-1 z-10 shadow-sm" style="background-color: #3F556B;">Prototype Drop</span>
        <button class="absolute top-4 right-4 z-10 transition-colors" style="color: rgba(45, 50, 47, 0.3);" onmouseover="this.style.color='#3F556B'" onmouseout="this.style.color='rgba(45, 50, 47, 0.3)'">
          <iconify-icon icon="solar:heart-linear" width="24" height="24"></iconify-icon>
        </button>
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3734ddcc-c1d3-4dc2-929f-b785a4cb24b1_800w.webp" alt="Terra-Grip Element" class="w-full object-contain drop-shadow-xl transition-transform duration-500 hover:scale-105" />
      </div>
      <div class="p-6 flex flex-col flex-grow">
        <div class="flex justify-between items-start mb-6">
          <h3 class="font-display text-2xl font-semibold tracking-tighter uppercase" style="color: #2d322f;">
            <span class="border-b-2 pb-1 inline-block" style="border-color: #3F556B;">Terra-Grip Element</span>
          </h3>
          <span class="font-display text-xl font-semibold shrink-0" style="color: #2d322f;">$180</span>
        </div>
        <div class="grid grid-cols-3 gap-2 border-y py-3 mt-auto mb-6" style="border-color: rgba(45, 50, 47, 0.1);">
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:snowflake-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">All-Temp</span>
          </div>
          <div class="flex flex-col items-center justify-center border-x" style="border-color: rgba(45, 50, 47, 0.1);">
            <iconify-icon icon="solar:waterdrops-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">Resistant</span>
          </div>
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:scale-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">245g</span>
          </div>
        </div>
        <button class="w-full bg-transparent border py-3 text-xs font-semibold uppercase tracking-widest transition-all flex items-center justify-center gap-2"
                style="border-color: #2d322f; color: #2d322f;"
                onmouseover="this.style.backgroundColor='#3F556B'; this.style.color='#fff'; this.style.borderColor='#3F556B'"
                onmouseout="this.style.backgroundColor='transparent'; this.style.color='#2d322f'; this.style.borderColor='#2d322f'">
          Initialize <iconify-icon icon="solar:add-circle-linear" width="16" height="16"></iconify-icon>
        </button>
      </div>
    </div>

    <!-- Product 2 -->
    <div class="flex flex-col border transition-shadow duration-300 animate-on-scroll"
      style="background-color: #ebedea; border-color: rgba(45, 50, 47, 0.1); animation: animationIn 0.8s ease-out 0.3s both;">
      <div class="relative aspect-[4/5] bg-white overflow-hidden flex items-center justify-center p-8">
        <span class="absolute top-4 left-4 text-white text-[10px] font-semibold uppercase tracking-[0.2em] px-3 py-1 z-10 shadow-sm" style="background-color: #3F556B;">Tactical Series</span>
        <button class="absolute top-4 right-4 z-10 transition-colors" style="color: rgba(45, 50, 47, 0.3);" onmouseover="this.style.color='#3F556B'" onmouseout="this.style.color='rgba(45, 50, 47, 0.3)'">
          <iconify-icon icon="solar:heart-linear" width="24" height="24"></iconify-icon>
        </button>
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2d1829ff-2aa2-4535-9e73-12ce151d3ad1_800w.webp" alt="Zero-Point Matrix" class="w-full object-contain drop-shadow-xl transition-transform duration-500 hover:scale-105" />
      </div>
      <div class="p-6 flex flex-col flex-grow">
        <div class="flex justify-between items-start mb-6">
          <h3 class="font-display text-2xl font-semibold tracking-tighter uppercase" style="color: #2d322f;">
            <span class="border-b-2 pb-1 inline-block" style="border-color: #3F556B;">Zero-Point Matrix</span>
          </h3>
          <span class="font-display text-xl font-semibold shrink-0" style="color: #2d322f;">$520</span>
        </div>
        <div class="grid grid-cols-3 gap-2 border-y py-3 mt-auto mb-6" style="border-color: rgba(45, 50, 47, 0.1);">
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:snowflake-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">-25°C</span>
          </div>
          <div class="flex flex-col items-center justify-center border-x" style="border-color: rgba(45, 50, 47, 0.1);">
            <iconify-icon icon="solar:cloud-water-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">28K MM</span>
          </div>
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:scale-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">380g</span>
          </div>
        </div>
        <button class="w-full bg-transparent border py-3 text-xs font-semibold uppercase tracking-widest transition-all flex items-center justify-center gap-2"
                style="border-color: #2d322f; color: #2d322f;"
                onmouseover="this.style.backgroundColor='#3F556B'; this.style.color='#fff'; this.style.borderColor='#3F556B'"
                onmouseout="this.style.backgroundColor='transparent'; this.style.color='#2d322f'; this.style.borderColor='#2d322f'">
          Initialize <iconify-icon icon="solar:add-circle-linear" width="16" height="16"></iconify-icon>
        </button>
      </div>
    </div>

    <!-- Product 3 -->
    <div class="flex flex-col border transition-shadow duration-300 animate-on-scroll"
      style="background-color: #ebedea; border-color: rgba(45, 50, 47, 0.1); animation: animationIn 0.8s ease-out 0.4s both;">
      <div class="relative aspect-[4/5] bg-white overflow-hidden flex items-center justify-center p-8">
        <span class="absolute top-4 left-4 text-white text-[10px] font-semibold uppercase tracking-[0.2em] px-3 py-1 z-10 shadow-sm" style="background-color: #3F556B;">Most Deployed</span>
        <button class="absolute top-4 right-4 z-10 transition-colors" style="color: rgba(45, 50, 47, 0.3);" onmouseover="this.style.color='#3F556B'" onmouseout="this.style.color='rgba(45, 50, 47, 0.3)'">
          <iconify-icon icon="solar:heart-linear" width="24" height="24"></iconify-icon>
        </button>
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90248f41-e000-45bc-8d5c-36811411ca3f_800w.webp" alt="Carbon Core Rig" class="w-full object-contain drop-shadow-xl transition-transform duration-500 hover:scale-105" />
      </div>
      <div class="p-6 flex flex-col flex-grow">
        <div class="flex justify-between items-start mb-6">
          <h3 class="font-display text-2xl font-semibold tracking-tighter uppercase" style="color: #2d322f;">
            <span class="border-b-2 pb-1 inline-block" style="border-color: #3F556B;">Carbon Core Rig</span>
          </h3>
          <span class="font-display text-xl font-semibold shrink-0" style="color: #2d322f;">$145</span>
        </div>
        <div class="grid grid-cols-3 gap-2 border-y py-3 mt-auto mb-6" style="border-color: rgba(45, 50, 47, 0.1);">
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:settings-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">Modular</span>
          </div>
          <div class="flex flex-col items-center justify-center border-x" style="border-color: rgba(45, 50, 47, 0.1);">
            <iconify-icon icon="solar:shield-check-linear" width="16" height="16"
              style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">UIAA Cert</span>
          </div>
          <div class="flex flex-col items-center justify-center">
            <iconify-icon icon="solar:scale-linear" width="16" height="16" style="color: #3F556B;"></iconify-icon>
            <span class="font-display text-xs uppercase tracking-widest" style="color: rgba(45, 50, 47, 0.6);">210g</span>
          </div>
        </div>
        <button class="w-full bg-transparent border py-3 text-xs font-semibold uppercase tracking-widest transition-all flex items-center justify-center gap-2"
                style="border-color: #2d322f; color: #2d322f;"
                onmouseover="this.style.backgroundColor='#3F556B'; this.style.color='#fff'; this.style.borderColor='#3F556B'"
                onmouseout="this.style.backgroundColor='transparent'; this.style.color='#2d322f'; this.style.borderColor='#2d322f'">
          Initialize <iconify-icon icon="solar:add-circle-linear" width="16" height="16"></iconify-icon>
        </button>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });
      document.querySelectorAll("#inventory .animate-on-scroll").forEach((el) => observer.observe(el));
    })();
  </script>
</section>