Floating Glassmorphism Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, Sparkles, User, ChevronRight } from 'lucide-react';
5
6export default function GlassFloatingNavbar() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <nav className="w-full max-w-4xl mx-auto rounded-full border border-white/20 dark:border-white/10 bg-white/70 dark:bg-slate-950/70 backdrop-blur-xl px-5 py-3 shadow-xl select-none transition-all">
11      <div className="flex items-center justify-between">
12        <div className="flex items-center gap-2.5">
13          <div className="h-8 w-8 rounded-full bg-gradient-to-tr from-cyan-400 via-blue-500 to-indigo-600 flex items-center justify-center text-white shadow-md shadow-blue-500/30">
14            <Sparkles className="h-4 w-4" />
15          </div>
16          <span className="font-extrabold text-sm sm:text-base text-slate-900 dark:text-white tracking-tight">
17            Aurenza<span className="text-cyan-500">Glass</span>
18          </span>
19        </div>
20
21        <div className="hidden md:flex items-center gap-7 text-xs font-semibold text-slate-600 dark:text-slate-300">
22          <a href="#" className="hover:text-blue-500 dark:hover:text-cyan-400 transition">Features</a>
23          <a href="#" className="hover:text-blue-500 dark:hover:text-cyan-400 transition">Showcase</a>
24          <a href="#" className="hover:text-blue-500 dark:hover:text-cyan-400 transition">Components</a>
25          <a href="#" className="hover:text-blue-500 dark:hover:text-cyan-400 transition">Pricing</a>
26        </div>
27
28        <div className="hidden md:flex items-center gap-3">
29          <button className="flex items-center gap-1.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition px-3 py-1.5 cursor-pointer">
30            <User className="h-3.5 w-3.5" /> Login
31          </button>
32          <button className="rounded-full bg-gradient-to-r from-blue-600 to-cyan-500 px-4 py-1.5 text-xs font-bold text-white shadow-md shadow-blue-500/25 hover:shadow-cyan-500/40 hover:scale-103 transition cursor-pointer flex items-center gap-1">
33            Get Started <ChevronRight className="h-3 w-3" />
34          </button>
35        </div>
36
37        <button
38          onClick={() => setOpen(!open)}
39          className="md:hidden rounded-full p-1.5 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800 transition"
40        >
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-white/20 dark:border-slate-800 flex flex-col gap-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300">
47          <a href="#" className="p-1.5 hover:text-blue-500">Features</a>
48          <a href="#" className="p-1.5 hover:text-blue-500">Showcase</a>
49          <a href="#" className="p-1.5 hover:text-blue-500">Components</a>
50          <a href="#" className="p-1.5 hover:text-blue-500">Pricing</a>
51          <div className="flex gap-2 pt-2 border-t border-white/20 dark:border-slate-800">
52            <button className="flex-1 rounded-full border border-slate-300 dark:border-slate-700 py-1.5 text-center">Login</button>
53            <button className="flex-1 rounded-full bg-blue-600 text-white py-1.5 text-center">Get Started</button>
54          </div>
55        </div>
56      )}
57    </nav>
58  );
59}