Merge remote-tracking branch 'origin/update-page-auth' into parthners-area
This commit is contained in:
@ -1,29 +1,27 @@
|
||||
import React, {useEffect, useRef, useState} from 'react'
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
import {useDispatch, useSelector} from 'react-redux'
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import {Loader} from '../Loader/Loader'
|
||||
import { Loader } from "../Loader/Loader";
|
||||
import ErrorBoundary from "../../hoc/ErrorBoundary";
|
||||
|
||||
import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
|
||||
import {loading} from '../../redux/loaderSlice'
|
||||
import {setRole} from '../../redux/roleSlice'
|
||||
import {selectIsLoading} from '../../redux/loaderSlice'
|
||||
import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
|
||||
import { loading } from "../../redux/loaderSlice";
|
||||
import { setRole } from "../../redux/roleSlice";
|
||||
import { selectIsLoading } from "../../redux/loaderSlice";
|
||||
|
||||
import {apiRequest} from "../../api/request";
|
||||
import { apiRequest } from "../../api/request";
|
||||
|
||||
import ellipse from '../../images/ellipse.png'
|
||||
import ellipse from "../../images/ellipse.png";
|
||||
|
||||
import './authBox.scss'
|
||||
import "./authBox.scss";
|
||||
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
const SweetAlert = withReactContent(Swal);
|
||||
|
||||
|
||||
export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
||||
|
||||
export const AuthBox = ({ title }) => {
|
||||
const dispatch = useDispatch();
|
||||
const ref = useRef();
|
||||
const navigate = useNavigate();
|
||||
@ -35,125 +33,109 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
||||
|
||||
const handleModalError = (error) => {
|
||||
SweetAlert.fire({
|
||||
title: 'Ошибка',
|
||||
text: error
|
||||
title: "Ошибка",
|
||||
text: error,
|
||||
});
|
||||
|
||||
setError(null)
|
||||
|
||||
setError(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('auth_token')) {
|
||||
dispatch(auth(false))
|
||||
if (!localStorage.getItem("auth_token")) {
|
||||
dispatch(auth(false));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuth) {
|
||||
navigate('/')
|
||||
navigate("/");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const submitHandler = () => {
|
||||
|
||||
let formData = new FormData(ref.current);
|
||||
if (!isLoading) {
|
||||
dispatch(loading(true));
|
||||
apiRequest('/user/login',
|
||||
{
|
||||
method: 'POST',
|
||||
data: formData
|
||||
}).then((res) => {
|
||||
|
||||
apiRequest("/user/login", {
|
||||
method: "POST",
|
||||
data: formData,
|
||||
}).then((res) => {
|
||||
if (!res.access_token) {
|
||||
|
||||
setError('Некорректные данные для входа');
|
||||
dispatch(loading(false))
|
||||
|
||||
setError("Некорректные данные для входа");
|
||||
dispatch(loading(false));
|
||||
} else {
|
||||
|
||||
localStorage.setItem('auth_token', res.access_token);
|
||||
localStorage.setItem('id', res.id);
|
||||
localStorage.setItem('cardId', res.card_id);
|
||||
localStorage.setItem('role_status', res.status);
|
||||
localStorage.setItem("auth_token", res.access_token);
|
||||
localStorage.setItem("id", res.id);
|
||||
localStorage.setItem("cardId", res.card_id);
|
||||
localStorage.setItem("role_status", res.status);
|
||||
localStorage.setItem(
|
||||
'access_token_expired_at',
|
||||
res.access_token_expired_at
|
||||
"access_token_expired_at",
|
||||
res.access_token_expired_at
|
||||
);
|
||||
dispatch(auth(true));
|
||||
dispatch(setUserInfo(res));
|
||||
dispatch(loading(false));
|
||||
dispatch(setRole('ROLE_PARTNER'))
|
||||
dispatch(setRole("ROLE_PARTNER"));
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='auth-box'>
|
||||
<h2 className='auth-box__header'>
|
||||
Войти в <span>систему</span>
|
||||
</h2>
|
||||
<div className='auth-box__title'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
<form ref={ref} className='auth-box__form'>
|
||||
<label htmlFor='login'>Ваш логин:</label>
|
||||
<input
|
||||
id='login'
|
||||
type='text'
|
||||
name='username'
|
||||
placeholder='Логин'
|
||||
/>
|
||||
|
||||
<label htmlFor='password'>Пароль:</label>
|
||||
<input
|
||||
id='password'
|
||||
type='password'
|
||||
name='password'
|
||||
placeholder='Пароль'
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className='auth-box__form-error'>
|
||||
<ErrorBoundary>
|
||||
|
||||
|
||||
{
|
||||
handleModalError(error)
|
||||
}
|
||||
{/*<SweetAlert*/}
|
||||
{/* show={!!error}*/}
|
||||
{/* title='Ошибка'*/}
|
||||
{/* text={error}*/}
|
||||
{/* onConfirm={() => setError(null)}*/}
|
||||
{/*/>*/}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='auth-box__form-buttons'>
|
||||
<button
|
||||
className='auth-box__form-btn'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler()
|
||||
}}
|
||||
>
|
||||
{isLoading ? <Loader/> : 'Войти'}
|
||||
</button>
|
||||
|
||||
<Link to={roleChangeLink}>
|
||||
<button className='auth-box__form-btn--role auth-box__auth-link'>
|
||||
{altTitle}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="auth-box">
|
||||
<h2 className="auth-box__header">
|
||||
Войти в <span>систему</span>
|
||||
</h2>
|
||||
<div className="auth-box__title">
|
||||
<img src={ellipse} alt="" />
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
)
|
||||
<form ref={ref} className="auth-box__form">
|
||||
<label htmlFor="login">Ваш логин:</label>
|
||||
<input id="login" type="text" name="username" placeholder="Логин" />
|
||||
|
||||
<label htmlFor="password">Пароль:</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Пароль"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className="auth-box__form-error">
|
||||
<ErrorBoundary>
|
||||
{handleModalError(error)}
|
||||
{/*<SweetAlert*/}
|
||||
{/* show={!!error}*/}
|
||||
{/* title='Ошибка'*/}
|
||||
{/* text={error}*/}
|
||||
{/* onConfirm={() => setError(null)}*/}
|
||||
{/*/>*/}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="auth-box__form-buttons">
|
||||
<button
|
||||
className="auth-box__form-btn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
{isLoading ? <Loader /> : "Войти"}
|
||||
</button>
|
||||
|
||||
{/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
|
||||
<button
|
||||
className="auth-box__form-btn--role auth-box__auth-link"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
Регистрация
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
margin-bottom: 194px;
|
||||
|
||||
&__header {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 5.3em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
&__sign-in {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 5.3em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
@ -32,7 +32,7 @@
|
||||
margin-top: 164px;
|
||||
|
||||
span {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
color: #52b709;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
label {
|
||||
color: #48802d;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2.4em;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
@ -91,7 +91,7 @@
|
||||
border: 1px solid #c4c4c4;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 60px;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2.2em;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
@ -124,7 +124,7 @@
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-family: "Muller";
|
||||
font-weight: 500;
|
||||
font-size: 2.2em;
|
||||
font-weight: bold;
|
||||
@ -152,7 +152,7 @@
|
||||
border-radius: 38px;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #6aaf5c;
|
||||
font-family: 'Muller';
|
||||
font-family: "Muller";
|
||||
font-size: 2em;
|
||||
font-weight: 300;
|
||||
letter-spacing: normal;
|
||||
@ -174,7 +174,7 @@
|
||||
margin-bottom: 0px;
|
||||
|
||||
&__header {
|
||||
margin-top: 50px;
|
||||
margin-top: 120px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
38
src/components/AuthHeader/AuthHeader.js
Normal file
38
src/components/AuthHeader/AuthHeader.js
Normal file
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
|
||||
import userIcon from "../../images/userIcon.png";
|
||||
|
||||
import "./authHeader.scss";
|
||||
|
||||
export const AuthHeader = ({}) => {
|
||||
return (
|
||||
<div className="auth-header">
|
||||
<div className="auth-header__logo">
|
||||
<h3>itguild.</h3>
|
||||
</div>
|
||||
<div className="auth-header__navigation">
|
||||
<div className="container">
|
||||
<div className="auth-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Главная</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Кабинет разработчика</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Школа</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#">
|
||||
<img src={userIcon}></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthHeader;
|
||||
65
src/components/AuthHeader/authHeader.scss
Normal file
65
src/components/AuthHeader/authHeader.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.auth-header {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
&__logo {
|
||||
padding: 0 0 0 160px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 66px;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
|
||||
.auth-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-right: 25px;
|
||||
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: #897676;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.auth-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
75
src/components/SideBar/SideBar.js
Normal file
75
src/components/SideBar/SideBar.js
Normal file
@ -0,0 +1,75 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import arrow from "../../images/sideBarArrow.svg";
|
||||
|
||||
import "./sidebar.scss";
|
||||
|
||||
export const SideBar = () => {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
const toggleBar = () => {
|
||||
if (active) {
|
||||
setActive(false);
|
||||
} else {
|
||||
setActive(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-menu">
|
||||
<div className="auth-title">
|
||||
<div className="text">
|
||||
<div className="burger" onClick={() => toggleBar()}>
|
||||
<div
|
||||
className={active ? "burger__line l1 change" : "burger__line"}
|
||||
></div>
|
||||
<div
|
||||
className={active ? "burger__line l2 change" : "burger__line"}
|
||||
></div>
|
||||
<div
|
||||
className={active ? "burger__line l3 change" : "burger__line"}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<h3>МЕНЮ</h3>
|
||||
</div>
|
||||
<p className="outstaffing">
|
||||
<img src={arrow}></img>
|
||||
2023 © Outstaffing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={active ? "auth-body active" : "auth-body"}>
|
||||
<div className="auth-body__title">
|
||||
<h3>IT</h3>
|
||||
<p>guild</p>
|
||||
<span>Аутстафинговая компания</span>
|
||||
</div>
|
||||
<ul className="auth-body__navigation">
|
||||
<li>
|
||||
<a href="#">Вход для партнеров</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Кабинет разработчика</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Школа</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Отрасли</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="auth-body__politic">Политика конфиденциальности</p>
|
||||
<div className="auth-body__contacts">
|
||||
<h4>+7 812 363 17 87</h4>
|
||||
<p>Перезвонить Вам?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBar;
|
||||
202
src/components/SideBar/sidebar.scss
Normal file
202
src/components/SideBar/sidebar.scss
Normal file
@ -0,0 +1,202 @@
|
||||
.auth-menu {
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 141px;
|
||||
height: 100%;
|
||||
background: #e1fccf;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: fixed;
|
||||
width: 100% !important;
|
||||
height: 80px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80%;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 70px 0 0 0;
|
||||
|
||||
h3 {
|
||||
transform: rotate(270deg);
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.burger {
|
||||
cursor: pointer;
|
||||
margin-bottom: 70px;
|
||||
|
||||
&__line {
|
||||
width: 32px;
|
||||
border-radius: 33px;
|
||||
height: 5px;
|
||||
background-color: #333;
|
||||
margin: 5px 0 0 27px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.l1.change {
|
||||
transform: rotate(-45deg) translate(-7px, 6px);
|
||||
}
|
||||
.l2.change {
|
||||
opacity: 0;
|
||||
}
|
||||
.l3.change {
|
||||
transform: rotate(45deg) translate(-8px, -8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing {
|
||||
transform: rotate(270deg);
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
width: 200px;
|
||||
|
||||
img {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
flex-direction: row;
|
||||
|
||||
.burger {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
font-size: 12px;
|
||||
transform: none;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-body {
|
||||
padding: 40px;
|
||||
display: none;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: #e1fccf;
|
||||
width: 0;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
h3 {
|
||||
color: #52b709;
|
||||
font-size: 35px;
|
||||
line-height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 70%;
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
span {
|
||||
font-size: 5px;
|
||||
margin-left: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
margin-top: 28px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
line-height: 33px;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&__politic {
|
||||
margin-top: 42px;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&__contacts {
|
||||
margin-top: 127px;
|
||||
color: #000000;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 33px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&__title {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
&__politic {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
&__contacts {
|
||||
margin: 50px 0 25px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-body.active {
|
||||
display: flex;
|
||||
width: 424px;
|
||||
left: 140px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 535px;
|
||||
}
|
||||
}
|
||||
81
src/components/SliderWorkers/SliderWorkers.js
Normal file
81
src/components/SliderWorkers/SliderWorkers.js
Normal file
@ -0,0 +1,81 @@
|
||||
import React, { useState } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
import mockWorker from "../../images/mokPerson.png";
|
||||
|
||||
import "./sliderWorkers.scss";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
export const SliderWorkers = ({}) => {
|
||||
const [workers] = useState([
|
||||
{
|
||||
avatar: mockWorker,
|
||||
skils: "React / Vue Front end, Middle разработчик",
|
||||
},
|
||||
{
|
||||
avatar: mockWorker,
|
||||
skils: "React / Vue Front end, Middle разработчик",
|
||||
},
|
||||
{
|
||||
avatar: mockWorker,
|
||||
skils: "React / Vue Front end, Middle разработчик",
|
||||
},
|
||||
{
|
||||
avatar: mockWorker,
|
||||
skils: "React / Vue Front end, Middle разработчик",
|
||||
},
|
||||
{
|
||||
avatar: mockWorker,
|
||||
skils: "React / Vue Front end, Middle разработчик",
|
||||
},
|
||||
]);
|
||||
const settings = {
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
};
|
||||
|
||||
if (window.innerWidth < 575) {
|
||||
settings.slidesToShow = 1;
|
||||
} else if (window.innerWidth < 1440) {
|
||||
settings.slidesToShow = 2;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="slider-workers">
|
||||
<div className="container">
|
||||
<div className="slider-workers__title">
|
||||
<h2>Свободные разработчики </h2>
|
||||
<h3> для Вашей команды</h3>
|
||||
</div>
|
||||
|
||||
<Slider {...settings}>
|
||||
{workers.map((worker) => {
|
||||
return (
|
||||
<div className="worker">
|
||||
<img src={worker.avatar}></img>
|
||||
<div className="worker-description">
|
||||
<p>{worker.skils}</p>
|
||||
<button className="worker__resume">Подробное резюме</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Slider>
|
||||
|
||||
<div className="slider-workers__description">
|
||||
<h2>Дополните свою команду опытными ИТ-специалистами</h2>
|
||||
<p>
|
||||
Даём финансовые, юридические и кадровые гарантии, предоставляем SLA
|
||||
и отвечаем за работу команды. Вам не нужно искать, оформлять или
|
||||
увольнять сотрудника — все хлопоты мы берем на себя.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SliderWorkers;
|
||||
146
src/components/SliderWorkers/sliderWorkers.scss
Normal file
146
src/components/SliderWorkers/sliderWorkers.scss
Normal file
@ -0,0 +1,146 @@
|
||||
.slider-workers {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 56px 0 56px 0;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #52b709;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 55px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 37px 0 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.worker {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-left: 15px;
|
||||
|
||||
img {
|
||||
margin-right: 33px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: black;
|
||||
width: 198px;
|
||||
}
|
||||
|
||||
&__resume {
|
||||
margin-top: 5px;
|
||||
width: 177px;
|
||||
height: 40px;
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
background-color: #8dc63f;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 44px;
|
||||
|
||||
&:before {
|
||||
content: ">";
|
||||
color: white;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #8ec63f91;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
background-color: #8dc63f;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 44px;
|
||||
|
||||
&:before {
|
||||
content: "<";
|
||||
color: white;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: #8ec63f91;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&__title {
|
||||
flex-direction: column;
|
||||
padding: 120px 0 56px 0;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.worker {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.worker-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user