Added slider for Dev and Partners auth page

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;
+    }
+  }
+}