web-humas-fe/components/landing/visi-misi.tsx

60 lines
2.3 KiB
TypeScript

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { Card, CardBody } from "@nextui-org/react";
import Image from "next/image";
export default function VisiMisi() {
return (
<div className='h-screen m-7'>
<div className='h-1/3 w-1/4 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 className='h-2/3 flex gap-3 '>
<div className='w-1/4 my-auto'>
<Image
height={400}
width={400}
src='/frame.png'
alt='banner'
/>
</div>
<div className='w-3/4 flex gap-5 my-auto justify-center'>
<Card className="h-[420px] w-[300px]">
<CardBody>
<Image
alt="vm"
className="object-cover"
src="/vm1.jpg"
fill={true}
/>
</CardBody>
</Card>
<Card className="h-[420px] w-[300px]">
<CardBody>
<Image
alt="vm"
className="object-cover"
src="/vm2.jpg"
fill={true}
/>
</CardBody>
</Card>
<Card className="h-[420px] w-[300px]">
<CardBody>
<Image
alt="vm"
className="object-cover"
src="/vm3.jpg"
fill={true}
/>
</CardBody>
</Card>
</div>
</div>
</div>
)
}