Features Image Reveal

<section class="ws-features ws-features-image-reveal bg-[var(--ws-features-bg)] py-16">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold text-[var(--ws-features-text)]">Our Services</h2>
      <p class="mt-3 text-lg text-[var(--ws-features-text-soft)]">Hover to explore what we offer.</p>
    </div>

    <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 -->
      <div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-8 transition-colors duration-500">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
        <div class="relative z-10">
          <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-blue-100 transition-colors duration-500 group-hover:bg-white/20">
            <svg class="h-7 w-7 text-blue-600 transition-colors duration-500 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
          </div>
          <h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)] transition-colors duration-500 group-hover:text-white">Brand Design</h3>
          <p class="mt-2 text-sm text-[var(--ws-features-text-soft)] transition-colors duration-500 group-hover:text-white/80">Crafting distinctive visual identities that connect with your audience.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600 transition-colors duration-500 group-hover:text-white">
            Learn more
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-8 transition-colors duration-500">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-600 to-teal-700 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
        <div class="relative z-10">
          <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-100 transition-colors duration-500 group-hover:bg-white/20">
            <svg class="h-7 w-7 text-emerald-600 transition-colors duration-500 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
          </div>
          <h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)] transition-colors duration-500 group-hover:text-white">Development</h3>
          <p class="mt-2 text-sm text-[var(--ws-features-text-soft)] transition-colors duration-500 group-hover:text-white/80">Building performant, scalable web applications with modern technologies.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-emerald-600 transition-colors duration-500 group-hover:text-white">
            Learn more
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-8 transition-colors duration-500">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-600 to-orange-700 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
        <div class="relative z-10">
          <div class="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-100 transition-colors duration-500 group-hover:bg-white/20">
            <svg class="h-7 w-7 text-amber-600 transition-colors duration-500 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" 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>
          <h3 class="mt-5 text-lg font-semibold text-[var(--ws-features-text)] transition-colors duration-500 group-hover:text-white">Analytics</h3>
          <p class="mt-2 text-sm text-[var(--ws-features-text-soft)] transition-colors duration-500 group-hover:text-white/80">Data-driven insights to optimize performance and drive informed decisions.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-amber-600 transition-colors duration-500 group-hover:text-white">
            Learn more
            <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>