filled empty pages
This commit is contained in:
parent
bd4169b92f
commit
828a415eb2
@ -14,19 +14,19 @@ const Form = () => {
|
||||
console.log(data);
|
||||
}
|
||||
return (
|
||||
<div className="flex mx-auto justify-center text-2xl p-4 max-w2xl text-secondary">
|
||||
<div className="flex mx-auto justify-center text-2xl p-4 max-w2xl text-black">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="w-full flex flex-col my-4">
|
||||
<label className="font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<input type="text" minLength={3} autoComplete="off" id="name" />
|
||||
<input type="text" minLength={3} autoComplete="off" id="name" className="bg-gray-600" />
|
||||
</div>
|
||||
<div className="w-full flex flex-col my-4">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input type="text" minLength={4} autoComplete="off" id="email" />
|
||||
<input type="text" minLength={4} autoComplete="off" id="email" className="bg-gray-600" />
|
||||
</div>
|
||||
<textarea id="message" rows={4} placeholder="How can we assist you?" className="flex flex-col my-4 p-10"></textarea>
|
||||
<textarea id="message" rows={4} placeholder="How can we assist you?" className="flex flex-col my-4 p-10 bg-gray-600"></textarea>
|
||||
<button onSubmit={handleSubmit} className="flex flex-col">Submit</button>
|
||||
|
||||
</form>
|
||||
|
||||
@ -2,17 +2,38 @@ import React from "react";
|
||||
import { string } from "zod";
|
||||
import Form from "./form";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import Image from "next/image";
|
||||
|
||||
const contact = () => {
|
||||
return (
|
||||
<main>
|
||||
<div className="flex flex-col mx-auto justify-center items-center text-2xl p-4 max-w2xl text-secondary"
|
||||
style={{backgroundImage: `url('/PaintBackground.webp')`, height: "auto"}}>
|
||||
<h1>Contact Us</h1>
|
||||
<div className="flex flex-col relative justify-center items-center">
|
||||
<div className="flex relative -z-10 pt-40 w-[100vw] 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="">About Us</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col bg-gray-800 w-full">
|
||||
<div>Contact Us</div>
|
||||
<Calendar />
|
||||
<Form />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
@ -66,7 +66,7 @@ const Gallery = () => {
|
||||
{/* <div className="">
|
||||
<EmblaCarousel />
|
||||
</div> */}
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="flex justify-center py-8 bg-paintbg">
|
||||
<WSPGallery galleryImages={galleryImages} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||
<div className="flex-grow p-6 md:overflow-y-auto md:p-12 bg-paintbg">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,11 +1,184 @@
|
||||
import React from "react";
|
||||
import { cn } from "../../lib/utils";
|
||||
import Image from "next/image";
|
||||
|
||||
const Reviews = () => {
|
||||
return (
|
||||
<div className="flex flex-col relative bg-gray-800 h-[400px]">
|
||||
<div className="flex bg-paintbg">
|
||||
|
||||
<div className="flex flex-col relative justify-center items-center">
|
||||
<div className="flex relative -z-10 pt-40 w-[100vw] 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="">Reviews</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col bg-paintbg w-full h-full items-center justify-center">
|
||||
<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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user