76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { useState } from "react";
|
|
import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
|
|
import { RxDotFilled } from "react-icons/rx";
|
|
import Image from "next/image";
|
|
import WSPGallery from "../components/WSPGallery/page";
|
|
|
|
const Gallery = () => {
|
|
const galleryImages = [
|
|
{
|
|
img: "/img01.webp",
|
|
},
|
|
{
|
|
img: "/fbimg02.webp",
|
|
},
|
|
{
|
|
img: "/food01.jpg",
|
|
},
|
|
{
|
|
img: "/food02.webp",
|
|
},
|
|
{
|
|
img: "/IMG_1114.webp",
|
|
},
|
|
{
|
|
img: "/IMG_2737.webp",
|
|
},
|
|
{
|
|
img: "/IMG_2749.webp",
|
|
},
|
|
{
|
|
img: "/IMG_2766.webp",
|
|
},
|
|
{
|
|
img: "/img05.webp",
|
|
},
|
|
{
|
|
img: "/img112.webp",
|
|
},
|
|
{
|
|
img: "/navheader.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col relative">
|
|
<div className="flex relative 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 absolute">
|
|
<div className="p-6 ">
|
|
<p className="py-4">
|
|
<span className="">GALLERY</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <div className="">
|
|
<EmblaCarousel />
|
|
</div> */}
|
|
<div className="flex justify-center py-8 bg-paintbg">
|
|
<WSPGallery galleryImages={galleryImages} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Gallery;
|