Skip to content

Commit 7547861

Browse files
Vegapunk-debugVegapunk-debug
committed
UI: Update Navbar to modern glassmorphic design
1 parent e6bd218 commit 7547861

1 file changed

Lines changed: 78 additions & 69 deletions

File tree

‎website/src/components/Navbar.tsx‎

Lines changed: 78 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -12,90 +12,99 @@ export default function Navbar() {
1212
const isActive = (href: string) => pathname === href;
1313

1414
return (
15-
<nav className="flex items-center justify-between px-8 py-4 w-full sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-md transition-all">
16-
<div className="flex items-center gap-2">
17-
<Link href="/" className="text-dark text-xl font-bold flex items-center gap-2 group">
18-
<div className="w-8 h-8 rounded-lg bg-brand text-white flex items-center justify-center group-hover:scale-105 transition-transform shadow-sm">
19-
<svg
20-
xmlns="http://www.w3.org/2000/svg"
21-
width="20"
22-
height="20"
23-
viewBox="0 0 24 24"
24-
fill="currentColor"
25-
>
26-
<path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66l.95-2.3c.48.17.96.3 1.34.3C17.4 20 20 12 20 0C20 0 17.5 7 17 8z" />
27-
</svg>
28-
</div>
29-
<span>CropID</span>
30-
</Link>
31-
</div>
32-
33-
{/* Desktop Menu */}
34-
<div className="hidden md:flex items-center justify-center absolute left-1/2 -translate-x-1/2 gap-8 text-sm font-semibold">
35-
<Link
36-
href="/"
37-
className={`transition-colors relative ${isActive("/") ? "text-brand" : "text-gray-600 hover:text-brand"}`}
38-
>
39-
Home
40-
</Link>
41-
<Link
42-
href="/guide"
43-
className={`transition-colors relative ${isActive("/guide") ? "text-brand" : "text-gray-600 hover:text-brand"}`}
44-
>
45-
Guide
46-
</Link>
47-
</div>
48-
49-
<div className="flex items-center gap-4">
50-
<Link
51-
href="/#download"
52-
className="hidden md:inline-flex bg-dark hover:bg-gray-800 text-white px-5 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm hover:shadow-md hover:-translate-y-0.5"
53-
>
54-
Get App
55-
</Link>
56-
57-
{/* Mobile Menu Toggle Button */}
58-
<button
59-
className="md:hidden p-2 text-gray-700 hover:text-brand transition-colors focus:outline-none"
60-
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
61-
aria-label="Toggle mobile menu"
62-
>
63-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-6 h-6">
64-
{isMobileMenuOpen ? (
65-
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
66-
) : (
67-
<path strokeLinecap="round" strokeLinejoin="round" d="M3 12h18M3 6h18M3 18h18" />
68-
)}
69-
</svg>
70-
</button>
71-
</div>
15+
<div className="w-full px-4 sm:px-6 sticky top-4 z-50 flex justify-center pointer-events-none">
16+
<nav className="flex items-center justify-between px-6 py-3 w-full max-w-4xl bg-white/70 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_rgb(0,0,0,0.08)] rounded-full transition-all pointer-events-auto">
17+
<div className="flex items-center gap-2">
18+
<Link href="/" className="text-dark text-xl font-bold flex items-center gap-2 group">
19+
<div className="w-8 h-8 rounded-full bg-gradient-to-tr from-brand to-[#00f374] text-white flex items-center justify-center group-hover:scale-105 group-hover:shadow-[0_0_15px_rgba(28,208,101,0.5)] transition-all duration-300">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
width="18"
23+
height="18"
24+
viewBox="0 0 24 24"
25+
fill="currentColor"
26+
>
27+
<path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66l.95-2.3c.48.17.96.3 1.34.3C17.4 20 20 12 20 0C20 0 17.5 7 17 8z" />
28+
</svg>
29+
</div>
30+
<span className="tracking-tight">CropID</span>
31+
</Link>
32+
</div>
7233

73-
{/* Mobile Menu Overlay */}
74-
{isMobileMenuOpen && (
75-
<div className="absolute top-full left-0 w-full bg-white shadow-lg border-b border-gray-100 flex flex-col md:hidden py-4 px-8 mt-px z-40">
34+
{/* Desktop Menu */}
35+
<div className="hidden md:flex items-center justify-center absolute left-1/2 -translate-x-1/2 gap-8 text-sm font-semibold">
7636
<Link
7737
href="/"
78-
className={`py-3 font-semibold ${isActive("/") ? "text-brand" : "text-gray-700"}`}
79-
onClick={() => setIsMobileMenuOpen(false)}
38+
className={`transition-colors relative py-1 ${isActive("/") ? "text-brand" : "text-gray-500 hover:text-dark"}`}
8039
>
8140
Home
41+
{isActive("/") && (
42+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-brand rounded-full rounded-t-none" />
43+
)}
8244
</Link>
8345
<Link
8446
href="/guide"
85-
className={`py-3 font-semibold ${isActive("/guide") ? "text-brand" : "text-gray-700"}`}
86-
onClick={() => setIsMobileMenuOpen(false)}
47+
className={`transition-colors relative py-1 ${isActive("/guide") ? "text-brand" : "text-gray-500 hover:text-dark"}`}
8748
>
8849
Guide
50+
{isActive("/guide") && (
51+
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-brand rounded-full rounded-t-none" />
52+
)}
8953
</Link>
54+
</div>
55+
56+
<div className="flex items-center gap-4">
9057
<Link
9158
href="/#download"
92-
className="mt-4 bg-brand text-white px-5 py-3 rounded-xl text-center font-semibold shadow-sm"
93-
onClick={() => setIsMobileMenuOpen(false)}
59+
className="hidden md:inline-flex bg-dark hover:bg-gray-900 text-white px-5 py-2 rounded-full text-sm font-semibold transition-all shadow-[0_4px_14px_0_rgb(0,0,0,0.1)] hover:shadow-[0_6px_20px_rgba(0,0,0,0.2)] hover:-translate-y-0.5 active:scale-95 duration-200"
9460
>
95-
Get App Free
61+
Get App
9662
</Link>
63+
64+
{/* Mobile Menu Toggle Button */}
65+
<button
66+
className="md:hidden p-2 text-gray-700 hover:text-brand transition-colors focus:outline-none"
67+
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
68+
aria-label="Toggle mobile menu"
69+
>
70+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
71+
{isMobileMenuOpen ? (
72+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
73+
) : (
74+
<path strokeLinecap="round" strokeLinejoin="round" d="M3 12h18M3 6h18M3 18h18" />
75+
)}
76+
</svg>
77+
</button>
9778
</div>
98-
)}
99-
</nav>
79+
80+
{/* Mobile Menu Overlay */}
81+
{isMobileMenuOpen && (
82+
<div className="absolute top-[calc(100%+12px)] left-0 w-full bg-white/95 backdrop-blur-xl shadow-2xl rounded-2xl border border-gray-100 flex flex-col md:hidden py-4 px-6 z-40 origin-top overflow-hidden">
83+
<Link
84+
href="/"
85+
className={`py-3 font-semibold transition-colors ${isActive("/") ? "text-brand" : "text-gray-600 active:bg-gray-50 rounded-lg px-2"}`}
86+
onClick={() => setIsMobileMenuOpen(false)}
87+
>
88+
Home
89+
</Link>
90+
<Link
91+
href="/guide"
92+
className={`py-3 font-semibold transition-colors ${isActive("/guide") ? "text-brand" : "text-gray-600 active:bg-gray-50 rounded-lg px-2"}`}
93+
onClick={() => setIsMobileMenuOpen(false)}
94+
>
95+
Guide
96+
</Link>
97+
<Link
98+
href="/#download"
99+
className="mt-4 bg-gradient-to-r from-brand to-[#00f374] text-white px-5 py-3 rounded-xl text-center font-semibold shadow-[0_4px_14px_0_rgba(28,208,101,0.39)] active:scale-95 transition-transform"
100+
onClick={() => setIsMobileMenuOpen(false)}
101+
>
102+
Get App Free
103+
</Link>
104+
</div>
105+
)}
106+
</nav>
107+
</div>
100108
);
101109
}
110+

0 commit comments

Comments
 (0)
⚡