Animated Integrations Grid Section

<div class="z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
  <!-- Header -->
  <div class="text-center mb-32">
    <div
      class="inline-flex items-center justify-center px-4 py-1.5 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm mb-8 shadow-lg shadow-blue-900/20">
      <span class="text-xs font-semibold tracking-wider text-blue-300 uppercase">
                Integrations
              </span>
    </div>
    <h2 class="text-4xl md:text-5xl font-medium tracking-tight text-white mb-6">
      Seamless Integrations
    </h2>
    <p class="text-slate-400 text-lg max-w-xl mx-auto font-light">
      Connect with your favorite tools to streamline workflows
    </p>
  </div>

  <!-- Integration Grid -->
  <div class="relative max-w-5xl mx-auto">
    <!-- Axis Lines -->
    <div
      class="absolute top-1/2 left-[-50%] right-[-50%] h-[1px] bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-y-1/2">
    </div>
    <div
      class="absolute left-1/2 top-[-50%] bottom-[-50%] w-[1px] bg-gradient-to-b from-transparent via-white/10 to-transparent -translate-x-1/2">
    </div>

    <!-- Center Hub -->
    <div class="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
      <div class="relative w-[260px] h-[260px]">
        <!-- 3 filled concentric circles (small, medium, big) -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="center-circle center-circle--3 w-56 h-56 rounded-full bg-blue-500/15"></div>
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="center-circle center-circle--2 w-40 h-40 rounded-full bg-blue-500/30"></div>
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="center-circle w-24 h-24 rounded-full bg-blue-500/55"></div>
        </div>

        <!-- Rays that end the animation, aligned with the separator lines -->

        <!-- Left ray -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div
            class="center-ray-horizontal center-ray-left bg-gradient-to-l from-blue-400/80 via-blue-400/60 to-transparent w-14 gap-x-32 gap-y-32">
          </div>
        </div>

        <!-- Right ray -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div
            class="center-ray-horizontal center-ray-right w-14 bg-gradient-to-r from-blue-400/80 via-blue-400/60 to-transparent">
          </div>
        </div>

        <!-- Top ray -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div
            class="center-ray-vertical center-ray-top h-14 bg-gradient-to-t from-blue-400/80 via-blue-400/60 to-transparent">
          </div>
        </div>

        <!-- Bottom ray -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div
            class="center-ray-vertical center-ray-bottom h-14 bg-gradient-to-b from-blue-400/80 via-blue-400/60 to-transparent">
          </div>
        </div>

        <!-- Core Icon (stays perfectly center) -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div
            class="flex bg-blue-600 w-16 h-16 rounded-full ring-[#020215] ring-8 relative shadow-[0_0_40px_rgba(37,99,235,0.65)] gap-x-32 gap-y-32 items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
              <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>
              <polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
              <line x1="12" y1="22.08" x2="12" y2="12" class=""></line>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-32 gap-y-32">
      <style>
        @keyframes centerCirclePulse {
          0% {
            opacity: 0;
            transform: scale(0.6);
          }

          15% {
            opacity: 0.9;
          }

          100% {
            opacity: 0;
            transform: scale(2.2);
          }
        }

        .center-circle {
          animation: centerCirclePulse 5s linear infinite !important;
          animation-delay: 0s !important;
        }

        .center-circle--2 {
          animation-delay: -1.6s !important;
        }

        .center-circle--3 {
          animation-delay: -3.3s !important;
        }
      </style>
      <!-- Item 1 (Top Left) -->
      <div class="flex flex-col items-center text-center group">
        <div
          class="w-16 h-16 rounded-2xl bg-[#0B0C10] border border-white/10 flex items-center justify-center mb-6 group-hover:border-blue-500/50 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.2)] transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-slate-400 group-hover:text-white transition-colors">
            <path d="M12 2a10 10 0 1 0 10 10H12V2z" class=""></path>
            <path d="M12 2a10 10 0 1 1-10 10h10V2z" class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
        </div>
        <p class="text-sm text-slate-300 max-w-[240px]">
          GPT models to generate content and build intelligent agents.
        </p>
      </div>
      <!-- Item 2 (Top Right) -->
      <div class="flex flex-col items-center text-center group">
        <div
          class="w-16 h-16 rounded-2xl bg-[#0B0C10] border border-white/10 flex items-center justify-center mb-6 group-hover:border-blue-500/50 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.2)] transition-all duration-300">
          <span class="font-serif text-3xl text-slate-400 group-hover:text-white transition-colors">
                    N
                  </span>
        </div>
        <p class="text-sm text-slate-300 max-w-[240px]">
          Summarize tasks, and organize info using Notion's powerful AI
          assistant.
        </p>
      </div>
      <!-- Item 3 (Bottom Left) -->
      <div class="flex flex-col items-center text-center group">
        <div
          class="w-16 h-16 rounded-2xl bg-[#0B0C10] border border-white/10 flex items-center justify-center mb-6 group-hover:border-blue-500/50 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.2)] transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-slate-400 group-hover:text-white transition-colors">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path>
            <rect width="4" height="12" x="2" y="9" class=""></rect>
            <circle cx="4" cy="4" r="2" class=""></circle>
          </svg>
        </div>
        <p class="text-sm text-slate-300 max-w-[240px]">
          Connect with Linked In and with dozens of other tools in it
        </p>
      </div>
      <!-- Item 4 (Bottom Right) -->
      <div class="flex flex-col items-center text-center group">
        <div
          class="w-16 h-16 rounded-2xl bg-[#0B0C10] border border-white/10 flex items-center justify-center mb-6 group-hover:border-blue-500/50 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.2)] transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="text-slate-400 group-hover:text-white transition-colors">
            <path d="M4 4l11.733 16h4.267l-11.733 -16z" class=""></path>
            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" class=""></path>
          </svg>
        </div>
        <p class="text-sm text-slate-300 max-w-[240px]">
          Connect with Twitter and with dozens of other tools in it
          without code
        </p>
      </div>
    </div>
  </div>
</div>