<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&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw2fHxoYWNrZXJ8ZW58MHx8fHwxNzQ4MDk4NjQxfDA&ixlib=rb-4.1.0&q=80&w=1080&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>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
