From ef9d6fc40acb0baa5a4fc3f8154b555c58a2f81a Mon Sep 17 00:00:00 2001
From: ayrisdev <ayris.dev@gmail.com>
Date: Sun, 12 Apr 2026 19:28:24 +0300
Subject: [PATCH] style: replace mobile menu image with a sleek gradient and
 noise background

---
 components/Navbar.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 2dabedc..b8767d7 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -92,17 +92,10 @@ export function Navbar() {
           mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
         )}
       >
-        {/* Background Image for Mobile Menu */}
-        <div className="absolute inset-0 z-0">
-          <Image 
-            src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
-            alt="Mobile menu background"
-            fill
-            sizes="100vw"
-            className="object-cover grayscale brightness-[0.15]"
-          />
-          <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-background/95 to-background" />
-        </div>
+        {/* Clean Gradient Background for Mobile Menu */}
+        <div className="absolute inset-0 z-0 bg-surface-container-lowest" />
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-background z-0" />
+        <div className="noise-overlay opacity-20 z-0" />
 
         <div className="relative z-10 flex flex-col h-full">
           <div className="flex justify-between items-center mb-16">