web-humas-fe/components/landing/banner.tsx

52 lines
1.6 KiB
TypeScript

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