Rotating Orbit Integrations Hero Section

<section
  class="overflow-visible flex flex-col min-h-[800px] md:pb-44 md:pt-44 text-white bg-black mt-0 mb-0 pt-0 pb-0 relative items-center justify-center"
  style="mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 0%, transparent);"
  id="lexora-integrations">
  <!-- Ambient background glow -->
  <div
    class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_60%)]">
  </div>

  <!-- Rotating Orbit Container -->
  <div
    class="absolute flex items-center justify-center animate-[spin_60s_linear_infinite] w-[320px] h-[320px] md:w-[700px] md:h-[700px] pointer-events-none">
    <!-- Item 1 (0deg) -->
    <div class="absolute inset-0 rotate-0">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-0">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-layers text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path
              d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"
              class=""></path>
            <path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" class=""></path>
            <path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 2 (30deg) -->
    <div class="absolute inset-0 rotate-[30deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[30deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-zap text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 3 (60deg) -->
    <div class="absolute inset-0 rotate-[60deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[60deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-triangle text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 4 (90deg) -->
    <div class="absolute inset-0 rotate-[90deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[90deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-activity text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 5 (120deg) -->
    <div class="absolute inset-0 rotate-[120deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[120deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-command text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 6 (150deg) -->
    <div class="absolute inset-0 rotate-[150deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[150deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-cloud text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path d="M17.5 19c0-3.037-2.463-5.5-5.5-5.5S6.5 15.963 6.5 19" class=""></path>
            <path d="M20 19a3 3 0 1 0-6-6" class=""></path>
            <path d="M4 19a5 5 0 1 1 9-9" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 7 (180deg) -->
    <div class="absolute inset-0 rotate-180">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-180">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-box text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path
              d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
              class=""></path>
            <path d="m3.3 7 8.7 5 8.7-5" class=""></path>
            <path d="M12 22v-9" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 8 (210deg) -->
    <div class="absolute inset-0 rotate-[210deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[210deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-code text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <polyline points="16 18 22 12 16 6" class=""></polyline>
            <polyline points="8 6 2 12 8 18" class=""></polyline>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 9 (240deg) -->
    <div class="absolute inset-0 rotate-[240deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[240deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-hexagon text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path
              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
              class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 10 (270deg) -->
    <div class="absolute inset-0 rotate-[270deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[270deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-globe text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path>
            <path d="M2 12h20" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 11 (300deg) -->
    <div class="absolute inset-0 rotate-[300deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[300deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-link text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Item 12 (330deg) -->
    <div class="absolute inset-0 rotate-[330deg]">
      <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-[330deg]">
        <div
          class="w-16 h-16 md:w-24 md:h-24 bg-[#0F0F0F] border border-white/10 rounded-full flex items-center justify-center shadow-2xl animate-[spin_60s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-cpu text-neutral-500 w-6 h-6 md:w-8 md:h-8">
            <rect width="16" height="16" x="4" y="4" rx="2" class=""></rect>
            <rect width="6" height="6" x="9" y="9" rx="1" class=""></rect>
            <path d="M15 2v2" class=""></path>
            <path d="M15 20v2" class=""></path>
            <path d="M2 15h2" class=""></path>
            <path d="M2 9h2" class=""></path>
            <path d="M20 15h2" class=""></path>
            <path d="M20 9h2" class=""></path>
            <path d="M9 2v2" class=""></path>
            <path d="M9 20v2" class=""></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Center Title -->
  <div class="z-10 text-center max-w-3xl mr-auto ml-auto pr-6 pl-6 relative">
    <h2 class="text-4xl md:text-6xl font-serif font-medium text-white leading-[1.1] tracking-tight">
      Seamless AI integration with your favorite tools
    </h2>
  </div>
</section>