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

import Title from './UI/Title';

const Hero = () => {
    return (
        <section className={'bg-[#F7F7FF] h-[873px]'}>
            <div className="container mx-auto flex flex-col items-center">
                <Title className='mt-[40px]' subtitle='Получите комплексное обслуживание для устойчивого развития вашего бизнеса в новых условиях' h1>Максимизируйте вашу финансовую эффективность с профессиональными <span className='text-red-500'>бухгалтерскими услугами!</span></Title>
                <div className="w-[1130px] h-[550px] mt-12 relative before:absolute before:w-full before:h-full before:bg-red-500 before:rounded-[30px] before:-bottom-5 before:-right-5 before:opacity-50">
                    <Link to='/calculator' className="flex flex-col items-center justify-center text-white w-[170px] h-[170px] bg-red-500 hover:bg-red-600 transition-all duration-200 rounded-full absolute z-10 top-0 right-12 -translate-y-1/2">
                        <p className='uppercase mb-[5px] text-lg font-bold'>Калькулятор</p>
                        <p className='text-base font-medium'>Сколько это стоит ?</p>
                    </Link>
                    <StaticImage src="../images/index-hero.jpg" alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                </div>
            </div>
        </section>
    )
}

export default Hero;