'use client'
import Image from 'next/image';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';

export default function Banner() {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3
    };

    return (
        <div>
            <div className='relative h-screen'>
                <Image
                    src='/banner2.png'
                    alt='banner'
                    fill={true}
                />
            </div>
            {/* <div className='space-y-3'>
                <div className='flex h-[231px] gap-3'>
                    <div className='w-[45%]'>
                        1
                    </div>
                    <div className='w-[15%]'>2</div>
                    <div className='w-[15%]'>3</div>
                    <div className='w-[25%]'>4</div>
                </div>
                <div className='flex h-[231px] gap-3'>
                    <div className='w-[25%]'>1</div>
                    <div className='w-[15%]'>2</div>
                    <div className='w-[35%]'>3</div>
                    <div className='w-[25%]'>4</div>
                </div>
                <div className='flex h-[231px] gap-3'>
                    <div className='w-[24%]'>1</div>
                    <div className='w-[18%]'>2</div>
                    <div className='w-[33%]'>3</div>
                    <div className='w-[25%]'>4</div>
                </div>
            </div> */}
            {/* <div className='mx-10'> */}

            {/* </div> */}
        </div>
    )
}