Aurora Ambient Glow Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, Sparkles, User, Search } from 'lucide-react';
5
6export default function AuroraGlowNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="relative w-full max-w-4xl mx-auto rounded-3xl border border-white/10 bg-slate-950 p-3.5 select-none shadow-2xl overflow-hidden">
11      <div className="pointer-events-none absolute -top-10 left-1/4 h-24 w-72 rounded-full bg-gradient-to-r from-blue-600 via-cyan-400 to-violet-600 opacity-30 blur-2xl animate-pulse" />
12
13      <div className="relative z-10 flex items-center justify-between">
14        <div className="flex items-center gap-2.5">
15          <div className="h-8 w-8 rounded-xl bg-gradient-to-tr from-cyan-400 to-indigo-600 flex items-center justify-center text-white shadow-lg shadow-cyan-500/25">
16            <Sparkles className="h-4 w-4" />
17          </div>
18          <span className="font-extrabold text-sm sm:text-base text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 via-blue-200 to-indigo-300">
19            AURORA.OS
20          </span>
21        </div>
22
23        <div className="hidden md:flex items-center gap-7 text-xs font-semibold text-slate-300">
24          <a href="#" className="hover:text-cyan-300 transition">Ecosystem</a>
25          <a href="#" className="hover:text-cyan-300 transition">Design System</a>
26          <a href="#" className="hover:text-cyan-300 transition">Enterprise</a>
27          <a href="#" className="hover:text-cyan-300 transition">Pricing</a>
28        </div>
29
30        <div className="hidden md:flex items-center gap-3">
31          <button className="p-2 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 hover:text-white transition">
32            <Search className="h-3.5 w-3.5" />
33          </button>
34          <button className="flex items-center gap-1.5 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 px-4 py-1.5 text-xs font-bold text-white shadow-lg shadow-cyan-500/30 hover:scale-103 transition cursor-pointer">
35            <User className="h-3.5 w-3.5" /> Account
36          </button>
37        </div>
38
39        <button onClick={() => setOpen(!open)} className="md:hidden p-1 text-slate-300">
40          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
41        </button>
42      </div>
43
44      {open && (
45        <div className="relative z-10 md:hidden mt-3 pt-3 border-t border-white/10 flex flex-col gap-2.5 text-xs font-semibold text-slate-300">
46          <a href="#" className="p-1 hover:text-cyan-300">Ecosystem</a>
47          <a href="#" className="p-1 hover:text-cyan-300">Design System</a>
48          <a href="#" className="p-1 hover:text-cyan-300">Enterprise</a>
49          <div className="pt-2 border-t border-white/10 flex gap-2">
50            <button className="flex-1 py-1.5 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold text-center">
51              Account
52            </button>
53          </div>
54        </div>
55      )}
56    </nav>
57  );
58}