Animated Client Logo Ticker Section

<section class="relative z-10 sm:py-24 fade-in fade-in-delay-4 pt-16 pb-16" style="opacity: 1; transform: translateY(0px);">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <p class="text-sm font-medium text-zinc-500 uppercase tracking-wide">Trusted by teams at</p>
            </div>
            
            <!-- Ticker Container -->
            <div class="relative overflow-hidden">
                <!-- Gradient Overlays -->
                <div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-black via-black/80 to-transparent z-10 pointer-events-none"></div>
                <div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-black via-black/80 to-transparent z-10 pointer-events-none"></div>
                
                <!-- Animated Ticker -->
                <div class="ticker-track flex items-center gap-16 py-6">
                    <!-- First set of logos -->
                    <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">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">TechFlow</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-emerald-600 to-teal-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">Nexus Labs</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-600 to-violet-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5"></polygon></svg>
                            </div>
                            <span class="text-lg font-semibold">DataSync</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-orange-600 to-red-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                            </div>
                            <span class="text-lg font-semibold">VisionCorp</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-cyan-600 to-blue-700 flex items-center justify-center">
                                <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" class="h-4 w-4 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"></path><polyline points="7.5,4.21 12,6.81 16.5,4.21"></polyline><polyline points="7.5,19.79 7.5,14.6 3,12"></polyline><polyline points="21,12 16.5,14.6 16.5,19.79"></polyline></svg>
                            </div>
                            <span class="text-lg font-semibold">CloudBase</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-pink-600 to-rose-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">InnovateTech</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-amber-600 to-orange-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M12 2v20"></path><path d="M2 12h20"></path><circle cx="12" cy="12" r="4"></circle></svg>
                            </div>
                            <span class="text-lg font-semibold">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">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">TechFlow</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-emerald-600 to-teal-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">Nexus Labs</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-600 to-violet-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5"></polygon></svg>
                            </div>
                            <span class="text-lg font-semibold">DataSync</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-orange-600 to-red-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                            </div>
                            <span class="text-lg font-semibold">VisionCorp</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-cyan-600 to-blue-700 flex items-center justify-center">
                                <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" class="h-4 w-4 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"></path><polyline points="7.5,4.21 12,6.81 16.5,4.21"></polyline><polyline points="7.5,19.79 7.5,14.6 3,12"></polyline><polyline points="21,12 16.5,14.6 16.5,19.79"></polyline></svg>
                            </div>
                            <span class="text-lg font-semibold">CloudBase</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-pink-600 to-rose-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>
                            </div>
                            <span class="text-lg font-semibold">InnovateTech</span>
                        </div>
                        
                        <div class="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-300">
                            <div class="h-8 w-8 rounded-lg bg-gradient-to-br from-amber-600 to-orange-700 flex items-center justify-center">
                                <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" class="h-4 w-4 text-white"><path d="M12 2v20"></path><path d="M2 12h20"></path><circle cx="12" cy="12" r="4"></circle></svg>
                            </div>
                            <span class="text-lg font-semibold">FlowState</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
            @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>