import BlogItem from '@/components/BlogItem'
import Image from 'next/image'
import { FC } from 'react'

const HeroSection: FC = () => {
    return (
        <div>
            <div className='relative rounded-4xl overflow-hidden'>
                <Image
                    src={'/images/banner.webp'}
                    alt='banner'
                    width={1920}
                    height={1080}
                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[210px] min-h-[350px]'
                />

                <div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
                    <h4 className='font-bold xl:text-base text-sm'>
                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                    </h4>

                    <p className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
                    </p>
                </div>
            </div>

            <div className='flex xl:flex-row flex-col gap-8 mt-10'>
                <BlogItem />
                <BlogItem />
                <BlogItem />
            </div>
        </div>
    )
}

export default HeroSection