AI SaaS Hero

<div class="relative max-w-7xl mx-auto px-6 py-24 text-center">
        <div
            class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-indigo-600/20 blur-[120px] rounded-full">
        </div>
        <span
            class="inline-flex items-center px-4 py-1.5 rounded-full border border-slate-800 bg-slate-900/50 text-indigo-400 text-sm font-medium mb-8 animate-pulse-soft">
            <span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span> New AI Features Live
        </span>
        <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 tracking-tight">Design interfaces <br><span
                class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-white to-violet-400">at the
                speed of light.</span></h1>
        <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">The ultimate workspace for
            creative developers. Build, ship, and scale your next unicorn project with our AI-powered design system.</p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button
                class="w-full sm:w-auto px-8 py-4 bg-white text-slate-950 font-bold rounded-xl hover:bg-slate-100 transition-all flex items-center justify-center gap-2">
                Start building free
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6">
                    </path>
                </svg>
            </button>
            <button
                class="w-full sm:w-auto px-8 py-4 bg-slate-900 text-white font-semibold rounded-xl border border-slate-800 hover:bg-slate-800 transition-all">View
                Demo</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>