From 4802cd0d9b59c45e9cf57d2cabeca6c615c40d22 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Tue, 21 Nov 2023 04:21:03 -0800
Subject: [PATCH] fixed height of photos

---
 Websites/jefes-nextjs/app/page.tsx | 69 +++++++++++++++---------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/Websites/jefes-nextjs/app/page.tsx b/Websites/jefes-nextjs/app/page.tsx
index 76b9877..2bb77af 100644
--- a/Websites/jefes-nextjs/app/page.tsx
+++ b/Websites/jefes-nextjs/app/page.tsx
@@ -6,6 +6,7 @@ import Reserve from "./components/NavBar/reserveButton";
 import MenuButton from "./menuButton";
 import "./home.css";
 import GoogleMap from "@/components/Maps/MapComponent";
+import { cn } from "../lib/utils";
 
 export default function Home() {
   return (
@@ -50,7 +51,7 @@ export default function Home() {
         {/* Section 1 */}
         <div className="flex md:flex-row flex-col md:h-[60svh] px-[24svw] w-full">
           {/* Text-side */}
-          <div className="flex flex-col w-full gap-6">
+          <div className="flex flex-col w-full gap-6 pt-14">
             <h2 className="text-red-700 text-4xl font-bold ">
               The heart of Mexico here in Broken Arrow!
             </h2>
@@ -67,44 +68,45 @@ export default function Home() {
             </div>
           </div>
           {/* Images side  */}
-          <div className="flex flex-col section__images w-full relative">
-            <div className="Images w-full relative h-1/2 ">
-              <Image
-                src="/IMG_2431.jpg"
-                alt="food1 image"
-                priority
-                fill
-                style={{
-                  width: "100%",
-                  objectPosition: "left",
-                  objectFit: "contain",
-                }}
-                quality={100}
-                className=""
-              />
+          <div className="flex flex-col section__images w-full relative space-y-4">
+            <div className="Images w-full h-1/2 relative overflow-hidden">
+              <div className="relative w-full h-[130%] xl:h-[135%]">
+                <Image
+                  src="/IMG_2431.jpg"
+                  alt="food1 image"
+                  priority
+                  fill
+                  style={{
+                    objectPosition: "center",
+                    objectFit: "contain",
+                  }}
+                  quality={100}
+                  className="inset-0"
+                />
+              </div>
             </div>
-            <div className="bg-slate-600 w-full relative h-1/2 flex flex-row">
-              <div className="">
-                {/* <Image
+            <div className=" w-full relative h-1/2 flex space-x-4">
+              <div className="w-full h-full relative  ">
+                <Image
                   src="/IMG_2429.JPG"
                   alt="food2 image"
                   priority
                   fill
-                  style={{ objectFit: "contain", objectPosition: "center" }}
+                  style={{ objectFit: "cover", objectPosition: "center" }}
                   quality={100}
                   className=""
-                /> */}
+                />
               </div>
-              <div className="">
-                {/* <Image
+              <div className="flex w-full h-full relative ">
+                <Image
                   src="/food02.webp"
                   alt="food3 image"
                   priority
                   fill
-                  style={{ objectFit: "contain", objectPosition: "center" }}
+                  style={{ objectFit: "cover", objectPosition: "center" }}
                   quality={100}
                   className=""
-                /> */}
+                />
               </div>
             </div>
           </div>
@@ -173,7 +175,7 @@ export default function Home() {
           </div>
           {/* Images side  */}
           <div className="flex  w-full relative">
-            <div className="Images w-full relative md:h-[80%] h-[40svh]">
+            <div className="Images w-full relative md:h-[90%] h-[40svh]">
               <Image
                 src="/1577mobile.webp"
                 alt="food1 image"
@@ -201,7 +203,6 @@ export default function Home() {
                 priority
                 fill
                 style={{
-                  width: "100%",
                   objectPosition: "center",
                   objectFit: "contain",
                 }}
@@ -246,8 +247,8 @@ export default function Home() {
           </div>
         </div>
 
-        {/* Section 3 */}
-        <div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[24svw] py-4">
+        {/* Section 5 */}
+        <div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[22svw] py-4">
           {/* Text-side */}
           <div className=" flex flex-col leading-relaxed gap-y-6 relative w-full text-center items-center justify-center md:text-start md:items-start xl:items-end md:justify-start pr-6">
             <h2 className="text-red-700 text-4xl font-bold xl:pr-10 pr-0">
@@ -265,10 +266,10 @@ export default function Home() {
             </div>
           </div>
           {/* Images side  */}
-          <div className="flex  w-full relative">
-            <div className="Images w-[80%] relative md:h-[80%] h-[40svh]">
+          <div className="flex  w-full relative ">
+            <div className="Images w-full relative md:h-[90%] h-[40svh]">
               <Image
-                src="/1577mobile.webp"
+                src="/party01.jpg"
                 alt="food1 image"
                 priority
                 fill
@@ -277,14 +278,14 @@ export default function Home() {
                   objectFit: "contain",
                 }}
                 quality={100}
-                className=""
+                className="pl-10"
               />
             </div>
           </div>
         </div>
         <div className="w-full h-[80svh] bg-blue-300">
           {/* <GoogleReviews /> */}
-          <GoogleMap />
+          {/* <GoogleMap /> */}
         </div>
         {/* <div className="flex flex-col w-full h-[180vh]">
           <EmblaCarousel />