Animated Integrations Showcase Section

<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(5) &gt; div:nth-of-type(2)">
        <div class="animate-in text-center">
          <span class="inline-flex items-center gap-1 rounded-full bg-lime-400/10 px-2 py-1 text-[11px] text-lime-300 ring-1 ring-lime-300/20 uppercase tracking-tight">
            <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="plug" class="lucide lucide-plug h-3.5 w-3.5"><path d="M12 22v-5" class=""></path><path d="M9 8V2" class=""></path><path d="M15 8V2" class=""></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path></svg>
            Integrations
          </span>
          <h2 class="sm:text-5xl karaoke-container text-4xl font-semibold tracking-tight mt-4" data-karaoke-wrapped="true" data-karaoke-animated="true" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(5) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; h2:nth-of-type(1)">
            <span class="karaoke-word"></span>
            <span class="karaoke-word">Connect</span>
            <span class="karaoke-word">your</span>
            <span class="karaoke-word">entire</span>
            <span class="karaoke-word">tech</span>
            <span class="karaoke-word">stack</span>
            <span class="karaoke-word"></span>
          </h2>
          <p class="mx-auto mt-3 max-w-2xl text-sm sm:text-base text-neutral-300 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
            <span class="karaoke-word"></span>
            <span class="karaoke-word">One</span>
            <span class="karaoke-word">platform,</span>
            <span class="karaoke-word">infinite</span>
            <span class="karaoke-word">possibilities.</span>
            <span class="karaoke-word">Sync</span>
            <span class="karaoke-word">with</span>
            <span class="karaoke-word">all</span>
            <span class="karaoke-word">your</span>
            <span class="karaoke-word">favorite</span>
            <span class="karaoke-word">tools.</span>
            <span class="karaoke-word"></span>
          </p>
        </div>

        <div class="relative mx-auto mt-12 max-w-4xl">
          <div class="animate-in stagger-delay-1 flex items-center justify-center gap-6 sm:gap-10">
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="github" class="lucide lucide-github h-5 w-5 text-white"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path><path d="M9 18c-4.51 2-5-2-7-2" class=""></path></svg>
            </span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="slack" class="lucide lucide-slack h-5 w-5 text-white"><rect width="3" height="8" x="13" y="2" rx="1.5" class=""></rect><path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" class=""></path><rect width="3" height="8" x="8" y="14" rx="1.5" class=""></rect><path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" class=""></path><rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect><path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" class=""></path><rect width="8" height="3" x="2" y="8" rx="1.5" class=""></rect><path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" class=""></path></svg>
            </span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="trello" class="lucide lucide-trello h-5 w-5 text-white"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><rect width="3" height="9" x="7" y="7" class=""></rect><rect width="3" height="5" x="14" y="7" class=""></rect></svg>
            </span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="figma" class="lucide lucide-figma h-5 w-5 text-white"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class=""></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" class=""></path></svg>
            </span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="database" class="lucide lucide-database h-5 w-5 text-white"><ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path><path d="M3 12A9 3 0 0 0 21 12" class=""></path></svg>
            </span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
              <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="cloud" class="lucide lucide-cloud h-5 w-5 text-white"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" class=""></path></svg>
            </span>
          </div>

          <div class="animate-in stagger-delay-2 relative mt-6 h-64">
            <svg viewBox="0 0 900 360" class="absolute inset-0 w-full h-full" fill="none">
              <circle cx="150" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" class=""></animate>
              </circle>
              <circle cx="270" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" begin="0.2s" repeatCount="indefinite" class=""></animate>
              </circle>
              <circle cx="390" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" begin="0.4s" repeatCount="indefinite" class=""></animate>
              </circle>
              <circle cx="510" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" begin="0.6s" repeatCount="indefinite" class=""></animate>
              </circle>
              <circle cx="630" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" begin="0.8s" repeatCount="indefinite" class=""></animate>
              </circle>
              <circle cx="750" cy="30" r="4" fill="#A3E635" filter="url(#glow)" class="">
                <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" begin="1s" repeatCount="indefinite" class=""></animate>
              </circle>

              <path d="M450 300 C 450 200, 300 120, 150 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 600; stroke-dashoffset: 600" class="">
                <animate attributeName="stroke-dashoffset" values="600;0;600" dur="3s" begin="0s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
              <path d="M450 300 C 450 210, 360 130, 270 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 520; stroke-dashoffset: 520" class="">
                <animate attributeName="stroke-dashoffset" values="520;0;520" dur="3s" begin="0.2s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
              <path d="M450 300 C 450 150, 420 80, 390 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 450; stroke-dashoffset: 450" class="">
                <animate attributeName="stroke-dashoffset" values="450;0;450" dur="3s" begin="0.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
              <path d="M450 300 C 450 150, 480 80, 510 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 450; stroke-dashoffset: 450" class="">
                <animate attributeName="stroke-dashoffset" values="450;0;450" dur="3s" begin="0.6s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
              <path d="M450 300 C 450 210, 540 130, 630 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 520; stroke-dashoffset: 520" class="">
                <animate attributeName="stroke-dashoffset" values="520;0;520" dur="3s" begin="0.8s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
              <path d="M450 300 C 450 200, 600 120, 750 30" stroke="#A3E635" stroke-width="2" stroke-linecap="round" fill="none" style="stroke-dasharray: 600; stroke-dashoffset: 600" class="">
                <animate attributeName="stroke-dashoffset" values="600;0;600" dur="3s" begin="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" class=""></animate>
              </path>
            </svg>

            <div class="absolute bottom-2 left-1/2 -translate-x-1/2">
              <span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-lime-400/20 ring-2 ring-lime-300/40" style="box-shadow: 0 0 20px rgba(163,230,53,0.6), 0 0 40px rgba(163,230,53,0.3);">
                <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="zap" class="lucide lucide-zap h-6 w-6 text-lime-300"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
              </span>
            </div>
          </div>
        </div>

        <div class="animate-in stagger-delay-3 mx-auto mt-12 max-w-4xl">
          <div class="flex items-center justify-center gap-3 flex-wrap text-sm">
            <div class="inline-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="workflow" class="lucide lucide-workflow h-4 w-4 text-lime-300"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
              <span class="font-medium">Instant sync</span>
            </div>
            <div class="hidden sm:block w-24 h-px border-t border-dashed border-lime-300/40"></div>
            <div class="inline-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="shield-check" class="lucide lucide-shield-check h-4 w-4 text-lime-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="font-medium">Enterprise security</span>
            </div>
            <div class="hidden sm:block w-24 h-px border-t border-dashed border-lime-300/40"></div>
            <div class="inline-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="gauge" class="lucide lucide-gauge h-4 w-4 text-lime-300"><path d="m12 14 4-4" class=""></path><path d="M3.34 19a10 10 0 1 1 17.32 0" class=""></path></svg>
              <span class="font-medium">Real-time updates</span>
            </div>
            <div class="hidden sm:block w-24 h-px border-t border-dashed border-lime-300/40"></div>
            <div class="inline-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="mouse-pointer-click" class="lucide lucide-mouse-pointer-click h-4 w-4 text-lime-300"><path d="M14 4.1 12 6" class=""></path><path d="m5.1 8-2.9-.8" class=""></path><path d="m6 12-1.9 2" class=""></path><path d="M7.2 2.2 8 5.1" class=""></path><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" class=""></path></svg>
              <span class="font-medium">One-click setup</span>
            </div>
          </div>
        </div>
      </div>