landing page of the main page and adaptive

src/pages/Landing/Landing.jsx

@@ -1,38 +1,59 @@
-import React from "react";
+import React, { useState } from "react";
 import SVG from "react-inlinesvg";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 
 import { Footer } from "@components/Common/Footer/Footer";
 
 import arrow from "assets/icons/arrows/arrowLanding.svg";
 import authIcon from "assets/icons/authIcon.svg";
 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 toggleBar = () => {
+    if (active) {
+      setActive(false);
+    } else {
+      setActive(true);
+    }
+  };
+
   const opportunities = [
     {
       name: "<span>Аутстаффинг</span> сотрудников",
-      class: "outstaffing__employees",
+      path: "/stack",
       img: cat
     },
     {
-      name: "Модуль для видеоконференций"
+      name: "<span>Найти</span> работу <br/> в IT",
+      path: "/stack",
+      img: cat
     },
     {
-      name: "Система контроля версий GIT"
+      name: "<span>Система</span> контроля версий GIT",
+      path: "/stack",
+      img: cat
     },
     {
-      name: "Управление задачами"
+      name: "<span>Управление</span> задачами",
+      path: "/stack",
+      img: cat
     },
     {
-      name: "Система для отчётности"
+      name: "<span>Система</span> для отчётности",
+      path: "/stack",
+      img: cat
     },
     {
       name: "Все наши предложения",
+      path: "/stack",
       class: "outstaffing__offers",
       img: arrow
     }
@@ -48,8 +69,29 @@ export const Landing = () => {
           </Link>
           <Link className="head__signUp" to="/auth">
             <SVG src={authIcon} />
-            авторизация
+            регистрация
           </Link>
+          <div className="burger-menu" 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-menu__logo">меню</h3>
+          </div>
+          <div className="head__tracker">
+            <div>
+              <img src={tracker} alt="tracker" />
+            </div>
+            <span>трекер</span>
+          </div>
+          <SVG className="head__auth" src={authIcon} />
         </div>
         <div className="landing__info">
           <p className="info__title">
@@ -75,30 +117,62 @@ export const Landing = () => {
         <div className="landing__opportunities">
           {opportunities.map((opportunity, index) => {
             return (
-              <div
+              <NavLink
                 className={
                   opportunity.class ? opportunity.class : "landing__opportunity"
                 }
                 key={index}
+                to={`${opportunity.path}`}
               >
-                {opportunity.class ? (
-                  <div>
-                    <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
-                    {opportunity.img ? (
-                      <img src={opportunity.img} alt="img" />
-                    ) : (
-                      ""
-                    )}
-                  </div>
-                ) : (
-                  <p>{opportunity.name}</p>
-                )}
-              </div>
+                <div>
+                  <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
+                  {opportunity.img ? (
+                    <img src={opportunity.img} alt="img" />
+                  ) : (
+                    ""
+                  )}
+                </div>
+              </NavLink>
             );
           })}
         </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>
   );
 };