catalogSpecialists

src/App.js

@@ -9,6 +9,7 @@ import {
 import { getNotification } from "@redux/outstaffingSlice";
 
 import Auth from "./pages/Auth/Auth";
+import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists";
 import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
 import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
 import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
@@ -66,6 +67,7 @@ const App = () => {
           <Route exact path="/tracker-registration" element={<TrackerRegistration />} />
           <Route exact path="/company" element={<CompanyInfo />} />
           <Route exact path="/registration-setting" element={<RegistrationSetting />} />
+          <Route exact path="/catalog-specialists" element={<CatalogSpecialists />} />
 
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route

src/components/CatalogPersonCard/CatalogPersonCard.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import "./catalogPersonCard.scss";
+
+export const CatalogPersonCard = ({
+  img,
+  name,
+  salary,
+  category,
+  skills,
+  level,
+  description
+}) => {
+  return (
+    <div className="catalogPersonCard">
+      <div className="catalogPersonCard__head">
+        <div className="catalogPersonCard__avatar">
+          <img src={img} alt="avatar" />
+          <span className="catalogPersonCard__skill">{level}</span>
+        </div>
+        <div className="catalogPersonCard__info">
+          <span className="catalogPersonCard__name">{name}</span>
+          <span className="catalogPersonCard__salary">{salary} / час</span>
+          <p className="catalogPersonCard__category">
+            <span>Разработка:</span> {category}
+          </p>
+        </div>
+      </div>
+      <div className="catalogPersonCard__items">
+        {skills.map((item, index) => {
+          return (
+            <div className="catalogPersonCard__skillItem" key={index}>
+              {item}
+            </div>
+          );
+        })}
+      </div>
+      <p className="catalogPersonCard__description">{description}</p>
+    </div>
+  );
+};
+
+export default CatalogPersonCard;

src/components/CatalogPersonCard/catalogPersonCard.scss

@@ -0,0 +1,97 @@
+.catalogPersonCard {
+  background: #FFFFFF;
+  padding: 29px 32px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  max-width: 340px;
+
+  &__head {
+    display: flex;
+  }
+
+  &__avatar {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    img {
+      width: 83px;
+      height: 83px;
+    }
+  }
+
+  &__skill {
+    position: absolute;
+    bottom: -10px;
+    padding: 3.5px 19px;
+    border-radius: 44px;
+    background: #1458DD;
+    color: white;
+    font-size: 14px;
+  }
+
+  &__info {
+    display: flex;
+    margin-left: 13.5px;
+    flex-direction: column;
+    row-gap: 15px;
+  }
+
+  &__name {
+    font-size: 20px;
+    line-height: 22px;
+    color: #000000;
+    font-weight: 700;
+  }
+
+  &__salary {
+    color: #1458DD;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 22px;
+  }
+
+  &__category {
+    span {
+      color: #6F6F6F;
+      font-size: 12px;
+      line-height: 18px;
+      font-weight: 400;
+    }
+
+    color: #263238;
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 500;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 5.5px;
+    row-gap: 16px;
+    margin-top: 22px;
+    padding-bottom: 17px;
+    border-bottom: 0.5px solid #B3DF93;
+  }
+
+  &__skillItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #6F6F6F;
+    width: 62px;
+    height: 26px;
+    border: 0.5px solid #8DC63F;
+    border-radius: 44px;
+  }
+
+  &__description {
+    margin-top: 17px;
+    max-width: 245px;
+    color: #6F6F6F;
+    font-size: 12px;
+    line-height: 18px;
+  }
+}

src/pages/CatalogSpecialists/CatalogSpecialists.jsx

@@ -0,0 +1,210 @@
+import React, { useState } from "react";
+
+import CatalogPersonCard from "@components/CatalogPersonCard/CatalogPersonCard";
+import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
+import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+import { Footer } from "@components/Common/Footer/Footer";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import SideBar from "@components/SideBar/SideBar";
+
+import mockWorker from "assets/images/mock/mokPerson.png";
+import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
+import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
+import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
+import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
+import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
+import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
+import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
+import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
+import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
+
+import "./catalogSpecialists.scss";
+
+const CatalogSpecialists = () => {
+  const [personalInfoItems] = useState([
+    {
+      title: "Backend разработчики",
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
+      available: true,
+      img: BackEndImg
+    },
+    {
+      title: "Frontend разработчики",
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
+      available: true,
+      img: FrontendImg
+    },
+    {
+      title: "Архитектура проектов",
+      description: "Потоки данных ER ERP CRM CQRS UML BPMN",
+      available: true,
+      img: ArchitectureImg
+    },
+    {
+      title: "Дизайн проектов",
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
+      available: true,
+      img: DesignImg
+    },
+    {
+      title: "Тестирование проектов",
+      description: "SQL Postman TestRail Kibana Ручное тестирование",
+      available: true,
+      img: TestImg
+    },
+    {
+      title: "Администрирование проектов",
+      description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
+      available: true,
+      img: AdminImg
+    },
+    {
+      title: "Управление проектом",
+      description: "Scrum Kanban Agile Miro CustDev",
+      available: true,
+      img: ManageImg
+    },
+    {
+      title: "Копирайтинг проектов",
+      description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
+      available: true,
+      img: CopyImg
+    },
+    {
+      title: "Реклама и SMM",
+      description:
+        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
+      available: true,
+      img: SmmImg
+    }
+  ]);
+
+  const mockPersons = [
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    },
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    },
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    },
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    },
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    },
+    {
+      name: "Виталий Д.",
+      img: mockWorker,
+      salary: "1 500 Р",
+      category: "Front End",
+      level: "Middle+",
+      skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
+      description:
+        "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
+    }
+  ];
+  return (
+    <section className="catalogSpecialists">
+      <AuthHeader />
+      <div className="container catalogSpecialists__wrapper">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/auth" },
+            { name: "Свободные разработчики", link: "/" }
+          ]}
+        />
+        <div className="catalogSpecialists__head">
+          <h2>Каталог специалистов</h2>
+          <div className="catalogSpecialists__count countInfo">
+            <div className="countInfo__imgWrapper">
+              <img src={mockWorker} alt="worker" />
+            </div>
+            <p>🖐 50+ специалистов доступны</p>
+          </div>
+        </div>
+        <div className="catalogSpecialists__items">
+          {personalInfoItems.map((item, index) => {
+            return (
+              <CategoriesItem
+                link={item.link}
+                key={index}
+                title={item.title}
+                img={item.img}
+                skills={item.description}
+                available={item.available}
+              />
+            );
+          })}
+        </div>
+        <h3 className="catalogSpecialists__searchTitle">
+          Найти специалиста по навыкам
+        </h3>
+        <div className="catalogSpecialists__searchBlock">
+          <input type="text" />
+          <button>Поиск</button>
+        </div>
+        <div className="catalogSpecialists__employees">
+          {mockPersons.map((person, index) => {
+            return (
+              <CatalogPersonCard
+                name={person.name}
+                img={person.img}
+                salary={person.salary}
+                category={person.category}
+                level={person.level}
+                skills={person.skills}
+                description={person.description}
+                key={index}
+              />
+            );
+          })}
+        </div>
+        <Footer />
+      </div>
+      <SideBar />
+    </section>
+  );
+};
+
+export default CatalogSpecialists;

src/pages/CatalogSpecialists/catalogSpecialists.scss

@@ -0,0 +1,109 @@
+.catalogSpecialists {
+  background: #f1f1f1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+
+   &__wrapper {
+     padding-top: 24px;
+   }
+
+  &__head {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 23px;
+    align-items: center;
+
+    h2 {
+      font-size: 30px;
+      line-height: 32px;
+      margin-bottom: 0;
+      color: #000000;
+    }
+  }
+
+  &__count {
+    border-radius: 38px;
+    border: 1px solid #E3E3E9;
+    padding: 6px 32px 6px 6px;
+    width: 100%;
+    max-width: 450px;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    p {
+      color: #777989;
+      font-size: 16px;
+      line-height: 19px;
+    }
+  }
+
+  .countInfo {
+    &__imgWrapper {
+      width: 46px;
+      height: 46px;
+      border-radius: 60px;
+      border: 3px solid white;
+
+      img {
+        width: 43px;
+        height: 43px;
+      }
+    }
+  }
+
+  &__items {
+    position: relative;
+    margin-top: 40px;
+    width: 100%;
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin-bottom: 45px;
+  }
+
+  &__searchTitle {
+    font-size: 25px;
+    line-height: 32px;
+    color: #000000;
+    margin-bottom: 25px;
+  }
+
+  &__searchBlock {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 39px;
+
+    input {
+      border-radius: 5px;
+      border: 0.5px solid #B0BABF;
+      background: #F4F4F4;
+      outline: none;
+      height: 50px;
+      padding: 0 10px;
+      font-size: 20px;
+      width: 100%;
+    }
+
+    button {
+      padding: 9px 36px;
+      border-radius: 44px;
+      border: none;
+      background-color: #52B709;
+      color: white;
+      font-size: 16px;
+      margin-left: 20px;
+    }
+  }
+
+  &__employees {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    column-gap: 10px;
+    row-gap: 25px;
+    margin-bottom: 20px;
+  }
+}