SaaS Main Navbar

<nav
        class="flex items-center justify-between px-8 py-4 border-b border-slate-100 sticky top-0 bg-white/80 backdrop-blur-md z-50">
        <div class="flex items-center gap-8">
            <div
                class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">
                Hub.</div>
            <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
                <a href="#" class="hover:text-indigo-600 transition-colors">Products</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Solutions</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Pricing</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Docs</a>
            </div>
        </div>
        <div class="flex items-center gap-4">
            <button class="text-sm font-semibold text-slate-700 hover:text-indigo-600">Sign in</button>
            <button
                class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-full text-sm font-semibold transition-all shadow-lg shadow-indigo-200 active:scale-95">Get
                Started</button>
        </div>
    </nav>
    <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>