V pre0.3_2

README.md

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

src/components/Games/Game.jsx

@@ -7,7 +7,7 @@ const Game = ({img, title, description, slug}) => {
     const image = getImage(img)
 
     return (
-        <Link to={slug} className={'flex basis-[calc(25%-15px)] mr-5 justify-center [&:nth-child(4n+4)]:mr-0 mb-14 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
+        <Link to={'/games/' + slug} className={'flex basis-[calc(25%-15px)] mr-5 justify-center [&:nth-child(4n+4)]:mr-0 mb-14 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
             <div className="flex flex-col transition">
                 <GatsbyImage className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none"/>
                 <h2 className='text-white text-xl font-medium mb-3 transition'>{title}</h2>

src/components/Games/GamePage/Hero.jsx

@@ -1,20 +1,21 @@
 import React from "react";
-import { StaticImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-import { AiOutlineClockCircle } from "react-icons/ai";
+import { AiOutlineClockCircle, AiOutlineTeam } from "react-icons/ai";
 
-const Hero = () => {
+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">Эмоциональный интеллект</h1>
+                    <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">
+                    <div className="absolute bottom-3 flex items-center last:[&>p]:!mr-0">
-                        <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineClockCircle/>: 2,5-3 часа</p>
+                        {time && <p className="flex mr-4 items-center text-lg text-slate-800"><AiOutlineClockCircle/>: {time}</p>}
-                        <p><b>Доступные форматы:</b> онлайн</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]">
-                    <StaticImage className='w-full h-[inherit]' src="../../../images/games/ei.jfif"></StaticImage>
+                    <GatsbyImage className='w-full h-[inherit]' image={getImage(img)} alt="logo" placeholder="none"/>
                 </div>  
             </div>
         </section>

src/pages/games/challenge-accepted.jsx

@@ -0,0 +1,92 @@
+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"
+
+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'},
+    ])
+
+    return(
+        <Layout menu={menu}>
+            <Hero></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>
+                </div>
+            </section>
+            <section className="py-28 bg-[#0E0808]" id="metodology">
+                <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>
+                    </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>
+                </div>
+            </section>
+            <section className="py-28" id="mechanic">
+                <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>
+                    </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>
+                    <ol className='mb-8 list-decimal list-inside leading-normal'>
+                        <li>Руководителям, которые хотят быть вдохновляющими лидерами и успешными наставниками для своих подчиненных</li>
+                        <li>Компаниям, которые повышают эмоциональную компетентность своих сотрудников.</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

src/pages/games/emotional-intelligence.jsx

@@ -5,6 +5,7 @@ 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 EIPage = ({data}) => {
 
@@ -15,10 +16,18 @@ const EIPage = ({data}) => {
         {id: 3, title: 'Аудитория', to: 'auditory'},
         {id: 4, title: 'Контакты', to: 'contact'},
     ])
-
+    const image = useStaticQuery(graphql`
+    query {
+        img: file(relativePath: {eq: "games/ei.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP)
+            }
+        },
+    }`);
+    console.log(image);
     return(
         <Layout menu={menu}>
-            <Hero></Hero>
+            <Hero title="Эмоциональный интеллект" img={image.img} time='2,5-3 часа' formats='онлайн'></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>