Crypto Dark Hero

<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(79,70,229,0.1),transparent)]"></div>
    <div class="max-w-4xl mx-auto text-center relative z-10 py-10 px-6">
        <h1 class="text-6xl font-bold tracking-tighter mb-6">Trade the <span class="text-yellow-400">Future.</span></h1>
        <p class="text-zinc-400 text-xl mb-10">Instant, zero-fee crypto trading powered by the fastest blockchain on
            earth.</p>
        <div class="bg-zinc-900/50 border border-zinc-800 p-2 rounded-2xl flex items-center max-w-md mx-auto">
            <input type="text" placeholder="Enter wallet address"
                class="bg-transparent border-none focus:ring-0 flex-1 px-4 text-white">
            <button
                class="bg-yellow-400 text-black px-6 py-3 rounded-xl font-bold hover:bg-yellow-300 transition-colors">Connect</button>
        </div>
    </div>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>