Added slider for Dev and Partners auth page

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/SideBar/sidebar.scss

@@ -25,7 +25,7 @@
   .text {
     display: flex;
     flex-direction: column;
-    margin: 40px 0 0 0;
+    margin: 70px 0 0 0;
 
     h3 {
       transform: rotate(270deg);

src/components/SliderWorkers/SliderWorkers.js

@@ -0,0 +1,66 @@
+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,
+  };
+
+  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>
+                  <p>{worker.skils}</p>
+                  <button className="worker__resume">Подробное резюме</button>
+                </div>
+              </div>
+            );
+          })}
+        </Slider>
+      </div>
+    </div>
+  );
+};
+
+export default SliderWorkers;

src/components/SliderWorkers/sliderWorkers.scss

@@ -0,0 +1,91 @@
+.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;
+    }
+  }
+
+  .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;
+    }
+  }
+}

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -14,9 +14,10 @@ import { selectAuth } from "../../redux/outstaffingSlice";
 import { useNavigate } from "react-router-dom";
 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 AuthHeader from "../../components/AuthHeader/AuthHeader";
 
 const AuthForDevelopers = () => {
   const isAuth = useSelector(selectAuth);
@@ -32,6 +33,7 @@ const AuthForDevelopers = () => {
   return (
     <section className="auth-developers">
       <AuthHeader />
+      <SliderWorkers />
       <div className="auth-developers__background">
         <img className="auth-developers__vector" src={vector} alt="" />
         <img

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -14,8 +14,8 @@
 }
 
 .auth-developers__vector {
-  top: -720px;
+  top: -37px;
-  left: -320px;
+  left: -285px;
 }
 
 .auth-developers__vector-black {

src/pages/AuthForPartners/AuthForPartners.js

@@ -11,10 +11,11 @@ import { useNavigate } from "react-router-dom";
 
 import { Footer } from "../../components/Footer/Footer";
 import { AuthBox } from "../../components/AuthBox/AuthBox";
-
-import "./authForPartners.scss";
 import SideBar from "../../components/SideBar/SideBar";
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
+import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
+
+import "./authForPartners.scss";
 
 const AuthForPartners = () => {
   const isAuth = useSelector(selectAuth);
@@ -31,6 +32,7 @@ const AuthForPartners = () => {
   return (
     <section className="auth-partners">
       <AuthHeader />
+      <SliderWorkers />
       <div className="auth-partners__background">
         <img className="auth-partners__vector" src={vector} alt="" />
         <img className="auth-partners__vector-black" src={vectorBlack} alt="" />

src/pages/AuthForPartners/authForPartners.scss

@@ -14,8 +14,8 @@
 }
 
 .auth-partners__vector {
-  top: -720px;
+  top: -37px;
-  left: -320px;
+  left: -285px;
 }
 
 .auth-partners__vector-black {