filled empty pages

Websites/jefes-nextjs/app/contact/form.tsx

@@ -14,19 +14,19 @@ const Form = () => {
     console.log(data);
   }
   return (
-    <div className="flex mx-auto justify-center text-2xl p-4 max-w2xl text-secondary">
+    <div className="flex mx-auto justify-center text-2xl p-4 max-w2xl text-black">
       <form onSubmit={handleSubmit}>
         <div className="w-full flex flex-col my-4">
           <label className="font-bold" htmlFor="name">
             Name
           </label>
-          <input type="text" minLength={3} autoComplete="off" id="name" />
+          <input type="text" minLength={3} autoComplete="off" id="name" className="bg-gray-600" />
         </div>
         <div className="w-full flex flex-col my-4">
             <label htmlFor="email">Email</label>
-            <input type="text" minLength={4} autoComplete="off" id="email" />
+            <input type="text" minLength={4} autoComplete="off" id="email" className="bg-gray-600" />
         </div>
-        <textarea id="message" rows={4} placeholder="How can we assist you?" className="flex flex-col my-4 p-10"></textarea>
+        <textarea id="message" rows={4} placeholder="How can we assist you?" className="flex flex-col my-4 p-10 bg-gray-600"></textarea>
         <button onSubmit={handleSubmit} className="flex flex-col">Submit</button>
         
       </form>

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

@@ -2,16 +2,37 @@ import React from "react";
 import { string } from "zod";
 import Form from "./form";
 import { Calendar } from "@/components/ui/calendar";
+import Image from "next/image";
 
 const contact = () => {
   return (
     <main>
-      <div className="flex flex-col mx-auto justify-center items-center text-2xl p-4 max-w2xl text-secondary"
+      <div className="flex flex-col relative justify-center items-center">
-      style={{backgroundImage: `url('/PaintBackground.webp')`, height: "auto"}}>
+      <div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
-        <h1>Contact Us</h1>
+        <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="">About Us</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col bg-gray-800 w-full">
+      <div>Contact Us</div>
         <Calendar />
         <Form />
       </div>
+        
+      </div>
       
     </main>
   );

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

@@ -66,7 +66,7 @@ const Gallery = () => {
       {/* <div className="">
         <EmblaCarousel />
       </div> */}
-      <div className="flex justify-center py-8">
+      <div className="flex justify-center py-8 bg-paintbg">
         <WSPGallery galleryImages={galleryImages} />
       </div>
     </div>

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

@@ -14,7 +14,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
           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="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>
@@ -23,7 +23,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
         </div>
       </div>
 
-      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12 bg-paintbg">{children}</div>
     </div>
   );
 };

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

@@ -4,7 +4,7 @@ import Image from "next/image";
 
 const menu = () => {
   return (
-    <div className="flex flex-col relative justify-center items-center">
+    <div className="flex flex-col relative justify-center items-center ">
       <div>
         <Appetizers />
       </div>

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

@@ -1,12 +1,185 @@
 import React from "react";
-import { cn } from "../../lib/utils";
+import Image from "next/image";
 
 const Reviews = () => {
   return (
-    <div className="flex flex-col relative bg-gray-800 h-[400px]">
+    <div className="flex flex-col relative justify-center items-center">
-      <div className="flex bg-paintbg">
+      <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="">Reviews</span>
+            </p>
+          </div>
         </div>
+      </div>
+      <div className="flex flex-col bg-paintbg w-full h-full items-center justify-center">
+        <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>
   );
 };