adaptive autstaffing

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -1,13 +1,26 @@
 import React from "react";
+import SVG from "react-inlinesvg";
 import { Link, NavLink } from "react-router-dom";
 
+import authIcon from "assets/icons/authIcon.svg";
+
 import "./authHeader.scss";
 
 export const AuthHeader = () => {
   return (
     <div className="auth-header">
       <div className="auth-header__navigation">
-        <h3 className="auth__logo">IT GUILD</h3>
+        <div className="auth__logo">
+          <div>
+            <SVG src={authIcon} />
+          </div>
+          <h3>IT GUILD</h3>
+          <div>
+            <Link to="/auth">
+              <SVG src={authIcon} />
+            </Link>
+          </div>
+        </div>
         <div className="auth-nav">
           <ul>
             <li>

src/components/Common/AuthHeader/authHeader.scss

@@ -5,6 +5,10 @@
   font-family: "GT Eesti Pro Display";
   background: #eeeeee;
 
+  @media (max-width: 431px) {
+    padding: 0;
+  }
+
   &__navigation {
     display: flex;
     align-items: center;
@@ -12,14 +16,42 @@
     width: 100%;
     justify-content: space-around;
 
+    @media (max-width: 431px) {
+      flex-direction: column;
+      height: auto;
+    }
+
     .auth {
       &__logo {
+        @media (max-width: 431px) {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 27px 27px 40px 27px;
+        }
+
+        div {
+          display: none;
+
+          @media (max-width: 431px) {
+            display: block;
+          }
+        }
+
+        h3 {
           color: #4a4a4a;
           font-weight: 900;
           font-size: 16px;
           letter-spacing: 2px;
           position: relative;
 
+          @media (max-width: 431px) {
+            font-size: 32px;
+            line-height: 37.12px;
+            letter-spacing: 0.11em;
+          }
+
           &::after {
             content: "";
             position: absolute;
@@ -29,10 +61,21 @@
             border-radius: 100px;
             left: 49%;
             top: -30%;
+
+            @media (max-width: 431px) {
+              width: 14.67px;
+              height: 14.67px;
+              left: 48%;
+            }
+          }
         }
       }
 
       &-nav {
+        @media (max-width: 431px) {
+          display: none;
+        }
+
         ul {
           display: flex;
           column-gap: 50px;
@@ -92,20 +135,24 @@
           }
           border: 1px solid #a7ca60;
           background: none;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
         }
       }
     }
   }
 }
 
-@media (max-width: 768px) {
+// @media (max-width: 768px) {
-  .auth-header {
+//   .auth-header {
-    display: none;
+//     display: none;
-  }
+//   }
-}
+// }
 
-@media (max-width: 1375px) {
+// @media (max-width: 1375px) {
-  .auth-header {
+//   .auth-header {
-    display: none;
+//     display: none;
-  }
+//   }
-}
+// }

src/pages/Stack/Stack.jsx

@@ -9,7 +9,8 @@ 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";
-import cat from "assets/images/cat.png";
+import bagITguild from "assets/images/bagITguild.svg";
+import cat from "assets/images/cat.svg";
 import clue from "assets/images/clue.png";
 import code from "assets/images/landingBackgroundCode.png";
 import codeWhite from "assets/images/landingBackgroundCodeWhite.png";
@@ -72,7 +73,7 @@ export const Stack = () => {
       description:
         "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов.",
       img: hand,
-      name: hand
+      name: "hand"
     },
     {
       description:
@@ -225,10 +226,12 @@ export const Stack = () => {
             </h1>
             <span className="intro__subtitle">IT-специалистов</span>
             <p className="intro__about">
-              Подберем и документально оформим IT-специалистов, после чего
+              <span>Все для решения конкретных задач</span> в области
-              передадим исполнителей под ваше руководство.{" "}
+              информационных технологий, обеспечивая оперативное усиление
-              <span>Вы получаете полное управление над сотрудниками,</span> имея
+              команды и гибкое управление персоналом. <br />
-              возможность контролировать и заменять IT штат.
+              <br />
+              Мы выделяем на проект как отдельных специалистов, так и целые
+              команды, в зависимости от потребностей и объема работы.
             </p>
             <div className="intro__links">
               <button className="stack__button">оставить заявку</button>
@@ -271,8 +274,11 @@ export const Stack = () => {
                 <img src={clue} alt="clue" />
                 <p>
                   Можем подготовить специалиста конкретно под ваш проект и
-                  используемый стек. Таким образом вы сможете сэкономить ресурсы
+                  используемый стек. <br />
-                  на поиск кандидата.
+                  <span>
+                    Таким образом вы сможете сэкономить ресурсы на поиск
+                    кандидата.
+                  </span>
                 </p>
               </div>
             </div>
@@ -291,12 +297,17 @@ export const Stack = () => {
               );
             })}
           </div>
+          <div className="opportunity__title-mobile">
+            <h3>Stack</h3>
+          </div>
         </div>
       </section>
       <section className="stack__projects projects">
         <div className="stack__container projects__container">
           <img className="projects__code" src={code} alt="code" />
-          <h3 className="projects__title">ITGUILD</h3>
+          <div className="projects__title">
+            <h3>ITGUILD</h3>
+          </div>
           <div className="projects__block">
             <h4>Наши проекты</h4>
             <div className="projects__examples">
@@ -321,8 +332,8 @@ export const Stack = () => {
               <p>
                 <span>Мы обеспечиваем</span> финансовые, юридические и кадровые
                 гарантии, предоставляем SLA и берем на себя ответственность за
-                работу команды. Вам не требуется заниматься поиском, оформлением
+                работу команды. <br /> <br /> Вам не требуется заниматься
-                или увольнением сотрудников —{" "}
+                поиском, оформлением или увольнением сотрудников —{" "}
                 <span>мы берем на себя все хлопоты.</span>
               </p>
               <button>оставить заявку</button>
@@ -370,6 +381,9 @@ export const Stack = () => {
           <div className="steps__portfolio">
             <img src={portfolio} alt="portfolio" />
           </div>
+          <div className="steps__portfolio-mobile">
+            <img src={bagITguild} alt="portfolio" />
+          </div>
           <img
             className="steps__code steps__code--first"
             src={code}
@@ -456,11 +470,14 @@ export const Stack = () => {
               <img src={clue} alt="clue" />
               <h3 className="info__title">ПОИСК</h3>
               <div className="info-content">
+                <div className="info-content__title">
                   <p>
-                  Заполните, пожалуйста, форму и наш <br /> менеджер обязательно
+                    <span>Заполните, пожалуйста, форму</span> и <br /> наш
-                  с вами свяжется
+                    менеджер обязательно с вами свяжется
                   </p>
                   <h4>Нужен специалист?</h4>
+                </div>
+                <div className="info-content__nav">
                   <span>Посмотрите и другие продукты ITGUILD</span>
                   <div className="info-content__buttons">
                     <button>Система для отчётности</button>
@@ -468,6 +485,7 @@ export const Stack = () => {
                   </div>
                 </div>
               </div>
+            </div>
             <form className="contact__form" onSubmit={handleSubmit}>
               <span className="form__subtitle">
                 Окунитесь в экосистему ITGUIL