140 lines
6.1 KiB
TypeScript
140 lines
6.1 KiB
TypeScript
'use client'
|
|
|
|
// import "slick-carousel/slick/slick.css";
|
|
// import "slick-carousel/slick/slick-theme.css";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { FreeMode, Pagination } from "swiper/modules";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/free-mode";
|
|
|
|
import Image from "next/image";
|
|
|
|
const images = [
|
|
{
|
|
id: 1,
|
|
url: "/vm1.jpg",
|
|
title: "Image 1",
|
|
description: "Description of image 1"
|
|
},
|
|
{
|
|
id: 2,
|
|
url: "/vm2.jpg",
|
|
title: "Image 2",
|
|
description: "Description of image 2"
|
|
},
|
|
{
|
|
id: 3,
|
|
url: "/vm3.jpg",
|
|
title: "Image 3",
|
|
description: "Description of image 3"
|
|
}
|
|
];
|
|
|
|
export default function VisiMisi() {
|
|
return (
|
|
<div className='flex flex-wrap lg:m-10 m-5'>
|
|
<div className="flex-none lg:w-1/4 w-full">
|
|
<div className='p-3 text-green-600'>
|
|
<p className='text-3xl font-bold'>Visi & Misi</p>
|
|
<p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
|
|
</div>
|
|
<div>
|
|
<Image
|
|
height={400}
|
|
width={400}
|
|
src='/frame.png'
|
|
alt='banner'
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="lg:grow flex-none">
|
|
<div className="lg:w-full w-[92vw]">
|
|
{/* <div className='ml-5 lg:mt-52 w-4/5 lg:w-full mt-10 flex gap-5 my-auto lg:justify-center justify-left overflow-x-scroll'>
|
|
<Card className="flex-none h-[420px] w-[300px]">
|
|
<CardBody>
|
|
<Image
|
|
alt="vm"
|
|
className="object-cover"
|
|
src="/vm1.jpg"
|
|
fill={true}
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="flex-none h-[420px] w-[300px]">
|
|
<CardBody>
|
|
<Image
|
|
alt="vm"
|
|
className="object-cover"
|
|
src="/vm2.jpg"
|
|
fill={true}
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="flex-none h-[420px] w-[300px]">
|
|
<CardBody>
|
|
<Image
|
|
alt="vm"
|
|
className="object-cover"
|
|
src="/vm3.jpg"
|
|
fill={true}
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
</div> */}
|
|
<div className="flex items-center justify-center mt-6 lg:mt-44">
|
|
<Swiper
|
|
breakpoints={{
|
|
450: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 5,
|
|
},
|
|
700: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 15,
|
|
},
|
|
900: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 15,
|
|
},
|
|
}}
|
|
freeMode={true}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
modules={[FreeMode, Pagination]}
|
|
className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
|
|
>
|
|
{images.map((item) => (
|
|
<SwiperSlide key={item.title}>
|
|
<div className="flex flex-col gap-6 mb-20 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[300px] w-full lg:h-[400px] lg:w-[300px] overflow-hidden cursor-pointer">
|
|
{/* <div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{ backgroundImage: `url(${item.url})` }}
|
|
/> */}
|
|
<Image
|
|
alt="vm"
|
|
className="object-cover"
|
|
src={item.url}
|
|
fill={true}
|
|
/>
|
|
<div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-50" />
|
|
<div className="relative flex flex-col gap-3">
|
|
{/* <item.icon className="text-blue-600 group-hover:text-blue-400 w-[32px] h-[32px]" /> */}
|
|
<h1 className="text-xl lg:text-2xl">{item.title} </h1>
|
|
<p className="lg:text-[18px]">{item.description} </p>
|
|
{/* </div>
|
|
<RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" /> */}
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|