ImAlpha/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed height of photos

Browse Source
This commit is contained in:
Jacob Delgado 2023-11-21 04:21:03 -08:00
parent 48f1f5e5b7
commit 4802cd0d9b
1 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
Websites/jefes-nextjs/app/page.tsx
View File

@ -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 />