adaptive autstaffing

src/pages/Landing/Landing.jsx

@@ -3,6 +3,7 @@ import SVG from "react-inlinesvg";
 import { Link, NavLink } from "react-router-dom";
 
 import { Footer } from "@components/Common/Footer/Footer";
+import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
 
 import arrow from "assets/icons/arrows/arrowLanding.svg";
 import authIcon from "assets/icons/authIcon.svg";
@@ -16,6 +17,7 @@ import "./landing.scss";
 
 export const Landing = () => {
   const [active, setActive] = useState(false);
+  const [modalReg, setModalReg] = useState(false);
 
   const toggleBar = () => {
     if (active) {
@@ -63,16 +65,24 @@ export const Landing = () => {
 
   return (
     <section className="landing">
+      <ModalRegistration active={modalReg} setActive={setModalReg} />
       <div className="landing__container">
         <div className="landing__head">
           <h2 className="head__logo">ITGUILD</h2>
           <Link className="head__signIn" to="/auth">
             войти в систему
           </Link>
-          <Link className="head__signUp" to="/auth">
+
+          <div
+            className="head__signUp"
+            onClick={(e) => {
+              e.preventDefault();
+              setModalReg(true);
+            }}
+          >
             <SVG src={authIcon} />
             регистрация
-          </Link>
+          </div>
           <div className="burger-menu" onClick={() => toggleBar()}>
             <div className="burger">
               <div

src/pages/Landing/landing.scss

@@ -18,7 +18,7 @@
     display: flex;
     column-gap: 45px;
     align-items: center;
-    z-index: 1;
+    z-index: auto;
 
     @media (max-width: 431px) {
       padding: 0 24px;
@@ -33,6 +33,7 @@
         font-weight: 900;
         position: relative;
         letter-spacing: 4px;
+        z-index: 1;
 
         &:before {
           content: "";
@@ -57,6 +58,7 @@
         background: rgba(167, 202, 96, 1);
         font-weight: 400;
         border-radius: 32px;
+        z-index: 1;
 
         @media (max-width: 431px) {
           display: none;
@@ -64,6 +66,7 @@
       }
 
       &__signUp {
+        cursor: pointer;
         display: flex;
         column-gap: 8px;
         align-items: center;
@@ -71,6 +74,7 @@
         font-weight: 400;
         font-size: 13px;
         text-decoration: underline;
+        z-index: 1;
 
         @media (max-width: 431px) {
           display: none;
@@ -86,6 +90,7 @@
         border: 0.5px solid #e3e3e9;
         padding: 6px 20px 6px 6px;
         margin: 0 auto;
+        z-index: 1;
 
         @media (max-width: 431px) {
           margin: 0;
@@ -124,6 +129,7 @@
       display: flex;
       column-gap: 14px;
       margin: 0 auto;
+      z-index: 10;
 
       @media (max-width: 431px) {
         margin: 0;
@@ -209,11 +215,11 @@
       margin-top: 28px;
       padding: 0;
       list-style: none;
-      font-size: 14px;
-      line-height: 20px;
       display: flex;
       flex-direction: column;
       row-gap: 15px;
+      font-size: 20px;
+      line-height: 33px;
 
       a,
       a:hover,
@@ -251,9 +257,14 @@
     transition: 0.1s ease-in-out;
     opacity: 1;
     display: flex;
-    width: calc(100vw / 2.5);
+    width: 66vw;
     left: 0;
     overflow: hidden;
+    padding-left: 40px;
+
+    @media (max-width: 431px) {
+      width: 100vw;
+    }
   }
 
   &__info {