navbar fixed and centered

Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

@@ -57,8 +57,8 @@ const NavBar = () => {
     <nav>
       {/* <center className="text-accent bg-black">O</center> */}
       <div className={navbar ? "flex items-center bg-black justify-center xl:p-1 mx-auto  md:p-4 absolute z-10 w-full h-[120px] bg-green"
-      : "flex items-center justify-center xl:p-1 bg-red-800 mx-auto  md:p-4 absolute z-10 w-full h-[120px]"}>
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased">
+      : "flex items-center justify-center xl:p-1 bg-transparent mx-auto  md:p-4 absolute z-10 w-full h-[120px]"}>
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-6">
           {links.map((link) => (
             <Link
               key={link.href}
@@ -77,7 +77,7 @@ const NavBar = () => {
           ))}
         </ul>
         {/* logo */}
-        <Link href="/">
+        <Link href="/" className="relative">
           <Image
             src="/logo.svg"
             width={0}

Websites/jefes-nextjs/app/menu/layout.tsx

@@ -3,19 +3,26 @@ import Image from "next/image";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col">
-      <div className="flex relative w-full h-[400px]">
-      <Image
-            src="/header02.webp"
-            alt="nav image"
-            priority
-            fill
-            style={{ objectFit: "cover" , objectPosition: '75%'}}
-            quality={100}
-            className="brightness-[25%]"
-          />
+    <div className="flex flex-col relative justify-center items-center ">
+      <div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
+        <Image
+          src="/IMG_2431.jpg"
+          alt="nav image"
+          priority
+          fill
+          style={{ objectFit: "cover", objectPosition: "center" }}
+          quality={100}
+          className="brightness-[20%] "
+        />
+        <div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl z-10">
+          <div className="p-6 ">
+            <p className="py-4">
+              <span className="">Menu</span>
+            </p>
+          </div>
+        </div>
       </div>
-      
+
       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
   );

Websites/jefes-nextjs/app/menu/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import Appetizers from "./Appetizers/page";
+import Image from "next/image";
 
 const menu = () => {
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="flex flex-col relative justify-center items-center">
       <div>
         <Appetizers />
       </div>