apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

partner catalog and no requests block

Browse Source
This commit is contained in:
Николай Полтщук 2023-03-27 16:03:24 +03:00
parent d07b9473c4
commit 5f4dc3a5f2
11 changed files with 278 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

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

20
src/components/OutstaffingBlock/outstaffingBlock.scss
View File

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

2
src/components/ProfileHeader/profileHeader.scss
View File

@ -10,7 +10,7 @@
&__container {
max-width: 1160px;
padding: 0 10px;
padding: 0 15px;
margin: 0 auto;
display: flex;
justify-content: space-between;

34
src/components/SliderWorkers/SliderWorkers.js
View File

@ -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>
);

BIN
src/images/cursorImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 645 B

2
src/pages/AuthForDevelopers/AuthForDevelopers.js
View File

@ -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

2
src/pages/AuthForPartners/AuthForPartners.js
View File

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

22
src/pages/Home/Home.js
View File

@ -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>
</>
)

79
src/pages/PartnerRequests/PartnerRequests.js
View File

@ -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>

165
src/pages/PartnerRequests/partnerRequests.scss
View File

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

4
src/pages/Tracker/tracker.scss
View File

@ -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 {