Merge pull request #58 from apuc/parthners-area

Parthners area

package.json

@@ -42,12 +42,14 @@
     "react-router": "latest",
     "react-router-dom": "^6.2.1",
     "react-select": "^5.7.0",
+    "react-slick": "^0.29.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-yandex-metrika": "^2.6.0",
     "redux-devtools-extension": "^2.13.9",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "semver": "7.3.2",
+    "slick-carousel": "^1.8.1",
     "sweetalert2": "^11.4.8",
     "ts-loader": "^9.4.2"
   },

src/components/AuthBox/AuthBox.js

@@ -1,29 +1,27 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, { useEffect, useRef, useState } from "react";
-import {Link, useNavigate} from 'react-router-dom'
+import { Link, useNavigate } from "react-router-dom";
-import {useDispatch, useSelector} from 'react-redux'
+import { useDispatch, useSelector } from "react-redux";
 
-import {Loader} from '../Loader/Loader'
+import { Loader } from "../Loader/Loader";
 import ErrorBoundary from "../../hoc/ErrorBoundary";
 
-import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
+import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
-import {loading} from '../../redux/loaderSlice'
+import { loading } from "../../redux/loaderSlice";
-import {setRole} from '../../redux/roleSlice'
+import { setRole } from "../../redux/roleSlice";
-import {selectIsLoading} from '../../redux/loaderSlice'
+import { selectIsLoading } from "../../redux/loaderSlice";
 
-import {apiRequest} from "../../api/request";
+import { apiRequest } from "../../api/request";
 
-import ellipse from '../../images/ellipse.png'
+import ellipse from "../../images/ellipse.png";
 
-import './authBox.scss'
+import "./authBox.scss";
 
-import Swal from 'sweetalert2'
+import Swal from "sweetalert2";
-import withReactContent from 'sweetalert2-react-content'
+import withReactContent from "sweetalert2-react-content";
 
 const SweetAlert = withReactContent(Swal);
 
-
+export const AuthBox = ({ title }) => {
-export const AuthBox = ({title, altTitle, roleChangeLink}) => {
-
   const dispatch = useDispatch();
   const ref = useRef();
   const navigate = useNavigate();
@@ -35,125 +33,109 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
 
   const handleModalError = (error) => {
     SweetAlert.fire({
-      title: 'Ошибка',
+      title: "Ошибка",
-      text: error
+      text: error,
     });
 
-    setError(null)
+    setError(null);
-
   };
 
   useEffect(() => {
-    if (!localStorage.getItem('auth_token')) {
+    if (!localStorage.getItem("auth_token")) {
-      dispatch(auth(false))
+      dispatch(auth(false));
     }
   }, []);
 
   useEffect(() => {
     if (isAuth) {
-      navigate('/')
+      navigate("/");
     }
   });
 
-
   const submitHandler = () => {
-
     let formData = new FormData(ref.current);
     if (!isLoading) {
       dispatch(loading(true));
-      apiRequest('/user/login',
+      apiRequest("/user/login", {
-          {
+        method: "POST",
-            method: 'POST',
+        data: formData,
-            data: formData
+      }).then((res) => {
-          }).then((res) => {
-
         if (!res.access_token) {
-
+          setError("Некорректные данные для входа");
-          setError('Некорректные данные для входа');
+          dispatch(loading(false));
-          dispatch(loading(false))
-
         } else {
-
+          localStorage.setItem("auth_token", res.access_token);
-          localStorage.setItem('auth_token', res.access_token);
+          localStorage.setItem("id", res.id);
-          localStorage.setItem('id', res.id);
+          localStorage.setItem("cardId", res.card_id);
-          localStorage.setItem('cardId', res.card_id);
+          localStorage.setItem("role_status", res.status);
-          localStorage.setItem('role_status', res.status);
           localStorage.setItem(
-              'access_token_expired_at',
+            "access_token_expired_at",
-              res.access_token_expired_at
+            res.access_token_expired_at
           );
           dispatch(auth(true));
           dispatch(setUserInfo(res));
           dispatch(loading(false));
-          dispatch(setRole('ROLE_PARTNER'))
+          dispatch(setRole("ROLE_PARTNER"));
         }
-      })
+      });
     }
   };
 
   return (
-      <div className='auth-box'>
+    <div className="auth-box">
-        <h2 className='auth-box__header'>
+      <h2 className="auth-box__header">
-          Войти в <span>систему</span>
+        Войти в <span>систему</span>
-        </h2>
+      </h2>
-        <div className='auth-box__title'>
+      <div className="auth-box__title">
-          <img src={ellipse} alt=''/>
+        <img src={ellipse} alt="" />
-          <span>{title}</span>
+        <span>{title}</span>
-        </div>
-        <form ref={ref} className='auth-box__form'>
-          <label htmlFor='login'>Ваш логин:</label>
-          <input
-              id='login'
-              type='text'
-              name='username'
-              placeholder='Логин'
-          />
-
-          <label htmlFor='password'>Пароль:</label>
-          <input
-              id='password'
-              type='password'
-              name='password'
-              placeholder='Пароль'
-          />
-
-          {error && (
-              <div className='auth-box__form-error'>
-                <ErrorBoundary>
-
-
-                  {
-                    handleModalError(error)
-                  }
-                  {/*<SweetAlert*/}
-                  {/*    show={!!error}*/}
-                  {/*    title='Ошибка'*/}
-                  {/*    text={error}*/}
-                  {/*    onConfirm={() => setError(null)}*/}
-                  {/*/>*/}
-                </ErrorBoundary>
-              </div>
-          )}
-
-          <div className='auth-box__form-buttons'>
-            <button
-                className='auth-box__form-btn'
-                onClick={(e) => {
-                  e.preventDefault();
-                  submitHandler()
-                }}
-            >
-              {isLoading ? <Loader/> : 'Войти'}
-            </button>
-
-            <Link to={roleChangeLink}>
-              <button className='auth-box__form-btn--role auth-box__auth-link'>
-                {altTitle}
-              </button>
-            </Link>
-          </div>
-        </form>
-
       </div>
-  )
+      <form ref={ref} className="auth-box__form">
+        <label htmlFor="login">Ваш логин:</label>
+        <input id="login" type="text" name="username" placeholder="Логин" />
+
+        <label htmlFor="password">Пароль:</label>
+        <input
+          id="password"
+          type="password"
+          name="password"
+          placeholder="Пароль"
+        />
+
+        {error && (
+          <div className="auth-box__form-error">
+            <ErrorBoundary>
+              {handleModalError(error)}
+              {/*<SweetAlert*/}
+              {/*    show={!!error}*/}
+              {/*    title='Ошибка'*/}
+              {/*    text={error}*/}
+              {/*    onConfirm={() => setError(null)}*/}
+              {/*/>*/}
+            </ErrorBoundary>
+          </div>
+        )}
+
+        <div className="auth-box__form-buttons">
+          <button
+            className="auth-box__form-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              submitHandler();
+            }}
+          >
+            {isLoading ? <Loader /> : "Войти"}
+          </button>
+
+          {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
+          <button
+            className="auth-box__form-btn--role auth-box__auth-link"
+            onClick={(e) => e.preventDefault()}
+          >
+            Регистрация
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };

src/components/AuthBox/authBox.scss

@@ -5,7 +5,7 @@
   margin-bottom: 194px;
 
   &__header {
-    font-family: 'GT Eesti Pro Display';
+    font-family: "GT Eesti Pro Display";
     font-size: 5.3em;
     font-weight: 700;
     font-style: normal;
@@ -22,7 +22,7 @@
   }
 
   &__sign-in {
-    font-family: 'GT Eesti Pro Display';
+    font-family: "GT Eesti Pro Display";
     font-size: 5.3em;
     font-weight: 700;
     font-style: normal;
@@ -32,7 +32,7 @@
     margin-top: 164px;
 
     span {
-      font-family: 'GT Eesti Pro Display';
+      font-family: "GT Eesti Pro Display";
       color: #52b709;
       font-style: normal;
       letter-spacing: 0.56px;
@@ -49,7 +49,7 @@
 
     span {
       color: #18586e;
-      font-family: 'GT Eesti Pro Display';
+      font-family: "GT Eesti Pro Display";
       font-size: 2em;
       font-weight: 500;
       font-style: normal;
@@ -72,7 +72,7 @@
 
     label {
       color: #48802d;
-      font-family: 'GT Eesti Pro Display';
+      font-family: "GT Eesti Pro Display";
       font-size: 2.4em;
       font-weight: 500;
       font-style: normal;
@@ -91,7 +91,7 @@
       border: 1px solid #c4c4c4;
       background-color: #ffffff;
       margin-bottom: 60px;
-      font-family: 'GT Eesti Pro Display';
+      font-family: "GT Eesti Pro Display";
       font-size: 2.2em;
       font-weight: 300;
       font-style: normal;
@@ -124,7 +124,7 @@
         );
       border: none;
       color: #ffffff;
-      font-family: 'Muller';
+      font-family: "Muller";
       font-weight: 500;
       font-size: 2.2em;
       font-weight: bold;
@@ -152,7 +152,7 @@
         border-radius: 38px;
         background-color: #ffffff;
         border: 2px solid #6aaf5c;
-        font-family: 'Muller';
+        font-family: "Muller";
         font-size: 2em;
         font-weight: 300;
         letter-spacing: normal;
@@ -174,7 +174,7 @@
     margin-bottom: 0px;
 
     &__header {
-      margin-top: 50px;
+      margin-top: 120px;
       line-height: 20px;
     }
 

src/components/AuthHeader/AuthHeader.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+import userIcon from "../../images/userIcon.png";
+
+import "./authHeader.scss";
+
+export const AuthHeader = ({}) => {
+  return (
+    <div className="auth-header">
+      <div className="auth-header__logo">
+        <h3>itguild.</h3>
+      </div>
+      <div className="auth-header__navigation">
+        <div className="container">
+          <div className="auth-nav">
+            <ul>
+              <li>
+                <a href="#">Главная</a>
+              </li>
+              <li>
+                <a href="#">Кабинет разработчика</a>
+              </li>
+              <li>
+                <a href="#">Школа</a>
+              </li>
+            </ul>
+
+            <a href="#">
+              <img src={userIcon}></img>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthHeader;

src/components/AuthHeader/authHeader.scss

@@ -0,0 +1,65 @@
+.auth-header {
+  background-color: #f1f1f1;
+
+  &__logo {
+    padding: 0 0 0 160px;
+    height: 55px;
+    display: flex;
+    align-items: center;
+
+    h3 {
+      font-size: 20px;
+      line-height: 32px;
+      color: #000000;
+    }
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    height: 66px;
+    width: 100%;
+    background: #ffffff;
+
+    .auth-nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      ul {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+          margin-right: 25px;
+
+          font-size: 18px;
+          line-height: 32px;
+
+          a,
+          a:hover {
+            color: #897676;
+          }
+
+          a:focus {
+            color: #000000;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .auth-header {
+    display: none;
+  }
+}
+
+@media (max-width: 1024px) {
+  .auth-header {
+    display: none;
+  }
+}

src/components/SideBar/SideBar.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+
+import arrow from "../../images/sideBarArrow.svg";
+
+import "./sidebar.scss";
+
+export const SideBar = () => {
+  const [active, setActive] = useState(false);
+
+  const toggleBar = () => {
+    if (active) {
+      setActive(false);
+    } else {
+      setActive(true);
+    }
+  };
+
+  return (
+    <div className="auth-menu">
+      <div className="auth-title">
+        <div className="text">
+          <div className="burger" onClick={() => toggleBar()}>
+            <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>МЕНЮ</h3>
+        </div>
+        <p className="outstaffing">
+          <img src={arrow}></img>
+          2023 © Outstaffing
+        </p>
+      </div>
+
+      <div className={active ? "auth-body active" : "auth-body"}>
+        <div className="auth-body__title">
+          <h3>IT</h3>
+          <p>guild</p>
+          <span>Аутстафинговая компания</span>
+        </div>
+        <ul className="auth-body__navigation">
+          <li>
+            <a href="#">Вход для партнеров</a>
+          </li>
+          <li>
+            <a href="#">Кабинет разработчика</a>
+          </li>
+          <li>
+            <a href="#">Школа</a>
+          </li>
+          <li>
+            <a href="#">Отрасли</a>
+          </li>
+          <li>
+            <a href="#">Контакты</a>
+          </li>
+        </ul>
+        <p className="auth-body__politic">Политика конфиденциальности</p>
+        <div className="auth-body__contacts">
+          <h4>+7 812 363 17 87</h4>
+          <p>Перезвонить Вам?</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;

src/components/SideBar/sidebar.scss

@@ -0,0 +1,202 @@
+.auth-menu {
+  z-index: 99;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 141px;
+  height: 100%;
+  background: #e1fccf;
+
+  @media (max-width: 1024px) {
+    position: fixed;
+    width: 100% !important;
+    height: 80px;
+    margin-bottom: 50px;
+  }
+
+  @media (max-width: 1440px) {
+    width: 80px;
+  }
+}
+
+.auth-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 80%;
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    margin: 70px 0 0 0;
+
+    h3 {
+      transform: rotate(270deg);
+      font-size: 25px;
+      line-height: 32px;
+      text-transform: uppercase;
+      color: #222222;
+    }
+
+    .burger {
+      cursor: pointer;
+      margin-bottom: 70px;
+
+      &__line {
+        width: 32px;
+        border-radius: 33px;
+        height: 5px;
+        background-color: #333;
+        margin: 5px 0 0 27px;
+        transition: 0.4s;
+      }
+
+      .l1.change {
+        transform: rotate(-45deg) translate(-7px, 6px);
+      }
+      .l2.change {
+        opacity: 0;
+      }
+      .l3.change {
+        transform: rotate(45deg) translate(-8px, -8px);
+      }
+    }
+  }
+
+  .outstaffing {
+    transform: rotate(270deg);
+    font-size: 18px;
+    line-height: 32px;
+    width: 200px;
+
+    img {
+      margin-right: 15px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: row;
+    height: 100%;
+
+    .text {
+      margin: 0;
+      flex-direction: row;
+
+      .burger {
+        margin-bottom: 5px;
+      }
+
+      h3 {
+        display: none;
+      }
+    }
+
+    .outstaffing {
+      margin: 0;
+      width: 150px;
+      font-size: 12px;
+      transform: none;
+
+      img {
+        margin-right: 5px;
+        width: 15px;
+      }
+    }
+  }
+}
+
+.auth-body {
+  padding: 40px;
+  display: none;
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #e1fccf;
+  width: 0;
+  flex-direction: column;
+  align-items: stretch;
+
+  &__title {
+    display: flex;
+    flex-wrap: wrap;
+    h3 {
+      color: #52b709;
+      font-size: 35px;
+      line-height: 32px;
+      margin-right: 10px;
+    }
+
+    p {
+      width: 70%;
+      font-size: 30px;
+      line-height: 32px;
+      color: #000000;
+    }
+    span {
+      font-size: 5px;
+      margin-left: 41px;
+    }
+  }
+
+  &__navigation {
+    margin-top: 28px;
+    padding: 0;
+    list-style: none;
+    font-size: 20px;
+    line-height: 33px;
+
+    a,
+    a:hover,
+    a:active {
+      color: #000000;
+    }
+  }
+
+  &__politic {
+    margin-top: 42px;
+    font-size: 12px;
+    line-height: 22px;
+    color: #000000;
+  }
+
+  &__contacts {
+    margin-top: 127px;
+    color: #000000;
+    h4 {
+      font-size: 20px;
+      line-height: 33px;
+    }
+    p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    &__title {
+      margin-top: 35px;
+    }
+
+    &__politic {
+      margin-top: 35px;
+    }
+
+    &__contacts {
+      margin: 50px 0 25px 0;
+    }
+  }
+}
+
+.auth-body.active {
+  display: flex;
+  width: 424px;
+  left: 140px;
+
+  @media (max-width: 1024px) {
+    left: 0;
+    width: 100%;
+    height: 535px;
+  }
+}

src/components/SliderWorkers/SliderWorkers.js

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import Slider from "react-slick";
+
+import mockWorker from "../../images/mokPerson.png";
+
+import "./sliderWorkers.scss";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+export const SliderWorkers = ({}) => {
+  const [workers] = useState([
+    {
+      avatar: mockWorker,
+      skils: "React / Vue Front end, Middle разработчик",
+    },
+    {
+      avatar: mockWorker,
+      skils: "React / Vue Front end, Middle разработчик",
+    },
+    {
+      avatar: mockWorker,
+      skils: "React / Vue Front end, Middle разработчик",
+    },
+    {
+      avatar: mockWorker,
+      skils: "React / Vue Front end, Middle разработчик",
+    },
+    {
+      avatar: mockWorker,
+      skils: "React / Vue Front end, Middle разработчик",
+    },
+  ]);
+  const settings = {
+    infinite: true,
+    speed: 300,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+  };
+
+  if (window.innerWidth < 575) {
+    settings.slidesToShow = 1;
+  } else if (window.innerWidth < 1440) {
+    settings.slidesToShow = 2;
+  }
+
+  return (
+    <div className="slider-workers">
+      <div className="container">
+        <div className="slider-workers__title">
+          <h2>Свободные разработчики </h2>
+          <h3> для Вашей команды</h3>
+        </div>
+
+        <Slider {...settings}>
+          {workers.map((worker) => {
+            return (
+              <div className="worker">
+                <img src={worker.avatar}></img>
+                <div className="worker-description">
+                  <p>{worker.skils}</p>
+                  <button className="worker__resume">Подробное резюме</button>
+                </div>
+              </div>
+            );
+          })}
+        </Slider>
+
+        <div className="slider-workers__description">
+          <h2>Дополните свою команду опытными ИТ-специалистами</h2>
+          <p>
+            Даём финансовые, юридические и кадровые гарантии, предоставляем SLA
+            и отвечаем за работу команды. Вам не нужно искать, оформлять или
+            увольнять сотрудника — все хлопоты мы берем на себя.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SliderWorkers;

src/components/SliderWorkers/sliderWorkers.scss

@@ -0,0 +1,146 @@
+.slider-workers {
+  background-color: #f1f1f1;
+
+  &__title {
+    display: flex;
+    flex-direction: row;
+    padding: 56px 0 56px 0;
+
+    h2,
+    h3 {
+      font-size: 30px;
+      line-height: 32px;
+    }
+
+    h3 {
+      color: #52b709;
+      margin-left: 10px;
+    }
+  }
+
+  &__description {
+    margin-top: 55px;
+
+    h2 {
+      font-size: 18px;
+      line-height: 32px;
+    }
+
+    p {
+      margin: 37px 0 0 0;
+      font-size: 16px;
+      line-height: 22px;
+      color: #000000;
+    }
+  }
+
+  .slick-list {
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .worker {
+    display: flex !important;
+    flex-direction: row;
+    justify-content: center;
+    margin-left: 15px;
+
+    img {
+      margin-right: 33px;
+    }
+
+    p {
+      font-size: 15px;
+      line-height: 22px;
+      color: black;
+      width: 198px;
+    }
+
+    &__resume {
+      margin-top: 5px;
+      width: 177px;
+      height: 40px;
+      background: #52b709;
+      border-radius: 44px;
+      font-size: 14px;
+      line-height: 32px;
+      color: white;
+      border: none;
+    }
+  }
+
+  .slick-next {
+    background-color: #8dc63f;
+    width: 44px;
+    height: 44px;
+    border-radius: 44px;
+
+    &:before {
+      content: ">";
+      color: white;
+      font-size: 23px;
+    }
+
+    &:focus,
+    &:hover {
+      background-color: #8ec63f91;
+    }
+  }
+
+  .slick-prev {
+    background-color: #8dc63f;
+    width: 44px;
+    height: 44px;
+    border-radius: 44px;
+
+    &:before {
+      content: "<";
+      color: white;
+      font-size: 23px;
+    }
+
+    &:focus,
+    &:hover {
+      background-color: #8ec63f91;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    &__title {
+      flex-direction: column;
+      padding: 120px 0 56px 0;
+      text-align: center;
+
+      h3 {
+        margin: 0;
+      }
+    }
+
+    .slick-next,
+    .slick-prev {
+      display: none !important;
+    }
+
+    .worker {
+      flex-direction: column;
+      margin: 0;
+      align-items: center;
+
+      img {
+        margin: 0;
+        width: 50%;
+      }
+
+      p {
+        margin-top: 10px;
+        text-align: center;
+      }
+
+      .worker-description {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+  }
+}

src/images/sideBarArrow.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 2L19.8415 2.31926L20.5272 0.511953L18.7027 1.15053L19 2ZM12.9294 18L12.107 18.3655L12.9951 20.3639L13.7709 18.3193L12.9294 18ZM9.72941 10.8L10.5518 10.4345C10.4646 10.2381 10.31 10.0795 10.1159 9.98722L9.72941 10.8ZM3 7.6L2.70268 6.75053L0.637736 7.47326L2.6135 8.41278L3 7.6ZM18.1585 1.68074L12.0879 17.6807L13.7709 18.3193L19.8415 2.31926L18.1585 1.68074ZM13.7518 17.6345L10.5518 10.4345L8.90698 11.1655L12.107 18.3655L13.7518 17.6345ZM10.1159 9.98722L3.3865 6.78722L2.6135 8.41278L9.34291 11.6128L10.1159 9.98722ZM3.29732 8.44947L19.2973 2.84947L18.7027 1.15053L2.70268 6.75053L3.29732 8.44947Z" fill="#222222"/>
+</svg>

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -1,101 +1,119 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from "react";
 
-import { AuthBox } from '../../components/AuthBox/AuthBox'
+import { AuthBox } from "../../components/AuthBox/AuthBox";
 
-import { useSelector } from 'react-redux'
+import { useSelector } from "react-redux";
-import arrow from '../../images/arrow__login_page.png'
+import arrow from "../../images/arrow__login_page.png";
-import authImg from '../../images/auth_img.png'
+import authImg from "../../images/auth_img.png";
-import cross from '../../images/cross.png'
+import cross from "../../images/cross.png";
-import text from '../../images/Body_Text.png'
+import text from "../../images/Body_Text.png";
-import vector from '../../images/Vector_Smart_Object.png'
+import arrowBtn from "../../images/arrowRight.png";
-import vectorBlack from '../../images/Vector_Smart_Object_black.png'
+import vector from "../../images/Vector_Smart_Object.png";
+import vectorBlack from "../../images/Vector_Smart_Object_black.png";
 
-import { selectAuth } from '../../redux/outstaffingSlice'
+import { selectAuth } from "../../redux/outstaffingSlice";
-import { useNavigate} from 'react-router-dom'
+import { Link, useNavigate } from "react-router-dom";
-import { Footer } from '../../components/Footer/Footer'
+import { Footer } from "../../components/Footer/Footer";
+import SideBar from "../../components/SideBar/SideBar";
+import AuthHeader from "../../components/AuthHeader/AuthHeader";
+import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
 
-import './authForDevelopers.scss'
+import "./authForDevelopers.scss";
 
 const AuthForDevelopers = () => {
-
   const isAuth = useSelector(selectAuth);
   let navigate = useNavigate();
-  const getToken = localStorage.getItem('auth_token')
+  const getToken = localStorage.getItem("auth_token");
 
-  useEffect(()=> {
+  useEffect(() => {
     if (isAuth || getToken) {
-      navigate('/profile')
+      navigate("/profile");
     }
   }, [getToken]);
 
-
   return (
-    <section className='auth-developers'>
+    <section className="auth-developers">
-      <div className='auth-developers__background'>
+      <AuthHeader />
-        <img className='auth-developers__vector' src={vector} alt='' />
+      <SliderWorkers />
+      <div className="auth-developers__background">
+        <img className="auth-developers__vector" src={vector} alt="" />
         <img
-          className='auth-developers__vector-black'
+          className="auth-developers__vector-black"
           src={vectorBlack}
-          alt=''
+          alt="#"
         />
-        <div className='container'>
+        <div className="container">
-          <div className='row'>
+          <div className="change-mode">
-            <div className='col-12 col-xl-6'>
+            <div className="change-mode__arrow">
-              <div className='auth-developers__box'>
+              <img src={arrowBtn}></img>
-                <AuthBox
+            </div>
-                  title='Для разработчиков'
+            <div className="buttons">
-                  altTitle='Для партнёров'
+              <Link to={"/authdev"}>
-                  roleChangeLink='/auth'
+                <button className="change-mode__developersForDev">
-                />
+                  Для разработчика
+                </button>
+              </Link>
+              <Link to={"/auth"}>
+                <button className="change-mode__partnersForDev">
+                  Для партнёров
+                </button>
+              </Link>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-12 col-xl-6">
+              <div className="auth-developers__box">
+                <AuthBox title="Для разработчиков" />
               </div>
             </div>
-            <div className='col-xl-2'>
+            <div className="col-xl-2">
-              <img className='auth-developers__arrow' src={arrow} alt='' />
+              <img className="auth-developers__arrow" src={arrow} alt="" />
             </div>
-            <div className='col-12 col-xl-4'>
+            <div className="col-12 col-xl-4">
-              <div className='auth-developers__info'>
+              <div className="auth-developers__info">
-                <div className='auth-developers__info-box'>
+                <div className="auth-developers__info-box">
-                  <img src={authImg} alt='' />
+                  <img src={authImg} alt="" />
                   <h3>
                     Управление
                     <br /> командой
                   </h3>
                 </div>
 
-                <div className='auth-developers__info-container'>
+                <div className="auth-developers__info-container">
-                  <div className='auth-developers__info-img'>
+                  <div className="auth-developers__info-img">
                     <div>
-                      <img className='cross' src={cross} alt='' />
+                      <img className="cross" src={cross} alt="" />
                     </div>
                     <div>
                       {/* <img className='auth-specialists} src={specialists} alt="" /> */}
-                      <p className='auth-developers__specialists'>
+                      <p className="auth-developers__specialists">
                         20 Специалистов
                       </p>
                     </div>
                   </div>
 
-                  <ul className='auth-developers__info-list'>
+                  <ul className="auth-developers__info-list">
-                    <li className='auth-developers__info-item'>
+                    <li className="auth-developers__info-item">
                       Рабочее
                       <br />
                       пространство
                     </li>
-                    <li className='auth-info__list-item'>
+                    <li className="auth-info__list-item">
                       Управление задачами
                     </li>
                   </ul>
                 </div>
 
-                <img className='auth-developers__img-text' src={text} alt='' />
+                <img className="auth-developers__img-text" src={text} alt="" />
               </div>
             </div>
           </div>
           <Footer />
         </div>
       </div>
+      <SideBar />
     </section>
-  )
+  );
 };
 
-export default AuthForDevelopers
+export default AuthForDevelopers;

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -1,207 +1,226 @@
 .auth-developers {
   overflow: hidden;
-}
-
-.auth-developers__background {
-  background-color: #f1f1f1;
   position: relative;
-}
 
-.auth-developers__vector,
+  &__background {
-.auth-developers__vector-black {
+    background-color: #f1f1f1;
-  position: absolute;
+    position: relative;
-}
-
-.auth-developers__vector {
-  top: -720px;
-  left: -320px;
-}
-
-.auth-developers__vector-black {
-  top: 460px;
-  right: -224px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-developers__vector,
-  .auth-developers__vector-black {
-    display: none;
   }
-}
 
-/* .form__error {
+  &__vector,
-  font-size: 16px;
+  &__vector-black {
-  color: #b21;
+    position: absolute;
-  margin-left: 45px;
-} */
-
-.auth-developers__arrow {
-  margin-top: 360px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-developers__arrow {
-    display: none;
   }
-}
 
-.auth-developers__info {
+  &__vector {
-  background-color: #e1fccf;
+    top: -37px;
-  margin-top: 70px;
+    left: -285px;
-  max-width: 310px;
-  padding-top: 30px;
-  position: relative;
-  padding-bottom: 310px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-developers__info {
-    max-width: 380px;
   }
-}
 
-@media (max-width: 375.98px) {
+  &__vector-black {
-  .auth-developers__info {
+    top: 460px;
-    max-width: 340px;
+    right: -224px;
   }
-}
 
-.auth-developers__info-box {
+  &__arrow {
-  display: flex;
+    margin-top: 360px;
-  align-items: center;
+  }
-}
 
-@media (max-width: 575.98px) {
+  @media (max-width: 575.98px) {
-  .auth-developers__info-box {
+    &__vector,
+    &__vector-black,
+    &__arrow {
+      display: none;
+    }
+  }
+
+  &__info {
+    background-color: #e1fccf;
+    margin-top: 70px;
+    max-width: 310px;
+    padding-top: 30px;
+    position: relative;
+    padding-bottom: 310px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info {
+      max-width: 380px;
+    }
+  }
+
+  @media (max-width: 375.98px) {
+    &__info {
+      max-width: 340px;
+    }
+  }
+
+  &__info-box {
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-box {
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  &__info-box > img {
+    width: 150px;
+    height: 150px;
+    margin-left: -84px;
+    margin-right: 30px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-box > img {
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+  }
+
+  &__info-box > h3 {
+    font-family: "GT Eesti Pro Display";
+    font-size: 2em;
+    font-weight: 100;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-box > h3 {
+      margin-top: 20px;
+    }
+  }
+
+  &__info-container {
+    display: flex;
+    position: relative;
+  }
+
+  &__info-img {
+    display: flex;
     flex-direction: column;
-    justify-content: center;
+    text-align: center;
+    margin-top: 28px;
+    margin-left: -40px;
   }
-}
 
-.auth-developers__info-box > img {
+  &__info-img > div > img {
-  width: 150px;
+    margin-bottom: 100px;
-  height: 150px;
-  margin-left: -84px;
-  margin-right: 30px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-developers__info-box > img {
-    margin-left: 0px;
-    margin-right: 0px;
   }
-}
 
-.auth-developers__info-box > h3 {
+  &__specialists {
-  font-family: 'GT Eesti Pro Display';
+    font-family: "GT Eesti Pro Display";
-  font-size: 2em;
+    font-size: 1.8em;
-  font-weight: 100;
+    font-weight: 100;
-  font-style: normal;
+    font-style: normal;
-  letter-spacing: normal;
+    letter-spacing: normal;
-  line-height: 36px;
+    line-height: 26.12px;
-  text-align: left;
+    text-align: left;
-}
+    transform: rotate(-90deg);
-
+    text-transform: uppercase;
-@media (max-width: 575.98px) {
-  .auth-developers__info-box > h3 {
-    margin-top: 20px;
   }
-}
 
-.auth-developers__info-container {
+  &__info-list {
-  display: flex;
+    list-style: none;
-  position: relative;
+    margin-top: 110px;
-}
+    position: absolute;
-
-.auth-developers__info-img {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  margin-top: 28px;
-  margin-left: -40px;
-}
-
-.auth-developers__info-img > div > img {
-  margin-bottom: 100px;
-}
-
-.auth-developers__specialists {
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 100;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 26.12px;
-  text-align: left;
-  transform: rotate(-90deg);
-  text-transform: uppercase;
-}
-
-.auth-developers__info-list {
-  list-style: none;
-  margin-top: 110px;
-  position: absolute;
-  left: 34px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-developers__info-list {
     left: 34px;
   }
-}
 
-.auth-developers__info-item {
+  @media (max-width: 575.98px) {
-  color: #1f1f1f;
+    &__info-list {
-  font-family: 'GT Eesti Pro Display';
+      left: 34px;
-  font-size: 2.6em;
+    }
-  font-weight: 700;
+  }
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 56.95px;
-  text-align: left;
-  text-decoration: underline;
-  text-transform: uppercase;
-  margin-bottom: 34px;
-}
 
-@media (max-width: 575.98px) {
+  &__info-item {
-  .auth-developers__info-item {
+    color: #1f1f1f;
+    font-family: "GT Eesti Pro Display";
     font-size: 2.6em;
-    margin-bottom: 14px;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 56.95px;
+    text-align: left;
+    text-decoration: underline;
+    text-transform: uppercase;
+    margin-bottom: 34px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-item {
+      font-size: 2.6em;
+      margin-bottom: 14px;
+    }
+  }
+
+  &__img-text {
+    position: absolute;
+    right: -68px;
+    bottom: -84px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__img-text {
+      right: 0px;
+      bottom: -40px;
+    }
+  }
+
+  &__auth-link {
+    display: block;
+  }
+
+  &__auth-link a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+  }
+
+  @media (max-width: 766px) {
+    &__form-buttons {
+      flex-direction: column;
+    }
+
+    &__form-btn {
+      margin: 0;
+      margin-bottom: 1.5rem;
+    }
   }
 }
 
-.auth-developers__img-text {
+.change-mode {
-  position: absolute;
+  &__partnersForDev {
-  right: -68px;
+    background: #52b7098c;
-  bottom: -84px;
+    color: #2d6505;
-}
+    margin-left: -40px;
-
-@media (max-width: 575.98px) {
-  .auth-developers__img-text {
-    right: 0px;
-    bottom: -40px;
-  }
-}
-
-.auth-developers__auth-link {
-  display: block;
-}
-
-.auth-developers__auth-link a {
-  display: block;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-}
-
-@media (max-width: 766px) {
-  .auth-developers__form-buttons {
-    flex-direction: column;
   }
 
-  .auth-developers__form-btn {
+  &__partnersForDev,
-    margin: 0;
+  &__developersForDev {
-    margin-bottom: 1.5rem;
+    width: 220px;
+    height: 50px;
+    border-radius: 44px;
+    font-size: 16px;
+    border: none;
+  }
+
+  &__developersForDev {
+    position: relative;
+    background: #406128;
+    color: white;
+  }
+
+  @media (max-width: 768px) {
+    &__partnersForDev {
+      margin: 15px 0 0 0;
+    }
   }
 }

src/pages/AuthForPartners/AuthForPartners.js

@@ -1,92 +1,112 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from "react";
-import arrow from '../../images/arrow__login_page.png'
+import arrow from "../../images/arrow__login_page.png";
-import medium from '../../images/medium_male_big.png'
+import medium from "../../images/medium_male_big.png";
-import cross from '../../images/cross.png'
+import cross from "../../images/cross.png";
-import text from '../../images/Body_Text.png'
+import text from "../../images/Body_Text.png";
-import vector from '../../images/Vector_Smart_Object.png'
+import arrowBtn from "../../images/arrowRight.png";
-import vectorBlack from '../../images/Vector_Smart_Object_black.png'
+import vector from "../../images/Vector_Smart_Object.png";
-import { useSelector } from 'react-redux'
+import vectorBlack from "../../images/Vector_Smart_Object_black.png";
-import { selectAuth } from '../../redux/outstaffingSlice'
+import { useSelector } from "react-redux";
-import { useNavigate} from 'react-router-dom'
+import { selectAuth } from "../../redux/outstaffingSlice";
+import { Link, useNavigate } from "react-router-dom";
 
-import { Footer } from '../../components/Footer/Footer'
+import { Footer } from "../../components/Footer/Footer";
-import { AuthBox } from '../../components/AuthBox/AuthBox'
+import { AuthBox } from "../../components/AuthBox/AuthBox";
+import SideBar from "../../components/SideBar/SideBar";
+import AuthHeader from "../../components/AuthHeader/AuthHeader";
+import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
 
-import './authForPartners.scss'
+import "./authForPartners.scss";
 
 const AuthForPartners = () => {
   const isAuth = useSelector(selectAuth);
   let navigate = useNavigate();
 
-  const getToken = localStorage.getItem('auth_token')
+  const getToken = localStorage.getItem("auth_token");
 
-  useEffect(()=> {
+  useEffect(() => {
     if (isAuth || getToken) {
-      navigate('/profile')
+      navigate("/profile");
     }
   }, [getToken]);
 
-
   return (
-    <section className='auth-partners'>
+    <section className="auth-partners">
-      <div className='auth-partners__background'>
+      <AuthHeader />
-        <img className='auth-partners__vector' src={vector} alt='' />
+      <SliderWorkers />
-        <img className='auth-partners__vector-black' src={vectorBlack} alt='' />
+      <div className="auth-partners__background">
-        <div className='container'>
+        <img className="auth-partners__vector" src={vector} alt="" />
-          <div className='row'>
+        <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
-            <div className='col-12 col-xl-6'>
+        <div className="container">
-              <div className='auth-partners__box'>
+          <div className="change-mode">
-                <AuthBox
+            <div className="change-mode__arrow">
-                  title='Для партнёров'
+              <img src={arrowBtn}></img>
-                  altTitle='Для разработчиков'
+            </div>
-                  roleChangeLink='/authdev'
+            <div className="buttons">
-                />
+              <Link to={"/authdev"}>
+                <button className="change-mode__developersForPart">
+                  Для разработчика
+                </button>
+              </Link>
+              <Link to={"/auth"}>
+                <button className="change-mode__partnersForPart">
+                  Для партнёров
+                </button>
+              </Link>
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-12 col-xl-6">
+              <div className="auth-partners__box">
+                <AuthBox title="Для партнёров" />
               </div>
             </div>
-            <div className='col-xl-2'>
+            <div className="col-xl-2">
-              <img className='auth-partners__arrow' src={arrow} alt='' />
+              <img className="auth-partners__arrow" src={arrow} alt="" />
             </div>
-            <div className='col-12 col-xl-4'>
+            <div className="col-12 col-xl-4">
-              <div className='auth-partners__info'>
+              <div className="auth-partners__info">
-                <div className='auth-partners__info-box'>
+                <div className="auth-partners__info-box">
-                  <img src={medium} alt='' />
+                  <img src={medium} alt="" />
                   <h3>
                     Frontend разработчик,
                     <br /> Middle
                   </h3>
                 </div>
 
-                <div className='auth-partners__info-container'>
+                <div className="auth-partners__info-container">
-                  <div className='auth-partners__info-img'>
+                  <div className="auth-partners__info-img">
                     <div>
-                      <img className='cross' src={cross} alt='' />
+                      <img className="cross" src={cross} alt="" />
                     </div>
                     <div>
                       {/* <img className='auth-specialists} src={specialists} alt="" /> */}
-                      <p className='auth-partners__specialists'>
+                      <p className="auth-partners__specialists">
                         20 Специалистов
                       </p>
                     </div>
                   </div>
 
-                  <ul className='auth-partners__info-list'>
+                  <ul className="auth-partners__info-list">
-                    <li className='auth-partners__info-item'>Ruby on Rails</li>
+                    <li className="auth-partners__info-item">Ruby on Rails</li>
-                    <li className='auth-partners__info-item'>PHP</li>
+                    <li className="auth-partners__info-item">PHP</li>
-                    <li className='auth-partners__info-item'>Python</li>
+                    <li className="auth-partners__info-item">Python</li>
-                    <li className='auth-partners__info-item'>Vue.js</li>
+                    <li className="auth-partners__info-item">Vue.js</li>
-                    <li className='auth-partners__info-item'>React. JS</li>
+                    <li className="auth-partners__info-item">React. JS</li>
                   </ul>
                 </div>
 
-                <img className='auth-partners__img-text' src={text} alt='' />
+                <img className="auth-partners__img-text" src={text} alt="" />
               </div>
             </div>
           </div>
           <Footer />
         </div>
       </div>
+      <SideBar />
     </section>
-  )
+  );
 };
 
-export default AuthForPartners
+export default AuthForPartners;

src/pages/AuthForPartners/authForPartners.scss

@@ -1,288 +1,333 @@
 .auth-partners {
   overflow: hidden;
-}
-
-.auth-partners__background {
-  background-color: #f1f1f1;
   position: relative;
-}
 
-.auth-partners__vector,
+  &__background {
-.auth-partners__vector-black {
+    background-color: #f1f1f1;
-  position: absolute;
+    position: relative;
-}
-
-.auth-partners__vector {
-  top: -720px;
-  left: -320px;
-}
-
-.auth-partners__vector-black {
-  top: 460px;
-  right: -224px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__vector,
-  .auth-partners__vector-black {
-    display: none;
   }
-}
 
-.auth-partners__arrow {
+  &__vector,
-  margin-top: 360px;
+  &__vector-black {
-}
+    position: absolute;
-
-@media (max-width: 575.98px) {
-  .auth-partners__arrow {
-    display: none;
   }
-}
 
-.auth-partners__info {
+  &__vector {
-  background-color: #e1fccf;
+    top: -37px;
-  margin-top: 70px;
+    left: -285px;
-  max-width: 310px;
-  padding-top: 30px;
-  position: relative;
-  padding-bottom: 310px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__info {
-    max-width: 380px;
   }
-}
 
-@media (max-width: 375.98px) {
+  &__vector-black {
-  .auth-partners__info {
+    top: 460px;
-    max-width: 340px;
+    right: -224px;
   }
-}
 
-.auth-partners__info-box {
+  &__arrow {
-  display: flex;
+    margin-top: 360px;
-  align-items: center;
+  }
-}
 
-@media (max-width: 575.98px) {
+  @media (max-width: 575.98px) {
-  .auth-partners__info-box {
+    &__vector,
+    &__vector-black,
+    &__arrow {
+      display: none;
+    }
+  }
+
+  &__info {
+    background-color: #e1fccf;
+    margin-top: 70px;
+    max-width: 310px;
+    padding-top: 30px;
+    position: relative;
+    padding-bottom: 310px;
+  }
+
+  &__info-box {
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info {
+      max-width: 380px;
+    }
+
+    &__info-box {
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 375.98px) {
+    &__info {
+      max-width: 340px;
+    }
+  }
+
+  &__info-box > img {
+    width: 165px;
+    height: 165px;
+    margin-left: -84px;
+    margin-right: 30px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-box > img {
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+  }
+
+  &__info-box > h3 {
+    font-family: "GT Eesti Pro Display";
+    font-size: 2em;
+    font-weight: 100;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  @media (max-width: 575.98px) {
+    &__info-box > h3 {
+      margin-top: 20px;
+    }
+  }
+
+  &__info-container {
+    display: flex;
+    position: relative;
+  }
+
+  &__info-img {
+    display: flex;
     flex-direction: column;
-    justify-content: center;
+    text-align: center;
+    margin-top: 28px;
+    margin-left: -40px;
   }
-}
 
-.auth-partners__info-box > img {
+  &__info-img > div > img {
-  width: 165px;
+    margin-bottom: 100px;
-  height: 165px;
-  margin-left: -84px;
-  margin-right: 30px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__info-box > img {
-    margin-left: 0px;
-    margin-right: 0px;
   }
-}
 
-.auth-partners__info-box > h3 {
+  &__specialists {
-  font-family: 'GT Eesti Pro Display';
+    font-family: "GT Eesti Pro Display";
-  font-size: 2em;
+    font-size: 1.8em;
-  font-weight: 100;
+    font-weight: 100;
-  font-style: normal;
+    font-style: normal;
-  letter-spacing: normal;
+    letter-spacing: normal;
-  line-height: 36px;
+    line-height: 26.12px;
-  text-align: left;
+    text-align: left;
-}
+    transform: rotate(-90deg);
-
+    text-transform: uppercase;
-@media (max-width: 575.98px) {
-  .auth-partners__info-box > h3 {
-    margin-top: 20px;
   }
-}
 
-.auth-partners__info-container {
+  &__info-list {
-  display: flex;
+    list-style: none;
-  position: relative;
+    margin-top: 110px;
-}
+    position: absolute;
-
+    right: -70px;
-.auth-partners__info-img {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  margin-top: 28px;
-  margin-left: -40px;
-}
-
-.auth-partners__info-img > div > img {
-  margin-bottom: 100px;
-}
-
-.auth-partners__specialists {
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 100;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 26.12px;
-  text-align: left;
-  transform: rotate(-90deg);
-  text-transform: uppercase;
-}
-
-/* .specialists {
-  margin-left: 26px;
-} */
-
-.auth-partners__info-list {
-  list-style: none;
-  margin-top: 110px;
-  position: absolute;
-  right: -70px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__info-list {
-    left: 34px;
   }
-}
 
-.auth-partners__info-item {
+  @media (max-width: 575.98px) {
-  color: #1f1f1f;
+    &__info-list {
-  font-family: 'GT Eesti Pro Display';
+      left: 34px;
-  font-size: 4em;
+    }
-  font-weight: 700;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 56.95px;
-  text-align: left;
-  text-decoration: underline;
-  text-transform: uppercase;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__info-item {
-    font-size: 2.6em;
   }
-}
 
-.auth-partners__img-text {
+  &__info-item {
-  position: absolute;
+    color: #1f1f1f;
-  right: -68px;
+    font-family: "GT Eesti Pro Display";
-  bottom: -84px;
+    font-size: 4em;
-}
+    font-weight: 700;
-
+    font-style: normal;
-@media (max-width: 575.98px) {
+    letter-spacing: normal;
-  .auth-partners__img-text {
+    line-height: 56.95px;
-    right: 0px;
+    text-align: left;
-    bottom: -40px;
+    text-decoration: underline;
+    text-transform: uppercase;
   }
-}
 
-.auth-partners__footer--left {
+  @media (max-width: 575.98px) {
-  display: flex;
+    &__info-item {
-  align-items: center;
+      font-size: 2.6em;
-  margin-bottom: 60px;
+    }
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__footer--left {
-    margin-top: 120px;
   }
-}
 
-.auth-partners__footer__sp {
+  &__img-text {
-  padding: 0 100px 0 34px;
+    position: absolute;
-}
+    right: -68px;
-
+    bottom: -84px;
-@media (max-width: 575.98px) {
-  .auth-partners__footer__sp {
-    padding: 0;
-    margin-left: 10px;
   }
-}
 
-.auth-partners__footer--left > div > span {
+  @media (max-width: 575.98px) {
-  color: #18586e;
+    &__img-text {
-  font-family: 'GT Eesti Pro Display';
+      right: 0px;
-  font-size: 1.6em;
+      bottom: -40px;
-  font-weight: 400;
+    }
-  font-style: normal;
+  }
-  letter-spacing: normal;
-  line-height: 16.81px;
-  text-align: left;
-}
 
-@media (max-width: 575.98px) {
+  &__footer--left {
-  .auth-partners__footer--left > div > span {
+    display: flex;
+    align-items: center;
+    margin-bottom: 60px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__footer--left {
+      margin-top: 120px;
+    }
+  }
+
+  &__footer__sp {
+    padding: 0 100px 0 34px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__footer__sp {
+      padding: 0;
+      margin-left: 10px;
+    }
+  }
+
+  &__footer--left > div > span {
+    color: #18586e;
+    font-family: "GT Eesti Pro Display";
+    font-size: 1.6em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 16.81px;
+    text-align: left;
+  }
+
+  @media (max-width: 575.98px) {
+    &__footer--left > div > span {
+      font-size: 1.2em;
+    }
+  }
+
+  &__footer-icon {
+    text-align: end;
+  }
+
+  &__footer-icon > img {
+    margin-left: 20px;
+  }
+
+  @media (max-width: 575.98px) {
+    &__footer-icon > img {
+      margin-left: 10px;
+    }
+  }
+
+  &__footer--right {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+  }
+
+  @media (max-width: 575.98px) {
+    &__footer--right {
+      margin-bottom: 20px;
+    }
+  }
+
+  &__phone {
+    color: #003b65;
+    font-family: "CeraPro";
+    font-size: 2.1em;
+    letter-spacing: normal;
+    line-height: 25px;
+    text-align: left;
+  }
+
+  &__working-hours {
+    color: #003b65;
+    font-family: "CeraPro";
     font-size: 1.2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: normal;
+    margin-left: 24px;
+  }
+
+  &__auth-link {
+    display: block;
+  }
+
+  &__auth-link a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+  }
+
+  @media (max-width: 766px) {
+    &__form-buttons {
+      flex-direction: column;
+    }
+
+    &__form-btn {
+      margin: 0;
+      margin-bottom: 1.5rem;
+    }
   }
 }
 
-.auth-partners__footer-icon {
+.change-mode {
-  text-align: end;
-}
-
-.auth-partners__footer-icon > img {
-  margin-left: 20px;
-}
-
-@media (max-width: 575.98px) {
-  .auth-partners__footer-icon > img {
-    margin-left: 10px;
-  }
-}
-
-.auth-partners__footer--right {
   display: flex;
+  justify-content: center;
   flex-direction: column;
-  align-items: left;
+  align-items: center;
-}
 
-@media (max-width: 575.98px) {
+  &__arrow {
-  .auth-partners__footer--right {
+    margin: 49px 0 43px 0;
-    margin-bottom: 20px;
+    width: 48px;
-  }
+    height: 48px;
-}
+    background: #8dc63f82;
-.auth-partners__phone {
-  color: #003b65;
-  font-family: 'CeraPro';
-  font-size: 2.1em;
-  letter-spacing: normal;
-  line-height: 25px;
-  text-align: left;
-}
 
-.auth-partners__working-hours {
+    border-radius: 44px;
-  color: #003b65;
+    display: flex;
-  font-family: 'CeraPro';
+    align-items: center;
-  font-size: 1.2em;
+    justify-content: center;
-  font-weight: 400;
+    img {
-  font-style: normal;
+      transform: rotate(90deg);
-  letter-spacing: normal;
+    }
-  line-height: normal;
-  margin-left: 24px;
-}
-
-.auth-partners__auth-link {
-  display: block;
-}
-
-.auth-partners__auth-link a {
-  display: block;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-}
-
-@media (max-width: 766px) {
-  .auth-partners__form-buttons {
-    flex-direction: column;
   }
 
-  .auth-partners__form-btn {
+  &__partnersForPart {
-    margin: 0;
+    background: #406128;
-    margin-bottom: 1.5rem;
+    color: white;
+    margin-left: -40px;
+  }
+
+  &__partnersForPart,
+  &__developersForPart {
+    width: 220px;
+    height: 50px;
+    border-radius: 44px;
+    font-size: 16px;
+    border: none;
+  }
+
+  &__developersForPart {
+    background-color: #52b7098c;
+    color: #2d6505;
+  }
+
+  @media (max-width: 768px) {
+    .buttons {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    &__partnersForPart {
+      margin: 15px 0 0 0;
+    }
   }
 }

src/pages/SingleReportPage/singleReportPage.scss

@@ -1,11 +1,13 @@
 .single-report-page {
   padding: 4.6rem 20px 0;
-  font-family: 'GT Eesti Pro Display', sans-serif;
+  font-family: "GT Eesti Pro Display", sans-serif;
+
   &__back {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     cursor: pointer;
+
     &-text {
       margin-left: 3.1rem;
       color: #000000;

src/pages/Summary/Summary.js

@@ -59,8 +59,10 @@ export const Summary = () => {
             </div>
             <div className='skills__section__items'>
               <div className='skills__section__items__wrapper'>
-                {profileInfo.skillValues && profileInfo.skillValues.map((skill) =>
+                {profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
-                    <span key={skill.id} className='skill_item'>{skill.skill.name},</span>
+                    <span key={skill.id} className='skill_item'>{skill.skill.name}
+                        {profileInfo.skillValues.length > index + 1 && ','}
+                    </span>
                 )}
               </div>
             </div>