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

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

            <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
                <div className='max-w-maxWidth w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
                    <p>داناک،</p>
                    <p className='xl:mt-5 font-bold'>تلفیق هنر و تکنولوژی</p>

                    <Button
                        className='xl:mt-12 mt-5 !w-fit px-10 bg-white !text-black'
                        label='درباره ی ما'
                    />
                </div>
            </div>
        </div>
    )
}

export default HeroSection