NikoM1k
GitHub
commit
fa78267a42
25901
package-lock.json
generated
Normal file
25901
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -42,12 +42,14 @@
|
||||
"react-router": "latest",
|
||||
"react-router-dom": "^6.2.1",
|
||||
"react-select": "^5.7.0",
|
||||
"react-slick": "^0.29.0",
|
||||
"react-syntax-highlighter": "^15.4.5",
|
||||
"react-yandex-metrika": "^2.6.0",
|
||||
"redux-devtools-extension": "^2.13.9",
|
||||
"resolve": "1.18.1",
|
||||
"resolve-url-loader": "^3.1.2",
|
||||
"semver": "7.3.2",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sweetalert2": "^11.4.8",
|
||||
"ts-loader": "^9.4.2"
|
||||
},
|
||||
|
||||
@ -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,96 +33,79 @@ 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
|
||||
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',
|
||||
"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'>
|
||||
<div className="auth-box">
|
||||
<h2 className="auth-box__header">
|
||||
Войти в <span>систему</span>
|
||||
</h2>
|
||||
<div className='auth-box__title'>
|
||||
<img src={ellipse} alt=''/>
|
||||
<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='Логин'
|
||||
/>
|
||||
<form ref={ref} className="auth-box__form">
|
||||
<label htmlFor="login">Ваш логин:</label>
|
||||
<input id="login" type="text" name="username" placeholder="Логин" />
|
||||
|
||||
<label htmlFor='password'>Пароль:</label>
|
||||
<label htmlFor="password">Пароль:</label>
|
||||
<input
|
||||
id='password'
|
||||
type='password'
|
||||
name='password'
|
||||
placeholder='Пароль'
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Пароль"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className='auth-box__form-error'>
|
||||
<div className="auth-box__form-error">
|
||||
<ErrorBoundary>
|
||||
|
||||
|
||||
{
|
||||
handleModalError(error)
|
||||
}
|
||||
{handleModalError(error)}
|
||||
{/*<SweetAlert*/}
|
||||
{/* show={!!error}*/}
|
||||
{/* title='Ошибка'*/}
|
||||
@ -135,25 +116,26 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='auth-box__form-buttons'>
|
||||
<div className="auth-box__form-buttons">
|
||||
<button
|
||||
className='auth-box__form-btn'
|
||||
className="auth-box__form-btn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler()
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
{isLoading ? <Loader/> : 'Войти'}
|
||||
{isLoading ? <Loader /> : "Войти"}
|
||||
</button>
|
||||
|
||||
<Link to={roleChangeLink}>
|
||||
<button className='auth-box__form-btn--role auth-box__auth-link'>
|
||||
{altTitle}
|
||||
{/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
|
||||
<button
|
||||
className="auth-box__form-btn--role auth-box__auth-link"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
Регистрация
|
||||
</button>
|
||||
</Link>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/images/sideBarArrow.svg
Normal file
3
src/images/sideBarArrow.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 2L19.8415 2.31926L20.5272 0.511953L18.7027 1.15053L19 2ZM12.9294 18L12.107 18.3655L12.9951 20.3639L13.7709 18.3193L12.9294 18ZM9.72941 10.8L10.5518 10.4345C10.4646 10.2381 10.31 10.0795 10.1159 9.98722L9.72941 10.8ZM3 7.6L2.70268 6.75053L0.637736 7.47326L2.6135 8.41278L3 7.6ZM18.1585 1.68074L12.0879 17.6807L13.7709 18.3193L19.8415 2.31926L18.1585 1.68074ZM13.7518 17.6345L10.5518 10.4345L8.90698 11.1655L12.107 18.3655L13.7518 17.6345ZM10.1159 9.98722L3.3865 6.78722L2.6135 8.41278L9.34291 11.6128L10.1159 9.98722ZM3.29732 8.44947L19.2973 2.84947L18.7027 1.15053L2.70268 6.75053L3.29732 8.44947Z" fill="#222222"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 732 B |
BIN
src/images/userIcon.png
Normal file
BIN
src/images/userIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
@ -1,101 +1,119 @@
|
||||
import React, {useEffect} from 'react'
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { AuthBox } from '../../components/AuthBox/AuthBox'
|
||||
import { AuthBox } from "../../components/AuthBox/AuthBox";
|
||||
|
||||
import { useSelector } from 'react-redux'
|
||||
import arrow from '../../images/arrow__login_page.png'
|
||||
import authImg from '../../images/auth_img.png'
|
||||
import cross from '../../images/cross.png'
|
||||
import text from '../../images/Body_Text.png'
|
||||
import vector from '../../images/Vector_Smart_Object.png'
|
||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
||||
import { useSelector } from "react-redux";
|
||||
import arrow from "../../images/arrow__login_page.png";
|
||||
import authImg from "../../images/auth_img.png";
|
||||
import cross from "../../images/cross.png";
|
||||
import text from "../../images/Body_Text.png";
|
||||
import arrowBtn from "../../images/arrowRight.png";
|
||||
import vector from "../../images/Vector_Smart_Object.png";
|
||||
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
|
||||
|
||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
||||
import { useNavigate} from 'react-router-dom'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
import { selectAuth } from "../../redux/outstaffingSlice";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import SideBar from "../../components/SideBar/SideBar";
|
||||
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
|
||||
|
||||
import './authForDevelopers.scss'
|
||||
import "./authForDevelopers.scss";
|
||||
|
||||
const AuthForDevelopers = () => {
|
||||
|
||||
const isAuth = useSelector(selectAuth);
|
||||
let navigate = useNavigate();
|
||||
const getToken = localStorage.getItem('auth_token')
|
||||
const getToken = localStorage.getItem("auth_token");
|
||||
|
||||
useEffect(()=> {
|
||||
useEffect(() => {
|
||||
if (isAuth || getToken) {
|
||||
navigate('/profile')
|
||||
navigate("/profile");
|
||||
}
|
||||
}, [getToken]);
|
||||
|
||||
|
||||
return (
|
||||
<section className='auth-developers'>
|
||||
<div className='auth-developers__background'>
|
||||
<img className='auth-developers__vector' src={vector} alt='' />
|
||||
<section className="auth-developers">
|
||||
<AuthHeader />
|
||||
<SliderWorkers />
|
||||
<div className="auth-developers__background">
|
||||
<img className="auth-developers__vector" src={vector} alt="" />
|
||||
<img
|
||||
className='auth-developers__vector-black'
|
||||
className="auth-developers__vector-black"
|
||||
src={vectorBlack}
|
||||
alt=''
|
||||
/>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<div className='auth-developers__box'>
|
||||
<AuthBox
|
||||
title='Для разработчиков'
|
||||
altTitle='Для партнёров'
|
||||
roleChangeLink='/auth'
|
||||
alt="#"
|
||||
/>
|
||||
<div className="container">
|
||||
<div className="change-mode">
|
||||
<div className="change-mode__arrow">
|
||||
<img src={arrowBtn}></img>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<Link to={"/authdev"}>
|
||||
<button className="change-mode__developersForDev">
|
||||
Для разработчика
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={"/auth"}>
|
||||
<button className="change-mode__partnersForDev">
|
||||
Для партнёров
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-xl-2'>
|
||||
<img className='auth-developers__arrow' src={arrow} alt='' />
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-6">
|
||||
<div className="auth-developers__box">
|
||||
<AuthBox title="Для разработчиков" />
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<div className='auth-developers__info'>
|
||||
<div className='auth-developers__info-box'>
|
||||
<img src={authImg} alt='' />
|
||||
</div>
|
||||
<div className="col-xl-2">
|
||||
<img className="auth-developers__arrow" src={arrow} alt="" />
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<div className="auth-developers__info">
|
||||
<div className="auth-developers__info-box">
|
||||
<img src={authImg} alt="" />
|
||||
<h3>
|
||||
Управление
|
||||
<br /> командой
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className='auth-developers__info-container'>
|
||||
<div className='auth-developers__info-img'>
|
||||
<div className="auth-developers__info-container">
|
||||
<div className="auth-developers__info-img">
|
||||
<div>
|
||||
<img className='cross' src={cross} alt='' />
|
||||
<img className="cross" src={cross} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||
<p className='auth-developers__specialists'>
|
||||
<p className="auth-developers__specialists">
|
||||
20 Специалистов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className='auth-developers__info-list'>
|
||||
<li className='auth-developers__info-item'>
|
||||
<ul className="auth-developers__info-list">
|
||||
<li className="auth-developers__info-item">
|
||||
Рабочее
|
||||
<br />
|
||||
пространство
|
||||
</li>
|
||||
<li className='auth-info__list-item'>
|
||||
<li className="auth-info__list-item">
|
||||
Управление задачами
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<img className='auth-developers__img-text' src={text} alt='' />
|
||||
<img className="auth-developers__img-text" src={text} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<SideBar />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthForDevelopers
|
||||
export default AuthForDevelopers;
|
||||
|
||||
@ -1,132 +1,121 @@
|
||||
.auth-developers {
|
||||
overflow: hidden;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.auth-developers__background {
|
||||
&__background {
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__vector,
|
||||
.auth-developers__vector-black {
|
||||
&__vector,
|
||||
&__vector-black {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__vector {
|
||||
top: -720px;
|
||||
left: -320px;
|
||||
}
|
||||
&__vector {
|
||||
top: -37px;
|
||||
left: -285px;
|
||||
}
|
||||
|
||||
.auth-developers__vector-black {
|
||||
&__vector-black {
|
||||
top: 460px;
|
||||
right: -224px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__vector,
|
||||
.auth-developers__vector-black {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* .form__error {
|
||||
font-size: 16px;
|
||||
color: #b21;
|
||||
margin-left: 45px;
|
||||
} */
|
||||
|
||||
.auth-developers__arrow {
|
||||
&__arrow {
|
||||
margin-top: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__arrow {
|
||||
@media (max-width: 575.98px) {
|
||||
&__vector,
|
||||
&__vector-black,
|
||||
&__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info {
|
||||
&__info {
|
||||
background-color: #e1fccf;
|
||||
margin-top: 70px;
|
||||
max-width: 310px;
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.auth-developers__info {
|
||||
@media (max-width: 375.98px) {
|
||||
&__info {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box {
|
||||
&__info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-box {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box > img {
|
||||
&__info-box > img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: -84px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box > img {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-box > img {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-box > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
&__info-box > h3 {
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-box > h3 {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-box > h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-container {
|
||||
&__info-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-img {
|
||||
&__info-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-img > div > img {
|
||||
&__info-img > div > img {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__specialists {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
&__specialists {
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
@ -135,24 +124,24 @@
|
||||
text-align: left;
|
||||
transform: rotate(-90deg);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-list {
|
||||
&__info-list {
|
||||
list-style: none;
|
||||
margin-top: 110px;
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-list {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-list {
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__info-item {
|
||||
&__info-item {
|
||||
color: #1f1f1f;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2.6em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
@ -162,46 +151,76 @@
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__info-item {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-item {
|
||||
font-size: 2.6em;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__img-text {
|
||||
&__img-text {
|
||||
position: absolute;
|
||||
right: -68px;
|
||||
bottom: -84px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-developers__img-text {
|
||||
@media (max-width: 575.98px) {
|
||||
&__img-text {
|
||||
right: 0px;
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__auth-link {
|
||||
&__auth-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-developers__auth-link a {
|
||||
&__auth-link a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 766px) {
|
||||
.auth-developers__form-buttons {
|
||||
@media (max-width: 766px) {
|
||||
&__form-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-developers__form-btn {
|
||||
&__form-btn {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.change-mode {
|
||||
&__partnersForDev {
|
||||
background: #52b7098c;
|
||||
color: #2d6505;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
&__partnersForDev,
|
||||
&__developersForDev {
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
border-radius: 44px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__developersForDev {
|
||||
position: relative;
|
||||
background: #406128;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&__partnersForDev {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,92 +1,112 @@
|
||||
import React, {useEffect} from 'react'
|
||||
import arrow from '../../images/arrow__login_page.png'
|
||||
import medium from '../../images/medium_male_big.png'
|
||||
import cross from '../../images/cross.png'
|
||||
import text from '../../images/Body_Text.png'
|
||||
import vector from '../../images/Vector_Smart_Object.png'
|
||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
||||
import { useNavigate} from 'react-router-dom'
|
||||
import React, { useEffect } from "react";
|
||||
import arrow from "../../images/arrow__login_page.png";
|
||||
import medium from "../../images/medium_male_big.png";
|
||||
import cross from "../../images/cross.png";
|
||||
import text from "../../images/Body_Text.png";
|
||||
import arrowBtn from "../../images/arrowRight.png";
|
||||
import vector from "../../images/Vector_Smart_Object.png";
|
||||
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
|
||||
import { useSelector } from "react-redux";
|
||||
import { selectAuth } from "../../redux/outstaffingSlice";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
import { AuthBox } from '../../components/AuthBox/AuthBox'
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import { AuthBox } from "../../components/AuthBox/AuthBox";
|
||||
import SideBar from "../../components/SideBar/SideBar";
|
||||
import AuthHeader from "../../components/AuthHeader/AuthHeader";
|
||||
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
|
||||
|
||||
import './authForPartners.scss'
|
||||
import "./authForPartners.scss";
|
||||
|
||||
const AuthForPartners = () => {
|
||||
const isAuth = useSelector(selectAuth);
|
||||
let navigate = useNavigate();
|
||||
|
||||
const getToken = localStorage.getItem('auth_token')
|
||||
const getToken = localStorage.getItem("auth_token");
|
||||
|
||||
useEffect(()=> {
|
||||
useEffect(() => {
|
||||
if (isAuth || getToken) {
|
||||
navigate('/profile')
|
||||
navigate("/profile");
|
||||
}
|
||||
}, [getToken]);
|
||||
|
||||
|
||||
return (
|
||||
<section className='auth-partners'>
|
||||
<div className='auth-partners__background'>
|
||||
<img className='auth-partners__vector' src={vector} alt='' />
|
||||
<img className='auth-partners__vector-black' src={vectorBlack} alt='' />
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<div className='auth-partners__box'>
|
||||
<AuthBox
|
||||
title='Для партнёров'
|
||||
altTitle='Для разработчиков'
|
||||
roleChangeLink='/authdev'
|
||||
/>
|
||||
<section className="auth-partners">
|
||||
<AuthHeader />
|
||||
<SliderWorkers />
|
||||
<div className="auth-partners__background">
|
||||
<img className="auth-partners__vector" src={vector} alt="" />
|
||||
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
|
||||
<div className="container">
|
||||
<div className="change-mode">
|
||||
<div className="change-mode__arrow">
|
||||
<img src={arrowBtn}></img>
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<Link to={"/authdev"}>
|
||||
<button className="change-mode__developersForPart">
|
||||
Для разработчика
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={"/auth"}>
|
||||
<button className="change-mode__partnersForPart">
|
||||
Для партнёров
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-xl-2'>
|
||||
<img className='auth-partners__arrow' src={arrow} alt='' />
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-6">
|
||||
<div className="auth-partners__box">
|
||||
<AuthBox title="Для партнёров" />
|
||||
</div>
|
||||
<div className='col-12 col-xl-4'>
|
||||
<div className='auth-partners__info'>
|
||||
<div className='auth-partners__info-box'>
|
||||
<img src={medium} alt='' />
|
||||
</div>
|
||||
<div className="col-xl-2">
|
||||
<img className="auth-partners__arrow" src={arrow} alt="" />
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<div className="auth-partners__info">
|
||||
<div className="auth-partners__info-box">
|
||||
<img src={medium} alt="" />
|
||||
<h3>
|
||||
Frontend разработчик,
|
||||
<br /> Middle
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className='auth-partners__info-container'>
|
||||
<div className='auth-partners__info-img'>
|
||||
<div className="auth-partners__info-container">
|
||||
<div className="auth-partners__info-img">
|
||||
<div>
|
||||
<img className='cross' src={cross} alt='' />
|
||||
<img className="cross" src={cross} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||
<p className='auth-partners__specialists'>
|
||||
<p className="auth-partners__specialists">
|
||||
20 Специалистов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className='auth-partners__info-list'>
|
||||
<li className='auth-partners__info-item'>Ruby on Rails</li>
|
||||
<li className='auth-partners__info-item'>PHP</li>
|
||||
<li className='auth-partners__info-item'>Python</li>
|
||||
<li className='auth-partners__info-item'>Vue.js</li>
|
||||
<li className='auth-partners__info-item'>React. JS</li>
|
||||
<ul className="auth-partners__info-list">
|
||||
<li className="auth-partners__info-item">Ruby on Rails</li>
|
||||
<li className="auth-partners__info-item">PHP</li>
|
||||
<li className="auth-partners__info-item">Python</li>
|
||||
<li className="auth-partners__info-item">Vue.js</li>
|
||||
<li className="auth-partners__info-item">React. JS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<img className='auth-partners__img-text' src={text} alt='' />
|
||||
<img className="auth-partners__img-text" src={text} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<SideBar />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthForPartners
|
||||
export default AuthForPartners;
|
||||
|
||||
@ -1,126 +1,119 @@
|
||||
.auth-partners {
|
||||
overflow: hidden;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.auth-partners__background {
|
||||
&__background {
|
||||
background-color: #f1f1f1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__vector,
|
||||
.auth-partners__vector-black {
|
||||
&__vector,
|
||||
&__vector-black {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__vector {
|
||||
top: -720px;
|
||||
left: -320px;
|
||||
}
|
||||
&__vector {
|
||||
top: -37px;
|
||||
left: -285px;
|
||||
}
|
||||
|
||||
.auth-partners__vector-black {
|
||||
&__vector-black {
|
||||
top: 460px;
|
||||
right: -224px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__vector,
|
||||
.auth-partners__vector-black {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__arrow {
|
||||
&__arrow {
|
||||
margin-top: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__arrow {
|
||||
@media (max-width: 575.98px) {
|
||||
&__vector,
|
||||
&__vector-black,
|
||||
&__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info {
|
||||
&__info {
|
||||
background-color: #e1fccf;
|
||||
margin-top: 70px;
|
||||
max-width: 310px;
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 310px;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.auth-partners__info {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box {
|
||||
&__info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
&__info-box {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box > img {
|
||||
@media (max-width: 375.98px) {
|
||||
&__info {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info-box > img {
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
margin-left: -84px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box > img {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-box > img {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-box > h3 {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
&__info-box > h3 {
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-box > h3 {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-box > h3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-container {
|
||||
&__info-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-img {
|
||||
&__info-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-img > div > img {
|
||||
&__info-img > div > img {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__specialists {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
&__specialists {
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
@ -129,28 +122,24 @@
|
||||
text-align: left;
|
||||
transform: rotate(-90deg);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
/* .specialists {
|
||||
margin-left: 26px;
|
||||
} */
|
||||
|
||||
.auth-partners__info-list {
|
||||
&__info-list {
|
||||
list-style: none;
|
||||
margin-top: 110px;
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-list {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-list {
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__info-item {
|
||||
&__info-item {
|
||||
color: #1f1f1f;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
@ -159,130 +148,186 @@
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__info-item {
|
||||
@media (max-width: 575.98px) {
|
||||
&__info-item {
|
||||
font-size: 2.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__img-text {
|
||||
&__img-text {
|
||||
position: absolute;
|
||||
right: -68px;
|
||||
bottom: -84px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__img-text {
|
||||
@media (max-width: 575.98px) {
|
||||
&__img-text {
|
||||
right: 0px;
|
||||
bottom: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--left {
|
||||
&__footer--left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--left {
|
||||
@media (max-width: 575.98px) {
|
||||
&__footer--left {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer__sp {
|
||||
&__footer__sp {
|
||||
padding: 0 100px 0 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer__sp {
|
||||
@media (max-width: 575.98px) {
|
||||
&__footer__sp {
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--left > div > span {
|
||||
&__footer--left > div > span {
|
||||
color: #18586e;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-family: "GT Eesti Pro Display";
|
||||
font-size: 1.6em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 16.81px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--left > div > span {
|
||||
@media (max-width: 575.98px) {
|
||||
&__footer--left > div > span {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer-icon {
|
||||
&__footer-icon {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer-icon > img {
|
||||
&__footer-icon > img {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer-icon > img {
|
||||
@media (max-width: 575.98px) {
|
||||
&__footer-icon > img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__footer--right {
|
||||
&__footer--right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.auth-partners__footer--right {
|
||||
@media (max-width: 575.98px) {
|
||||
&__footer--right {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.auth-partners__phone {
|
||||
}
|
||||
|
||||
&__phone {
|
||||
color: #003b65;
|
||||
font-family: 'CeraPro';
|
||||
font-family: "CeraPro";
|
||||
font-size: 2.1em;
|
||||
letter-spacing: normal;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__working-hours {
|
||||
&__working-hours {
|
||||
color: #003b65;
|
||||
font-family: 'CeraPro';
|
||||
font-family: "CeraPro";
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__auth-link {
|
||||
&__auth-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-partners__auth-link a {
|
||||
&__auth-link a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 766px) {
|
||||
.auth-partners__form-buttons {
|
||||
@media (max-width: 766px) {
|
||||
&__form-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-partners__form-btn {
|
||||
&__form-btn {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.change-mode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__arrow {
|
||||
margin: 49px 0 43px 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #8dc63f82;
|
||||
|
||||
border-radius: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__partnersForPart {
|
||||
background: #406128;
|
||||
color: white;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
&__partnersForPart,
|
||||
&__developersForPart {
|
||||
width: 220px;
|
||||
height: 50px;
|
||||
border-radius: 44px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__developersForPart {
|
||||
background-color: #52b7098c;
|
||||
color: #2d6505;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__partnersForPart {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
.single-report-page {
|
||||
padding: 4.6rem 20px 0;
|
||||
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||
font-family: "GT Eesti Pro Display", sans-serif;
|
||||
|
||||
&__back {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-text {
|
||||
margin-left: 3.1rem;
|
||||
color: #000000;
|
||||
|
||||
@ -59,8 +59,10 @@ export const Summary = () => {
|
||||
</div>
|
||||
<div className='skills__section__items'>
|
||||
<div className='skills__section__items__wrapper'>
|
||||
{profileInfo.skillValues && profileInfo.skillValues.map((skill) =>
|
||||
<span key={skill.id} className='skill_item'>{skill.skill.name},</span>
|
||||
{profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
|
||||
<span key={skill.id} className='skill_item'>{skill.skill.name}
|
||||
{profileInfo.skillValues.length > index + 1 && ','}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user