Merge pull request #62 from apuc/parthners-area

partner catalog and no requests block

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/>}/>

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;

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;

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">
+        {Boolean(title) ?
           <div className="slider-workers__title">
-          <h2>Свободные разработчики </h2>
+            <h2>{title}</h2>
-          <h3> для Вашей команды</h3>
+            <h3>{titleInfo}</h3>
           </div>
-
+            : ""
+        }
         <Slider {...settings}>
           {workers.map((worker) => {
             return (
@@ -64,7 +66,7 @@ export const SliderWorkers = ({}) => {
             );
           })}
         </Slider>
-
+        {Boolean(subTitle) ?
           <div className="slider-workers__description">
             <h2>Дополните свою команду опытными ИТ-специалистами</h2>
             <p>
@@ -73,6 +75,8 @@ export const SliderWorkers = ({}) => {
               увольнять сотрудника — все хлопоты мы берем на себя.
             </p>
           </div>
+            : ""
+        }
       </div>
     </div>
   );

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

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="" />

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,12 +57,21 @@ const Home = () => {
 
   return (
       <>
-        <Header/>
+        <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>
       </>
   )
 };

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,6 +42,7 @@ export const PartnerRequests = () => {
                 ]}
                 />
                 <h2 className='partnerRequests__title'>Запросы</h2>
+                {Boolean(items.length) ?
                     <div className='partnerRequests__section'>
                         <div className='partnerRequests__section__items'>
                             {
@@ -66,6 +70,31 @@ export const PartnerRequests = () => {
                             </Link>
                         </div>
                     </div>
+                    :
+                    <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>
             <Footer/>
         </div>

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

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 {