burger menu component, fix styles autstaffing and

main pages, autstaffing add swiper

package.json

@@ -47,6 +47,7 @@
     "semver": "7.3.2",
     "slick-carousel": "^1.8.1",
     "sweetalert2": "^11.4.8",
+    "swiper": "^11.1.3",
     "ts-loader": "^9.4.2"
   },
   "devDependencies": {

src/components/BurgerMenu/burgerButton.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import "./burgerButton.scss";
+
+export const BurgerButton = ({ active, setActive }) => {
+  const toggleBar = () => {
+    if (active) {
+      setActive(false);
+      document.body.style.overflow = "auto";
+    } else {
+      setActive(true);
+      document.body.style.overflow = "hidden";
+    }
+  };
+
+  return (
+    <div className="burger-button" onClick={() => toggleBar()}>
+      <div className="burger">
+        <div
+          className={active ? "burger__line  l1 change" : "burger__line"}
+        ></div>
+        <div
+          className={active ? "burger__line  l2 change" : "burger__line"}
+        ></div>
+        <div
+          className={active ? "burger__line  l3 change" : "burger__line"}
+        ></div>
+      </div>
+      <h3 className="burger-button__logo">меню</h3>
+    </div>
+  );
+};

src/components/BurgerMenu/burgerButton.scss

@@ -0,0 +1,51 @@
+.burger-button {
+  display: flex;
+  column-gap: 10px;
+  z-index: 10;
+
+  .burger {
+    padding: 1px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 3px;
+
+    @media (max-width: 431px) {
+      padding: 0;
+    }
+
+    &__line {
+      width: 19px;
+      border-radius: 39px;
+      height: 3.8px;
+      background-color: #a7ca60;
+      transition: 0.4s;
+
+      &:last-child {
+        width: 10.6px;
+      }
+    }
+
+    .l1.change {
+      transform: rotate(-45deg) translate(-5px, 5px);
+    }
+    .l2.change {
+      opacity: 0;
+    }
+    .l3.change {
+      transform: rotate(45deg) translate(-5px, -5px);
+      width: 19px;
+    }
+  }
+
+  &__logo {
+    color: #838383;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16.24px;
+    text-decoration: underline;
+
+    @media (max-width: 431px) {
+      display: none;
+    }
+  }
+}

src/components/BurgerMenu/burgerMenu.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import ITguild from "assets/images/logo/ITguild.svg";
+
+import "./burgerMenu.scss";
+
+export const BurgerMenu = ({ active }) => {
+  const items = [
+    {
+      name: "Вход",
+      path: "/auth"
+    },
+    {
+      name: "Личный кабинет",
+      path: "/profile"
+    },
+    {
+      name: "Трекер",
+      path: "/tracker-intro"
+    },
+    {
+      name: "Тесты",
+      path: "/quiz"
+    },
+    {
+      name: "Формы",
+      path: "/forms"
+    },
+    {
+      name: "Школа",
+      path: "/"
+    },
+    {
+      name: "Контакты",
+      path: "/"
+    },
+    {
+      name: "Блог",
+      path: "/blog"
+    },
+    {
+      name: "FAQ",
+      path: "/frequently-asked-questions"
+    }
+  ];
+  return (
+    <div className={active ? "burger-menu active" : "burger-menu"}>
+      <div className="blur" />
+      <div className={active ? "menu active" : "menu"}>
+        <div className="menu__title">
+          <img src={ITguild}></img>
+        </div>
+        <ul className="menu__navigation">
+          {items.map((item) => (
+            <li key={item.name}>
+              <Link to={item.path}>{item.name}</Link>
+            </li>
+          ))}
+        </ul>
+        <p className="menu__politic">Политика конфиденциальности</p>
+      </div>
+    </div>
+  );
+};

src/components/BurgerMenu/burgerMenu.scss

@@ -0,0 +1,85 @@
+.burger-menu {
+  .menu {
+    padding: 40px 10px;
+    visibility: hidden;
+    transition: 0.2s ease-in-out;
+    opacity: 0;
+    z-index: 8;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    background: #e1fccf;
+    width: 0;
+    flex-direction: column;
+    align-items: stretch;
+
+    &__title {
+      display: flex;
+      margin-top: 24px;
+
+      img {
+        width: 160px;
+
+        @media (max-width: 431px) {
+          width: 120px;
+        }
+      }
+    }
+
+    &__navigation {
+      margin-top: 28px;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      row-gap: 15px;
+      font-size: 20px;
+      line-height: 33px;
+
+      a,
+      a:hover,
+      a:active {
+        color: #000000;
+      }
+    }
+
+    &__politic {
+      margin-top: 42px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #000000;
+
+      @media (max-width: 431px) {
+        font-size: 11px;
+      }
+    }
+
+    &__contacts {
+      margin-top: 127px;
+      color: #000000;
+      h4 {
+        font-size: 20px;
+        line-height: 33px;
+      }
+      p {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .menu.active {
+    visibility: visible;
+    transition: 0.1s ease-in-out;
+    opacity: 1;
+    display: flex;
+    width: 33vw;
+    left: 0;
+    overflow: hidden;
+    padding-left: 40px;
+
+    @media (max-width: 431px) {
+      width: 100vw;
+    }
+  }
+}

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -1,18 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import SVG from "react-inlinesvg";
 import { Link, NavLink } from "react-router-dom";
 
+import { BurgerButton } from "@components/BurgerMenu/burgerButton";
+import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
+
 import authIcon from "assets/icons/authIcon.svg";
 
 import "./authHeader.scss";
 
 export const AuthHeader = () => {
+  const [actionMenu, setActionMenu] = useState(false);
   return (
     <div className="auth-header">
+      <BurgerMenu active={actionMenu} />
       <div className="auth-header__navigation">
         <div className="auth__logo">
           <div>
-            <SVG src={authIcon} />
+            <BurgerButton active={actionMenu} setActive={setActionMenu} />
           </div>
           <h3>IT GUILD</h3>
           <div>

src/components/Common/AuthHeader/authHeader.scss

@@ -35,7 +35,7 @@
           display: none;
 
           @media (max-width: 431px) {
-            display: block;
+            display: flex;
           }
         }
 

src/pages/Landing/Landing.jsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import SVG from "react-inlinesvg";
 import { Link, NavLink } from "react-router-dom";
 
+import { BurgerButton } from "@components/BurgerMenu/burgerButton";
+import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
 import { Footer } from "@components/Common/Footer/Footer";
 import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
 
@@ -11,23 +13,12 @@ import clue from "assets/icons/landingClue.svg";
 import tracker from "assets/icons/landingTracker.svg";
 import codeBg from "assets/images/landingBackgroundCode.svg";
 import cat from "assets/images/landingCat.png";
-import ITguild from "assets/images/logo/ITguild.svg";
 
 import "./landing.scss";
 
 export const Landing = () => {
-  const [active, setActive] = useState(false);
   const [modalReg, setModalReg] = useState(false);
-
+  const [menuActive, setMenuActive] = useState(false);
-  const toggleBar = () => {
-    if (active) {
-      setActive(false);
-      document.body.style.overflow = "auto";
-    } else {
-      setActive(true);
-      document.body.style.overflow = "hidden";
-    }
-  };
 
   const opportunities = [
     {
@@ -66,6 +57,7 @@ export const Landing = () => {
   return (
     <section className="landing">
       <ModalRegistration active={modalReg} setActive={setModalReg} />
+      <BurgerMenu active={menuActive} />
       <div className="landing__container">
         <div className="landing__head">
           <h2 className="head__logo">ITGUILD</h2>
@@ -83,20 +75,7 @@ export const Landing = () => {
             <SVG src={authIcon} />
             регистрация
           </div>
-          <div className="burger-menu" onClick={() => toggleBar()}>
+          <BurgerButton active={menuActive} setActive={setMenuActive} />
-            <div className="burger">
-              <div
-                className={active ? "burger__line  l1 change" : "burger__line"}
-              ></div>
-              <div
-                className={active ? "burger__line  l2 change" : "burger__line"}
-              ></div>
-              <div
-                className={active ? "burger__line  l3 change" : "burger__line"}
-              ></div>
-            </div>
-            <h3 className="burger-menu__logo">меню</h3>
-          </div>
           <div className="head__tracker">
             <div>
               <img src={tracker} alt="tracker" />
@@ -153,41 +132,6 @@ export const Landing = () => {
         </div>
         <Footer />
       </div>
-      <div className={active ? "auth-body active" : "auth-body"}>
-        <div className="auth-body__title">
-          <img src={ITguild}></img>
-        </div>
-        <ul className="auth-body__navigation">
-          <li>
-            <Link to={"/auth"}>Вход</Link>
-          </li>
-          <li>
-            <Link to={"/profile"}>Личный кабинет</Link>
-          </li>
-          <li>
-            <Link to={"/tracker-intro"}>Трекер</Link>
-          </li>
-          <li>
-            <Link to={"/quiz"}>Тесты</Link>
-          </li>
-          <li>
-            <Link to={"/forms"}>Формы</Link>
-          </li>
-          <li>
-            <a href="#">Школа</a>
-          </li>
-          <li>
-            <a href="#">Контакты</a>
-          </li>
-          <li>
-            <Link to={"/blog"}>Блог</Link>
-          </li>
-          <li>
-            <Link to={"/frequently-asked-questions"}>FAQ</Link>
-          </li>
-        </ul>
-        <p className="auth-body__politic">Политика конфиденциальности</p>
-      </div>
     </section>
   );
 };

src/pages/Landing/landing.scss

@@ -124,147 +124,6 @@
         }
       }
     }
-    .burger-menu {
-      cursor: pointer;
-      display: flex;
-      column-gap: 14px;
-      margin: 0 auto;
-      z-index: 10;
-
-      @media (max-width: 431px) {
-        margin: 0;
-        z-index: 9;
-      }
-
-      &__logo {
-        color: #838383;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 16.24px;
-        text-decoration: underline;
-
-        @media (max-width: 431px) {
-          display: none;
-        }
-      }
-      .burger {
-        padding: 1px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 3px;
-
-        @media (max-width: 431px) {
-          padding: 0;
-        }
-
-        &__line {
-          width: 19px;
-          border-radius: 39px;
-          height: 3.8px;
-          background-color: #a7ca60;
-          transition: 0.4s;
-
-          &:last-child {
-            width: 10.6px;
-          }
-        }
-
-        .l1.change {
-          transform: rotate(-45deg) translate(-5px, 5px);
-        }
-        .l2.change {
-          opacity: 0;
-        }
-        .l3.change {
-          transform: rotate(45deg) translate(-5px, -5px);
-          width: 19px;
-        }
-      }
-    }
-  }
-
-  .auth-body {
-    padding: 40px 10px;
-    visibility: hidden;
-    transition: 0.2s ease-in-out;
-    opacity: 0;
-    z-index: 8;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: #e1fccf;
-    width: 0;
-    flex-direction: column;
-    align-items: stretch;
-
-    &__title {
-      display: flex;
-      margin-top: 24px;
-
-      img {
-        width: 160px;
-
-        @media (max-width: 431px) {
-          width: 120px;
-        }
-      }
-    }
-
-    &__navigation {
-      margin-top: 28px;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      row-gap: 15px;
-      font-size: 20px;
-      line-height: 33px;
-
-      a,
-      a:hover,
-      a:active {
-        color: #000000;
-      }
-    }
-
-    &__politic {
-      margin-top: 42px;
-      font-size: 14px;
-      line-height: 22px;
-      color: #000000;
-
-      @media (max-width: 431px) {
-        font-size: 11px;
-      }
-    }
-
-    &__contacts {
-      margin-top: 127px;
-      color: #000000;
-      h4 {
-        font-size: 20px;
-        line-height: 33px;
-      }
-      p {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .auth-body.active {
-    visibility: visible;
-    transition: 0.1s ease-in-out;
-    opacity: 1;
-    display: flex;
-    width: 66vw;
-    left: 0;
-    overflow: hidden;
-    padding-left: 40px;
-
-    @media (max-width: 431px) {
-      width: 100vw;
-    }
   }
 
   &__info {

src/pages/Stack/Stack.jsx

@@ -1,11 +1,15 @@
 import React, { useRef, useState } from "react";
 import SVG from "react-inlinesvg";
+import "swiper/css";
+import { Navigation } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/scss/navigation";
 
 import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 
-import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
+// import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
-import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
+// import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
 import fileUploadIcon from "assets/icons/fileUploadIcon.svg";
 import Ellipse from "assets/images/EllipseIntro.svg";
 import backgroundOpp from "assets/images/backgroundOpportunity.png";
@@ -25,6 +29,40 @@ import portfolio from "assets/images/stackSteptsPortfolio.png";
 import "./stack.scss";
 
 export const Stack = () => {
+  const reviews = [
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 11
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 12
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 13
+    },
+    {
+      name: "Александр Гузеев",
+      position: "Руководитель проекта ООО “ЭЛАР”",
+      avatar: reviewsImgMok,
+      content:
+        "Команда ITGUILD берется за решение широкого круга задач, не боясь при этом ни сжатых сроков, ни сложной специфики проектов, и успешно доводит их ло решения. Разаработчики Кирилла смогли не только усилить существующую команду разработки, став ее полноценной частью, но и привести в проект новые идеи, свои знания и опыт.",
+      id: 14
+    }
+  ];
   const subjects = [
     {
       name: "Backend",
@@ -210,6 +248,12 @@ export const Stack = () => {
     }
   };
 
+  const targetRef = useRef(null);
+
+  const handleScroll = () => {
+    targetRef.current.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <section className="stack">
       <AuthHeader />
@@ -235,7 +279,9 @@ export const Stack = () => {
               команды, в зависимости от потребностей и объема работы.
             </p>
             <div className="intro__links">
-              <button className="stack__button">оставить заявку</button>
+              <button className="stack__button" onClick={handleScroll}>
+                оставить заявку
+              </button>
               <span className="intro__link">
                 Окунитесь в<br /> экосистему ITGUIL
               </span>
@@ -306,6 +352,7 @@ export const Stack = () => {
       <section className="stack__projects projects">
         <div className="stack__container projects__container">
           <img className="projects__code" src={code} alt="code" />
+          <img src={noClue} alt="clue" className="projects__clue" />
           <div className="projects__title">
             <h3>ITGUILD</h3>
           </div>
@@ -337,7 +384,7 @@ export const Stack = () => {
                 поиском, оформлением или увольнением сотрудников —{" "}
                 <span>мы берем на себя все хлопоты.</span>
               </p>
-              <button>оставить заявку</button>
+              <button onClick={handleScroll}>оставить заявку</button>
             </div>
           </div>
         </div>
@@ -417,34 +464,37 @@ export const Stack = () => {
           <div className="reviews__content">
             <h4>Что о нас говорят</h4>
             <div className="reviews__content-container">
+              <Swiper
+                modules={[Navigation]}
+                spaceBetween={50}
+                slidesPerView={1}
+                navigation
+              >
+                {reviews.map((review) => (
+                  <SwiperSlide key={review.id}>
                     <div className="review">
                       <div className="review__client">
-                  <img src={reviewsImgMok} alt="reviewsImgMok" />
+                        <img src={review.avatar} alt="reviewsImgMok" />
-                  <span>Александр Гузеев</span>
+                        <span>{review.name}</span>
-                  <p>Руководитель проекта ООО “ЭЛАР”</p>
+                        <p>{review.position}</p>
                       </div>
 
                       <div className="review__comment">
-                  <p>
+                        <p>{review.content}</p>
-                    Команда ITGUILD берется за решение широкого круга задач, не
-                    боясь при этом ни сжатых сроков, ни сложной специфики
-                    проектов, и успешно доводит их ло решения. <br />
-                    <br />
-                    Разаработчики Кирилла смогли не только усилить существующую
-                    команду разработки, став ее полноценной частью, но и
-                    привести в проект новые идеи, свои знания и опыт.
-                  </p>
                       </div>
                     </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
 
-              <div className="reviews__content-buttons">
+              {/* <div className="reviews__content-buttons">
                 <button>
                   <img src={arrowReviewsLeft} alt="" />
                 </button>
                 <button>
                   <img src={arrowReviewsRight} alt="" />
                 </button>
-              </div>
+              </div> */}
             </div>
           </div>
           <img
@@ -469,7 +519,9 @@ export const Stack = () => {
           <div className="contact__block">
             <div className="contact-info">
               <img src={noClue} alt="clue" />
-              <h3 className="info__title">ПОИСК</h3>
+              <h3 className="info__title" ref={targetRef}>
+                ПОИСК
+              </h3>
               <div className="info-content">
                 <div className="info-content__title">
                   <p>
@@ -591,7 +643,7 @@ export const Stack = () => {
                 <div className="form-submit">
                   <div className="form-submit__agreement">
                     <input
-                      type="radio"
+                      type="checkbox"
                       name="agreement"
                       checked={formData.agreement}
                       onChange={handleChange}

src/pages/Stack/stack.scss

@@ -637,6 +637,18 @@
         top: 24px;
       }
 
+      &__clue {
+        display: none;
+        @media (max-width: 431px) {
+          display: block;
+          position: absolute;
+          z-index: 2;
+          right: auto;
+          width: auto;
+          top: -120px;
+        }
+      }
+
       &__title {
         @media (max-width: 431px) {
           display: flex;
@@ -1222,6 +1234,7 @@
       }
 
       &__content {
+        width: 100%;
         margin: 0 0 45px 0;
 
         h4 {
@@ -1238,10 +1251,37 @@
         }
 
         &-container {
+          width: 650px;
+
+          @media (max-width: 431px) {
+            width: 100%;
+          }
+
+          .swiper {
+            padding-left: 65px;
+
+            @media (max-width: 431px) {
+              padding: 40px 0 0 0;
+            }
+
+            &-slide {
+              @media (max-width: 431px) {
                 display: flex;
-          flex-direction: row;
+                justify-content: center;
-          align-items: center;
+              }
-          column-gap: 20px;
+            }
+
+            &-button-prev {
+              @media (max-width: 431px) {
+                display: none;
+              }
+            }
+            &-button-next {
+              @media (max-width: 431px) {
+                display: none;
+              }
+            }
+          }
 
           .review {
             display: grid;
@@ -1760,10 +1800,36 @@
             }
 
             &__agreement {
-              display: flex;
+              display: grid;
+              align-items: center;
+              grid-template-columns: 7% 93%;
+              justify-items: center;
 
               input {
-                accent-color: #607536;
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                vertical-align: middle;
+                appearance: none;
+                -webkit-appearance: none;
+                outline: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:checked {
+                  background-color: #435225;
+                }
+
+                &::before {
+                  content: "";
+                  position: absolute;
+                  border-radius: 50%;
+                  width: 14px;
+                  height: 14px;
+                  border: 0.4px solid #607536;
+                }
               }
 
               p {