TalentTeam/src/components/Games/Games.jsx

import React, { useState } from 'react';
import RecGame from './RecGame';
import Game from './Game';
import { useStaticQuery, graphql } from "gatsby"

const Games = ({...props}) => {
    const images = useStaticQuery(graphql`
    query {
        bridge: file(relativePath: {eq: "games/bridge.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        challenge_accepted: file(relativePath: {eq: "games/challenge-accepted.webp"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        middleages_secrets: file(relativePath: {eq: "games/middleages-secrets.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        history_by_cards: file(relativePath: {eq: "games/history-by-cards.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        mansion_matilda_secrets: file(relativePath: {eq: "games/mansion-matilda-secrets.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        ei: file(relativePath: {eq: "games/ei.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        place_under_sun: file(relativePath: {eq: "games/place-under-sun.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        call_accepted: file(relativePath: {eq: "games/call-accepted.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240, jpgOptions: {progressive: true})
            }
        },
        eight_colors_delegation: file(relativePath: {eq: "games/8-colors-delegation.jpeg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, height: 240)
            }
        }
    }`);

    const [games] = useState([
        {slug: 'challenge-accepted', title: 'Вызов Принят', description: 'Частники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами.', img: images.challenge_accepted},
        {slug: 'bridge', title: 'Мост', description: 'Дает участникам практические уроки по эффективной работе в команде. Участники должны работать вместе, как единая организация, в индивидуальных командах и подгруппах, над строительством гигантской модели моста.', img: images.bridge},
        {slug: 'middleages-secrets', title: 'Секреты Средневековья', description: 'Командам предстоит проанализировать много важной информации, разгадать зашифрованные  коды , решить сложные головоломки и многое-многое другое.', img: images.middleages_secrets},
        {slug: 'history-by-cards', title: 'Нistory by cards', description: 'Цель игры заключается в том чтобы собрать правильную последовательность из зашифрованных карточек, которые вместе составляют единый логический  сюжет и головоломку.', img: images.history_by_cards},
        {slug: 'mansion-matilda-secrets', title: 'Тайны особняка "Матильда"', description: '7 игровых дней в ролевой  игре Тайны особняка "Матильда" участники занимаются разгадкой уникального преступления, и шансы на успех зависят от них самих. Минуты пролетают незаметно в поисках улик и вещдоков, которые ведут к разгадке... ', img: images.mansion_matilda_secrets},
        {slug: 'emotional-intelligence', title: 'Эмоциональный интеллект', description: 'Игровая цель – набрать как можно больше баллов и осознать степень развития собственного эмоционального интеллекта. Игра основана на подходе Йельского университета к трактовке понятия «Эмоциональный интеллект»', img: images.ei},
        {slug: 'place-under-sun', title: 'Место под солнцем', description: 'Несколько поколений 4 семейных династии получали прибыль и делили место среди самых уважаемых жителей города. Но прогресс заставляет бизнес меняться, рушить выстроенные связи и строить новые партнерства. Кто из них станет более влиятельным? Кто потеряет свои позиции и почему?', img: images.place_under_sun},
        {slug: '8-colors-delegation', title: '8 цветов делегирования', description: 'Деловая обучающая игра-тренажёр, которая познакомит с 7 уровнями передачи полномочий по модели Юргена Аппело (Jurgen Appelo, 2010г).', img: images.eight_colors_delegation}
    ]);

    return (
        <>
            <section {...props} className='py-32 max-md:py-16 max-md:px-3'>
                <div className="container mx-auto">
                    <div className="flex flex-col items-center mb-20 max-md:mb-10">
                        <h2 className='text-3xl max-md:text-2xl mb-6 font-semibold text-slate-800 text-center uppercase'>Бизнес-игры</h2>
                        <p className='text-center text-lg max-md:text-base max-w-4xl text-slate-700'>Бизнес игры прекрасно моделируют реальный процесс работы в интересной форме. Сотрудник или команда быстрее погружается в курс дела и учится находить решения самостоятельно. Такой способ помогает быстро усвоить большой объем новой информации. Также бизнес- игра является хорошим инструментом для оценки компетенций персонала. процессе игры можно оценить.</p>
                    </div>
                    <RecGame></RecGame>
                </div>            
            </section>
            <section className='py-32 max-md:py-16 max-md:px-3 bg-[#0E0808] max-sm:mb-0 -mb-14'>
                <div className="container mx-auto">
                    <h2 className='pb-20 max-md:pb-10 text-3xl max-md:text-2xl mb-1 font-semibold text-white text-center uppercase'>Другие игры</h2>
                    <div className="flex flex-wrap max-sm:flex-col">
                    {games.map(game=>
                            <Game title={game.title} description={game.description} img={game.img} key={game.slug} slug={game.slug}></Game>    
                        )}
                    </div>
                </div>            
            </section>
        </>    
    );
}

export default Games;