Redesign cepoiesc

src/components/desktopHeader.jsx

@@ -1,10 +1,10 @@
 import Link from "next/link";
+import { FlixnetSvg } from "./mobileHeader/flixnetSvg";
 
 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>
+    <nav className="w-full flex items-center gap-4 bg-[#C5C6C7] h-20">
+        <FlixnetSvg className="w-12 h-12 relative left-0 ml-4 mr-8"/>
+        <Link href="/" className="text-2xl text-[#1F2833] hover:bg-[#A5A6A7] p-3 pl-9 pr-9 rounded-2xl transition-all duration-300 ease-in-out transform ">Home</Link>
+        <Link href="/movies" className="text-2xl text-[#1F2833] hover:bg-[#A5A6A7] p-3 pl-9 pr-9 rounded-2xl transition-all duration-300 ease-in-out transform ">Movies</Link>
+    </nav>
 </div>

src/components/mobileHeader/burgerSvg.jsx

@@ -1,4 +1,4 @@
 export const BurgerSvg = () => 
-<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">
+<svg className="w-7 h-7 text-red-50 mt-2" 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>

src/components/mobileHeader/flixnetSvg.jsx

@@ -0,0 +1,5 @@
+export const FlixnetSvg = ({ className }) => 
+    <svg fill="#000000" viewBox="0 0 24 24" id="netflix" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" className={`icon flat-color ${className}`}>
+        <path id="primary" d="M9.85,10.66a1,1,0,0,1,.15.52V21a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V3a1,1,0,0,1,.73-1,1,1,0,0,1,1.12.44ZM20,2H15a1,1,0,0,0-1,1v9.82a1,1,0,0,0,.15.52l5,8.18A1,1,0,0,0,20,22a.84.84,0,0,0,.27,0A1,1,0,0,0,21,21V3A1,1,0,0,0,20,2Z" style={{fill: '#000000'}}></path>
+        <path id="secondary" d="M20.85,20.48l-11-18A1,1,0,0,0,9,2H4a1,1,0,0,0-.87.51,1,1,0,0,0,0,1l11,18A1,1,0,0,0,15,22h5a1,1,0,0,0,.87-.51A1,1,0,0,0,20.85,20.48Z" style={{fill: '#2ca9bc'}}></path>
+    </svg>

src/components/mobileHeader/header.jsx

@@ -3,12 +3,15 @@
 import { useState } from "react"
 import { Overlay } from "./overlay";
 import { BurgerSvg } from "./burgerSvg";
+import { FlixnetSvg } from "./flixnetSvg";
+import { Links } from "./links";
 
 export const MobileHeader = () => {
     const [isOpen, setIsOpen] = useState(false);
 
     return <div className="block lg:hidden p-5">
         <button onClick={() => setIsOpen(true)}><BurgerSvg /></button>
+        <FlixnetSvg className="absolute right-0 top-0 w-10 h-10 m-5" />
         <Overlay setIsOpen={setIsOpen} isOpen={isOpen}/>
     </div>
 }

src/components/mobileHeader/links.jsx

@@ -1,5 +1,5 @@
 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>
+export const Links = ({ setIsOpen }) => <div className="flex flex-col gap-2">
+    <Link href="/" className="bg-slate-900 pl-10 h-12 flex items-center ml-5 mr-5 rounded-2xl" onClick={() => setIsOpen(false)}>Home</Link>
+    <Link href="/movies" className=" bg-slate-900 pl-10  h-12 flex items-center ml-5 mr-5 rounded-2xl" onClick={() => setIsOpen(false)}>Movies</Link>
 </div>

src/components/mobileHeader/overlay.jsx

@@ -1,8 +1,10 @@
-import { BurgerSvg, XIconSvg } from "./xIconSvg";
+import { Links } from "./links";
+import { XIconSvg } from "./xIconSvg";
 
 export const Overlay = ({ setIsOpen, isOpen }) => 
-<div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10`}>
+<div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-2/3 ${isOpen ? "block" : "hidden"} z-10`}>
     <button onClick={() => setIsOpen(false)}>
         <XIconSvg />
     </button>
+    <Links setIsOpen={setIsOpen}/>
 </div>

src/components/mobileHeader/xIconSvg.jsx

@@ -1,5 +1,5 @@
 export const XIconSvg = () => 
-<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">
+<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 mt-7">
     <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>