Cyber Space Hero

<div class="relative overflow-hidden min-h-screen flex items-center">
        <div class="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/grid-me.png')]">
        </div>
        <div class="max-w-7xl mx-auto px-6 py-20 relative z-10 grid lg:grid-cols-2 items-center gap-10">
            <div>
                <span class="text-cyan-400 font-mono tracking-[0.3em] block mb-4 uppercase text-sm">System Protocol
                    01</span>
                <h1 class="text-6xl md:text-8xl font-black mb-8 leading-none italic uppercase">EVOLVE <br> <span
                        class="text-transparent border-b-4 border-cyan-400 stroke-text">BEYOND.</span></h1>
                <p class="text-slate-400 text-lg mb-10 max-w-md">Next-generation AI frameworks for developers who demand
                    absolute performance and zero latency.</p>
                <button
                    class="bg-cyan-400 text-black px-10 py-4 font-black skew-x-[-15deg] hover:skew-x-0 transition-all active:scale-95">LAUNCH
                    TERMINAL</button>
            </div>
            <div class="relative">
                <div
                    class="w-full aspect-square bg-gradient-to-tr from-cyan-500 to-purple-500 rounded-full blur-[100px] opacity-30 animate-pulse">
                </div>
                <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 border border-cyan-400/30 rotate-45">
                </div>
                <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 border-4 border-cyan-400 -rotate-12 animate-float">
                </div>
            </div>
        </div>
    </div>