adaptive autstaffing

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
 
 import { useFormValidation } from "@hooks/useFormValidation";
 import { useNotification } from "@hooks/useNotification";
@@ -18,7 +17,6 @@ import "./modalRegistration.scss";
 export const ModalRegistration = ({ active, setActive }) => {
   const [loader, setLoader] = useState(false);
   const [isPartner, setIsPartner] = useState(false);
-  const navigate = useNavigate();
 
   const fields = {
     username: "",
@@ -147,7 +145,6 @@ export const ModalRegistration = ({ active, setActive }) => {
               onClick={async (e) => {
                 e.preventDefault();
                 await handleSubmit(e);
-                navigate("/welcome-page");
               }}
               styles="button-box__submit"
             >

src/hooks/useFormValidation.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useNavigate } from "react-router";
 
 import { apiRequest } from "@api/request";
 
@@ -11,6 +12,7 @@ export const useFormValidation = (
   setLoader,
   closeModal
 ) => {
+  const navigate = useNavigate();
   // Состояние формы, содержащее значения полей
   const [formData, setFormData] = useState(fields);
 
@@ -108,6 +110,7 @@ export const useFormValidation = (
           handleClearForm();
           showNotificationTrue();
           closeModal();
+          navigate("/welcome-page");
         });
       } catch (error) {
         console.error("Error submitting form:", error);

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 {

src/pages/Stack/Stack.jsx

@@ -14,6 +14,7 @@ import cat from "assets/images/cat.png";
 import clue from "assets/images/clue.png";
 import code from "assets/images/landingBackgroundCode.png";
 import codeWhite from "assets/images/landingBackgroundCodeWhite.png";
+import noClue from "assets/images/noClue.png";
 import reviewsImgMok from "assets/images/reviewsImgMok.png";
 import flag from "assets/images/stackProjectsFlag.png";
 import fly from "assets/images/stackProjectsFly.png";
@@ -467,7 +468,7 @@ export const Stack = () => {
           <img src={code} className="contact__code--center" />
           <div className="contact__block">
             <div className="contact-info">
-              <img src={clue} alt="clue" />
+              <img src={noClue} alt="clue" />
               <h3 className="info__title">ПОИСК</h3>
               <div className="info-content">
                 <div className="info-content__title">
@@ -609,6 +610,15 @@ export const Stack = () => {
               </div>
             </form>
           </div>
+          <div className="info-mobile__nav">
+            <span>
+              Посмотрите и другие <br /> продукты ITGUILD
+            </span>
+            <div className="info-mobile__nav__buttons">
+              <button>Система для отчётности</button>
+              <button>Система контроля версий GIT</button>
+            </div>
+          </div>
         </div>
         <Footer />
       </section>

src/pages/Stack/stack.scss

@@ -1013,13 +1013,16 @@
         }
 
         &-mobile {
-          width: 100%;
+          display: none;
-          position: absolute;
+          @media (max-width: 431px) {
-          bottom: -40px;
+            width: 100%;
-          display: flex;
+            position: absolute;
+            bottom: -40px;
+            display: flex;
 
-          img {
+            img {
-            margin: 0 auto;
+              margin: 0 auto;
+            }
           }
         }
       }
@@ -1146,6 +1149,12 @@
           border-radius: 8px;
           bottom: -30px;
           left: -100px;
+
+          @media (max-width: 431px) {
+            width: 213px;
+            height: 124px;
+            left: auto;
+          }
         }
 
         &-counter {
@@ -1408,10 +1417,18 @@
 
         @media (max-width: 431px) {
           flex-direction: column;
+          align-items: center;
         }
       }
 
       &-info {
+        @media (max-width: 431px) {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: 300px;
+        }
+
         img {
           right: 423px;
           width: 100px;
@@ -1419,7 +1436,9 @@
           z-index: 3;
 
           @media (max-width: 431px) {
-            display: none;
+            right: auto;
+            width: auto;
+            top: -60px;
           }
         }
 
@@ -1444,9 +1463,20 @@
             filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1294117647));
 
             @media (max-width: 431px) {
-              position: static;
+              position: relative;
-              font-size: 203px;
+              right: auto;
+              top: -100px;
+              z-index: 4;
+              font-size: 180px;
               letter-spacing: -0.02em;
+              background: linear-gradient(
+                4.11deg,
+                #212121 11.19%,
+                #313131 66.08%
+              );
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              filter: drop-shadow(15px 10px 1px rgba(0, 0, 0, 0.1));
             }
           }
 
@@ -1458,6 +1488,9 @@
 
             @media (max-width: 431px) {
               padding: 0;
+              z-index: 5;
+              position: relative;
+              top: -200px;
             }
 
             &__title {
@@ -1485,13 +1518,12 @@
                 font-size: 19px;
 
                 @media (max-width: 431px) {
+                  padding: 0 45px;
                   font-size: 18px;
                   line-height: 20.88px;
                 }
 
                 span {
-                  display: none;
-
                   @media (max-width: 431px) {
                     display: inline;
                     font-weight: 700;
@@ -1501,6 +1533,9 @@
             }
 
             &__nav {
+              @media (max-width: 431px) {
+                display: none;
+              }
               span {
                 color: #eeeeee;
                 font-weight: 700;
@@ -1539,6 +1574,11 @@
         align-items: flex-end;
         z-index: 1;
 
+        @media (max-width: 431px) {
+          width: 90%;
+          align-items: center;
+        }
+
         .form {
           &__subtitle {
             font-weight: 700;
@@ -1546,6 +1586,10 @@
             color: #a7ca60;
             position: relative;
             top: -10px;
+
+            @media (max-width: 431px) {
+              display: none;
+            }
           }
 
           &-container {
@@ -1556,6 +1600,17 @@
             font-weight: 700;
             color: #607536;
 
+            @media (max-width: 431px) {
+              width: 100%;
+              padding: 30px 50px;
+            }
+
+            p {
+              @media (max-width: 431px) {
+                display: none;
+              }
+            }
+
             .input-error {
               border: 1px solid red;
             }
@@ -1576,6 +1631,18 @@
             row-gap: 10px;
             justify-items: center;
 
+            @media (max-width: 431px) {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
+
+            div {
+              @media (max-width: 431px) {
+                width: 100%;
+              }
+            }
+
             input {
               padding: 10px;
               width: 205px;
@@ -1583,6 +1650,11 @@
               border: 0.2px solid #607536;
               border-radius: 8px;
               background-color: #98b857;
+
+              @media (max-width: 431px) {
+                width: 100%;
+                height: 55px;
+              }
             }
             input::placeholder {
               margin: 0 0 0 19px;
@@ -1606,6 +1678,11 @@
               border-radius: 8px;
               resize: none;
               background-color: #98b857;
+
+              @media (max-width: 431px) {
+                width: 100%;
+                margin: 30px 0 0 0;
+              }
             }
             textarea::placeholder {
               color: #435225;
@@ -1624,6 +1701,12 @@
             justify-content: space-between;
             align-items: center;
 
+            @media (max-width: 431px) {
+              margin: 53px 0 50px 0;
+              flex-direction: column;
+              row-gap: 19px;
+            }
+
             .button-upload {
               cursor: pointer;
               width: 160px;
@@ -1650,6 +1733,15 @@
             p {
               font-size: 9px;
               font-weight: 300;
+
+              @media (max-width: 431px) {
+                display: flex;
+                flex-direction: column-reverse;
+                font-size: 14px;
+                font-weight: 300;
+                line-height: 16.24px;
+                color: #607536;
+              }
             }
 
             span {
@@ -1662,6 +1754,11 @@
             align-items: center;
             justify-content: space-around;
 
+            @media (max-width: 431px) {
+              flex-direction: column;
+              row-gap: 56px;
+            }
+
             &__agreement {
               display: flex;
 
@@ -1674,6 +1771,13 @@
                 font-weight: 300;
                 font-size: 9px;
                 color: #607536;
+
+                @media (max-width: 431px) {
+                  color: #435225;
+                  display: inline;
+                  text-align: left;
+                  font-size: 11px;
+                }
               }
 
               a:active,
@@ -1705,5 +1809,45 @@
         }
       }
     }
+    .info-mobile__nav {
+      display: none;
+      @media (max-width: 431px) {
+        display: block;
+        margin-top: 79px;
+      }
+      span {
+        color: #eeeeee;
+        font-size: 25px;
+        font-weight: 700;
+        line-height: 29px;
+        letter-spacing: 0.01em;
+      }
+
+      &__buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 47px 0 0 0;
+        row-gap: 25px;
+
+        button {
+          background: linear-gradient(
+            110.06deg,
+            rgba(87, 87, 87, 0.34) 0%,
+            rgba(104, 104, 104, 0.34) 99.25%
+          );
+          width: 324px;
+          height: 101px;
+          border-radius: 8px;
+          border: 0.5px solid #6c6c6c;
+          box-shadow: 10px 9px 14.3px 0px #0000000f;
+          color: #f1f1f1;
+          font-size: 19px;
+          font-weight: 500;
+          line-height: 20.33px;
+          padding: 30px 60px;
+        }
+      }
+    }
   }
 }