import React from 'react'
import { StaticImage } from 'gatsby-plugin-image';

import Title from '../UI/Title';
import Button from '../UI/Button';

const Workers = () => {
    return (
        <section className="py-[90px] bg-[#F7F7FF]">
            <div className="container mx-auto">
                <Title titleClass='max-w-[500px]' className='mb-[70px]' subtitle='Максимизируйте свои налоговые преимущества'>Доверьтесь опытным специалистам</Title>
                <div className="flex justify-between items-center">
                    <div className="w-[670px] h-[456px] relative">
                        <div className="flex flex-col items-center justify-center text-white w-[190px] h-[190px] bg-red-500 hover:bg-red-600 transition-all duration-200 rounded-full absolute z-10 top-5 right-5 -translate-y-1/2 translate-x-1/2">
                            <p className='uppercase text-center text-lg font-medium'>Мы знаем более<br/><b className='font-semibold text-[28px]'>1800</b><br/> законов РФ</p>
                        </div>
                        <StaticImage src="../../images/campaign-creators.jpg"  alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                    </div>
                    <div className="flex flex-col items-start max-w-[520px] mr-6">
                        <p className='text-slate-600 font-medium text-xl leading-normal mb-7'>Мы практикуем индивидуальный подход к каждому клиенту. Данное правило является основополагающим в нашей работе с заказчиками. Мы полностью вникаем в суть проблем своего клиента, думаем вместе с ним, анализируем особенности его бизнеса.</p>
                        <p className='text-slate-600 font-medium text-xl leading-normal mb-[30px]'>Это позволяет нам понять настоящие причины возникновения сложностей и подыскать оптимальные способы решения</p>
                        <Button>Оставить заявку</Button>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Workers;