Added page in free worker

src/components/UI/FreeDevelopers/FreeDevelopers.js

@@ -0,0 +1,78 @@
+import React from "react";
+
+import AuthHeader from "../../AuthHeader/AuthHeader";
+import SideBar from "../../SideBar/SideBar";
+import { Footer } from "../../Footer/Footer";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+
+import mockWorker from "../../../images/mokPerson.png";
+import arrow from "../../../images/arrow_left.png";
+
+import "./freeDevelopers.scss";
+import { Link } from "react-router-dom";
+
+export const FreeDevelopers = ({}) => {
+  return (
+    <section className="free-dev">
+      <AuthHeader />
+      <SideBar />
+      <div className="container free-dev_page">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/auth" },
+            { name: "Свободные разработчики", link: "/worker" },
+          ]}
+        />
+
+        <h2>
+          Свободные разработчики <span>для Вашей команды</span>
+        </h2>
+
+        <Link to={"/auth"} className="link">
+          <img src={arrow}></img>Вернуться
+        </Link>
+
+        <div className="free-dev__title">
+          <div className="free-dev__title-box">
+            <img src={mockWorker}></img>
+            <div className="free-dev__title-name">
+              <h3>Дмитрий, PHP Back end - разработчик, Middle</h3>
+              <div></div>
+            </div>
+          </div>
+          <button>Код разработчика</button>
+        </div>
+
+        <div className="free-dev__body">
+          <div className="free-dev__body-title">
+            <p>Описание опыта работы</p>
+          </div>
+
+          <div className="free-dev__body-text">
+            <h5>
+              Godesigner - сервис для фриланс дизайнеров, копирайтеров и их
+              заказчиков
+            </h5>
+            <p>Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.</p>
+            <ul>
+              <li> Расширение функционала старых модулей проекта</li>
+              <li>создание и проектирование новых модулей сайта</li>
+              <li>написание backend части проекта</li>
+              <li>усовершенствование и расширение функционала админ-панели</li>
+              <li>работа с визуальной составляющей</li>
+              <li>создание алгоритма рассылки писем по электронной почте</li>
+              <li>
+                использование API сторонних сервисов, мессенджеров (WhatsApp)
+              </li>
+            </ul>
+            <p>Время разработки: 2 года.</p>
+          </div>
+        </div>
+
+        <Footer />
+      </div>
+    </section>
+  );
+};
+
+export default FreeDevelopers;

src/components/UI/FreeDevelopers/freeDevelopers.scss

@@ -0,0 +1,104 @@
+.free-dev {
+  font-family: "LabGrotesque", sans-serif;
+  overflow: hidden;
+  position: relative;
+  background-color: #f1f1f1;
+
+  .link {
+    font-size: 12px;
+    line-height: 16px;
+    color: #5b6871;
+
+    img {
+      margin-right: 20px;
+    }
+  }
+
+  h2 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 30px;
+    line-height: 32px;
+    color: #000000;
+    margin: 32px 0 36px 0;
+
+    span {
+      color: #52b709;
+      font-size: 30px;
+    }
+  }
+
+  &_page {
+    margin: 24px 0 30px 0;
+  }
+
+  &__title {
+    background: #ffffff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 63px 20px 45px;
+    margin: 40px 0 23px 0;
+
+    &-box {
+      display: flex;
+    }
+
+    &-name {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      margin-left: 47px;
+
+      div {
+        width: 239px;
+        height: 8px;
+        background: #52b709;
+        border-radius: 12px;
+      }
+    }
+
+    button {
+      background: #52b709;
+      border-radius: 44px;
+      width: 202px;
+      height: 50px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 32px;
+      color: #ffffff;
+      border: none;
+    }
+  }
+
+  &__body {
+    background: #ffffff;
+    border-radius: 12px;
+    margin-bottom: 100px;
+
+    &-title {
+      background: #e1fccf;
+      border-radius: 12px 12px 0px 0px;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 32px;
+      color: #000000;
+      padding: 20px 0 17px 51px;
+    }
+
+    &-text {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 32px;
+      color: #000000;
+      padding: 26px 0 30px 52px;
+
+      h5 {
+        font-size: 16px;
+        margin-bottom: 30px;
+      }
+    }
+  }
+}