Collaborative Multiplayer Feature Section

<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 gap-x-16 gap-y-16 items-center">
  <div
    class="order-2 lg:order-1 aspect-square lg:aspect-video overflow-hidden group bg-[#0A0A0A] border-white/10 border rounded-2xl relative animate-on-scroll">
    <style>
      @keyframes cursor-float-1 {

        0%,
        100% {
          transform: translate3d(-20px, 40px, 0);
        }

        33% {
          transform: translate3d(60px, -30px, 0);
        }

        66% {
          transform: translate3d(-40px, -10px, 0);
        }
      }

      @keyframes cursor-float-2 {

        0%,
        100% {
          transform: translate3d(40px, -40px, 0);
        }

        50% {
          transform: translate3d(-30px, 50px, 0);
        }
      }

      @keyframes comment-pop {
        0% {
          opacity: 0;
          transform: scale(0.8) translateY(10px);
        }

        10%,
        90% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }

        100% {
          opacity: 0;
          transform: scale(0.8) translateY(10px);
        }
      }
    </style>

    <!-- Background Grid -->
    <div
      class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,black_50%,transparent_90%)]">
    </div>

    <!-- Central Scene Container -->
    <div
      class="flex overflow-hidden absolute top-0 right-0 bottom-0 left-0 perspective-[800px] items-center justify-center">
      <!-- 3D Component -->
      <div
        class="relative w-64 h-40 bg-[#111]/90 backdrop-blur-md border border-white/10 rounded-xl shadow-2xl transform transition-transform duration-700 ease-out group-hover:rotate-x-6 group-hover:rotate-y-6 rotate-x-12 rotate-y-[-12deg] flex flex-col p-1 z-10">
        <!-- Window Bar -->
        <div class="flex items-center gap-2 px-3 py-2 border-b border-white/5">
          <div class="flex gap-1.5">
            <div class="w-2.5 h-2.5 rounded-full bg-red-500/20"></div>
            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20"></div>
          </div>
          <div class="w-20 h-1.5 bg-white/5 rounded-full ml-auto"></div>
        </div>
        <!-- Content -->
        <div class="flex-1 p-3 grid grid-cols-2 gap-3 relative">
          <div
            class="group-hover:bg-purple-500/10 transition-colors bg-purple-500/5 border-purple-500/10 border rounded">
          </div>
          <div class="bg-blue-500/5 rounded border border-blue-500/10 group-hover:bg-blue-500/10 transition-colors">
          </div>

          <!-- Comment Floating Attached -->
          <div
            class="absolute -right-24 top-0 bg-neutral-800 border border-white/10 rounded-lg p-3 shadow-xl z-50 w-40 animate-[comment-pop_8s_ease-in-out_infinite] origin-bottom-left">
            <div class="flex items-center gap-2 mb-1.5">
              <div
                class="flex text-[9px] font-bold text-black bg-gradient-to-tr from-green-500 to-emerald-400 w-5 h-5 border-white/10 border rounded-full items-center justify-center">
                JD
              </div>
              <span class="text-[9px] text-neutral-500">Just now</span>
            </div>
            <div class="text-[11px] text-neutral-300 leading-snug">
              Can we make this texture more responsive?
            </div>
            <!-- Connector -->
            <div
              class="absolute bottom-4 -left-1.5 w-3 h-3 bg-neutral-800 border-b border-l border-white/10 transform rotate-45">
            </div>
          </div>
        </div>
      </div>

      <!-- User 1 Cursor (Sarah - Purple) -->
      <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
        <div class="animate-[cursor-float-1_12s_infinite_ease-in-out]">
          <svg class="w-5 h-5 text-purple-500 drop-shadow-[0_4px_12px_rgba(168,85,247,0.5)]" viewBox="0 0 24 24"
            fill="currentColor" style="transform: rotate(-25deg)">
            <path
              d="M5.5 3.21l10.8 5.4a1 1 0 0 1 .16 1.7l-4.2 2.1 2.1 4.2a1 1 0 0 1-1.8.9l-2.1-4.2-4.2 2.1a1 1 0 0 1-1.45-1.09l1.69-11.11z"
              class=""></path>
          </svg>
          <div
            class="ml-3.5 -mt-1 px-2 py-0.5 rounded-full bg-purple-500 text-[10px] font-bold text-white shadow-sm whitespace-nowrap opacity-90">
            Sarah
          </div>
        </div>
      </div>

      <!-- User 2 Cursor (John - Green) -->
      <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
        <div class="animate-[cursor-float-2_15s_infinite_ease-in-out_1s]">
          <svg class="w-5 h-5 text-green-500 drop-shadow-[0_4px_12px_rgba(34,197,94,0.5)]" viewBox="0 0 24 24"
            fill="currentColor" style="transform: rotate(-25deg)">
            <path
              d="M5.5 3.21l10.8 5.4a1 1 0 0 1 .16 1.7l-4.2 2.1 2.1 4.2a1 1 0 0 1-1.8.9l-2.1-4.2-4.2 2.1a1 1 0 0 1-1.45-1.09l1.69-11.11z"
              class=""></path>
          </svg>
          <div
            class="ml-3.5 -mt-1 px-2 py-0.5 rounded-full bg-green-500 text-[10px] font-bold text-black shadow-sm whitespace-nowrap opacity-90">
            John
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Status Bar -->
    <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center">
      <div class="flex -space-x-2">
        <div
          class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-purple-500 flex items-center justify-center text-xs font-bold text-white">
          S
        </div>
        <div
          class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-green-500 flex items-center justify-center text-xs font-bold text-black">
          J
        </div>
        <div
          class="w-8 h-8 rounded-full border-2 border-[#0A0A0A] bg-neutral-700 flex items-center justify-center text-xs text-white text-[10px]">
          +2
        </div>
      </div>
      <div
        class="px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] uppercase tracking-wider font-mono flex items-center gap-2">
        <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
        Live
      </div>
    </div>
  </div>
  <div class="order-1 lg:order-2 animate-on-scroll" style="animation-delay: 200ms;">
    <h3 class="text-3xl font-medium text-white tracking-tight font-display mb-4">
      Multiplayer by Default
    </h3>
    <p class="leading-relaxed text-lg text-neutral-400 mb-8">
      Work together in real-time. See cursors, share component states,
      and leave comments directly in 3D space. No more screen sharing.
    </p>
    <ul class="space-y-4">
      <li class="flex items-center gap-3 text-sm text-neutral-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5" class=""></path>
        </svg>
        Live cursor tracking
      </li>
      <li class="flex items-center gap-3 text-sm text-neutral-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5" class=""></path>
        </svg>
        Threaded spatial comments
      </li>
      <li class="flex items-center gap-3 text-sm text-neutral-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5" class=""></path>
        </svg>
        Version history &amp; rollback
      </li>
    </ul>
  </div>
</div>