Moving Border Glow Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, ArrowRight, User, Sparkles } from 'lucide-react';
5
6export default function MovingBorderNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div className="relative w-full max-w-4xl mx-auto rounded-3xl p-[2px] overflow-hidden select-none">
11      <div className="absolute -inset-[100%] animate-[spin_5s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#3b82f6_0%,#06b6d4_50%,#a855f7_100%)]" />
12
13      <nav className="relative z-10 rounded-3xl bg-slate-950 px-5 py-3 shadow-2xl">
14        <div className="flex items-center justify-between">
15          <div className="flex items-center gap-2">
16            <div className="h-8 w-8 rounded-xl bg-gradient-to-tr from-cyan-400 via-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xs shadow-md">
17              <Sparkles className="h-4 w-4" />
18            </div>
19            <span className="font-extrabold text-sm text-white tracking-wide">
20              LUMINA<span className="text-cyan-400">UI</span>
21            </span>
22          </div>
23
24          <div className="hidden md:flex items-center gap-7 text-xs font-semibold text-slate-300">
25            <a href="#" className="hover:text-cyan-400 transition">Products</a>
26            <a href="#" className="hover:text-cyan-400 transition">Integrations</a>
27            <a href="#" className="hover:text-cyan-400 transition">Solutions</a>
28            <a href="#" className="hover:text-cyan-400 transition">Pricing</a>
29          </div>
30
31          <div className="hidden md:flex items-center gap-3">
32            <button className="flex items-center gap-1 text-xs font-semibold text-slate-300 hover:text-white px-3 py-1.5 transition">
33              <User className="h-3.5 w-3.5" /> Sign In
34            </button>
35            <button className="rounded-xl bg-cyan-500 hover:bg-cyan-400 px-4 py-1.5 text-xs font-bold text-slate-950 transition cursor-pointer flex items-center gap-1 shadow-[0_0_15px_rgba(6,182,212,0.4)]">
36              Launch App <ArrowRight className="h-3 w-3" />
37            </button>
38          </div>
39
40          <button onClick={() => setOpen(!open)} className="md:hidden text-slate-300">
41            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
42          </button>
43        </div>
44
45        {open && (
46          <div className="md:hidden mt-3 pt-3 border-t border-slate-800 flex flex-col gap-2.5 text-xs font-semibold text-slate-300">
47            <a href="#" className="p-1 hover:text-cyan-400">Products</a>
48            <a href="#" className="p-1 hover:text-cyan-400">Integrations</a>
49            <a href="#" className="p-1 hover:text-cyan-400">Solutions</a>
50            <div className="pt-2 border-t border-slate-800 flex gap-2">
51              <button className="flex-1 py-1.5 rounded-xl border border-slate-700 text-center">Sign In</button>
52              <button className="flex-1 py-1.5 rounded-xl bg-cyan-500 text-slate-950 font-bold text-center">Launch App</button>
53            </div>
54          </div>
55        )}
56      </nav>
57    </div>
58  );
59}