V pre0.3_4

3 years ago · 90e213f066
parent da976d94b1
commit 90e213f066
21 changed files with 302 additions and 60 deletions
--- a/README.md
+++ b/README.md
@ -16,6 +16,9 @@ Talent Team - разработка корпоративных мероприят
 - Исправленно отображение длинной доп.информации об игре в Hero компоненте для страниц с играми.
 - Добавлен favicon для сайта.
 - Отключенно PWA.
+- Добавлен description для сайта.
+- Блок "Создание электронных курсов" за менен на другой блок - "Сессии Lego SP".
+- Для мобильной версии созданно Burger меню (не функционирует в данный момент).


 #### V 0.2
--- a/gatsby-config.js
+++ b/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`,
    {
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
-      "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "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",
--- a/package.json
+++ b/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"
--- a/src/components/Courses.jsx
+++ b/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
--- a/src/components/Facilitations/Example/Example.jsx
+++ b/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: 2, title: 'Креативные, инновационные сессии', img: images.hero1},
-        {id: 3, title: 'Стратегические сессии', img: images.hero1},
-        {id: 4, title: 'Сессии по созданию и управлению корпоративной идеологией', img: images.hero1},
-        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.hero1},
-        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', img: images.hero1},
+        {id: 1, title: 'Сессии по подведению итогов и ретроспективы', img: images.img1},
+        {id: 2, title: 'Креативные, инновационные сессии', img: images.img2},
+        {id: 3, title: 'Стратегические сессии', img: images.img3},
+        {id: 4, title: 'Сессии по созданию и управлению корпоративной идеологией', img: images.img4},
+        {id: 5, title: 'Сессии по развитию и взаимодействию между командами', img: images.img5},
+        {id: 6, title: 'Сессии с использованием метода LEGO SERIOUS PLAY', img: images.img6},
    ]);

    return (
--- a/src/components/Facilitations/Example/Image.jsx
+++ b/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">
-            <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
+        <div className="flex basis-1/3 h-80 overflow-hidden">
+            <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>
    )
 }
--- a/src/components/Hero.jsx
+++ b/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'>
--- a/src/components/LegoSP.jsx
+++ b/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
--- a/src/components/Teambuilding/Example/Example.jsx
+++ b/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 (
--- a/src/components/header.jsx
+++ b/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>
-                    <a href="tel:+79200745505" className="text-white text-xs">8 (920) 074 55-05</a>
+                    <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 max-sm:text-xl max-sm:mb-12">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)]"}>
+                    <ul className='flex items-center max-sm:flex-col'>
+                        <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 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="text-white text-xs"><AnchorLink className="cursor-pointer" to="contacts" 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 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>
    )
--- a/src/components/layout.jsx
+++ b/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>*/}
        </>
    )
 }
--- a/src/images/facilitations/1.jpg
+++ b/src/images/facilitations/1.jpg
--- a/src/images/facilitations/2.jpg
+++ b/src/images/facilitations/2.jpg
--- a/src/images/facilitations/3.jpg
+++ b/src/images/facilitations/3.jpg
--- a/src/images/facilitations/4.jpg
+++ b/src/images/facilitations/4.jpg
--- a/src/images/facilitations/5.jpg
+++ b/src/images/facilitations/5.jpg
--- a/src/images/facilitations/6.jpg
+++ b/src/images/facilitations/6.jpg
--- a/src/images/hero22.jpg
+++ b/src/images/hero22.jpg
--- a/src/images/teambuilding/piramide.jpg
+++ b/src/images/teambuilding/piramide.jpg
--- a/src/pages/index.jsx
+++ b/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>
    )