Interactive Feature Cards Section

<section class="max-w-7xl mr-auto mb-32 ml-auto pr-4 pl-4 m-12">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 gap-x-6 gap-y-6">

    <!-- Card 1: Collaboration -->
    <div
      class="border-gradient-mask group relative flex flex-col justify-between overflow-hidden rounded-[2rem] bg-zinc-900/20 p-10 hover:bg-zinc-900/30 transition-colors backdrop-blur-sm h-[480px]">

      <!-- Graphic -->
      <div class="absolute inset-0 z-0">
        <!-- Cursor Simulation -->
        <div
          class="absolute top-1/4 left-1/4 transition-transform duration-[3s] ease-in-out group-hover:translate-x-12 group-hover:translate-y-8">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-pink-500 drop-shadow-lg">
            <path
              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19177L23.0001 16.8829L14.4358 16.8829L14.3336 16.9329L9.17161 19.4566L9.16729 19.4587L9.16297 19.4566L5.65376 12.3673Z"
              fill="currentColor" stroke="white" stroke-width="1" class=""></path>
          </svg>
          <div
            class="ml-4 -mt-2 bg-pink-500 px-2 py-0.5 rounded-full text-[10px] font-bold text-white whitespace-nowrap">
            Sarah</div>
        </div>

        <div
          class="absolute bottom-1/3 right-1/4 transition-transform duration-[4s] ease-in-out group-hover:-translate-x-8 group-hover:-translate-y-4">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-blue-500 drop-shadow-lg">
            <path
              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19177L23.0001 16.8829L14.4358 16.8829L14.3336 16.9329L9.17161 19.4566L9.16729 19.4587L9.16297 19.4566L5.65376 12.3673Z"
              fill="currentColor" stroke="white" stroke-width="1" class=""></path>
          </svg>
          <div
            class="ml-4 -mt-2 bg-blue-500 px-2 py-0.5 rounded-full text-[10px] font-bold text-white whitespace-nowrap">
            Dev Team</div>
        </div>

        <!-- Grid Pattern -->
        <div
          class="absolute inset-0 bg-[radial-gradient(#ffffff1a_1px,transparent_1px)] [background-size:16px_16px] opacity-20">
        </div>
      </div>

      <div class="relative z-10 mt-auto">
        <div class="flex items-center gap-3 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users"
            class="lucide lucide-users h-6 w-6 text-white">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
            <path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
            <circle cx="9" cy="7" r="4" class=""></circle>
          </svg>
          <h3 class="text-xl font-semibold text-white font-manrope">Real-time Sync</h3>
        </div>
        <p class="text-zinc-400 text-base leading-relaxed">
          Multiplayer is built-in. Design, comment, and generate code together in a unified workspace.
        </p>
      </div>
    </div>

    <!-- Card 2: Version Control -->
    <div
      class="border-gradient-mask group relative flex flex-col justify-between overflow-hidden rounded-[2rem] bg-zinc-900/20 p-10 hover:bg-zinc-900/30 transition-colors backdrop-blur-sm h-[480px]">

      <!-- Graphic -->
      <div class="absolute top-10 right-10 left-10 h-64 perspective-[1000px]">
        <!-- Stacked Cards Animation -->
        <div
          class="absolute top-0 w-full h-32 bg-zinc-800 rounded-xl border border-white/10 shadow-xl transform translate-y-4 scale-90 opacity-40 transition-transform group-hover:translate-y-0 group-hover:scale-95 group-hover:opacity-60">
        </div>
        <div
          class="absolute top-4 w-full h-32 bg-zinc-800 rounded-xl border border-white/10 shadow-xl transform translate-y-2 scale-95 opacity-70 transition-transform group-hover:translate-y-4 group-hover:scale-100 group-hover:opacity-80">
        </div>
        <div
          class="absolute top-8 w-full h-32 bg-zinc-900 rounded-xl border border-white/10 shadow-2xl flex items-center justify-center transition-transform group-hover:translate-y-8">
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="git-commit-horizontal" class="lucide lucide-git-commit-horizontal h-5 w-5 text-indigo-400">
              <circle cx="12" cy="12" r="3" class=""></circle>
              <line x1="3" x2="9" y1="12" y2="12" class=""></line>
              <line x1="15" x2="21" y1="12" y2="12" class=""></line>
            </svg>
            <span class="text-xs font-mono text-zinc-300">v2.4.0 <span class="text-zinc-500">· just now</span></span>
          </div>
        </div>
      </div>

      <div class="relative z-10 mt-auto">
        <div class="flex items-center gap-3 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="history"
            class="lucide lucide-history h-6 w-6 text-white">
            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path>
            <path d="M3 3v5h5" class=""></path>
            <path d="M12 7v5l4 2" class=""></path>
          </svg>
          <h3 class="text-xl font-semibold text-white font-manrope">Version History</h3>
        </div>
        <p class="text-zinc-400 text-base leading-relaxed">
          Never lose a prompt iteration. Rollback to any previous state or fork designs into new branches.
        </p>
      </div>
    </div>

  </div>
</section>