import React from 'react'
import { StaticImage } from 'gatsby-plugin-image';
import Title from '../UI/Title';
import Button from '../UI/Button';

const Hero = () => {
    return (
        <section className={'bg-[#F7F7FF] pt-[70px] max-lg:pt-7 md:h-[1036px] xl:h-[760px] 2xl:h-[890px] max-sm:px-3 max-lg:px-6'}>
            <div className="container mx-auto flex flex-col items-center">
                <Title className='mb-0 max-md:mb-8 md:max-lg:mb-10' subtitle='Обеспечиваем надежный бизнес' h1>Надежный <span className='text-red-500'>партнер</span></Title>
                <div className="flex max-lg:flex-col justify-between items-center max-lg:items-start w-full">
                    <div className="flex flex-col items-start max-md:mb-10">
                        <div className="mb-10 max-md:mb-6 max-w-[462px] text-lg max-md:text-base leading-normal">
                            <h3 className='text-slate-800 font-bold mb-[20px] max-md:mb-3'>Надежность и спокойствие</h3>
                            <p className='text-slate-600 font-medium'>Наши специалисты гарантируютполный порядок в вашей бухгалтериии качественную поддержку во всехвозникающих вопросах. Простопозвоните нам и мы всерасскажем.</p>
                        </div>
                        <div className="mb-10 max-md:mb-6 max-w-[462px] text-lg max-md:text-base leading-normal">
                            <h3 className='text-slate-800 font-bold mb-[20px] max-md:mb-3'>Ответственность</h3>
                            <p className='text-slate-600 font-medium'>Наши специалисты гарантируютполный порядок в вашей бухгалтериии качественную поддержку во всехвозникающих вопросах. Простопозвоните нам и мы всерасскажем.</p>
                        </div>
                        <Button>Оставить заявку</Button>
                    </div>
                    <div className="w-[565px] max-lg:w-[360px] max-2xl:w-[475px] h-auto relative max-lg:self-center">
                        <div className="bg-red-500 w-[560px] h-[560px] max-2xl:w-[470px] max-2xl:h-[470px] max-lg:w-[300px] max-lg:h-[300px] rounded-full absolute"></div>
                        <StaticImage src="../../images/woman-account.png" quality='100' alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Hero;