Icon Overlay Reveal Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Explore services</h2>
      <p class="mt-4 text-base text-[var(--ws-cards-text-soft)]">Hover over a card to reveal the details.</p>
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">

      <!-- Card 1 -->
      <div class="group relative min-h-[360px] overflow-hidden rounded-3xl" style="aspect-ratio: 3/4">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-violet-700"></div>
        <!-- Faint icon (rest state) -->
        <div class="absolute inset-0 flex items-center justify-center transition-all duration-300 group-hover:opacity-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 scale-110 text-white/20 transition-all duration-300 group-hover:scale-100 group-hover:text-white/90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        </div>
        <!-- Dark overlay -->
        <div class="absolute inset-0 bg-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        <!-- Content reveal -->
        <div class="absolute bottom-0 left-0 right-0 translate-y-4 p-6 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
          <h3 class="text-lg font-bold text-white">Strategy & Design</h3>
          <p class="mt-2 text-sm text-white/80">We shape product vision into tangible interfaces that delight users from day one.</p>
          <a href="#" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-white/90 hover:text-white">
            Explore
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative min-h-[360px] overflow-hidden rounded-3xl" style="aspect-ratio: 3/4">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-700"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 scale-110 text-white/20 transition-all duration-300 group-hover:scale-100 group-hover:text-white/90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        </div>
        <div class="absolute inset-0 bg-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        <div class="absolute bottom-0 left-0 right-0 translate-y-4 p-6 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
          <h3 class="text-lg font-bold text-white">Development</h3>
          <p class="mt-2 text-sm text-white/80">Clean, performant code built on modern standards — from prototype to production.</p>
          <a href="#" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-white/90 hover:text-white">
            Explore
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative min-h-[360px] overflow-hidden rounded-3xl" style="aspect-ratio: 3/4">
        <div class="absolute inset-0 bg-gradient-to-br from-rose-500 to-pink-700"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 scale-110 text-white/20 transition-all duration-300 group-hover:scale-100 group-hover:text-white/90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
        </div>
        <div class="absolute inset-0 bg-black/40 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        <div class="absolute bottom-0 left-0 right-0 translate-y-4 p-6 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
          <h3 class="text-lg font-bold text-white">Growth & Analytics</h3>
          <p class="mt-2 text-sm text-white/80">Data-driven decisions that connect your product to the people who need it most.</p>
          <a href="#" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-white/90 hover:text-white">
            Explore
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>