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

const RichText = () => {
    return (
        <section className="py-[90px] max-md:py-9 max-sm:px-3 max-md:px-6 bg-white">
            <div className="container mx-auto">
                <Title titleClass='max-w-[450px]' className='mb-[70px] max-md:mb-8' subtitle='Мы работаем пока вы отдыхаете'>Профессонализм и ответственность</Title>
                <div className="flex justify-between items-center max-lg:items-start max-lg:flex-col">
                    <div className="w-[670px] max-lg:w-full max-sm:h-[300px] max-md:h-[400px] lg:max-xl:max-w-[550px] max-lg:h-[500px] h-[456px] relative max-lg:order-2">
                        <StaticImage src="../../images/professionalism.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] lg:max-xl:max-w-[400px] mr-6 max-lg:mr-0 max-lg:mb-14 max-lg:order-1">
                        <p className='text-slate-600 font-medium text-xl max-lg:text-base leading-normal mb-7 max-lg:mb-5'>Мы практикуем индивидуальный подход к каждому клиенту. Данное правило является основополагающим в нашей работе с заказчиками. Мы полностью вникаем в суть проблем своего клиента, думаем вместе с ним, анализируем особенности его бизнеса.</p>
                        <p className='text-slate-600 font-medium text-xl max-lg:text-base leading-normal mb-[30px] max-lg:mb-5'>Это позволяет нам понять настоящие причины возникновения сложностей и подыскать оптимальные способы решения</p>
                        <Button>Оставить заявку</Button>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default RichText;