Animated Fintech App Phone Mockup Hero Section

<section class="z-10 sm:py-24 pt-8 pb-8 relative" style="opacity: 1; transform: translateY(0px);" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
    <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-white/30 tracking-wide">Powering finance for leading companies</p>
        </div>

        <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);">
            <div class="ticker-track flex gap-16 pt-2 pb-2 gap-x-16 gap-y-16 items-center">
    <div class="flex gap-16 shrink-0 gap-x-16 gap-y-16 items-center">
        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter">Quantum Ventures</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-semibold tracking-tighter font-bricolage">Stellar Digital</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-medium tracking-tighter font-merriweather">Velocity Group</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter font-instrument-serif">Horizon Capital</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-medium tracking-tighter font-playfair">Apex Solutions</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter">Prime Industries</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-semibold tracking-tighter">Infinity Labs</span>
        </div>
    </div>

    <div class="flex items-center gap-16 shrink-0">
        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter">Quantum Ventures</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-semibold tracking-tighter font-bricolage">Stellar Digital</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-medium tracking-tighter font-merriweather">Velocity Group</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter font-instrument-serif">Horizon Capital</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-medium tracking-tighter font-playfair">Apex Solutions</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-normal tracking-tighter">Prime Industries</span>
        </div>

        <div class="flex items-center gap-3 text-white/70 hover:text-white transition-colors duration-300">
            <span class="text-lg font-semibold tracking-tighter">Infinity Labs</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>