TalentTeam/src/components/Games/GamePage/Hero.jsx

import React from "react";
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { AiOutlineClockCircle, AiOutlineTeam } from "react-icons/ai";

const Hero = ({title, img, time, members, formats}) => {
    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">{title}</h1>
                    <div className="absolute bottom-3 flex items-center last:[&>p]:!mr-0">
                        {time && <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
                        {members && <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineTeam/>: {members}</p>}
                        {formats && <p><b>Доступные форматы:</b> {formats}</p>}
                    </div>
                </div>
                <div className="basis-full h-[60vh]">
                    <GatsbyImage className='w-full h-[inherit]' image={getImage(img)} alt="logo" placeholder="none"/>
                </div>  
            </div>
        </section>
    )
}

export default Hero;