import React from "react";
import { StaticImage } from "gatsby-plugin-image";
import { AiOutlineClockCircle } from "react-icons/ai";

const Hero = () => {
    return (
        <section>
            <div className="mr-0 relative flex items-center bg-gray-50">
                <div className="ml-[calc(50%-768px)] z-10">
                    <h1 className="relative left-1/3 leading-tight text-7xl font-bold italic text-slate-800">Эмоциональный интеллект</h1>
                    <div className="absolute bottom-3 flex items-center">
                        <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineClockCircle/>: 2,5-3 часа</p>
                        <p><b>Доступные форматы:</b> онлайн</p>
                    </div>
                </div>
                <div className="basis-full h-[60vh]">
                    <StaticImage className='w-full h-[inherit]' src="../../../images/games/ei.jfif"></StaticImage>
                </div>  
            </div>
        </section>
    )
}

export default Hero;