Seamless Integration Feature Card

<div class="group relative transition hover:border-white/20 lg:col-span-2 text-zinc-200 bg-zinc-900/50 border-white/10 border rounded-lg shadow-sm">
            <!-- CardDecorator -->
            <span class="border-sky-500 absolute -left-px -top-px block size-2 border-l-2 border-t-2"></span>
            <span class="border-sky-500 absolute -right-px -top-px block size-2 border-r-2 border-t-2"></span>
            <span class="border-sky-500 absolute -bottom-px -left-px block size-2 border-b-2 border-l-2"></span>
            <span class="border-sky-500 absolute -bottom-px -right-px block size-2 border-b-2 border-r-2"></span>

            <div class="pt-8 pr-8 pb-8 pl-8">
              <div class="text-center mb-8">
                <span class="text-zinc-400 flex items-center justify-center gap-2 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers size-4"><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="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
                  <span class="text-sm">Seamless Integration</span>
                </span>
                <p class="mx-auto max-w-2xl text-balance text-2xl font-semibold tracking-tight text-white/95">
                  Connect with your favorite tools and automate your entire workflow.
                </p>
              </div>

              <div class="flex justify-center gap-8 overflow-hidden">
                <!-- CircularUI: API Connection -->
                <div class="text-center">
                  <div class="size-fit rounded-2xl p-px bg-gradient-to-b from-white/10 to-transparent">
                    <div class="relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4 bg-gradient-to-b from-neutral-950 to-zinc-900/50">
                      <div class="size-8 rounded-full border border-white/20 bg-gradient-to-br from-blue-500/20 to-blue-600/30"></div>
                      <div class="size-8 rounded-full border border-white/20 bg-gradient-to-br from-purple-500/20 to-purple-600/30"></div>
                    </div>
                  </div>
                  <span class="text-zinc-400 mt-2 block text-sm">API Connect</span>
                </div>

                <!-- CircularUI: Data Sync -->
                <div class="text-center">
                  <div class="size-fit rounded-2xl p-px bg-gradient-to-b from-white/10 to-transparent">
                    <div class="relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4 bg-gradient-to-b from-neutral-950 to-zinc-900/50">
                      <div class="size-8 rounded-full border border-sky-500/70 bg-gradient-to-br from-sky-500/30 to-sky-600/40"></div>
                      <div class="size-8 rounded-full border border-sky-500 bg-gradient-to-br from-sky-400/40 to-sky-500/50"></div>
                    </div>
                  </div>
                  <span class="text-zinc-400 mt-2 block text-sm">Data Sync</span>
                </div>

                <!-- CircularUI: Automation -->
                <div class="text-center">
                  <div class="size-fit rounded-2xl p-px bg-gradient-to-b from-white/10 to-transparent">
                    <div class="relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4 bg-gradient-to-b from-neutral-950 to-zinc-900/50">
                      <div class="z-[1] size-8 rounded-full border border-emerald-500 bg-gradient-to-br from-emerald-500/30 to-emerald-600/40"></div>
                      <div class="size-8 rounded-full border border-emerald-500/70 bg-gradient-to-br from-emerald-400/20 to-emerald-500/30"></div>
                    </div>
                  </div>
                  <span class="text-zinc-400 mt-2 block text-sm">Automation</span>
                </div>

                <!-- CircularUI: Workflow -->
                <div class="text-center hidden sm:block">
                  <div class="size-fit rounded-2xl p-px bg-gradient-to-b from-white/10 to-transparent">
                    <div class="relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4 bg-gradient-to-b from-neutral-950 to-zinc-900/50">
                      <div class="size-8 rounded-full border border-orange-500 bg-gradient-to-br from-orange-500/30 to-orange-600/40"></div>
                      <div class="size-8 rounded-full border border-orange-500/70 bg-gradient-to-br from-orange-400/20 to-orange-500/30"></div>
                    </div>
                  </div>
                  <span class="text-zinc-400 mt-2 block text-sm">Workflow</span>
                </div>
              </div>
            </div>
          </div>