navbar background fixed

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

@@ -0,0 +1,5 @@
+.nav_background{
+    z-index: -10;
+    filter: brightness(.17);
+    align-items: baseline;
+}

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

@@ -7,6 +7,7 @@ import classnames from "classnames";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { MdOutlineRestaurantMenu } from "react-icons/md";
 import Reserve from "./reserveButton";
+import './NavBar.css'
 
 const NavBar = () => {
   const currentPath = usePathname();
@@ -31,25 +32,8 @@ const NavBar = () => {
   return (
     <nav className="">
       {/* <center className="text-base-100">O</center> */}
-      <div className="flex flex-wrap center items-center justify-center p-4 bg-secondary">
-        <div className="-z-10">
-          <Image
-            src="/img01.webp"
-            alt="nav image"
-            fill
-            style={{ objectFit: "cover" }}
-            quality={100}
-            className="brightness-50 hidden md:block"
-          />
-          <Image
-            src="/img01.webp"
-            alt="nav image"
-            fill
-            style={{ objectFit: "cover" }}
-            className="brightness-0 block md:hidden"
-          />
-        </div>
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased">
+      <div className="flex  items-center relative justify-center p-10">
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 text-2xl font-sans antialiased">
           {links.map((link) => (
             <Link
               key={link.href}
@@ -73,7 +57,7 @@ const NavBar = () => {
             width={0}
             height={0}
             sizes="200vw"
-            style={{ width: "45%", height: "auto" }}
+            style={{ width: "55%", height: "auto" }}
             alt="Logo"
             className="hidden md:block center mx-auto"
           />
@@ -106,6 +90,23 @@ const NavBar = () => {
           ))}
         </ul>
         <Reserve />
+        <div className="overflow-hidden">
+          <Image
+            src="/header02.webp"
+            alt="nav image"
+            fill
+            style={{ objectFit: "cover" }}
+            quality={100}
+            className="hidden md:block nav_background"
+          />
+          <Image
+            src="/header02.webp"
+            alt="nav image"
+            fill
+            style={{ objectFit: "cover" }}
+            className="brightness-0 block md:hidden"
+          />
+        </div>
       </div>
       <div className="block md:hidden">
         <GiHamburgerMenu

Websites/jefes-nextjs/app/gallery/carousel.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
 import './carousel.css';
+import Autoplay from "embla-carousel-autoplay";
+import AutoHeight from 'embla-carousel-auto-height'
 
 export const EmblaCarousel = () => {
-  const [emblaRef] = useEmblaCarousel();
+  const [emblaRef] = useEmblaCarousel({loop: false}, [Autoplay(), AutoHeight()]);
 
   return (
     <div className="embla" ref={emblaRef}>

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

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { useState } from "react";
 import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
@@ -5,61 +6,10 @@ import { RxDotFilled } from "react-icons/rx";
 import { EmblaCarousel } from "./carousel";
 
 const Gallery = () => {
-  // const slides = [
-  //   { url: "/images/1577mobile.webp" },
-  //   { url: "/images/bar01.jpg" },
-  //   { url: "/images/fbimg02.jpg" },
-  //   { url: "/images/food01.jpg" },
-  //   { url: "/images/food02.webp" },
-  //   { url: "/images/IMG_2737.webp" },
-  //   { url: "/images/IMG_2749.webp" },
-  //   { url: "/images/IMG_2766.webp" },
-  //   { url: "/images/img01.webp" },
-  //   { url: "/images/img05.webp" },
-  // ];
-
-  // const [currentIndex, setCurrentIndex] = useState(0);
-
-  // const prevSlide = () => {
-  //   const isFirstSlide = currentIndex === 0;
-  //   const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
-  //   setCurrentIndex(newIndex);
-  // };
-
-  // const nextSlide = () => {
-  //   const isLastSlide = currentIndex === slides.length - 1;
-  //   const newIndex = isLastSlide ? 0 : currentIndex + 1;
-  //   setCurrentIndex(newIndex);
-  // };
-
-  // const goToSlide = (slideIndex) => {
-  //   setCurrentIndex(slideIndex);
-  // };
 
   return (
     <div className="">
       <EmblaCarousel />
-      {/* <div
-        style={{ backgroundImage: `url(${slides[5].url})` }}
-        className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
-      ></div>
-      <div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
-        <BsChevronCompactLeft onClick={prevSlide} size={30} />
-      </div>
-      <div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
-        <BsChevronCompactRight onClikc={nextSlide} size={30} />
-      </div>
-      <div className="flex top-4 justify-center py-2">
-        {slides.map((slide, slideIndex) => (
-          <div
-            key={slideIndex}
-            onClick={() => goToSlide(slideIndex)}
-            className="text-2xl cursor-pointer"
-          >
-            <RxDotFilled />
-          </div>
-        ))}
-      </div> */}
     </div>
   );
 };

Websites/jefes-nextjs/app/layout.css

@@ -0,0 +1,4 @@
+.jefes_background{
+    z-index: -1;
+    filter: brightness(.19);
+}

Websites/jefes-nextjs/app/layout.tsx

@@ -1,20 +1,20 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
-import NavBar from './components/NavBar/NavBar'
-import Image from 'next/image'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import NavBar from "./components/NavBar/NavBar";
+import Image from "next/image";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" data-theme="jefes">
@@ -31,5 +31,5 @@ export default function RootLayout({
         <main>{children}</main>
       </body>
     </html>
-  )
+  );
 }

Websites/jefes-nextjs/app/menu/Appetizers/appetizers.css

@@ -1,3 +1,3 @@
 .gun_menu{
-    --transform-rotate: 270deg;
+    transform: rotate(0.75turn);
 }

Websites/jefes-nextjs/package.json

@@ -13,6 +13,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "easymde": "^2.18.0",
+    "embla-carousel-auto-height": "^8.0.0-rc14",
     "embla-carousel-autoplay": "^8.0.0-rc14",
     "embla-carousel-react": "^8.0.0-rc14",
     "next": "13.5.6",