added new sections and working on maps
This commit is contained in:
parent
a9e7298778
commit
75c5546d55
@ -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"
|
||||
}
|
||||
>
|
||||
|
||||
@ -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}
|
||||
height={25}
|
||||
width={20}
|
||||
height={20}
|
||||
alt="fork"
|
||||
className="pl-2 xl:hidden block"
|
||||
/>
|
||||
|
||||
@ -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;
|
||||
16
Websites/jefes-nextjs/app/components/Reviews/page.tsx
Normal file
16
Websites/jefes-nextjs/app/components/Reviews/page.tsx
Normal file
@ -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;
|
||||
35
Websites/jefes-nextjs/app/home.css
Normal file
35
Websites/jefes-nextjs/app/home.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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]">
|
||||
<h2 className="text-red-800 text-4xl font-bold ">
|
||||
<div className="flex flex-col w-full gap-6">
|
||||
<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 relative w-full h-[35svh] overflow-hidden">
|
||||
<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={{ 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="flex w-1/2 h-[25svh] relative">
|
||||
<Image
|
||||
<div className="bg-slate-600 w-full relative h-1/2 flex flex-row">
|
||||
<div className="">
|
||||
{/* <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">
|
||||
<Image
|
||||
<div className="">
|
||||
{/* <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>
|
||||
);
|
||||
|
||||
48
Websites/jefes-nextjs/components/Maps/MapComponent.tsx
Normal file
48
Websites/jefes-nextjs/components/Maps/MapComponent.tsx
Normal file
@ -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)
|
||||
Loading…
Reference in New Issue
Block a user