Interactive 5-Step Process Grid with Hover Expansion

<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
  <!-- Header -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 view-transition opacity-0 mb-8 translate-y-8 items-end">
    <div class="">
      <p class="text-sm italic text-gray-500 mb-2">(02 Process)</p>
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-gray-900">How we
        design<span class="text-gray-900">.</span></h2>
    </div>
    <div class="lg:pl-8">
      <p class="text-lg text-gray-600">Our process ensures deep understanding of your lifestyle, your space, and your
        vision for creating environments that truly inspire.</p>
    </div>
  </div>

  <div class="border-t border-gray-200 mb-10"></div>

  <!-- 2 x 2 Process Grid -->
  <div class="flex gap-4 h-full" style="min-height: 400px;">
    <!-- Step 1 -->
    <div
      class="group relative flex-1 hover:flex-[2] transition-all duration-700 ease-out overflow-hidden hover:shadow-xl cursor-pointer bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8ed131ed-415a-41cf-bca9-a0bfb469fe6e_800w.jpg)] bg-cover border-gray-200 border rounded-2xl shadow-lg"
      style="min-height: 400px;">
      <!-- Background Image -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100">
        <div class="absolute inset-0 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="0.5"
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-blue-400">
            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path>
            <path
              d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
              class=""></path>
          </svg>
        </div>
      </div>

      <!-- Enhanced Overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/20"></div>

      <!-- Content -->
      <div
        class="relative flex flex-col h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c82febad-f012-453e-a2d3-53c62a864b96_3840w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
        <!-- Step Number (always visible) -->
        <div class="text-2xl font-bold text-white mb-4 drop-shadow-lg">01. Understand</div>

        <!-- Expanded Content (visible on hover) -->
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">

          <p class="text-white/90 leading-relaxed drop-shadow-sm">We explore your lifestyle, preferences, and dreams to
            create spaces that truly reflect who you are and how you live.</p>
        </div>
      </div>
    </div>

    <!-- Step 2 -->
    <div
      class="group relative flex-1 hover:flex-[2] transition-all duration-700 ease-out bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl cursor-pointer"
      style="min-height: 400px;">
      <!-- Background Image -->
      <div class="absolute inset-0 bg-gradient-to-br from-green-50 to-emerald-100">
        <div class="absolute inset-0 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="0.5"
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-green-400">
            <path
              d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"
              class=""></path>
            <path d="m14.5 12.5 2-2" class=""></path>
            <path d="m11.5 9.5 2-2" class=""></path>
            <path d="m8.5 6.5 2-2" class=""></path>
            <path d="m17.5 15.5 2-2" class=""></path>
          </svg>
        </div>
      </div>

      <!-- Enhanced Overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/20"></div>

      <!-- Content -->
      <div
        class="relative flex flex-col bg-center h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dcc317e2-d513-4dca-962c-d96c936fe2db_3840w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
        <!-- Black gradient overlay for better text contrast -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/20"></div>

        <!-- Step Number (always visible) -->
        <div class="relative z-10 text-2xl font-bold text-white mb-4 drop-shadow-lg">02. Design</div>

        <!-- Expanded Content (visible on hover) -->
        <div class="relative z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">
          <p class="text-white/90 leading-relaxed drop-shadow-sm">We craft detailed concepts and 3D visualizations that
            bring your vision to life before construction begins.</p>
        </div>
      </div>
    </div>

    <!-- Step 3 -->
    <div
      class="group relative flex-1 hover:flex-[2] transition-all duration-700 ease-out overflow-hidden hover:shadow-xl cursor-pointer bg-white border-gray-200 border rounded-2xl shadow-lg"
      style="min-height: 400px;">
      <!-- Background Image -->
      <div class="absolute inset-0 bg-gradient-to-br from-orange-50 to-amber-100">
        <div class="absolute inset-0 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="0.5"
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-orange-400">
            <path d="m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9" class=""></path>
            <path d="m18 15 4-4" class=""></path>
            <path
              d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"
              class=""></path>
          </svg>
        </div>
      </div>

      <!-- Enhanced Overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/20"></div>

      <!-- Content -->
      <div
        class="relative flex flex-col h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d0446c21-0869-4dea-89f2-fa7cc3949721_3840w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
        <!-- Step Number (always visible) -->
        <div class="text-2xl font-bold text-white mb-4 drop-shadow-lg">03. Build</div>

        <!-- Expanded Content (visible on hover) -->
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">

          <p class="text-white/90 leading-relaxed drop-shadow-sm">We coordinate with master craftspeople and premium
            suppliers to execute every detail with precision and care.</p>
        </div>
      </div>
    </div>

    <!-- Step 4 -->
    <div
      class="group relative flex-1 hover:flex-[2] transition-all duration-700 ease-out bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl cursor-pointer"
      style="min-height: 400px;">
      <!-- Background Image -->
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-violet-100">
        <div class="absolute inset-0 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="0.5"
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-purple-400">
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
              class=""></path>
            <path d="M20 2v4" class=""></path>
            <path d="M22 4h-4" class=""></path>
            <circle cx="4" cy="20" r="2" class=""></circle>
          </svg>
        </div>
      </div>

      <!-- Enhanced Overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/20"></div>

      <!-- Content -->
      <div
        class="relative flex flex-col bg-center h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/93a0d3c3-daba-4c8d-a727-b52de37fff08_3840w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
        <!-- Step Number (always visible) -->
        <div class="text-2xl font-bold text-white mb-4 drop-shadow-lg">04. Reveal</div>

        <!-- Expanded Content (visible on hover) -->
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">

          <p class="text-white/90 leading-relaxed drop-shadow-sm">We unveil your transformed space with the finishing
            touches that create an environment you'll love for years to come.</p>
        </div>
      </div>
    </div>

    <!-- Step 5 -->
    <div
      class="group relative flex-1 hover:flex-[2] transition-all duration-700 ease-out bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl cursor-pointer"
      style="min-height: 400px;">
      <!-- Background Image -->
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-rose-100">
        <div class="absolute inset-0 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="0.5"
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-pink-400">
            <path
              d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
              class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
        </div>
      </div>

      <!-- Enhanced Overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/20"></div>

      <!-- Content -->
      <div
        class="relative flex flex-col bg-center h-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/20c0faaa-a3f3-491c-a529-c51b3d0da9a8_3840w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
        <!-- Step Number (always visible) -->
        <div class="text-2xl font-bold text-white mb-4 drop-shadow-lg">05. Complete</div>

        <!-- Expanded Content (visible on hover) -->
        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200">

          <p class="text-white/90 leading-relaxed drop-shadow-sm">We ensure every detail meets our exacting standards
            and provide ongoing support for your transformed space.</p>
        </div>
      </div>
    </div>
  </div>

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