Auto-Scrolling Client Logo Ticker Banner

<section class="z-10 sm:py-24 fade-in fade-in-delay-4 pt-8 pb-8 relative"
    style="opacity: 1; transform: translateY(0px);">
    <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
        <div class="text-center mb-12">
            <p class="uppercase text-xs font-medium text-zinc-500 tracking-wide">Trusted by teams at</p>
        </div>

        <!-- Ticker Container -->
        <div class="overflow-hidden relative"
            style="mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);">
            <!-- Gradient Overlays -->
            <div class="z-10 pointer-events-none bg-gradient-to-r from-black via-black/80 to-transparent w-20 absolute top-0 bottom-0 left-0"
                style="visibility: hidden;"></div>


            <!-- Animated Ticker -->
            <div class="ticker-track flex gap-16 pt-2 pb-2 gap-x-16 gap-y-16 items-center">
                <!-- First set of logos -->
                <div class="flex gap-16 shrink-0 gap-x-16 gap-y-16 items-center">
                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter">TechFlow</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter">InnovateTech</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-bold tracking-tighter">FlowState</span>
                    </div>
                </div>

                <!-- Duplicate set for seamless loop -->
                <div class="flex items-center gap-16 shrink-0">
                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter">TechFlow</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-bold tracking-tighter font-bricolage">Nexus Labs</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-semibold tracking-tighter font-merriweather">DataSync</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter font-instrument-serif">VisionCorp</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-semibold tracking-tighter font-playfair">CloudBase</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-normal tracking-tighter">InnovateTech</span>
                    </div>

                    <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">

                        <span class="text-lg font-bold tracking-tighter">FlowState</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style class="">
        @keyframes ticker {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        .ticker-track {
            animation: ticker 40s linear infinite;
            width: calc(200% + 16px);
        }

        .ticker-track:hover {
            animation-play-state: paused;
        }
    </style>
</section>