From 5f4dc3a5f209d9089346a0ddebd25ffb24f3fe92 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 27 Mar 2023 16:03:24 +0300
Subject: [PATCH] partner catalog and no requests block

---
 src/App.js                                    |   2 +-
 .../OutstaffingBlock/outstaffingBlock.scss    |  20 ++-
 .../ProfileHeader/profileHeader.scss          |   2 +-
 src/components/SliderWorkers/SliderWorkers.js |  34 ++--
 src/images/cursorImg.png                      | Bin 0 -> 645 bytes
 .../AuthForDevelopers/AuthForDevelopers.js    |   2 +-
 src/pages/AuthForPartners/AuthForPartners.js  |   2 +-
 src/pages/Home/Home.js                        |  22 ++-
 src/pages/PartnerRequests/PartnerRequests.js  |  79 ++++++---
 .../PartnerRequests/partnerRequests.scss      | 165 ++++++++++++++++++
 src/pages/Tracker/tracker.scss                |   4 +-
 11 files changed, 278 insertions(+), 54 deletions(-)
 create mode 100644 src/images/cursorImg.png

diff --git a/src/App.js b/src/App.js
index 2bec9c98..3e807c38 100644
--- a/src/App.js
+++ b/src/App.js
@@ -62,7 +62,7 @@ const App = () => {
 
             <Route exact path='profile'>
               <Route index element={<Profile/>}/>
-              <Route exact path='personals' element={<Home/>}/>
+              <Route exact path='catalog' element={<Home/>}/>
               <Route exact path='calendar' element={<ProfileCalendar/>}/>
               <Route exact path='summary' element={<Summary/>}/>
               <Route exact path='view' element={<ViewReport/>}/>
diff --git a/src/components/OutstaffingBlock/outstaffingBlock.scss b/src/components/OutstaffingBlock/outstaffingBlock.scss
index a30646d7..ad817dda 100644
--- a/src/components/OutstaffingBlock/outstaffingBlock.scss
+++ b/src/components/OutstaffingBlock/outstaffingBlock.scss
@@ -1,10 +1,26 @@
+.container {
+  max-width: 1160px !important;
+}
+
+.catalog {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+  padding-top: 24px;
+
+  &__title {
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+  }
+}
+
 .outstaffing-block__selected .outstaffing-block__img {
   background-color: #52b70999;
   color: #f9f9f9;
 }
 .outstaffing-block {
-
-  margin-top: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss
index 417669ec..4c218440 100644
--- a/src/components/ProfileHeader/profileHeader.scss
+++ b/src/components/ProfileHeader/profileHeader.scss
@@ -10,7 +10,7 @@
 
   &__container {
     max-width: 1160px;
-    padding: 0 10px;
+    padding: 0 15px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.js
index 18b58b82..041aa55b 100644
--- a/src/components/SliderWorkers/SliderWorkers.js
+++ b/src/components/SliderWorkers/SliderWorkers.js
@@ -7,7 +7,7 @@ import "./sliderWorkers.scss";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-export const SliderWorkers = ({}) => {
+export const SliderWorkers = ({title, titleInfo, subTitle}) => {
   const [workers] = useState([
     {
       avatar: mockWorker,
@@ -46,11 +46,13 @@ export const SliderWorkers = ({}) => {
   return (
     <div className="slider-workers">
       <div className="container">
-        <div className="slider-workers__title">
-          <h2>Свободные разработчики </h2>
-          <h3> для Вашей команды</h3>
-        </div>
-
+        {Boolean(title) ?
+          <div className="slider-workers__title">
+            <h2>{title}</h2>
+            <h3>{titleInfo}</h3>
+          </div>
+            : ""
+        }
         <Slider {...settings}>
           {workers.map((worker) => {
             return (
@@ -64,15 +66,17 @@ export const SliderWorkers = ({}) => {
             );
           })}
         </Slider>
-
-        <div className="slider-workers__description">
-          <h2>Дополните свою команду опытными ИТ-специалистами</h2>
-          <p>
-            Даём финансовые, юридические и кадровые гарантии, предоставляем SLA
-            и отвечаем за работу команды. Вам не нужно искать, оформлять или
-            увольнять сотрудника — все хлопоты мы берем на себя.
-          </p>
-        </div>
+        {Boolean(subTitle) ?
+          <div className="slider-workers__description">
+            <h2>Дополните свою команду опытными ИТ-специалистами</h2>
+            <p>
+              Даём финансовые, юридические и кадровые гарантии, предоставляем SLA
+              и отвечаем за работу команды. Вам не нужно искать, оформлять или
+              увольнять сотрудника — все хлопоты мы берем на себя.
+            </p>
+          </div>
+            : ""
+        }
       </div>
     </div>
   );
diff --git a/src/images/cursorImg.png b/src/images/cursorImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..51fa08321becb1108009d4d7c92f826ecaba7d12
GIT binary patch
literal 645
zcmV;00($+4P)<h;3K|Lk000e1NJLTq000sI000;W1^@s6_f@Si00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0vbs~K~#7Fos%(d
z(@+q{@184gI(bB@kRl;<0i;AiAxt<6YM4BQFqM9T<`Xpi1TmkWVL{Xk&D2yZn2okW
zJ%CgRA$jRckgB>F@~-#nyf#T4H||N+JKOJm{`>v!@YS1!Gg`tOBpA?$T1Vf!9^500
zmDOi`1bD=`g#w!^tIzT5&o3WxhTyBH5+rJm*R9IiW*c&b(8<pOZyO0W2w@Pz>Ww|y
zcC6f>1oov%VAMDb5zvVW4^OIV&0=nlisSvy0V|7Pd=&}l`yw!r_K=l@F$^J4Fp2V{
z!tUk<Y1rZZZkbb;f73z(_p(fw3(|4e-)$}8=$)WMowp4@tsB_8omod00wu~kSE8YQ
zmCp}8M1==aCM;zY^F~_=S_dMF&#6Q(QYywu_&#y8rp{B$1E|$BP34-SdWzQ~E3s6=
z0zpUsJtFV{<m*&LFYE6&31sI5f64E4{pwo7CB!xt2FuZ~=KH-t+Q+99RbxkFN96|6
zR-$V8V>~thrE}9P!JN1TRqD+yQBoYs2e4U{&8h}Mk~;~{1R>D60!WbdY@t@A;h7+g
zP)IBv_rLy_EnGyE2F0_bY*aUCg?Fi95Cw&3Sk@37c~uGS*m9bsX@!XJfBgEEs>~6Y
zRK@f4PXc!IQ3xrgX3fX~g{Q&g<0nr|mSS@snd%X@$mY?3w{iCO_vz%`%vsZ_qTz+Z
f<KQyj)4Y9G#L*NJ1lLVm00000NkvXXu0mjfNbDcr

literal 0
HcmV?d00001

diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js
index e3075654..5f40f25a 100644
--- a/src/pages/AuthForDevelopers/AuthForDevelopers.js
+++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js
@@ -34,7 +34,7 @@ const AuthForDevelopers = () => {
   return (
     <section className="auth-developers">
       <AuthHeader />
-      <SliderWorkers />
+      <SliderWorkers title={"Свободные разработчики"} titleInfo={"для Вашей команды"} subTitle={true} />
       <div className="auth-developers__background">
         <img className="auth-developers__vector" src={vector} alt="" />
         <img
diff --git a/src/pages/AuthForPartners/AuthForPartners.js b/src/pages/AuthForPartners/AuthForPartners.js
index aeabb704..4a9751aa 100644
--- a/src/pages/AuthForPartners/AuthForPartners.js
+++ b/src/pages/AuthForPartners/AuthForPartners.js
@@ -33,7 +33,7 @@ const AuthForPartners = () => {
   return (
     <section className="auth-partners">
       <AuthHeader />
-      <SliderWorkers />
+      <SliderWorkers title={"Свободные разработчики"} titleInfo={"для Вашей команды"} subTitle={true} />
       <div className="auth-partners__background">
         <img className="auth-partners__vector" src={vector} alt="" />
         <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 905b5543..beb60514 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -7,7 +7,8 @@ import {Footer} from '../../components/Footer/Footer'
 
 import {profiles, tags} from '../../redux/outstaffingSlice'
 
-import {Header} from "../../components/Header/Header";
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {apiRequest} from "../../api/request";
 import {Navigate} from "react-router-dom";
 
@@ -56,11 +57,20 @@ const Home = () => {
 
   return (
       <>
-        <Header/>
-        <div className='container'>
-          <Outstaffing/>
-          <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
-          <Footer/>
+        <ProfileHeader/>
+        <div className="catalog">
+          <div className='container'>
+            <ProfileBreadcrumbs links={[
+              {name: 'Главная', link: '/profile'},
+              {name: 'Запросы и открытые позиции', link: '/profile/requests'},
+              {name: 'Каталог', link: '/profile/catalog'}
+            ]}
+            />
+            <h2 className="catalog__title">Каталог специалистов</h2>
+            <Outstaffing/>
+            <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore}/>
+            <Footer/>
+          </div>
         </div>
       </>
   )
diff --git a/src/pages/PartnerRequests/PartnerRequests.js b/src/pages/PartnerRequests/PartnerRequests.js
index 01e3b15b..79234490 100644
--- a/src/pages/PartnerRequests/PartnerRequests.js
+++ b/src/pages/PartnerRequests/PartnerRequests.js
@@ -3,8 +3,11 @@ import {Link, Navigate} from "react-router-dom";
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
+import {SliderWorkers} from "../../components/SliderWorkers/SliderWorkers"
 import {Footer} from "../../components/Footer/Footer";
 
+import cursorImg from "../../images/cursorImg.png"
+
 import './partnerRequests.scss'
 
 export const PartnerRequests = () => {
@@ -39,33 +42,59 @@ export const PartnerRequests = () => {
                 ]}
                 />
                 <h2 className='partnerRequests__title'>Запросы</h2>
-                <div className='partnerRequests__section'>
-                    <div className='partnerRequests__section__items'>
-                        {
-                            items.map((item, index) => {
-                                return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
-                                            <p className='partnerRequests__section__item__name'>
-                                                {item.name}
-                                            </p>
-                                            <p className='partnerRequests__section__item__count'>
-                                                Подходящие кандидаты<span>{item.count}</span>
-                                            </p>
-                                        </Link>
-                            })
-                        }
+                {Boolean(items.length) ?
+                    <div className='partnerRequests__section'>
+                        <div className='partnerRequests__section__items'>
+                            {
+                                items.map((item, index) => {
+                                    return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
+                                                <p className='partnerRequests__section__item__name'>
+                                                    {item.name}
+                                                </p>
+                                                <p className='partnerRequests__section__item__count'>
+                                                    Подходящие кандидаты<span>{item.count}</span>
+                                                </p>
+                                            </Link>
+                                })
+                            }
+                        </div>
+                        <div className='partnerRequests__section__info'>
+                            <h3>Инструкция: подачи заявки</h3>
+                            <p>
+                                Оператор компании заводит заявку и указывает необходимые параметры —
+                                количество сотрудников, стек, уровень специалиста
+                            </p>
+                            <Link to={'/profile/add-request'}>
+                                <span>+</span>
+                                Создать запрос
+                            </Link>
+                        </div>
                     </div>
-                    <div className='partnerRequests__section__info'>
-                        <h3>Инструкция: подачи заявки</h3>
-                        <p>
-                            Оператор компании заводит заявку и указывает необходимые параметры —
-                            количество сотрудников, стек, уровень специалиста
-                        </p>
-                        <Link to={'/profile/add-request'}>
-                            <span>+</span>
-                            Создать запрос
-                        </Link>
+                    :
+                    <div className="partnerRequests__noItems">
+                        <div className="partnerRequests__noItems__create">
+                            <div className="partnerRequests__noItems__create__link">
+                                <img src={cursorImg} alt="cursor" />
+                                <p>У вас еще нет запросов на сотрудников</p>
+                                <Link to={'/profile/add-request'}>
+                                    <span>+</span>
+                                    Создать запрос
+                                </Link>
+                            </div>
+                            <div className="partnerRequests__noItems__create__instruction">
+                                <h3>Инструкция: подачи заявки</h3>
+                                <p>
+                                    Оператор компании заводит заявку и указывает необходимые параметры —
+                                    количество сотрудников, стек, уровень специалиста
+                                </p>
+                            </div>
+                        </div>
+                        <div className="partnerRequests__noItems__freeEmployees">
+                            <SliderWorkers title={"Свободные разработчики"} titleInfo={"в нашей базе"} />
+                            <p>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p>
+                        </div>
                     </div>
-                </div>
+                }
             </div>
             <Footer/>
         </div>
diff --git a/src/pages/PartnerRequests/partnerRequests.scss b/src/pages/PartnerRequests/partnerRequests.scss
index 16521066..133150f3 100644
--- a/src/pages/PartnerRequests/partnerRequests.scss
+++ b/src/pages/PartnerRequests/partnerRequests.scss
@@ -193,6 +193,171 @@
     }
   }
 
+  &__noItems {
+    display: flex;
+    flex-direction: column;
+
+    &__create {
+      background: #FFFFFF;
+      border-radius: 12px;
+      padding: 29px 33px 23px 36px;
+      display: flex;
+      margin-top: 40px;
+      align-items: center;
+
+      @media (max-width: 1140px) {
+        flex-direction: column;
+        row-gap: 25px;
+      }
+
+      @media (max-width: 670px) {
+        padding: 15px 15px;
+      }
+
+        &__link {
+          display: flex;
+          background: #F1F1F1;
+          border-radius: 12px;
+          padding: 11px 25px 12px 30px;
+          align-items: center;
+          width: 100%;
+          min-width: 650px;
+          justify-content: space-between;
+          max-height: 70px;
+
+          @media (max-width: 720px) {
+            min-width: auto;
+          }
+
+          @media (max-width: 670px) {
+            max-height: inherit;
+            flex-direction: column;
+            row-gap: 8px;
+            width: auto;
+
+            img {
+              margin-right: 5px;
+            }
+          }
+
+          @media (max-width: 480px) {
+            padding: 10px 15px;
+          }
+
+          p {
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 32px;
+            color: #111112;
+            margin-bottom: 0;
+
+            @media (max-width: 480px) {
+              font-size: 14px;
+            }
+
+            @media (max-width: 380px) {
+              font-size: 12px;
+            }
+          }
+
+          a {
+            background: #52B709;
+            max-width: 174px;
+            border-radius: 44px;
+            width: 100%;
+            height: 46px;
+            border: none;
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 32px;
+            color: #FFFFFF;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: 0.3s all ease;
+
+            span {
+              color: white;
+              font-weight: 700;
+              font-size: 20px;
+              margin-right: 8px;
+            }
+
+            &:hover {
+              box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+              transform: scale(1.02);
+              text-decoration: none;
+              color: #FFFFFF;
+            }
+          }
+        }
+
+        &__instruction {
+          margin-left: 45px;
+
+          @media (max-width: 1140px) {
+            margin-left: 0;
+          }
+          h3 {
+            color: #52B709;
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 15px;
+            margin-bottom: 7px;
+
+            @media (max-width: 1140px) {
+              text-align: center;
+              font-size: 22px;
+              margin-bottom: 15px;
+            }
+
+            @media (max-width: 530px) {
+              font-size: 16px;
+            }
+          }
+
+          p {
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 24px;
+            color: #000000;
+            margin-bottom: 0;
+
+            @media (max-width: 1140px) {
+              text-align: center;
+              font-size: 16px;
+            }
+
+            @media (max-width: 530px) {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+    &__freeEmployees {
+      h2 {
+        font-weight: 500;
+        font-size: 30px;
+        line-height: 32px;
+      }
+
+      p {
+        margin-top: 70px;
+        width: 100%;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 32px;
+        color: #111112;
+        text-align: center;
+
+        a {
+          color: #0C7636;
+        }
+      }
+    }
+  }
+
   footer {
     margin-top: 70px;
   }
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 3425de47..20251100 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -7,7 +7,7 @@
 
   .container {
     max-width: 1160px;
-    padding: 0 10px;
+    padding: 0 15px;
 
     @media (max-width: 570px) {
       margin-top: 0;
@@ -15,7 +15,7 @@
   }
 
   &__content {
-    margin-top: 20px;
+    margin-top: 23px;
   }
 
   footer {