V pre0.3

README.md

@@ -7,6 +7,13 @@ Talent Team - разработка корпоративных мероприят
 - Tailwind css
 - PHP
 
+#### V pre0.3
+- В раздел "Наша команда" добавлен еще 1 человек
+- Убрана кнопка "О компании" с Hero секции
+- Добавлена стриница для бизнес-игры "Эмоциональный интеллект"
+- Переработан компонент Header и Footer так чтобы в меню для каждрй игры можно было создавать свои якорные ссылки
+
+
 #### V 0.2
 - Добавлен блоки "Связаться с нами" и Футер сайта
 - Реализованно выпадающее меню при наведении на элемент "Услуги"

src/components/Contact.jsx

@@ -4,19 +4,19 @@ import Button from "./UI/Button";
 import Input from "./UI/Input";
 import Textarea from "./UI/Textarea";
 
-const Contact = ({...props}) => {
+const Contact = ({white, ...props}) => {
     return (
-        <section {...props} className="py-32 bg-[#0E0808]">
+        <section {...props} className={white ? 'py-32' : 'py-32 bg-[#0E0808]'}>
             <div className="container mx-auto px-24">
-                <h2 className='text-3xl mb-16 font-semibold text-white text-center uppercase'>Связаться с нами</h2>
+                <h2 className={white ? 'text-3xl mb-16 font-semibold text-slate-800 text-center uppercase' : 'text-3xl mb-16 font-semibold text-white text-center uppercase'}>Связаться с нами</h2>
                 <div className="flex mb-10">
                     <div className="flex flex-col basis-[40%] mr-6">
-                        <Input className='mb-5' label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
+                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
-                        <Input className='mb-5' label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
+                        <Input className={white ? 'mb-5 border-2 !border-slate-700' : 'mb-5'} label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
-                        <Input label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
+                        <Input className={white ? 'border-2 !border-slate-700' : null} label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
                     </div>
                     <div className="flex basis-[60%]">
-                        <Textarea className='h-full resize-none' label='Ваше обращение:' placeholder='Обращение...'></Textarea>
+                        <Textarea className={white ? 'h-full resize-none border-2 !border-slate-700' : 'h-full resize-none'} label='Ваше обращение:' placeholder='Обращение...'></Textarea>
                     </div>
                 </div>
                 <div className="flex justify-center">

src/components/Games/GamePage/Hero.jsx

@@ -0,0 +1,24 @@
+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;

src/components/Games/RecGame.jsx

@@ -19,7 +19,7 @@ const RecGame = () => {
                 </ul>
                 <div className="flex items-center">
                     <Button className='mr-5'>Заказать игру</Button>
-                    <Link to="/" className='text-slate-800 hover:text-yellow-500 transition'>подробнее</Link>
+                    <Link to="/games/emotional-intelligence" className='text-slate-800 hover:text-yellow-500 transition'>подробнее</Link>
                 </div>
             </div>
         </div>

src/components/Hero.jsx

@@ -29,9 +29,9 @@ const Hero = ({...props}) => {
                     <div className="flex flex-col items-center max-w-5xl pb-16">
                         <TypeAnimation
                             sequence={[
-                                'Мы помогаем создавать команды.',
+                                'Мы помогаем создавать команды',
                                 2000,
-                                'Лидер рынка по разработке корпоративных мероприятий и бизнес-геймификаций.',
+                                'Лидер рынка по разработке корпоративных мероприятий и бизнес-геймификаций',
                                 2000,
                             ]}
                             wrapper="h1"
@@ -44,7 +44,6 @@ const Hero = ({...props}) => {
                             <li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>обучение</li>
                             <li className="flex items-center text-lg text-white"><AiFillCheckCircle className='mr-2 text-green-500'/>развитие</li>
                         </ul>
-                        <Button onClick={e=>scroller.scrollTo('about', {smooth: true})} className="max-w-[210px] mt-7">О компании</Button>
                     </div>
                 </div>
                 <AnchorLink to="advantages" smooth={true} className="cursor-pointer absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 border-white border-2 rounded-full flex items-center justify-center">

src/components/Team/Person.jsx

@@ -3,7 +3,7 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 
 const Person = ({name, post, img}) => {
     return (
-        <div className='flex p-6 flex-col basis-1/3 relative h-[600px] mr-6 [&:nth-child(3n+3)]:mr-0'>
+        <div className='flex p-6 flex-col basis-1/4 relative h-[550px] mr-6 [&:nth-child(4n+4)]:mr-0'>
             <div className="h-full flex flex-col justify-end max-w-s z-20">
                 <h3 className='text-xl text-white mb-3'>{name}</h3>
                 <p className='text-base text-white whitespace-pre-wrap'>{post}</p>

src/components/Team/Team.jsx

@@ -22,12 +22,18 @@ const Team = ({...props}) => {
                 gatsbyImageData(formats: WEBP, quality: 90)
             }
         },
+        yazikov: file(relativePath: {eq: "team/yazikov.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
     }`);
 
     const [persons, setPersons] = useState([
         {id: 1, name: 'Алексей Красавин', post: 'Инвестор идей💡.\nПродюсер корпоративных мероприятий.', img: images.krasavin},
         {id: 2, name: 'Мария Ровенская - Тарасова ', post: 'Менеджер крутых проектов, Методолог игр.', img: images.rovenskaya},
         {id: 3, name: 'Алёна Крюкова', post: 'Фасилитатор, бизнес -тренер, игротехник, разработчик корпоративных мероприятий.', img: images.kryukova},
+        {id: 4, name: 'Евгений Языков', post: 'Профессиональный ведущий', img: images.yazikov},
     ]);
 
     return (

src/components/Teambuilding/Example/Example.jsx

@@ -12,16 +12,36 @@ const Example = () => {
                 gatsbyImageData(formats: WEBP, quality: 90)
             }
         },
+        author: file(relativePath: {eq: "teambuilding/author.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        goldberg: file(relativePath: {eq: "teambuilding/goldberg.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        intellectual: file(relativePath: {eq: "teambuilding/intellectual.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        wool: file(relativePath: {eq: "teambuilding/wool.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
     }`);
 
     const [examples, setExamples] = useState([
         {id: 1, title: 'Веревочный курс', img: images.hero1},
         {id: 2, title: 'Тематический «Форд Боярд» ', img: images.hero1},
         {id: 3, title: 'Творческий', img: images.hero1},
-        {id: 4, title: 'Интеллектуальный квест', img: images.hero1},
+        {id: 4, title: 'Интеллектуальный квест', img: images.intellectual},
-        {id: 5, title: 'Машина Голдберга (цепная реакция)', img: images.hero1},
+        {id: 5, title: 'Машина Голдберга (цепная реакция)', img: images.goldberg},
-        {id: 6, title: 'Шерстяной тимбилдинг ', img: images.hero1},
+        {id: 6, title: 'Шерстяной тимбилдинг ', img: images.wool},
-        {id: 7, title: 'Авторский тимбилдинг', img: images.hero1},
+        {id: 7, title: 'Авторский тимбилдинг', img: images.author},
         {id: 8, title: 'Зимние Олимпийские игры', img: images.hero1},
         {id: 9, title: 'Командная картина', img: images.hero1},
         {id: 10, title: 'Гигантская пирамида', img: images.hero1},

src/components/footer.jsx

@@ -2,19 +2,34 @@ import React from "react"
 import { Link as AnchorLink } from "react-scroll";
 import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
+import { useLocation } from '@reach/router';
 
-const Footer = () => (
+const Footer = ({menu}) => {
+
+    const location = useLocation(); 
+
+    return(
         <footer className="bg-[#0E0808] flex flex-col w-full">
             <div className="bg-black h-12 w-full"></div>
             <div className="container mx-auto flex flex-col py-16">
                 <div className="flex items-center justify-between border-b-[1px] border-white pb-10">
                     <AnchorLink smooth={true} className="cursor-pointer" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
+                    {location.pathname === '/'
+                    ?
                     <ul className='flex items-center'>
                         <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                         <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
                         <li className="mr-12 text-white text-sm"><a href="#"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></a></li>
                         <li className="text-white text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                     </ul>
+                    :
+                    <ul className='flex items-center last:[&>li]:mr-0'>
+                        <li className="mr-12 text-white text-sm"><Link to="/">Главная</Link></li>
+                        {menu.map(item=>
+                            <li key={item.id} className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
+                        )}
+                    </ul>
+                    }
                 </div>
                 <div className="flex mt-8 justify-between">
                     <p className="text-white text-sm">© {new Date().getFullYear()} TalentTeam</p>
@@ -22,6 +37,7 @@ const Footer = () => (
                 </div>
             </div>
         </footer>
-)
+    )
+}
 
 export default Footer

src/components/header.jsx

@@ -2,12 +2,17 @@ import React, { useState, useRef, useEffect } from "react";
 import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
 import { Link as AnchorLink } from "react-scroll";
+import { useLocation } from '@reach/router';
+
+const Header = ({ siteTitle, menu }) => {
     
-const Header = ({ siteTitle }) => {
     const ref = useRef(null);
+    const location = useLocation();
     const [menuH, setMenuH] = useState(0);
     useEffect(() => {
+        if(location.pathname === '/') {
             setMenuH(ref.current.scrollHeight);
+        }
     }, []);
     
     return (
@@ -17,6 +22,8 @@ const Header = ({ siteTitle }) => {
                     <Link to="/"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
                     <a href="tel:+79200745505" className="text-white text-xs">8 (920) 074 55-05</a>
                 </div>
+                {location.pathname === '/'
+                    ?
                     <ul className='flex items-center'>
                         <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
                         <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 text-white text-xs relative [&>.drop-menu]:hover:h-[var(--menu-h)]"}>
@@ -31,6 +38,15 @@ const Header = ({ siteTitle }) => {
                         <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
                         <li className="text-white text-xs"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
                     </ul>
+                    :
+                    <ul className='flex items-center last:[&>li]:mr-0'>
+                        <li className="mr-12 text-white text-xs"><Link to="/">Главная</Link></li>
+                        {menu.map(item=>
+                            <li key={item.id} className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
+                        )}
+                    </ul>
+                }
+                
             </nav>
         </header>
     )

src/components/layout.jsx

@@ -12,7 +12,7 @@ import Header from "./header"
 import Footer from "./footer"
 import "./layout.css"
 
-const Layout = ({ children }) => {
+const Layout = ({menu, children }) => {
     const data = useStaticQuery(graphql`
         query SiteTitleQuery {
             site {
@@ -25,11 +25,11 @@ const Layout = ({ children }) => {
 
     return (
         <>
-            <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
+            <Header menu={menu} siteTitle={data.site.siteMetadata?.title || `Title`} />
             <div>
                 <main>{children}</main>
             </div>
-            <Footer></Footer>
+            <Footer menu={menu}></Footer>
         </>
     )
 }

src/pages/games/emotional-intelligence.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 EIPage = ({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 EIPage

src/pages/page-2.js

@@ -1,17 +0,0 @@
-import * as React from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import Seo from "../components/seo"
-
-const SecondPage = () => (
-  <Layout>
-    <h1>Hi from the second page</h1>
-    <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export const Head = () => <Seo title="Page two" />
-
-export default SecondPage