fixed x-axis spacing

Websites/jefes-nextjs/app/about-us/page.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 const AboutUs = () => {
   return (
     <div className="flex flex-col relative justify-center items-center ">
-      <div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
+      <div className="flex relative -z-10 pt-40 w-full h-[400px] overflow-hidden">
         <Image
           src="/IMG_2431.jpg"
           alt="nav image"

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

@@ -33,10 +33,10 @@ const NavBar = () => {
   // Create an array to hold the list items
   const links2 = [
     { label: "ABOUT", href: "/about-us" },
-    { label: "REVIEWS", href: "/reviews" },
+    // { label: "REVIEWS", href: "/reviews" },
     { label: "CONTACT", href: "/contact" },
     // { label: "Dashboard", href: "/dashboard" },
-    // { label: "RESERVE", href: "/reservations" },
+    { label: "RESERVE", href: "/reservations" },
     // { label: "Issues", href: "/issues" },
   ];
 

Websites/jefes-nextjs/app/components/reserve/page.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Reservation = () => {
-  return (
-    <div>reservation</div>
-  )
-}
-
-export default Reservation

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

@@ -1,17 +0,0 @@
-"use client";
-
-import { routeModule } from 'next/dist/build/templates/app-page';
-import React from 'react'
-
-const Reserve = () => {
-    async function handleClick(event: any) {
-        routeModule
-      }
-  return (
-    <div className='text-base-100 right-2 mx-auto absolute'>
-        <button onClick={handleClick}>Make a Reservation!</button>
-    </div>
-  )
-}
-
-export default Reserve

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

@@ -4,7 +4,7 @@ import Image from "next/image";
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex flex-col relative justify-center items-center ">
-      <div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
+      <div className="flex relative -z-10 pt-40 w-full h-[400px] overflow-hidden">
         <Image
           src="/IMG_2431.jpg"
           alt="nav image"

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

@@ -0,0 +1,187 @@
+import React from "react";
+import Image from "next/image";
+
+const page = () => {
+  return (
+    <div className="flex flex-col relative justify-center items-center">
+      <div className="flex relative -z-10 pt-40 w-full 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="">Reserve</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col bg-paintbg w-full items-center justify-center py-8 px-36">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
+          soluta numquam labore maxime voluptates, non accusamus dolor aut
+          dolore quos porro doloribus inventore cumque architecto nobis! Vitae
+          earum a minus.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default page;