diff --git a/README.md b/README.md index b05125c..10caa63 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,9 @@ Talent Team - разработка корпоративных мероприят - Отключенно PWA. - Добавлен description для сайта. - Блок "Создание электронных курсов" за менен на другой блок - "Сессии Lego SP". -- Для мобильной версии созданно Burger меню (не функционирует в данный момент). +- Для мобильной и планшетной версии созданно Burger меню. +- Адаптирован блок Header, Advantages, About на главной странице под все разрешения (неадаптированые блоки временно скрыты). +- В блоке Header, Advantages, About на главной странице исправленны все ошибки и варнинги. #### V 0.2 diff --git a/package-lock.json b/package-lock.json index c4e1ea6..f67ae2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@headlessui/react": "^1.7.12", "@heroicons/react": "^2.0.16", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^10.12.16", "gatsby": "^5.7.0", "gatsby-plugin-image": "^3.7.0", @@ -5244,6 +5245,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -19875,6 +19881,11 @@ } } }, + "body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", diff --git a/package.json b/package.json index b602b74..32ef8ce 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dependencies": { "@headlessui/react": "^1.7.12", "@heroicons/react": "^2.0.16", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^10.12.16", "gatsby": "^5.7.0", "gatsby-plugin-image": "^3.7.0", diff --git a/src/components/About.jsx b/src/components/About.jsx index 5155a7d..1a8b7fb 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,23 +1,22 @@ import React from 'react'; -import { StaticImage } from "gatsby-plugin-image" import Button from './UI/Button'; const About = ({...props}) => { return ( -
-
-
-

Команда «Talent Team» гордится богатым, практическим опытом создания сплоченного, мотивированного коллектива, проведению оценки компетенций и развитию потенциала у сотрудников.

-

Благодаря слаженной работы и экспертизы команда зарекомендовала себя как на внутреннем рынке, так и на международном.

-

Сценарии программ (бизнес- игр, квестов, тимбилдингов) созданы для того, чтобы развивать потенциал ваших сотрудников, научить эффективно взаимодействовать, улучшить коммуникацию как между сотрудниками, так и между отделами в вашей организации. Создать эффективную команду стремящуюся к высоким результатам.

-

В своей работе используем методы и инструменты, которые считаются лучшими на сегодняшний день.

-

Поэтому, каждая созданная нашей командой программа индивидуальна, мы с огромным трепетом и интересом разрабатываем их под вас. Мы дорожим вашим доверием, и с огромной благодарностью ценим наше сотрудничество.

-

Мы разрабатываем и проводим бизнес-игры и бизнес-симуляции любой сложности «под ключ». Мы провели более 150 игр, с количеством игроков от 4 до 400.

-

Мы убеждены, что каждое проводимое корпоративное мероприятие должны быть максимально полезны, придерживаясь главной цели – это развитие персонала. Ведь, развивая персонал, мы открываем для бизнеса новые возможности.

+
+
+
+

Команда «Talent Team» гордится богатым, практическим опытом создания сплоченного, мотивированного коллектива, проведению оценки компетенций и развитию потенциала у сотрудников.

+

Благодаря слаженной работы и экспертизы команда зарекомендовала себя как на внутреннем рынке, так и на международном.

+

Сценарии программ (бизнес- игр, квестов, тимбилдингов) созданы для того, чтобы развивать потенциал ваших сотрудников, научить эффективно взаимодействовать, улучшить коммуникацию как между сотрудниками, так и между отделами в вашей организации. Создать эффективную команду стремящуюся к высоким результатам.

+

В своей работе используем методы и инструменты, которые считаются лучшими на сегодняшний день.

+

Поэтому, каждая созданная нашей командой программа индивидуальна, мы с огромным трепетом и интересом разрабатываем их под вас. Мы дорожим вашим доверием, и с огромной благодарностью ценим наше сотрудничество.

+

Мы разрабатываем и проводим бизнес-игры и бизнес-симуляции любой сложности «под ключ». Мы провели более 150 игр, с количеством игроков от 4 до 400.

+

Мы убеждены, что каждое проводимое корпоративное мероприятие должны быть максимально полезны, придерживаясь главной цели – это развитие персонала. Ведь, развивая персонал, мы открываем для бизнеса новые возможности.

-
- - +
+ +
diff --git a/src/components/Advantage.jsx b/src/components/Advantage.jsx index 8683b45..ccdf8f9 100644 --- a/src/components/Advantage.jsx +++ b/src/components/Advantage.jsx @@ -2,11 +2,11 @@ import React from 'react'; const Advantage = ({className, icon, title, description}) => { return ( -
+
-
{icon}
-

{title}

-

{description}

+
{icon}
+

{title}

+

{description}

); diff --git a/src/components/Advantages.jsx b/src/components/Advantages.jsx index a8b3e2f..24d58c7 100644 --- a/src/components/Advantages.jsx +++ b/src/components/Advantages.jsx @@ -7,22 +7,22 @@ import { FaConnectdevelop } from "react-icons/fa"; const Advantages = ({...props}) => { - const [advantages, setAdvantages] = useState([ + const [advantages] = useState([ {id: 1, icon: , title: 'Опытность', description: 'Более 10 лет опыта'}, {id: 2, icon: , title: 'Глобальность', description: 'Международная экспертиза'}, {id: 3, icon: , title: 'Индивидуальность', description: 'Индивидуальный подход к каждому клиенту'}, - {id: 4, icon: , title: 'Инновации', description: 'Мы не стоим на месте, мы движемся в ногу со временем, используя технологичные решения'} + {id: 4, icon: , title: 'Инновации', description: 'Движемся в ногу со временем, используя технологичные решения'} ]); return ( -
-
-

«Играя мы развиваем ваш бизнес»

-

Мы помогаем воодушевлять, развивать сотрудников с прицелом на плодотворную командную работу и результата для Бизнеса!

+
+
+

«Играя мы развиваем ваш бизнес»

+

Мы помогаем воодушевлять, развивать сотрудников с прицелом на плодотворную командную работу и результата для Бизнеса!

-
+
{advantages.map(advantage=> - + )}
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 46a979a..a08f127 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,12 +1,11 @@ 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 { TypeAnimation } from 'react-type-animation'; import { motion } from "framer-motion" import { SlArrowDown } from "react-icons/sl"; -import { Link as AnchorLink, animateScroll as scroll, scroller } from "react-scroll"; +import { Link as AnchorLink } from "react-scroll"; const Hero = ({...props}) => { const images = useStaticQuery(graphql` @@ -33,8 +32,8 @@ const Hero = ({...props}) => { return ( <> -
-
+
+
{ ]} wrapper="h1" cursor={true} - className='text-5xl leading-snug font-semibold mb-6 text-white text-center uppercase' + className='text-5xl max-sm:text-2xl max-lg:text-4xl leading-snug font-semibold mb-6 text-white text-center uppercase' /> -

Мы специализируемся на разработке и проведении деловых игр, тренингов, бизнес-симуляций, корпоративных мероприятий направленных на:

-
    -
  • оценку
    • -
  • обучение
    • -
  • развитие
    • +

    Мы специализируемся на разработке и проведении деловых игр, тренингов, бизнес-симуляций, корпоративных мероприятий направленных на:

    +
      +
    • оценку
      • +
    • обучение
      • +
    • развитие
- - + + - - + +
); diff --git a/src/components/header.jsx b/src/components/header.jsx index f634b6e..b97c652 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -3,31 +3,51 @@ import { Link } from "gatsby" import { StaticImage } from "gatsby-plugin-image" import { Link as AnchorLink } from "react-scroll"; import { useLocation } from '@reach/router'; +import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; -const Header = ({ siteTitle, menu }) => { +const Header = ({ 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"; + const menuGeneralClasses = "md:container max-md:w-full max-md:-mx-3 top-0 mx-auto flex items-center md:justify-between justify-center max-md:flex-col max-md:overflow-y-hidden max-md:bg-black max-md:fixed transition-all"; + const burgerGeneralClasses = "bg-white w-7 h-[3px] before:w-7 before:h-[3px] before:bg-white before:block before:relative after:w-7 after:h-[3px] after:bg-white after:block after:relative transition-all before:transition-all after:transition-all"; + const burgerActivation = () => { + + window.addEventListener("resize", (e) => { + if(window.screen.width > 767) { + setBurgerMenu(0); + enableBodyScroll(document.body); + } + }); + + if(burgerMenu) { + setBurgerMenu(0); + enableBodyScroll(document.body); + } else { + setBurgerMenu(1); + disableBodyScroll(document.body); + } + } + useEffect(() => { if(location.pathname === '/') { setMenuH(ref.current.scrollHeight); } - }, []); + }, [location.pathname]); return ( -
-