Vasi header

src/components/desktopHeader.jsx

@@ -1,10 +1,14 @@
 import Link from "next/link";
 
-export const DesktopHeader = () => <div className="hidden lg:block ">
-<nav
- className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20"
- >
-    <Link href="/" className="text-2xl text-[#1F2833]">Home</Link>
-    <Link href="/movies" className="text-2xl text-[#1F2833]">Movies</Link>
-</nav>
-</div>
+export const DesktopHeader = () => (
+    <div className="hidden lg:block">
+      <nav className="w-full flex justify-center items-center gap-6 bg-[#C5C6C7] h-20 shadow-md">
+        <Link href="/" className="text-2xl text-[#1F2833] hover:text-[#8A2BE2] transition-colors duration-300">
+          Home
+        </Link>
+        <Link href="/movies" className="text-2xl text-[#1F2833] hover:text-[#8A2BE2] transition-colors duration-300">
+          Movies
+        </Link>
+      </nav>
+    </div>
+  );

src/components/mobileHeader/closeImg.jsx

@@ -0,0 +1,11 @@
+export const CloseImg = () => <svg viewBox="0 0 12 12" version="1.1"
+xmlns="http://www.w3.org/2000/svg" className="text-[#1F2833] w-7 h-7 m-5">
+<line x1="1" y1="11" 
+    x2="11" y2="1" 
+    stroke="black" 
+    strokeWidth="2"/>
+<line x1="1" y1="1" 
+    x2="11" y2="11" 
+    stroke="black" 
+    strokeWidth="2"/>
+</svg>

src/components/mobileHeader/header.jsx

@@ -5,13 +5,15 @@ import { Overlay } from "./overlay";
 
 export const MobileHeader = () => {
     const [isOpen, setIsOpen] = useState(false);
-
-    return <div className="block lg:hidden p-5">
-        <button onClick={() => setIsOpen(true)}>
-            <svg className="w-7 h-7 text-red-50" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
-            </svg>
+
+    return (
+      <div className="block lg:hidden p-5">
+        <button onClick={() => setIsOpen(true)} className="flex items-center justify-center w-10 h-10 bg-[#1F2833] rounded-full shadow-lg transition-transform duration-300 hover:scale-110">
+          <svg className="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
+          </svg>
         </button>
-        <Overlay setIsOpen={setIsOpen} isOpen={isOpen}/>
-    </div>
-}
+        <Overlay setIsOpen={setIsOpen} isOpen={isOpen} />
+      </div>
+    );
+  }

src/components/mobileHeader/links.jsx

@@ -1,5 +1,19 @@
 import Link from "next/link";
-export const Links = () => <div className="flex items-center flex-col gap-5">
-    <Link href="/" className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Home</Link>
-    <Link href="/movies" className="w-1/2 bg-slate-900 text-center  h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Movies</Link>
-</div>
+export const Links = ({ setIsOpen, isOpen }) => (
+    <div className="flex items-center flex-col gap-5 mt-20">
+      <Link
+        href="/"
+        className="w-3/4 bg-[#1F2833] text-white text-center h-12 flex items-center justify-center rounded-lg shadow-lg hover:bg-[#8A2BE2] transition-colors duration-500"
+        onClick={() => setIsOpen(false)}
+      >
+        Home
+      </Link>
+      <Link
+        href="/movies"
+        className="w-3/4 bg-[#1F2833] text-white text-center h-12 flex items-center justify-center rounded-lg shadow-lg hover:bg-[#8A2BE2] transition-colors duration-500"
+        onClick={() => setIsOpen(false)}
+      >
+        Movies
+      </Link>
+    </div>
+  );

src/components/mobileHeader/overlay.jsx

@@ -1,17 +1,11 @@
+import { CloseImg } from "./closeImg";
+import { Links } from "./links";
 
-export const Overlay = ({ setIsOpen, isOpen }) => <div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10`}>
-<button onClick={() => setIsOpen(false)}>
-<svg viewBox="0 0 12 12" version="1.1"
-    xmlns="http://www.w3.org/2000/svg" className="text-[#1F2833] w-7 h-7 m-5">
-    <line x1="1" y1="11" 
-        x2="11" y2="1" 
-        stroke="black" 
-        strokeWidth="2"/>
-    <line x1="1" y1="1" 
-        x2="11" y2="11" 
-        stroke="black" 
-        strokeWidth="2"/>
-</svg>
-</button>
-
-</div>
+export const Overlay = ({ setIsOpen, isOpen }) => (
+    <div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
+      <button onClick={() => setIsOpen(false)} className="absolute top-5 right-5">
+        <CloseImg />
+      </button>
+      <Links setIsOpen={setIsOpen} isOpen={isOpen} />
+    </div>
+  );