Tailwind Hero Section Components in Cyber library

<section class="relative scan-lines" x-data="{ mobileNavOpen: false }">
    <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <nav class="flex justify-between items-center py-8 border-b border-blue-400 border-opacity-20">
            <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                <img src="cyber-assets/logo.png" alt="" class="h-5">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block text-blue-400 hover:text-purple-500 focus:outline-none transition-colors duration-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <title>Mobile menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12 text-gray-50">
                <li><a class="text-sm hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    ABOUT
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm hover:text-purple-500 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    SYSTEMS
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm hover:text-green-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    PROTOCOLS
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
                <li><a class="text-sm hover:text-blue-400 font-medium tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                    DATA
                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
                </a></li>
            </ul>
            <a class="hidden lg:block px-6 py-3 text-sm font-semibold text-blue-400 hover:text-gray-950 hover:bg-blue-400 border-2 border-blue-400 hover:border-blue-400 transform hover:scale-105 transition-all duration-300 clip-path-polygon bg-gradient-to-r from-transparent to-transparent hover:from-blue-400 hover:to-blue-400" href="#" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);">
                CONNECT
            </a>
        </nav>
        
        <div class="flex flex-wrap items-center -mx-4 mt-10 pb-10 lg:pb-16">
            <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                <div class="relative">
                    <h2 class="max-w-xl mb-8 text-4xl leading-tight md:text-5xl md:leading-tight lg:text-6xl lg:leading-tight font-heading font-black tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">
                        HACK THE FUTURE 
                    </h2>
                    <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
                </div>
                <p class="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">
                    Interface with next-gen protocols. Execute quantum algorithms. Breach the limitations of conventional systems and transcend digital boundaries.
                </p>
                <div class="flex flex-col lg:flex-row gap-4">
                    <a class="group relative px-8 py-4 text-sm text-center bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                        <span class="relative z-10">INITIALIZE PROTOCOL</span>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                    </a>
                    <a class="group relative px-8 py-4 text-sm text-center font-semibold text-green-400 hover:text-gray-950 hover:bg-green-400 border-2 border-green-400 transition-all duration-300 transform hover:scale-105 overflow-hidden" href="#" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                        <span class="relative z-10">ACCESS DATABASE</span>
                        <div class="absolute inset-0 bg-green-400 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
                    </a>
                </div>
            </div>
            <div class="w-full md:w-1/2 px-4">
                <div class="mt-8 relative hologram-effect p-8 rounded-lg border border-blue-400 border-opacity-30 animate-float">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></div>
                    <div class="relative z-10">
                        <img class="w-full h-64 lg:h-96 rounded-xl object-cover border-2 border-blue-400 border-opacity-30" src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw2fHxoYWNrZXJ8ZW58MHx8fHwxNzQ4MDk4NjQxfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="">
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                    </div>
                </div>
            </div>
            
            <button class="block mt-16 lg:mt-24 mx-auto w-16 h-16 p-4 bg-gradient-to-br from-blue-400 to-purple-500 hover:from-purple-500 hover:to-green-400 transform hover:scale-110 transition-all duration-300 animate-pulse-neon" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);">
                <svg class="mx-auto text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
        </div>
    </div>
    
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-950 bg-opacity-90 backdrop-blur-sm"></div>
        <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-gradient-to-b from-gray-800 to-gray-950 border-r-2 border-blue-400 overflow-y-auto">
            <div class="flex items-center mb-12">
                <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
                    <img src="cyber-assets/logo.png" alt="" class="h-4">
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="ml-auto text-blue-400 hover:text-purple-500 transition-colors duration-300">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div>
                <ul class="space-y-2">
                    <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">ABOUT</a></li>
                    <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-purple-500 hover:bg-opacity-10 hover:text-purple-500 transition-all duration-300 border-l-4 border-transparent hover:border-purple-500 tracking-wider" href="#">COMPANY</a></li>
                    <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-green-400 hover:bg-opacity-10 hover:text-green-400 transition-all duration-300 border-l-4 border-transparent hover:border-green-400 tracking-wider" href="#">SERVICES</a></li>
                    <li><a class="block p-4 text-sm font-semibold text-gray-50 hover:bg-blue-400 hover:bg-opacity-10 hover:text-blue-400 transition-all duration-300 border-l-4 border-transparent hover:border-blue-400 tracking-wider" href="#">TESTIMONIALS</a></li>
                </ul>
            </div>
            <div class="mt-auto">
                <div class="pt-6">
                    <a class="block px-6 py-3 mb-3 text-sm text-center font-semibold text-blue-400 hover:text-gray-950 hover:bg-blue-400 border-2 border-blue-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">SIGN IN</a>
                    <a class="block px-6 py-3 text-sm text-center font-semibold text-green-400 hover:text-gray-950 hover:bg-green-400 border-2 border-green-400 transition-all duration-300 transform hover:scale-105 tracking-wider" href="#" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">SIGN UP</a>
                </div>
                <p class="mt-6 mb-4 text-xs text-center text-gray-500">
                    <span>© 2025 CYBER SYSTEMS ACTIVATED</span>
                </p>
            </div>
        </nav>
    </div>
</section>