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