fixed x-axis spacing

This commit is contained in:
Jacob Delgado 2023-11-14 08:28:04 -08:00
parent cf04f158ec
commit 44a363922d
6 changed files with 191 additions and 30 deletions

View File

@ -5,7 +5,7 @@ import Image from "next/image";
const AboutUs = () => {
return (
<div className="flex flex-col relative justify-center items-center ">
<div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
<div className="flex relative -z-10 pt-40 w-full h-[400px] overflow-hidden">
<Image
src="/IMG_2431.jpg"
alt="nav image"

View File

@ -33,10 +33,10 @@ const NavBar = () => {
// Create an array to hold the list items
const links2 = [
{ label: "ABOUT", href: "/about-us" },
{ label: "REVIEWS", href: "/reviews" },
// { label: "REVIEWS", href: "/reviews" },
{ label: "CONTACT", href: "/contact" },
// { label: "Dashboard", href: "/dashboard" },
// { label: "RESERVE", href: "/reservations" },
{ label: "RESERVE", href: "/reservations" },
// { label: "Issues", href: "/issues" },
];

View File

@ -1,9 +0,0 @@
import React from 'react'
const Reservation = () => {
return (
<div>reservation</div>
)
}
export default Reservation

View File

@ -1,17 +0,0 @@
"use client";
import { routeModule } from 'next/dist/build/templates/app-page';
import React from 'react'
const Reserve = () => {
async function handleClick(event: any) {
routeModule
}
return (
<div className='text-base-100 right-2 mx-auto absolute'>
<button onClick={handleClick}>Make a Reservation!</button>
</div>
)
}
export default Reserve

View File

@ -4,7 +4,7 @@ import Image from "next/image";
const layout = ({ children }: { children: React.ReactNode }) => {
return (
<div className="flex flex-col relative justify-center items-center ">
<div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
<div className="flex relative -z-10 pt-40 w-full h-[400px] overflow-hidden">
<Image
src="/IMG_2431.jpg"
alt="nav image"

View File

@ -0,0 +1,187 @@
import React from "react";
import Image from "next/image";
const page = () => {
return (
<div className="flex flex-col relative justify-center items-center">
<div className="flex relative -z-10 pt-40 w-full h-[400px] overflow-hidden">
<Image
src="/IMG_2431.jpg"
alt="nav image"
priority
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="brightness-[20%] "
/>
<div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl z-10">
<div className="p-6 ">
<p className="py-4">
<span className="">Reserve</span>
</p>
</div>
</div>
</div>
<div className="flex flex-col bg-paintbg w-full items-center justify-center py-8 px-36">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente,
soluta numquam labore maxime voluptates, non accusamus dolor aut
dolore quos porro doloribus inventore cumque architecto nobis! Vitae
earum a minus.
</p>
</div>
</div>
);
};
export default page;