V pre0.3_3

README.md

@@ -10,10 +10,12 @@ Talent Team - разработка корпоративных мероприят
 #### V pre0.3
 - В раздел "Наша команда" добавлен еще 1 человек
 - Убрана кнопка "О компании" с Hero секции
-- Добавлена стриница для бизнес-игры "Эмоциональный интеллект"
+- Добавленны страницы для всех бизнес-игр
 - Переработан компонент Header и Footer так чтобы в меню для каждрй игры можно было создавать свои якорные ссылки
-- Изменен Hero компонент для страниц с играми так, чтобы у каждой игры можно было ставить свой заголовок, изображение и доп.информацию о игре.
-- Создана странница для игры Вызов принят "challenge-accepted" (не функциональна)
+- Изменен Hero компонент для страниц с играми так, чтобы у каждой игры можно было ставить свой заголовок, изображение и доп.информацию об игре.
+- Исправленно отображение длинной доп.информации об игре в Hero компоненте для страниц с играми.
+- Добавлен favicon для сайта.
+- Отключенно PWA.
 
 
 #### V 0.2

gatsby-config.js

@@ -29,15 +29,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        // This will impact how browsers show your PWA/website
-        // https://css-tricks.com/meta-theme-color-and-trickery/
-        // theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/logo-black.svg`, // This path is relative to the root of the site.
       },
     },
   ],

src/components/Games/GamePage/Hero.jsx

@@ -4,11 +4,11 @@ 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">
+        <section className="h-[60vh]">
+            <div className="mr-0 relative h-full flex items-center bg-gray-50">
+                <div className="relative h-full ml-[calc(50%-768px)] z-10 flex">
+                    <h1 className="relative left-1/3 leading-tight text-7xl font-bold italic min-w-[650px] text-slate-800 drop-shadow-[0_5px_5px_rgba(255,255,255,.3)] self-center">{title}</h1>
+                    <div className="absolute bottom-3 flex items-center last:[&>p]:!mr-0 flex-wrap ">
                         {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>}

src/components/Games/Games.jsx

@@ -31,6 +31,11 @@ const Games = ({...props}) => {
                 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})
@@ -49,13 +54,13 @@ const Games = ({...props}) => {
     }`);
 
     const [games, setGames] = useState([
-        {slug: 'challenge-accepted', title: 'Вызов Принят', description: 'Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами.', img: images.challenge_accepted},
+        {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: 'call-accepted', title: 'Вызов принят', description: 'Частники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами.', img: images.call_accepted},
         {slug: '8-colors-delegation', title: '8 цветов делегирования', description: 'Деловая обучающая игра-тренажёр, которая познакомит с 7 уровнями передачи полномочий по модели Юргена Аппело (Jurgen Appelo, 2010г).', img: images.eight_colors_delegation}
     ]);
 

src/images/logo-black.svg

@@ -0,0 +1,25 @@
+<svg width="344" height="344" viewBox="0 0 344 344" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_306_16)">
+<path d="M190.52 343.36L177.39 336.71C177.03 336.53 176.61 336.53 176.25 336.71L163.1 343.33C162.2 343.78 161.16 343.05 161.33 342.09L163.86 328.03C163.93 327.65 163.8 327.26 163.51 326.99L152.89 317.02C152.17 316.34 152.57 315.16 153.57 315.02L168.27 312.99C168.67 312.94 169.01 312.7 169.19 312.35L175.78 299.57C176.23 298.7 177.52 298.7 177.97 299.57L184.52 312.37C184.7 312.72 185.04 312.96 185.44 313.01L200.13 315.08C201.13 315.22 201.53 316.4 200.8 317.08L190.15 327.02C189.86 327.29 189.73 327.68 189.8 328.06L192.29 342.12C192.46 343.09 191.41 343.82 190.52 343.36Z" fill="#DBB30E"/>
+<path d="M249.19 320.9L239.14 315.82C238.87 315.68 238.54 315.68 238.27 315.82L228.22 320.9C227.54 321.25 226.73 320.69 226.87 319.95L228.79 309.2C228.84 308.91 228.74 308.61 228.52 308.41L220.39 300.8C219.84 300.28 220.14 299.38 220.91 299.27L232.14 297.7C232.44 297.66 232.71 297.47 232.84 297.21L237.86 287.43C238.2 286.76 239.19 286.76 239.53 287.43L244.55 297.21C244.69 297.47 244.95 297.66 245.25 297.7L256.48 299.27C257.25 299.38 257.55 300.28 257 300.8L248.87 308.41C248.65 308.62 248.55 308.91 248.6 309.2L250.52 319.95C250.67 320.69 249.87 321.25 249.19 320.9Z" fill="#DBB30E"/>
+<path d="M104.75 320.9L114.8 315.82C115.07 315.68 115.4 315.68 115.67 315.82L125.72 320.9C126.4 321.25 127.21 320.69 127.07 319.95L125.15 309.2C125.1 308.91 125.2 308.61 125.42 308.41L133.55 300.8C134.1 300.28 133.8 299.38 133.03 299.27L121.8 297.7C121.5 297.66 121.23 297.47 121.1 297.21L116.08 287.43C115.74 286.76 114.75 286.76 114.41 287.43L109.39 297.21C109.25 297.47 108.99 297.66 108.69 297.7L97.4596 299.27C96.6896 299.38 96.3896 300.28 96.9396 300.8L105.07 308.41C105.29 308.62 105.39 308.91 105.34 309.2L103.42 319.95C103.27 320.69 104.07 321.25 104.75 320.9Z" fill="#DBB30E"/>
+<path d="M223.54 60.9297H131.15V74.3797H223.54V60.9297Z" fill="#DBB30E"/>
+<path d="M246.09 13.45C246.09 16.53 243.53 19.03 240.34 19.1L223.7 57.77L177.28 57.86L130.86 57.77L114.22 19.07C111.24 18.8 108.9 16.39 108.9 13.45C108.9 10.33 111.53 7.79999 114.78 7.79999C118.03 7.79999 120.66 10.33 120.66 13.45C120.66 14.64 120.28 15.75 119.62 16.66C126.82 25.84 152.58 54.71 161.26 10.46C159.58 9.46999 158.46 7.67999 158.46 5.64999C158.46 2.52999 161.09 0 164.34 0C167.59 0 170.22 2.52999 170.22 5.64999C170.22 7.77999 169 9.62 167.2 10.59C168.12 15.12 171.24 28.49 176.61 30.8C177.09 31 177.64 31 178.12 30.8C183.57 28.45 186.61 14.68 187.44 10.38C185.84 9.37 184.78 7.63 184.78 5.66C184.78 2.54 187.41 0.0100098 190.66 0.0100098C193.91 0.0100098 196.54 2.54 196.54 5.66C196.54 7.84 195.25 9.73999 193.36 10.68C202.17 55.1 228.32 25.21 235.18 16.38C234.64 15.53 234.33 14.53 234.33 13.46C234.33 10.34 236.96 7.81 240.21 7.81C243.46 7.8 246.09 10.33 246.09 13.45Z" fill="#DBB30E"/>
+<path d="M191.49 110.91V208.59C191.49 210.54 191.95 212.02 192.87 213.03C193.79 214.04 195.42 214.86 197.78 215.48V218.5H155.93V215.48C158.29 214.85 159.92 214.03 160.84 213.03C161.76 212.02 162.21 210.55 162.21 208.59V110.91H120.56C118.6 110.91 117.09 111.34 116.04 112.2C114.99 113.06 114.14 114.65 113.49 116.95H110.35V83.6299H113.49C114.21 85.9199 115.08 87.4999 116.09 88.3699C117.1 89.2399 118.59 89.6699 120.56 89.6699H233.04C235.07 89.6699 236.61 89.2399 237.66 88.3699C238.71 87.4999 239.56 85.9199 240.21 83.6299H243.35V116.95H240.21C239.55 114.65 238.7 113.07 237.66 112.2C236.61 111.34 235.07 110.91 233.04 110.91H191.49Z" fill="black"/>
+<path d="M28.28 250.2H17.89V277.82H10.59V250.2H0V243.62H28.29V250.2H28.28Z" fill="black"/>
+<path d="M59.5704 277.81H52.2704L49.2604 270.71H34.6204L31.7404 277.81H24.4404L38.0404 244.25L38.3004 243.62H45.0804L45.3504 244.25L59.5704 277.81ZM46.4204 264.01L41.7804 252.19L37.3404 264.01H46.4204Z" fill="black"/>
+<path d="M91.5205 271.24V277.82H63.2305V243.63H70.5305V271.25H91.5205V271.24Z" fill="black"/>
+<path d="M102.71 250.2V256.49H114.21V263.07H102.71V271.24H123.7V277.82H95.4102V243.63H123.7V250.21H102.71V250.2Z" fill="black"/>
+<path d="M157.19 243.62V277.81H150.26L149.89 277.22L135.91 255.15V277.82H128.61V243.63H135.91L149.89 265.7V243.63H157.19V243.62Z" fill="black"/>
+<path d="M189.33 250.2H178.94V277.82H171.64V250.2H161.05V243.62H189.34V250.2H189.33Z" fill="black"/>
+<path d="M235.6 250.2H225.21V277.82H217.91V250.2H207.32V243.62H235.61V250.2H235.6Z" fill="black"/>
+<path d="M246.74 250.2V256.49H258.24V263.07H246.74V271.24H267.73V277.82H239.44V243.63H267.73V250.21H246.74V250.2Z" fill="black"/>
+<path d="M304.81 277.81H297.51L294.5 270.71H279.86L276.98 277.81H269.68L283.28 244.25L283.54 243.62H290.32L290.59 244.25L304.81 277.81ZM291.66 264.01L287.02 252.19L282.58 264.01H291.66Z" fill="black"/>
+<path d="M343.49 243.62V277.81H336.19V259.18L329.33 273.8L327.45 277.8H323.82L322.02 273.8L315.76 259.87V277.8H308.46V243.61H315.76L325.74 265.85L336.17 243.61H343.49V243.62Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_306_16">
+<rect width="344" height="344" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/pages/games/8-colors-delegation.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Описание', to: 'description'},
+        {id: 1, title: 'Цели', to: 'purpose'},
+        {id: 2, title: 'Аудитория', to: 'auditory'},
+        {id: 3, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/8-colors-delegation.jpeg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title='8 цветов делегирования' img={image.img} time='4-8 часов' formats='офлайн' members='от 12 до 100 чел'></Hero>
+            <section className="py-28" id="description">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
+                    <p className='mb-8'><b>«8 ЦВЕТОВ ДЕЛЕГИРОВАНИЯ»</b> – деловая обучающая игра-тренажёр, которая познакомит с 7 уровнями передачи полномочий по модели Юргена Аппело (Jurgen Appelo, 2010г). Понятие относится к концепции Менеджмент 3.0 ― agile-подходу в бизнесе, позволяющему адаптировать менеджмент к гибкому мышлению, позволить сотрудникам раскрыть способности, и благодаря этому совершить прорыв в эффективности работы отдельных людей, команд и самих руководителей. </p>
+                    <p>Делегирование – важный навык, без которого работа менеджера теряет ценность. От обычного распределения задач делегирование отличается тем, что руководитель передаёт часть своих обязанностей и связанных с ними ресурсов и полномочий, чтобы сфокусироваться на чём-то более сложном и важном. Но зачастую начинающий управленец оказывается не в состоянии быстро перейти от статуса «я делаю все сам» до «все делают другие» именно в части передачи полномочий. 7-уровневая модель делегирования Юргена Аппело позволяет сделать этот переход понятным и безболезненным, как для руководителя, так и для сотрудников, и для бизнеса. </p>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="purpose">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='text-3xl mb-12 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <div className="flex justify-between">
+                        <div className="basis-1/2 mr-5">
+                            <p className='mb-8 font-bold'>Деловая игра-тренажёр «8 КЛЮЧЕЙ ДЕЛЕГИРОВАНИЯ»:</p>
+                            <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                                <li className="mb-1">В увлекательной форме поможет изучить теорию и отработать практику этой модели на ситуациях, взятых из реальной жизни</li>
+                                <li className="mb-1">Покажет разницу между уровнями ситуаций и сотрудников, которым можно передать полномочия</li>
+                                <li>Научит замечать детали и формулировать задачи в соответствии с необходимым и правильным уровнем делегирования</li>
+                            </ul>
+                            <p className='mb-8'><b>Рекомендуется как методический инструмент</b> для бизнес-тренеров, специалистов по обучению и развитию персонала, HR-менеджеров, функциональных и административных руководителей различного ранга, проектных менеджеров. </p>
+                            <p className='mb-8 font-bold'>В результате игры участники:</p>
+                            <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                                <li className="mb-1">Ознакомятся/ повторят основные принципы и правила делегирования, структурируют имеющиеся знания и опыт</li>
+                                <li className="mb-1">Попрактикуются в применении постановку задач с учетом различных уровней делегирования</li>
+                                <li>Побывают в разных ролях (Босс, Сотрудник, Судья-рефери) и смогут лучше увидеть и понять разнообразные ошибки, допускаемые руководителями</li>
+                            </ul>
+                        </div>
+                        <StaticImage className="w-1/2" src="../../images/games/8-colors-delegation.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <section className="py-28" id="auditory">
+                <div className="container mx-auto text-slate-900 max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
+                    <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
+                        <li className="mb-1">Действующие руководители любого уровня </li>
+                        <li className="mb-1">Внутренний кадровый резерв</li>
+                        <li>Проектные команды, где навыки делегирования важны для всех участников</li>
+                    </ol>
+                </div>
+            </section>
+            <Contact id="contact"></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title='8 цветов делегирования'/>
+
+export default CAPage

src/pages/games/bridge.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Цели', to: 'purposes'},
+        {id: 1, title: 'Направление', to: 'direction'},
+        {id: 2, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/bridge.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title="Мост" img={image.img}></Hero>
+            <section className="py-28" id="purposes">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Цель игры</h2>
+                    <p className='mb-8'>LEONARDO BRIDGE это командная игра, в тематике проектного управления. Отличная  возможность показать работу разных команд в едином проекте, их взаимодействие, умение  мыслить системно, нацеленность участников на выработку общих решений, понимание работы с  ограниченными ресурсами. Чтобы получить все важные делали для создания уникального моста, командам предстоит выполнить много сложных заданий</p>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="direction">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Игра направленна на</h2>
+                    <div className="flex justify-between items-center">
+                        <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                            <li className="mb-1">Командообразования</li>
+                            <li className="mb-1">Принятие решений</li>
+                            <li className="mb-1">Коммуникацию в команде</li>
+                            <li className="mb-1">Лидерство и влияние </li>
+                            <li className="mb-1">Слышать и слушать друг друга </li>
+                            <li className="mb-1">Выстраивание диалога на общем «языке» с командой</li>
+                            <li className="mb-1">Умение работать в условиях изменений и ограниченного времени</li>
+                            <li>Выстраивание диалога на общем «языке» с командой</li>
+                        </ul>
+                        <StaticImage className="w-1/2" src="../../images/games/bridge2.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <Contact id="contact" white={true}></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title="Мост" />
+
+export default CAPage

src/pages/games/challenge-accepted.jsx

@@ -5,78 +5,80 @@ import Layout from "../../components/layout"
 import Seo from "../../components/seo"
 import Hero from "../../components/Games/GamePage/Hero";
 import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
 
 const CAPage = ({data}) => {
 
     const [menu, setMenu] = useState([
         {id: 0, title: 'Описание', to: 'description'},
-        {id: 1, title: 'Методология', to: 'metodology'},
-        {id: 2, title: 'Механика и цели', to: 'mechanic'},
-        {id: 3, title: 'Аудитория', to: 'auditory'},
-        {id: 4, title: 'Контакты', to: 'contact'},
+        {id: 1, title: 'Цели', to: 'purposes'},
+        {id: 2, title: 'Компетенции', to: 'competentions'},
+        {id: 3, title: 'Преимущества', to: 'advantages'},
+        {id: 4, title: 'Аудитория', to: 'auditory'},
+        {id: 5, title: 'Контакты', to: 'contact'},
     ])
-
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/call-accepted.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
     return(
         <Layout menu={menu}>
-            <Hero></Hero>
+            <Hero title="Вызов принят" img={image.img} time='1,5-3 часа' formats='офлайн (настольная игра)' members="4-6 человек за 1 игровым столом."></Hero>
             <section className="py-28" id="description">
                 <div className="container mx-auto text-slate-900 text-base max-w-6xl">
                     <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
-                    <p className='mb-8'>Эмоции – самые быстрые механизмы принятия решений. Не принимать решений в эмоциях - очень разумный совет. Но умение эффективно использовать для принятия решений информацию, которую дают именно эмоции, отличает успешных людей. Это умение определяется <b>эмоциональным интеллектом</b> – четко определяемой и измеряемой способностью перерабатывать информацию, содержащуюся в эмоциях, определять значение эмоций, их связи друг с другом, использовать эмоциональную информацию в качестве основы для мышления и принятия решений.</p>
-                    <p>Высокий эмоциональный интеллект ведет к социальному успеху и гармоничной жизни. Но сам собой он не возникнет. Его важно развивать. Эмоциональный интеллект развивается медленно. В жизни это как правило болезненно и затратно, сопряжено с рисками. Игра – лучшее средство для этого. В игре это быстро и безопасно, легко и весело.</p>
+                    <p className='mb-8'>Участники выступают в качестве руководителей региональных отделений одной компании в разных городах. Цель каждого - первым реализовать проект по увеличению объема продаж в своем регионе в 2 раза с наименьшими финансовыми затратами. Успех  будет зависеть от правильности распределения задач, подбора сотрудников для их выполнения, выбора стиля руководства. Главным ресурсом справедливо выступают компетентность и мотивированность персонала, которые преобразовываются в производимую работу, могут увеличиваться в процессе обучения и действий руководителя, а также под воздействием «внешних событий».</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="metodology">
+            <section className="py-28 bg-[#0E0808]" id="purposes">
                 <div className="container mx-auto text-white text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Основная методология</h2>
-                    <StaticImage className="w-1/2 float-right" src="../../images/games/ei2.jpg"></StaticImage>
-                    <p className='mb-8'>Игра основана на подходе Йельского университета к трактовке понятия «Эмоциональный интеллект», которое состоит из 4- х факторов:</p>
-                    <p className="mb-8">Высокий эмоциональный интеллект ведет к социальному успеху и гармоничной жизни. Но сам собой он не возникнет. Его важно развивать. Эмоциональный интеллект развивается медленно. В жизни это как правило болезненно и затратно, сопряжено с рисками. Игра – лучшее средство для этого. В игре это быстро и безопасно, легко и весело.</p>
-                    <ol className='mb-8 list-decimal list-inside leading-normal'>
-                        <li>осознание своих эмоций</li>
-                        <li>управление своими эмоциями</li>
-                        <li>осознание эмоций других людей</li>
-                        <li>управление эмоциями других людей</li>
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Цели игры</h2>
+                    <div className="flex justify-between items-center">
+                        <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
+                            <li className="mb-1">Освоение модели ситуационного руководства Херси-Бланшара</li>
+                            <li className="mb-1">Практическое прохождение в игровой обстановке управленческого цикла</li>
+                            <li>Проработка инструмента «дерево целей». </li>
                         </ol>
-                    <p className="mb-8">В игре участники тренируют все 4 фактора, выполняя игровые задания-кейсы, анализируя эмоции и управляя ими. В норме системы эмоций возбуждения и эмоций торможения в балансе. Ну а как в реальности у каждого конкретного игрока – покажет игра.</p>
-                    <p className="mb-8">В основу игры легла теория о психо-физиологической природе эмоций, где эмоции – это следствие гормонов, попавших в кровь:</p>
-                    <ul className='mb-8 list-disc list-inside leading-normal'>
-                        <li>*Гнев – гормон адреналин</li>
-                        <li>*Страх – гормон норадреналин</li>
-                        <li>*Радость – гормон эндорфин</li>
-                        <li>*Удовлетворение – гормон допамин</li>
-                        <li>*Любовь-забота – гормон окситоцин</li>
-                        <li>*Отвращение – гормон кортизол.</li>
-                    </ul>
-                    <p className="mb-8">В среднем период распада гомонов в крови составляет 4-6 минут. И пока гормон есть в крови, человек, как биологическое существо, испытывает ту или иную эмоцию. Поскольку человек обладает способностью мыслить, то мысль встраивается в процесс эмоций. И тогда, изменяя мысли, мы можем изменить и наши эмоции.</p>
+                        <StaticImage className="w-1/2" src="../../images/games/call-accepted2.jpg"></StaticImage>
+                    </div>
                 </div>
             </section>
-            <section className="py-28" id="mechanic">
+            <section className="py-28" id="competentions">
                 <div className="container mx-auto text-slate-900 text-base max-w-6xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Игровая механика и цели</h2>
-                    <StaticImage className="w-1/2 float-right" src="../../images/games/ei3.jpg"></StaticImage>
-                    <p className='mb-8'><b>Игровая цель</b> – набрать как можно больше баллов и осознать степень развития собственного эмоционального интеллекта.</p>
-                    <p className="mb-8">Поскольку это игра-тренажер, то есть и учебные цели:</p>
-                    <ol className='mb-8 list-decimal list-inside leading-normal'>
-                        <li>осознать степень выраженности собственного эмоционального интеллекта по всем 4-м факторам</li>
-                        <li>увидеть специфику своей эмоциональной системы</li>
-                        <li>обменяться опытом по способам работы с эмоциями между игроками</li>
-                        <li>получить навык конструктивного решения задач в условиях ярких эмоций 5 – определить наиболее действенные для себя способы выходы из состояния торможения/перевозбуждения</li>
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Отрабатываемые компетенции</h2>
+                    <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                        <li className="mb-1">Постановка задач и планирование </li>
+                        <li className="mb-1">Управление персоналом (подбор, стиль управления, мотивация, ОС)</li>
+                        <li className="mb-1">Ведение переговоров и взаимодействие с коллегами</li>
+                        <li>Управление временем при работе в режиме многозадачности</li>
+                    </ul>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="advantages">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
+                    <ol className='mb-8 list-disc list-inside leading-normal mr-5'>
+                        <li className="mb-1">Может использоваться как итоговая (диагностическая) или интегрироваться в обучение управленцев.</li>
+                        <li className="mb-1">При параллельном проведении за несколькими столами возможно моделирование конкуренции и отработка управления «распределенным проектом».</li>
+                        <li>На базе игры можно организовать турнир управленческого мастерства.</li>
                     </ol>
-                    <p className="mb-8">Игроки получают баллы только за конструктивные решения и юмор. Это дает быструю смену установки на поиск решений, что на наш взгляд, так важно для бизнеса и жизни.</p>
                 </div>
             </section>
-            <section className="py-28 bg-[#0E0808]" id="auditory">
-                <div className="container mx-auto text-white text-base max-w-5xl">
-                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Целевая аудитория</h2>
+            <section className="py-28 bg" id="auditory">
+                <div className="container mx-auto text-slate-900 text-base max-w-5xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
                     <ol className='mb-8 list-decimal list-inside leading-normal'>
-                        <li>Руководителям, которые хотят быть вдохновляющими лидерами и успешными наставниками для своих подчиненных</li>
-                        <li>Компаниям, которые повышают эмоциональную компетентность своих сотрудников.</li>
-                        <li>Всем людям, занимающимся саморазвитием и самопознанием.</li>
+                        <li className="mb-1">Руководители всех уровней</li>
+                        <li className="mb-1">Кадровые резервисты на руководителей</li>
+                        <li>Кандидаты в кадровый резерв</li>
                     </ol>
                 </div>
             </section>
-            <Contact id="contact" white={true}></Contact>
+            <Contact id="contact"></Contact>
         </Layout>
     )
 
@@ -87,6 +89,6 @@ const CAPage = ({data}) => {
  *
  * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
  */
-export const Head = () => <Seo title="Эмоциональный интеллект" />
+export const Head = () => <Seo title="Вызов принят" />
 
 export default CAPage

src/pages/games/history-by-cards.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Цель', to: 'purpose'},
+        {id: 1, title: 'Направление', to: 'direction'},
+        {id: 2, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/history-by-cards.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title="Нistory by cards" img={image.img}></Hero>
+            <section className="py-28" id="purpose">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Цель игры</h2>
+                    <p className='mb-8'>Собрать правильную последовательность из зашифрованных карточек, которые вместе составляют единый логический  сюжет и головоломку.</p>
+                    <p className='mb-8'>Игра проходит в несколько раундов, важно не только правильно выполнять задания, но и работать на опережения.</p>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="direction">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Игра направленна на развитие</h2>
+                    <div className="flex justify-between items-center">
+                        <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                            <li className="mb-1">Командообразования </li>
+                            <li className="mb-1">Принятие решений</li>
+                            <li className="mb-1">Коммуникацию в команде </li>
+                            <li className="mb-1">Лидерство и влияние</li>
+                            <li className="mb-1">Слышать и слушать друг друга</li>
+                            <li className="mb-1">Выстраивание диалога на общем «языке» с командой</li>
+                            <li className="mb-1">Умение работать в условиях изменений и ограниченного времени</li>
+                            <li>Выстраивание диалога на общем «языке» с командой</li>
+                        </ul>
+                        <StaticImage className="w-1/2" src="../../images/games/history-by-cards2.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <Contact id="contact" white={true}></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title="Нistory by cards" />
+
+export default CAPage

src/pages/games/mansion-matilda-secrets.jsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Описание', to: 'description'},
+        {id: 1, title: 'Цели', to: 'purpose'},
+        {id: 2, title: 'Развиваемые компетенции', to: 'skills'},
+        {id: 3, title: 'Преимущества', to: 'advantages'},
+        {id: 4, title: 'Аудитория', to: 'auditory'},
+        {id: 5, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/mansion-matilda-secrets.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title='Тайны особняка "Матильда"' img={image.img} time='2-4 часа + анализ до 1,5 часов' formats='офлайн (настольная) // онлайн (платформа ИгроN).' members='команда 5-7 человек. Количество команд не ограничено.'></Hero>
+            <section className="py-28" id="description">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
+                    <p className='mb-8'>Детективы любят все! Особенно, если Вы в них  - не подозреваемый :).</p>
+                    <p className='mb-8'>7 игровых дней в ролевой  игре <b>ТАЙНЫ ОСОБНЯКА "МАТИЛЬДА"</b> участники занимаются разгадкой уникального преступления, и шансы на успех зависят от них самих.  Минуты пролетают незаметно в поисках улик и вещдоков, которые ведут к разгадке...</p>
+                    <p className='mb-8 font-bold'>...а за это время:</p>
+                    <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                        <li className="mb-1">Происходит интеграция команды</li>
+                        <li className="mb-1">Настраивается кросс-функциональное взаимодействие</li>
+                        <li>Выявляются и прокачиваются лидеры</li>
+                    </ul>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="purpose">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <p className='mb-8'><b>Игровая:</b> Побеждает команда, разгадавшая игровые преступления быстрее других и набравшая максимальное количество баллов.</p>
+                    <p className='mb-8'><b>Учебная:</b> Осознать, что только командная работа позволит получить быстрый и качественный результат.</p>
+                </div>
+            </section>
+            <section className="py-28" id="skills">
+                <div className="container mx-auto text-slate-900 max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Развиваемые компетенции и навыки</h2>
+                    <div className="flex justify-between items-center">
+                        <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                            <li className="mb-1">Принципы и навыки принятия эффективных командных решений</li>
+                            <li className="mb-1">Навыки руководства командой (распределение ролей, постановка целей, делегирование и ролевое взаимодействие)</li>
+                            <li className="mb-1">Навыки обратной связи</li>
+                            <li>Осознанность - после каждого раунда игроки проводят рефлексию и намечают новую стратегию</li>
+                        </ul>
+                        <StaticImage className="w-1/2" src="../../images/games/mansion-matilda-secrets2.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="advantages">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Преимущества игры</h2>
+                    <p className='mb-8'>Позволяет раскрыться игрокам с аналитическими способностями, проверить свои навыки убеждения и аргументации, стрессоустойчивость</p>
+                </div>
+            </section>
+            <section className="py-28" id="auditory">
+                <div className="container mx-auto text-slate-900 max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-slate-800 text-center uppercase'>Целевая аудитория</h2>
+                    <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
+                        <li className="mb-1">Руководители и команды всех уровней</li>
+                        <li>Новички в период адаптации в компании</li>
+                    </ol>
+                </div>
+            </section>
+            <Contact id="contact"></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title='Тайны особняка "Матильда"' />
+
+export default CAPage

src/pages/games/middleages-secrets.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Легенда', to: 'legend'},
+        {id: 1, title: 'Направление', to: 'direction'},
+        {id: 2, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/middleages-secrets.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title="Секреты Средневековья" img={image.img} formats='онлайн/оффлайн'></Hero>
+            <section className="py-28" id="legend">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Легенда игры</h2>
+                    <div className="flex justify-between items-center">
+                        <div className="basis-[65%] mr-7">
+                            <p className='mb-8'>По сюжету игры участники являются инженерами закрытой научной лаборатории, которая проводит исторические исследования, используя перемещения во времени.</p>
+                            <p className='mb-8'>В результате технического сбоя экспедиция вместо Древнего Рима, куда она направлялась для изучения технологии возведения уникальных гидротехнических сооружений древности – акведуков, оказывается в Раннем Средневековье, при дворе Карла Великого.</p>
+                            <p className='mb-8'>Участникам предстоит восстановить давно не функционирующие акведуки, которые сохранились в 4-х странах Империи – Италии, Испании, Германии и Хорватии, узнать секреты  их строительства и построить свой грандиозный проект.</p>
+                            <p className='mb-8'>Инженеры работают в 4-х командах, но поскольку технология строительства древних акведуков практически утеряна, им приходится восстанавливать ее буквально «по крупицам», активно взаимодействуя друг с другом в поисках необходимой информации.</p>
+                            <p className='mb-8'>Командам предстоит проанализировать много важной информации, разгадать зашифрованные  коды , решить сложные головоломки и многое-многое другое. </p>
+                            <p>Игра проходит в несколько этапов где команды соревнуются друг с другом.</p>
+                        </div>
+                        <StaticImage className="w-1/2" src="../../images/games/middleages-secrets2.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="direction">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Игра направленна на развитие</h2>
+                    <div className="flex justify-between items-center">
+                        <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                            <li className="mb-1">Коммуникативных навыков</li>
+                            <li className="mb-1">Лидерство</li>
+                            <li className="mb-1">Командную работу </li>
+                            <li className="mb-1">Работу на результат</li>
+                            <li>Умения работать в ограниченных условиях</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <Contact id="contact" white={true}></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title="Секреты средневековья" />
+
+export default CAPage

src/pages/games/place-under-sun.jsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react"
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+import Layout from "../../components/layout"
+import Seo from "../../components/seo"
+import Hero from "../../components/Games/GamePage/Hero";
+import Contact from "../../components/Contact"
+import { useStaticQuery, graphql } from "gatsby"
+
+const CAPage = ({data}) => {
+
+    const [menu, setMenu] = useState([
+        {id: 0, title: 'Описание', to: 'description'},
+        {id: 1, title: 'Цели', to: 'purpose'},
+        {id: 2, title: 'Преимущества', to: 'advantages'},
+        {id: 3, title: 'Аудитория', to: 'auditory'},
+        {id: 4, title: 'Контакты', to: 'contact'},
+    ])
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/place-under-sun2.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    return(
+        <Layout menu={menu}>
+            <Hero title='Место под солнцем' img={image.img} time='2-2,5  часа (3 раунда по 30 мин + шеринг игровых итогов 30 мин).' formats='офлайн (сценарная симуляция ) // онлайн (платформа ZOOM).'></Hero>
+            <section className="py-28" id="description">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Описание</h2>
+                    <p className='mb-8'>Несколько поколений 4 семейных династии получали прибыль и делили место среди самых уважаемых жителей города. Но прогресс заставляет бизнес меняться, рушить выстроенные связи и строить новые партнерства. Кто из них станет более влиятельным? Кто потеряет свои позиции и почему? Как игра проявит шаблоны принятия решений и коммуникаций, влияющие на наш результат в бизнесе?</p>
+                    <p>Каждый раунд команды получают от ведущего информацию о развитии событий в городе, что создает конфликт социально-общественных интересов, бизнесинтересов и человеческих ценностей. Задача игроков - принять решение на городском совете. В чью пользу будет это решение, зависит от команд и их переговорных навыков. И оно повлияет на развитие социально-экономической ситуации в городе, коммерческие интересы команд. Решения команд по итогам 3 раундов кардинально меняют уклад жизни в городе и жизнь семейных кланов.</p>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="purpose">
+                <div className="container mx-auto text-white text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-white text-center uppercase'>Цель игры</h2>
+                    <div className="flex justify-between">
+                        <div className="basis-1/2">
+                            <p className='mb-8 font-bold'>Формировать:</p>
+                            <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                                <li className="mb-1">Осознание необходимости и неотвратимости изменений в динамичной и конкурентной бизнес-среде</li>
+                                <li>Осознанность в принятии решений с опорой на корпоративные ценности</li>
+                            </ul>
+                            <p className='mb-8 font-bold'>Практиковать:</p>
+                            <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                                <li className="mb-1">Навыки разработки и принятия решений в условиях отсутствия «правильного ответа»</li>
+                                <li>Проведение переговоров в условиях, противоречащих друг другу интересов и позиций участников переговоров</li>
+                            </ul>
+                            <p className='mb-8 font-bold'>Оценить:</p>
+                            <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                                <li>Потенциал корпоративной культуры и команды участников (лидерство, готовность к изменениям, решение нестандартных задач, гибкость и др.)</li>
+                            </ul>
+                        </div>
+                        <StaticImage className="w-1/2" src="../../images/games/place-under-sun.jpg"></StaticImage>
+                    </div>
+                </div>
+            </section>
+            <section className="py-28" id="advantages">
+                <div className="container mx-auto text-slate-900 text-base max-w-6xl">
+                    <h2 className='text-3xl mb-10 font-semibold text-slate-800 text-center uppercase'>Преимущества игры</h2>
+                    <ul className='mb-8 list-disc list-inside leading-normal mr-5'>
+                        <li className="mb-1">Индивидуальные и командные цели</li>
+                        <li>Динамичная быстрая командная игра для прокачки; коммуникаций и корпоративных ценностей</li>
+                    </ul>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="auditory">
+                <div className="container mx-auto text-white max-w-6xl">
+                    <h2 className='mt-16 text-3xl mb-16 font-semibold text-white text-center uppercase'>Целевая аудитория</h2>
+                    <ol className='mb-8 list-decimal list-inside leading-normal mr-5'>
+                        <li className="mb-1">Руководители и команды</li>
+                        <li className="mb-1">Кадровые резервисты</li>
+                        <li>Кросс-функциональные команды</li>
+                    </ol>
+                </div>
+            </section>
+            <Contact id="contact" white={true}></Contact>
+        </Layout>
+    )
+
+}
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title='Место под солнцем' />
+
+export default CAPage