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

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>
    )
}