V pre0.3_4

README.md

@@ -16,6 +16,9 @@ Talent Team - разработка корпоративных мероприят
 - Исправленно отображение длинной доп.информации об игре в Hero компоненте для страниц с играми.
 - Добавлен favicon для сайта.
 - Отключенно PWA.
+- Добавлен description для сайта.
+- Блок "Создание электронных курсов" за менен на другой блок - "Сессии Lego SP".
+- Для мобильной версии созданно Burger меню (не функционирует в данный момент).
 
 
 #### V 0.2

gatsby-config.js

@@ -10,11 +10,12 @@
 module.exports = {
   siteMetadata: {
     title: `Talent Team`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+    description: `Развиваем и создаем команды. Профессиональная команда поразработке и проведению корпоративных мероприятий: бизнес-игры,тимбилдинги, фамилитации, бизнес-тренинги. Руководитель компании Алёна Крюкова сертиыицированный бизнес-тренер, фасилитатор.`,
     author: `@Alexandr Beknazaryan`,
     siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
   },
   plugins: [
+    "gatsby-plugin-webpack-bundle-analyser-v2",
     'gatsby-plugin-postcss',
     `gatsby-plugin-image`,
     {

package-lock.json

@@ -29,6 +29,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.13",
         "gatsby-plugin-postcss": "^6.7.0",
+        "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
         "postcss": "^8.4.21",
         "prettier": "^2.8.4",
         "tailwindcss": "^3.2.7"
@@ -1875,9 +1876,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.13",
+      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1960,6 +1961,15 @@
         "partytown": "bin/partytown.cjs"
       }
     },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -3694,6 +3704,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -9073,6 +9089,19 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/gatsby-plugin-webpack-bundle-analyser-v2": {
+      "version": "1.1.31",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-webpack-bundle-analyser-v2/-/gatsby-plugin-webpack-bundle-analyser-v2-1.1.31.tgz",
+      "integrity": "sha512-EtfbY0r6KonivfiU3u4I/PP1THCfOcyEiVISTKtJHgAQjM9xc9cwjfGXGotaYIWDtwUkYPkJVIwsmGpen0rh4Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.5",
+        "webpack-bundle-analyzer": "^4.8.0"
+      },
+      "peerDependencies": {
+        "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/gatsby-react-router-scroll": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-6.7.0.tgz",
@@ -11142,6 +11171,15 @@
         "node": "*"
       }
     },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -11605,6 +11643,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/opentracing": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/opentracing/-/opentracing-0.14.7.tgz",
@@ -14103,6 +14150,20 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
+    "node_modules/sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -15019,6 +15080,15 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -15508,6 +15578,51 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz",
+      "integrity": "sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz",
@@ -17268,9 +17383,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.13",
+      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -17332,6 +17447,12 @@
       "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.7.5.tgz",
       "integrity": "sha512-Zbr2Eo0AQ4yzmQr/36/h+6LKjmdVBB3Q5cGzO6rtlIKB/IOpbQVUZW+XAnhpJmJr9sIF97OZjgbhG9k7Sjn4yw=="
     },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -18556,6 +18677,12 @@
         "config-chain": "^1.1.11"
       }
     },
+    "@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -22657,6 +22784,16 @@
         }
       }
     },
+    "gatsby-plugin-webpack-bundle-analyser-v2": {
+      "version": "1.1.31",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-webpack-bundle-analyser-v2/-/gatsby-plugin-webpack-bundle-analyser-v2-1.1.31.tgz",
+      "integrity": "sha512-EtfbY0r6KonivfiU3u4I/PP1THCfOcyEiVISTKtJHgAQjM9xc9cwjfGXGotaYIWDtwUkYPkJVIwsmGpen0rh4Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.21.5",
+        "webpack-bundle-analyzer": "^4.8.0"
+      }
+    },
     "gatsby-react-router-scroll": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-6.7.0.tgz",
@@ -24113,6 +24250,12 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
+    "mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -24437,6 +24580,12 @@
         "is-wsl": "^2.1.1"
       }
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "opentracing": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/opentracing/-/opentracing-0.14.7.tgz",
@@ -26174,6 +26323,17 @@
         }
       }
     },
+    "sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      }
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -26863,6 +27023,12 @@
         "ieee754": "^1.2.1"
       }
     },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -27224,6 +27390,33 @@
         }
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz",
+      "integrity": "sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "webpack-dev-middleware": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz",

package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.13",
     "gatsby-plugin-postcss": "^6.7.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
     "tailwindcss": "^3.2.7"

src/components/Courses.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-const Courses = ({...props}) => {
-    return (
-        <section {...props} className='py-32'>
-            <div className="container max-w-5xl mx-auto">
-                <div className="flex flex-col text-slate-900 text-base">
-                    <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Создание электронных обучающих курсов</h2>
-                    <p className='mb-10'>Быстрое массовое обучение с высоким уровнем качества без участия тренера – всё это возможно благодаря электронным курсам. Мы разрабатываем продукты, которые помогают повысить эффективность работы сотрудников и замотивировать их.</p>
-                    <h2 className='text-2xl mb-8 font-semibold text-slate-800 text-center uppercase'>Разрабатываем курсы любой сложности</h2>
-                    <p className='font-medium mb-2'>Простые послайдовые курсы</p>
-                    <p className='mb-5'>Курсы с линейной подачей информации, простыми практиками и интерактивными элементами. Может присутствовать персонаж-гид.</p>
-                    <p className='font-medium mb-2'>Сюжетные курсы</p>
-                    <p className='mb-5'>Мы придумываем сюжет, создаём персонажей со своими характерами и мотивами. Пользователь изучает информацию в контексте истории.</p>
-                    <p className='font-medium mb-2'>Курс с элементами геймификации</p>
-                    <p>Помимо сюжета в такие курсы могут быть добавлены: прогресс-бар, игровая валюта, стадии развития персонажа, начисление баллов, артефакты и достижения.</p>
-                </div>
-            </div>            
-        </section>
-    )
-}
-
-export default Courses

src/components/Facilitations/Example/Example.jsx

@@ -7,7 +7,32 @@ const Example = () => {
 
     const images = useStaticQuery(graphql`
     query {
-        hero1: file(relativePath: {eq: "hero1.jpg"}) {
+        img1: file(relativePath: {eq: "facilitations/1.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        img2: file(relativePath: {eq: "facilitations/2.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        img3: file(relativePath: {eq: "facilitations/3.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        img4: file(relativePath: {eq: "facilitations/4.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        img5: file(relativePath: {eq: "facilitations/5.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
+        img6: file(relativePath: {eq: "facilitations/6.jpg"}) {
             childImageSharp {
                 gatsbyImageData(formats: WEBP, quality: 90)
             }
@@ -15,12 +40,12 @@ const Example = () => {
     }`);
 
     const [examples, setExamples] = useState([
-        {id: 1, title: 'Сессии по подведению итогов и ретроспективы', img: images.hero1},
+        {id: 1, title: 'Сессии по подведению итогов и ретроспективы', img: images.img1},
-        {id: 2, title: 'Креативные, инновационные сессии', img: images.hero1},
+        {id: 2, title: 'Креативные, инновационные сессии', img: images.img2},
-        {id: 3, title: 'Стратегические сессии', img: images.hero1},
+        {id: 3, title: 'Стратегические сессии', img: images.img3},
-        {id: 4, title: 'Сессии по созданию и управлению корпоративной идеологией', img: images.hero1},
+        {id: 4, title: 'Сессии по созданию и управлению корпоративной идеологией', img: images.img4},
-        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.hero1},
+        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.img5},
-        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', img: images.hero1},
+        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', img: images.img6},
     ]);
 
     return (

src/components/Facilitations/Example/Image.jsx

@@ -3,8 +3,10 @@ import { getImage } from 'gatsby-plugin-image';
 
 const Image = ({title, image}) => {
     return (
-        <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 bg-[size:100%] bg-center hover:bg-[size:110%] duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] basis-1/3 h-80">
+        <div className="flex basis-1/3 h-80 overflow-hidden">
-            <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
+            <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)]">
+                <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
+            </div>
         </div>
     )
 }

src/components/Hero.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { AiFillCheckCircle } from "react-icons/ai";
 import Button from './UI/Button';
 import { useStaticQuery, graphql } from "gatsby"
-import { getImage } from 'gatsby-plugin-image';
+import { getImage} from 'gatsby-plugin-image';
 import { TypeAnimation } from 'react-type-animation';
 import { motion } from "framer-motion"
 import { SlArrowDown } from "react-icons/sl";
@@ -18,10 +18,19 @@ const Hero = ({...props}) => {
         },
         hero2: file(relativePath: {eq: "hero2.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: JPG, quality: 80)
+            }
+        },
+        hero3: file(relativePath: {eq: "hero2.jpg"}) {
+            childImageSharp {
+                fluid {
+                    ...GatsbyImageSharpFluid
+                }
             }
         },
     }`);
+
+
     return (
         <>
             <section {...props} className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9'>

src/components/LegoSP.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const LegoSP = ({...props}) => {
+    return (
+        <section {...props} className='py-32'>
+            <div className="container max-w-5xl mx-auto">
+                <div className="flex flex-col text-slate-900 text-base">
+                    <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Сессии LEGO SP</h2>
+                    <p className='mb-10'><b>Основная цель метода LSP</b> – стимулировать творческое мышление участников, заставить их отключить стереотипность мышления.</p>
+                    <p className='mb-10'>В ходе сессии LSP участники «думают руками» – при помощи кирпичиков LEGO отвечают на различные вопросы, связанные с их идеями, проектами, бизнес-моделями, командой или стратегией развития. Тактильные действия включают фантазию на полную мощность при помощи тех участков нашего головного мозга, которые не задействованы только в ходе вербальной речи.</p>
+                    <p className="mb-8 font-bold">Результаты сессий LEGO SP:</p>
+                    <ul className='list-disc list-inside leading-normal'>
+                        <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>
+                </div>
+            </div>            
+        </section>
+    )
+}
+
+export default LegoSP

src/components/Teambuilding/Example/Example.jsx

@@ -32,6 +32,11 @@ const Example = () => {
                 gatsbyImageData(formats: WEBP, quality: 90)
             }
         },
+        piramide: file(relativePath: {eq: "teambuilding/piramide.jpg"}) {
+            childImageSharp {
+                gatsbyImageData(formats: WEBP, quality: 90)
+            }
+        },
     }`);
 
     const [examples, setExamples] = useState([
@@ -44,7 +49,7 @@ const Example = () => {
         {id: 7, title: 'Авторский тимбилдинг', img: images.author},
         {id: 8, title: 'Зимние Олимпийские игры', img: images.hero1},
         {id: 9, title: 'Командная картина', img: images.hero1},
-        {id: 10, title: 'Гигантская пирамида', img: images.hero1},
+        {id: 10, title: 'Гигантская пирамида', img: images.piramide},
     ]);
 
     return (

src/components/header.jsx

@@ -9,44 +9,44 @@ const Header = ({ siteTitle, menu }) => {
     const ref = useRef(null);
     const location = useLocation();
     const [menuH, setMenuH] = useState(0);
+    const [burgerMenu, setBurgerMenu] = useState(0);
+    const menuGeneralClasses = "container top-0 mx-auto flex items-center sm:justify-between justify-center max-sm:flex-col max-sm:overflow-y-hidden max-sm:bg-black max-sm:fixed transition-all";
     useEffect(() => {
         if(location.pathname === '/') {
             setMenuH(ref.current.scrollHeight);
         }
     }, []);
-    
     return (
         <header className="bg-black h-9 flex w-full fixed top-0 z-30">
-            <nav className="container mx-auto flex items-center justify-between">
+            <nav className={burgerMenu ? menuGeneralClasses + " max-sm:h-screen max-sm:translate-y-0" : menuGeneralClasses + " max-sm:h-0 max-sm:-translate-y-full"}>
                 <div className="flex items-center">
-                    <Link to="/"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
+                    <Link to="/" className="max-sm:hidden"><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>
+                    <a href="tel:+79200745505" className="text-white text-xs max-sm:text-xl max-sm:mb-12">8 (920) 074 55-05</a>
                 </div>
                 {location.pathname === '/'
                     ?
-                    <ul className='flex items-center'>
+                    <ul className='flex items-center max-sm:flex-col'>
-                        <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
+                        <li className="mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3"><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)]"}>
+                        <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3 relative [&>.drop-menu]:hover:h-[var(--menu-h)]"}>
                             <p className="cursor-pointer">Услуги</p>
                             <ul ref={ref} className="absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all">
                                 <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Бизнес-игры</AnchorLink></li>
                                 <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="facilitations" smooth={true}>Фасилитации</AnchorLink></li>
                                 <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="teambuilding" smooth={true}>Тимбилдинг</AnchorLink></li>
-                                <li className="mr-0"><AnchorLink className="cursor-pointer" to="courses" smooth={true}>Курсы</AnchorLink></li>
+                                <li className="mr-0"><AnchorLink className="cursor-pointer" to="legosp" smooth={true}>Lego SP</AnchorLink></li>
                             </ul>
                         </li>
-                        <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
+                        <li className="mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3"><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>
+                        <li className="text-white text-xs max-sm:text-lg max-sm:mb-3"><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>
+                        <li className="mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3"><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>
+                            <li key={item.id} className="mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3"><AnchorLink className="cursor-pointer" to={item.to} smooth={true}>{item.title}</AnchorLink></li>
                         )}
                     </ul>
                 }
-                
             </nav>
         </header>
     )

src/components/layout.jsx

@@ -29,7 +29,7 @@ const Layout = ({menu, children }) => {
             <div>
                 <main>{children}</main>
             </div>
-            <Footer menu={menu}></Footer>
+            {/*<Footer menu={menu}></Footer>*/}
         </>
     )
 }

src/pages/index.jsx

@@ -9,7 +9,7 @@ import About from "../components/About"
 import Games from "../components/Games/Games"
 import Facilitations from "../components/Facilitations/Facilitations"
 import Teambuilding from "../components/Teambuilding/Teambuilding"
-import Courses from "../components/Courses"
+import LegoSP from "../components/LegoSP"
 import Team from "../components/Team/Team"
 import Reviews from "../components/Reviews/Reviews"
 import Contact from "../components/Contact"
@@ -18,17 +18,17 @@ const IndexPage = ({data}) => {
     return(
         <Layout>
             <Hero id='hero'></Hero>
-            <Advantages id='advantages'></Advantages>
+            {/* <Advantages id='advantages'></Advantages>
             <About id='about'></About>
             <Games id='games'></Games>
             <Facilitations.Main id='facilitations'></Facilitations.Main>
             <Facilitations.Example></Facilitations.Example>
             <Teambuilding.Main id='teambuilding'></Teambuilding.Main>
             <Teambuilding.Example></Teambuilding.Example>
-            <Courses id="courses"></Courses>
+            <LegoSP id="legosp"></LegoSP>
             <Team id="team"></Team>
             <Reviews></Reviews>
-            <Contact id="contacts"></Contact>
+            <Contact id="contacts"></Contact>*/}
         </Layout>
     )