added new sections and working on maps

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

@@ -155,7 +155,7 @@ const NavBar = () => {
       <div
         className={
           menu_open
-            ? "fixed right-0 top-0 w-[65%] sm:hidden h-screen bg-[#18191a] p-10 ease-in duration-300 z-10"
+            ? "fixed right-0 top-0 w-[65%] sm:hidden h-screen bg-[#18191a] p-10 ease-in duration-300 z-90"
             : "fixed right-[-100%] top-0 p-10 ease-in duration-500"
         }
       >

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

@@ -7,7 +7,7 @@ const Reserve = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button className="xl:text-lg  bg-red-800 hover:bg-slate-600">
+        <Button size='sm' className="xl:text-lg  bg-red-800 hover:bg-slate-600 text-xs">
           <span className="flex flex-row">
             <span className="flex flex-row">ORDER ONLINE</span>
           </span>
@@ -20,8 +20,8 @@ const Reserve = () => {
           />
           <Image
             src="/fork.svg"
-            width={25}
+            width={20}
-            height={25}
+            height={20}
             alt="fork"
             className="pl-2 xl:hidden block"
           />

Websites/jefes-nextjs/app/components/Reviews/google_reviews.tsx

@@ -0,0 +1,43 @@
+"use client";
+import React, { useState, useEffect } from "react";
+
+const GoogleReviews = ({ apiKey, placeId}:any) => {
+  const [reviews, setReviews] = useState<any>([]);
+
+  useEffect(() => {
+    const fetchReviews = async () => {
+      try {
+        const response = await fetch(
+          `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&fields=name,reviews&key=${apiKey}`
+        );
+        const data = await response.json();
+
+        if (data.result && data.result.reviews) {
+          setReviews(data.result.reviews);
+        }
+      } catch (error) {
+        console.error("Error fetching reviews:", error);
+      }
+    };
+
+    fetchReviews();
+  }, [apiKey, placeId]);
+
+  return (
+    <div>
+      {reviews.length > 0 ? (
+        <ul>
+          {reviews.map((review:any) => (
+            <li key={review.time}>
+              <strong>{review.author_name}</strong>: {review.text}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No reviews available.</p>
+      )}
+    </div>
+  );
+};
+
+export default GoogleReviews;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import GoogleReviews from './google_reviews';
+
+const App = () => {
+  const apiKey = 'AIzaSyDO7qlVQWRJGsW7dX1D9DFEMlTO4YsKBLI'; // Replace with your Google API key
+  const placeId = 'ChIJQ-7Uc0BitocRQZASTWUyN04'; // Replace with the Google Place ID of the location
+
+  return (
+    <div>
+      <h1>Google Reviews</h1>
+      <GoogleReviews apiKey={apiKey} placeId={placeId} />
+    </div>
+  );
+};
+
+export default App;

Websites/jefes-nextjs/app/home.css

@@ -0,0 +1,35 @@
+.content__section{
+    display: flex;
+    flex-direction: row;
+}
+.section__text{
+    display: flex;
+    flex-direction: column;
+    align-items: right;
+    text-align: left;
+    max-width: 50%;
+    padding-left: 10svw;
+    font-style: bold;
+    font-size: x-large;
+    line-height: 1.625;
+    margin-top: 4rem;
+}
+.section__images{
+    margin-top: 4rem;
+    align-items: left;
+    max-width: 50%;
+}
+
+.section__three{
+    display: flex;
+    flex-direction: column;
+    align-items: right;
+    text-align: left;
+    padding-left: 10svw;
+    font-style: bold;
+    font-size: x-large;
+    line-height: 1.625;
+}
+.Images__content{
+    z-index: -10;
+}

Websites/jefes-nextjs/app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
             alt="Logo"
             className="hidden md:block absolute -z-10"
           /> */}
-        <main className="bg-[#EEEEEE]">{children}</main>
+        <main className="bg-[beige]">{children}</main>
       </body>
     </html>
   );

Websites/jefes-nextjs/app/page.tsx

@@ -1,8 +1,14 @@
+/* eslint-disable react/no-unescaped-entities */
 import Link from "next/link";
 import Image from "next/image";
 import { EmblaCarousel } from "./carousel";
 import Reserve from "./components/NavBar/reserveButton";
 import MenuButton from "./menuButton";
+import "./home.css";
+import GoogleReviews from "./components/Reviews/google_reviews";
+import MapComponent from "@/components/Maps/MapComponent";
+import GoogleMaps from "./components/Maps/page";
+import Map from "@googlemaps/react-wrapper";
 
 export default function Home() {
   return (
@@ -43,14 +49,15 @@ export default function Home() {
             </div>
           </div>
         </div>
+
         {/* Section 1 */}
-        <div className="flex flex-row h-[95svh] px-60 w-full leading-relaxed py-11 space-x-8">
+        <div className="flex md:flex-row flex-col md:h-[60svh] px-[24svw] w-full">
           {/* Text-side */}
-          <div className="flex flex-col text-start gap-8 max-w-[650px]">
+          <div className="flex flex-col w-full gap-6">
-            <h2 className="text-red-800 text-4xl font-bold ">
+            <h2 className="text-red-700 text-4xl font-bold ">
               The heart of Mexico here in Broken Arrow!
             </h2>
-            <div className="flex flex-col text-start text-2xl">
+            <div className="text-xl">
               <p>
                 Jefe's Mexican cocina y cantina is a family owned authentic
                 mexican restaurant that provides a variety of different dishes
@@ -63,47 +70,236 @@ export default function Home() {
             </div>
           </div>
           {/* Images side  */}
-          <div className="flex flex-col relative w-full gap-4">
+          <div className="flex flex-col section__images w-full relative">
-            <div className="flex flex-col relative w-full h-[35svh] overflow-hidden">
+            <div className="Images w-full relative h-1/2 ">
               <Image
                 src="/IMG_2431.jpg"
                 alt="food1 image"
                 priority
                 fill
-                style={{ objectFit: "cover", objectPosition: "top" }}
+                style={{
+                  width: "100%",
+                  objectPosition: "left",
+                  objectFit: "contain",
+                }}
                 quality={100}
                 className=""
               />
             </div>
-            <div className="flex flex-row relative h-1/2 gap-4">
+            <div className="bg-slate-600 w-full relative h-1/2 flex flex-row">
-              <div className="flex w-1/2 h-[25svh] relative">
+              <div className="">
-                <Image
+                {/* <Image
                   src="/IMG_2429.JPG"
                   alt="food2 image"
                   priority
                   fill
-                  style={{ objectFit: "cover", objectPosition: "center" }}
+                  style={{ objectFit: "contain", objectPosition: "center" }}
                   quality={100}
                   className=""
-                />
+                /> */}
               </div>
-              <div className="flex w-1/2 h-[25svh] relative">
+              <div className="">
-                <Image
+                {/* <Image
                   src="/food02.webp"
                   alt="food3 image"
                   priority
                   fill
-                  style={{ objectFit: "cover", objectPosition: "center" }}
+                  style={{ objectFit: "contain", objectPosition: "center" }}
                   quality={100}
                   className=""
-                />
+                /> */}
               </div>
             </div>
           </div>
         </div>
-        <div className="flex flex-col w-full h-[180vh]">
+
-          {/* <EmblaCarousel /> */}
+        {/* Section 2 */}
+        <div className="flex w-full h-[40svh] relative">
+          <div className="relative w-full">
+            <Image
+              src="/navheader.png"
+              alt="food3 image"
+              priority
+              fill
+              style={{ objectFit: "cover", objectPosition: "center" }}
+              quality={100}
+              className="brightness-[25%] -z-90"
+            />
+            <div className="absolute text-white w-full h-[40svh] text-center top-20 text-2xl font-semibold font-mono overflow-hidden">
+              <h2 className="">Authentic Mexican Cousine</h2>
+            </div>
+            <div className="absolute text-white  w-full h-[40svh] text-center top-28 text-2xl italic font-mono overflow-hidden">
+              <h2 className=" font-sans">Freshly Cooked</h2>
+            </div>
+            <div className="absolute text-white  w-full h-[40svh] text-center top-40 text-2xl overflow-hidden">
+              <div className="flex items-center justify-center">
+                <div className="left-[30%] top-4 w-[150px] h-0.5 bg-white"></div>
+                <div className="relative w-[100px] h-10">
+                  <Image
+                    src="/logo.svg"
+                    fill
+                    style={{ objectFit: "contain", objectPosition: "center" }}
+                    quality={100}
+                    alt="Logo"
+                    className=""
+                  />
+                </div>
+                <div className="w-[150px] right-[30%] top-4 text-center h-0.5 bg-white my-[10px]"></div>
+              </div>
+            </div>
+            <div className="absolute text-white left-[39svw] w-[24svw] h-[40svh] text-left top-52 text-xs md:text-base lg:text-lg xl:text-xl font-bold font-mono overflow-hidden">
+              <p>
+                We pride ourselves with bringing the best experience to our
+                customers, always delivering a freshly made meal any time of the
+                day!
+              </p>
+            </div>
+          </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] space-x-6 py-10">
+          {/* 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">
+              The Best Drinks in Oklahoma!
+            </h2>
+            <div className="w-[70%] md:w-[28svw]">
+              <p className="lg:text-xl text-base lg:font-normal font-semibold">
+                Jefe's is known for our amazing bar counter and attentive
+                customer service. We want each and every one of our customers to
+                have a great time no matter the occasion. Because of our great
+                selection of alcoholic drinks, we know you’ll be more than happy
+                with our beverages.
+              </p>
+            </div>
+          </div>
+          {/* Images side  */}
+          <div className="flex  w-full relative">
+            <div className="Images w-full relative md:h-[80%] h-[40svh]">
+              <Image
+                src="/1577mobile.webp"
+                alt="food1 image"
+                priority
+                fill
+                style={{
+                  width: "100%",
+                  objectPosition: "center",
+                  objectFit: "contain",
+                }}
+                quality={100}
+                className=""
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Section 4 */}
+        <div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[24svw] space-x-6 py-4">
+          {/* Images side desktop */}
+          <div className="w-full hidden md:flex relative ">
+            <div className="Images w-[80%] relative md:h-[80%] h-[40svh]">
+              <Image
+                src="/img05.webp"
+                alt="food1 image"
+                priority
+                fill
+                style={{
+                  width: "100%",
+                  objectPosition: "center",
+                  objectFit: "contain",
+                }}
+                quality={100}
+                className=""
+              />
+            </div>
+          </div>
+          {/* Text-side d*/}
+          <div className="flex flex-col  leading-relaxed gap-y-6 relative md:w-1/2 w-full text-center items-center justify-center md:text-start md:items-start md:justify-start">
+            <div>
+              <h2 className="text-red-700 text-4xl font-bold ">
+                Authentic Cuisine from Mexico
+              </h2>
+            </div>
+            <div className="w-[70%] md:w-[29svw]">
+              <p className="lg:text-xl text-base lg:font-normal font-semibold">
+                Jefe's is known for our amazing bar counter and attentive
+                customer service. We want each and every one of our customers to
+                have a great time no matter the occasion. Because of our great
+                selection of alcoholic drinks, we know you’ll be more than happy
+                with our beverages.
+              </p>
+            </div>
+          </div>
+          {/* Images side mobile */}
+          <div className="flex w-full md:hidden">
+            <div className="Images w-full relative h-[40svh] ">
+              <Image
+                src="/img05.webp"
+                alt="food1 image"
+                priority
+                fill
+                style={{
+                  width: "100%",
+                  objectPosition: "center",
+                  objectFit: "contain",
+                }}
+                quality={100}
+                className=""
+              />
+            </div>
+          </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">
+          {/* 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">
+              Unbeatable Customer Service
+            </h2>
+            <div className="w-[70%] md:w-[28svw]">
+              <p className="lg:text-xl text-base lg:font-normal font-semibold">
+                We have a fantastic selection of Mexican food. We want customers
+                to have the time of their life and that is why we pair our
+                amazing menu with excellent service for a combination that is
+                sure to satisfy. Whether you’re here for a special occasion or
+                you’re just hungry, we aim to deliver the best service every
+                time.
+              </p>
+            </div>
+          </div>
+          {/* Images side  */}
+          <div className="flex  w-full relative">
+            <div className="Images w-[80%] relative md:h-[80%] h-[40svh]">
+              <Image
+                src="/1577mobile.webp"
+                alt="food1 image"
+                priority
+                fill
+                style={{
+                  width: "100%",
+                  objectPosition: "center",
+                  objectFit: "contain",
+                }}
+                quality={100}
+                className=""
+              />
+            </div>
+          </div>
+        </div>
+        <div className="w-full h-[80svh] bg-blue-300">
+          <GoogleReviews />
+          <GoogleMaps />
+          <Map
+            apiKey="AIzaSyDO7qlVQWRJGsW7dX1D9DFEMlTO4YsKBLI"
+            defaultZoom={8}
+            defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
+          />
+        </div>
+        {/* <div className="flex flex-col w-full h-[180vh]">
+          <EmblaCarousel />
+        </div> */}
       </div>
     </main>
   );

Websites/jefes-nextjs/components/Maps/MapComponent.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '400px',
+  height: '400px'
+};
+
+const center = {
+  lat: -3.745,
+  lng: -38.523
+};
+
+function MyComponent() {
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: "YOUR_API_KEY"
+  })
+
+  const [map, setMap] = React.useState(null)
+
+  const onLoad = React.useCallback(function callback(map) {
+    // This is just an example of getting and using the map instance!!! don't just blindly copy!
+    const bounds = new window.google.maps.LatLngBounds(center);
+    map.fitBounds(bounds);
+
+    setMap(map)
+  }, [])
+
+  const onUnmount = React.useCallback(function callback(map) {
+    setMap(null)
+  }, [])
+
+  return isLoaded ? (
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={10}
+        onLoad={onLoad}
+        onUnmount={onUnmount}
+      >
+        { /* Child components, such as markers, info windows, etc. */ }
+        <></>
+      </GoogleMap>
+  ) : <></>
+}
+
+export default React.memo(MyComponent)