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": "latest",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^6.2.1",
|
||||||
"react-select": "^5.7.0",
|
"react-select": "^5.7.0",
|
||||||
|
"react-slick": "^0.29.0",
|
||||||
"react-syntax-highlighter": "^15.4.5",
|
"react-syntax-highlighter": "^15.4.5",
|
||||||
"react-yandex-metrika": "^2.6.0",
|
"react-yandex-metrika": "^2.6.0",
|
||||||
"redux-devtools-extension": "^2.13.9",
|
"redux-devtools-extension": "^2.13.9",
|
||||||
"resolve": "1.18.1",
|
"resolve": "1.18.1",
|
||||||
"resolve-url-loader": "^3.1.2",
|
"resolve-url-loader": "^3.1.2",
|
||||||
"semver": "7.3.2",
|
"semver": "7.3.2",
|
||||||
|
"slick-carousel": "^1.8.1",
|
||||||
"sweetalert2": "^11.4.8",
|
"sweetalert2": "^11.4.8",
|
||||||
"ts-loader": "^9.4.2"
|
"ts-loader": "^9.4.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,29 +1,27 @@
|
|||||||
import React, {useEffect, useRef, useState} from 'react'
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import {Link, useNavigate} from 'react-router-dom'
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import {useDispatch, useSelector} from 'react-redux'
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
|
||||||
import {Loader} from '../Loader/Loader'
|
import { Loader } from "../Loader/Loader";
|
||||||
import ErrorBoundary from "../../hoc/ErrorBoundary";
|
import ErrorBoundary from "../../hoc/ErrorBoundary";
|
||||||
|
|
||||||
import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
|
import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
|
||||||
import {loading} from '../../redux/loaderSlice'
|
import { loading } from "../../redux/loaderSlice";
|
||||||
import {setRole} from '../../redux/roleSlice'
|
import { setRole } from "../../redux/roleSlice";
|
||||||
import {selectIsLoading} from '../../redux/loaderSlice'
|
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 Swal from "sweetalert2";
|
||||||
import withReactContent from 'sweetalert2-react-content'
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
|
||||||
const SweetAlert = withReactContent(Swal);
|
const SweetAlert = withReactContent(Swal);
|
||||||
|
|
||||||
|
export const AuthBox = ({ title }) => {
|
||||||
export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -35,125 +33,109 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
|||||||
|
|
||||||
const handleModalError = (error) => {
|
const handleModalError = (error) => {
|
||||||
SweetAlert.fire({
|
SweetAlert.fire({
|
||||||
title: 'Ошибка',
|
title: "Ошибка",
|
||||||
text: error
|
text: error,
|
||||||
});
|
});
|
||||||
|
|
||||||
setError(null)
|
setError(null);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!localStorage.getItem('auth_token')) {
|
if (!localStorage.getItem("auth_token")) {
|
||||||
dispatch(auth(false))
|
dispatch(auth(false));
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isAuth) {
|
if (isAuth) {
|
||||||
navigate('/')
|
navigate("/");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const submitHandler = () => {
|
const submitHandler = () => {
|
||||||
|
|
||||||
let formData = new FormData(ref.current);
|
let formData = new FormData(ref.current);
|
||||||
if (!isLoading) {
|
if (!isLoading) {
|
||||||
dispatch(loading(true));
|
dispatch(loading(true));
|
||||||
apiRequest('/user/login',
|
apiRequest("/user/login", {
|
||||||
{
|
method: "POST",
|
||||||
method: 'POST',
|
data: formData,
|
||||||
data: formData
|
}).then((res) => {
|
||||||
}).then((res) => {
|
|
||||||
|
|
||||||
if (!res.access_token) {
|
if (!res.access_token) {
|
||||||
|
setError("Некорректные данные для входа");
|
||||||
setError('Некорректные данные для входа');
|
dispatch(loading(false));
|
||||||
dispatch(loading(false))
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
localStorage.setItem("auth_token", res.access_token);
|
||||||
localStorage.setItem('auth_token', res.access_token);
|
localStorage.setItem("id", res.id);
|
||||||
localStorage.setItem('id', res.id);
|
localStorage.setItem("cardId", res.card_id);
|
||||||
localStorage.setItem('cardId', res.card_id);
|
localStorage.setItem("role_status", res.status);
|
||||||
localStorage.setItem('role_status', res.status);
|
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
'access_token_expired_at',
|
"access_token_expired_at",
|
||||||
res.access_token_expired_at
|
res.access_token_expired_at
|
||||||
);
|
);
|
||||||
dispatch(auth(true));
|
dispatch(auth(true));
|
||||||
dispatch(setUserInfo(res));
|
dispatch(setUserInfo(res));
|
||||||
dispatch(loading(false));
|
dispatch(loading(false));
|
||||||
dispatch(setRole('ROLE_PARTNER'))
|
dispatch(setRole("ROLE_PARTNER"));
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='auth-box'>
|
<div className="auth-box">
|
||||||
<h2 className='auth-box__header'>
|
<h2 className="auth-box__header">
|
||||||
Войти в <span>систему</span>
|
Войти в <span>систему</span>
|
||||||
</h2>
|
</h2>
|
||||||
<div className='auth-box__title'>
|
<div className="auth-box__title">
|
||||||
<img src={ellipse} alt=''/>
|
<img src={ellipse} alt="" />
|
||||||
<span>{title}</span>
|
<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>
|
</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;
|
margin-bottom: 194px;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 5.3em;
|
font-size: 5.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -22,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__sign-in {
|
&__sign-in {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 5.3em;
|
font-size: 5.3em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -32,7 +32,7 @@
|
|||||||
margin-top: 164px;
|
margin-top: 164px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
color: #52b709;
|
color: #52b709;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: 0.56px;
|
letter-spacing: 0.56px;
|
||||||
@ -49,7 +49,7 @@
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
color: #18586e;
|
color: #18586e;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -72,7 +72,7 @@
|
|||||||
|
|
||||||
label {
|
label {
|
||||||
color: #48802d;
|
color: #48802d;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2.4em;
|
font-size: 2.4em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -91,7 +91,7 @@
|
|||||||
border: 1px solid #c4c4c4;
|
border: 1px solid #c4c4c4;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -124,7 +124,7 @@
|
|||||||
);
|
);
|
||||||
border: none;
|
border: none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: 'Muller';
|
font-family: "Muller";
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -152,7 +152,7 @@
|
|||||||
border-radius: 38px;
|
border-radius: 38px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 2px solid #6aaf5c;
|
border: 2px solid #6aaf5c;
|
||||||
font-family: 'Muller';
|
font-family: "Muller";
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
@ -174,7 +174,7 @@
|
|||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
margin-top: 50px;
|
margin-top: 120px;
|
||||||
line-height: 20px;
|
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 { useSelector } from "react-redux";
|
||||||
import arrow from '../../images/arrow__login_page.png'
|
import arrow from "../../images/arrow__login_page.png";
|
||||||
import authImg from '../../images/auth_img.png'
|
import authImg from "../../images/auth_img.png";
|
||||||
import cross from '../../images/cross.png'
|
import cross from "../../images/cross.png";
|
||||||
import text from '../../images/Body_Text.png'
|
import text from "../../images/Body_Text.png";
|
||||||
import vector from '../../images/Vector_Smart_Object.png'
|
import arrowBtn from "../../images/arrowRight.png";
|
||||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
import vector from "../../images/Vector_Smart_Object.png";
|
||||||
|
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
|
||||||
|
|
||||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
import { selectAuth } from "../../redux/outstaffingSlice";
|
||||||
import { useNavigate} from 'react-router-dom'
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { Footer } from '../../components/Footer/Footer'
|
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 AuthForDevelopers = () => {
|
||||||
|
|
||||||
const isAuth = useSelector(selectAuth);
|
const isAuth = useSelector(selectAuth);
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
const getToken = localStorage.getItem('auth_token')
|
const getToken = localStorage.getItem("auth_token");
|
||||||
|
|
||||||
useEffect(()=> {
|
useEffect(() => {
|
||||||
if (isAuth || getToken) {
|
if (isAuth || getToken) {
|
||||||
navigate('/profile')
|
navigate("/profile");
|
||||||
}
|
}
|
||||||
}, [getToken]);
|
}, [getToken]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='auth-developers'>
|
<section className="auth-developers">
|
||||||
<div className='auth-developers__background'>
|
<AuthHeader />
|
||||||
<img className='auth-developers__vector' src={vector} alt='' />
|
<SliderWorkers />
|
||||||
|
<div className="auth-developers__background">
|
||||||
|
<img className="auth-developers__vector" src={vector} alt="" />
|
||||||
<img
|
<img
|
||||||
className='auth-developers__vector-black'
|
className="auth-developers__vector-black"
|
||||||
src={vectorBlack}
|
src={vectorBlack}
|
||||||
alt=''
|
alt="#"
|
||||||
/>
|
/>
|
||||||
<div className='container'>
|
<div className="container">
|
||||||
<div className='row'>
|
<div className="change-mode">
|
||||||
<div className='col-12 col-xl-6'>
|
<div className="change-mode__arrow">
|
||||||
<div className='auth-developers__box'>
|
<img src={arrowBtn}></img>
|
||||||
<AuthBox
|
</div>
|
||||||
title='Для разработчиков'
|
<div className="buttons">
|
||||||
altTitle='Для партнёров'
|
<Link to={"/authdev"}>
|
||||||
roleChangeLink='/auth'
|
<button className="change-mode__developersForDev">
|
||||||
/>
|
Для разработчика
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link to={"/auth"}>
|
||||||
|
<button className="change-mode__partnersForDev">
|
||||||
|
Для партнёров
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12 col-xl-6">
|
||||||
|
<div className="auth-developers__box">
|
||||||
|
<AuthBox title="Для разработчиков" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='col-xl-2'>
|
<div className="col-xl-2">
|
||||||
<img className='auth-developers__arrow' src={arrow} alt='' />
|
<img className="auth-developers__arrow" src={arrow} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className='col-12 col-xl-4'>
|
<div className="col-12 col-xl-4">
|
||||||
<div className='auth-developers__info'>
|
<div className="auth-developers__info">
|
||||||
<div className='auth-developers__info-box'>
|
<div className="auth-developers__info-box">
|
||||||
<img src={authImg} alt='' />
|
<img src={authImg} alt="" />
|
||||||
<h3>
|
<h3>
|
||||||
Управление
|
Управление
|
||||||
<br /> командой
|
<br /> командой
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='auth-developers__info-container'>
|
<div className="auth-developers__info-container">
|
||||||
<div className='auth-developers__info-img'>
|
<div className="auth-developers__info-img">
|
||||||
<div>
|
<div>
|
||||||
<img className='cross' src={cross} alt='' />
|
<img className="cross" src={cross} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||||
<p className='auth-developers__specialists'>
|
<p className="auth-developers__specialists">
|
||||||
20 Специалистов
|
20 Специалистов
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul className='auth-developers__info-list'>
|
<ul className="auth-developers__info-list">
|
||||||
<li className='auth-developers__info-item'>
|
<li className="auth-developers__info-item">
|
||||||
Рабочее
|
Рабочее
|
||||||
<br />
|
<br />
|
||||||
пространство
|
пространство
|
||||||
</li>
|
</li>
|
||||||
<li className='auth-info__list-item'>
|
<li className="auth-info__list-item">
|
||||||
Управление задачами
|
Управление задачами
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img className='auth-developers__img-text' src={text} alt='' />
|
<img className="auth-developers__img-text" src={text} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<SideBar />
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AuthForDevelopers
|
export default AuthForDevelopers;
|
||||||
|
|||||||
@ -1,207 +1,226 @@
|
|||||||
.auth-developers {
|
.auth-developers {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__background {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__vector,
|
&__background {
|
||||||
.auth-developers__vector-black {
|
background-color: #f1f1f1;
|
||||||
position: absolute;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__vector {
|
|
||||||
top: -720px;
|
|
||||||
left: -320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__vector-black {
|
|
||||||
top: 460px;
|
|
||||||
right: -224px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__vector,
|
|
||||||
.auth-developers__vector-black {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* .form__error {
|
&__vector,
|
||||||
font-size: 16px;
|
&__vector-black {
|
||||||
color: #b21;
|
position: absolute;
|
||||||
margin-left: 45px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.auth-developers__arrow {
|
|
||||||
margin-top: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info {
|
&__vector {
|
||||||
background-color: #e1fccf;
|
top: -37px;
|
||||||
margin-top: 70px;
|
left: -285px;
|
||||||
max-width: 310px;
|
|
||||||
padding-top: 30px;
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 310px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__info {
|
|
||||||
max-width: 380px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 375.98px) {
|
&__vector-black {
|
||||||
.auth-developers__info {
|
top: 460px;
|
||||||
max-width: 340px;
|
right: -224px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-box {
|
&__arrow {
|
||||||
display: flex;
|
margin-top: 360px;
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-box {
|
&__vector,
|
||||||
|
&__vector-black,
|
||||||
|
&__arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
background-color: #e1fccf;
|
||||||
|
margin-top: 70px;
|
||||||
|
max-width: 310px;
|
||||||
|
padding-top: 30px;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 310px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__info {
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375.98px) {
|
||||||
|
&__info {
|
||||||
|
max-width: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__info-box {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box > img {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin-left: -84px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__info-box > img {
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
&__info-box > h3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-container {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-img {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
|
margin-top: 28px;
|
||||||
|
margin-left: -40px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-box > img {
|
&__info-img > div > img {
|
||||||
width: 150px;
|
margin-bottom: 100px;
|
||||||
height: 150px;
|
|
||||||
margin-left: -84px;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__info-box > img {
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-box > h3 {
|
&__specialists {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2em;
|
font-size: 1.8em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 26.12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
transform: rotate(-90deg);
|
||||||
|
text-transform: uppercase;
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__info-box > h3 {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-container {
|
&__info-list {
|
||||||
display: flex;
|
list-style: none;
|
||||||
position: relative;
|
margin-top: 110px;
|
||||||
}
|
position: absolute;
|
||||||
|
|
||||||
.auth-developers__info-img {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 28px;
|
|
||||||
margin-left: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-img > div > img {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__specialists {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 1.8em;
|
|
||||||
font-weight: 100;
|
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 26.12px;
|
|
||||||
text-align: left;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-list {
|
|
||||||
list-style: none;
|
|
||||||
margin-top: 110px;
|
|
||||||
position: absolute;
|
|
||||||
left: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__info-list {
|
|
||||||
left: 34px;
|
left: 34px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__info-item {
|
@media (max-width: 575.98px) {
|
||||||
color: #1f1f1f;
|
&__info-list {
|
||||||
font-family: 'GT Eesti Pro Display';
|
left: 34px;
|
||||||
font-size: 2.6em;
|
}
|
||||||
font-weight: 700;
|
}
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 56.95px;
|
|
||||||
text-align: left;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
&__info-item {
|
||||||
.auth-developers__info-item {
|
color: #1f1f1f;
|
||||||
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2.6em;
|
font-size: 2.6em;
|
||||||
margin-bottom: 14px;
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
line-height: 56.95px;
|
||||||
|
text-align: left;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__info-item {
|
||||||
|
font-size: 2.6em;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img-text {
|
||||||
|
position: absolute;
|
||||||
|
right: -68px;
|
||||||
|
bottom: -84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__img-text {
|
||||||
|
right: 0px;
|
||||||
|
bottom: -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__auth-link {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__auth-link a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 766px) {
|
||||||
|
&__form-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__form-btn {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__img-text {
|
.change-mode {
|
||||||
position: absolute;
|
&__partnersForDev {
|
||||||
right: -68px;
|
background: #52b7098c;
|
||||||
bottom: -84px;
|
color: #2d6505;
|
||||||
}
|
margin-left: -40px;
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__img-text {
|
|
||||||
right: 0px;
|
|
||||||
bottom: -40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__auth-link {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-developers__auth-link a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 766px) {
|
|
||||||
.auth-developers__form-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__form-btn {
|
&__partnersForDev,
|
||||||
margin: 0;
|
&__developersForDev {
|
||||||
margin-bottom: 1.5rem;
|
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 React, { useEffect } from "react";
|
||||||
import arrow from '../../images/arrow__login_page.png'
|
import arrow from "../../images/arrow__login_page.png";
|
||||||
import medium from '../../images/medium_male_big.png'
|
import medium from "../../images/medium_male_big.png";
|
||||||
import cross from '../../images/cross.png'
|
import cross from "../../images/cross.png";
|
||||||
import text from '../../images/Body_Text.png'
|
import text from "../../images/Body_Text.png";
|
||||||
import vector from '../../images/Vector_Smart_Object.png'
|
import arrowBtn from "../../images/arrowRight.png";
|
||||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
import vector from "../../images/Vector_Smart_Object.png";
|
||||||
import { useSelector } from 'react-redux'
|
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
|
||||||
import { selectAuth } from '../../redux/outstaffingSlice'
|
import { useSelector } from "react-redux";
|
||||||
import { useNavigate} from 'react-router-dom'
|
import { selectAuth } from "../../redux/outstaffingSlice";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { Footer } from '../../components/Footer/Footer'
|
import { Footer } from "../../components/Footer/Footer";
|
||||||
import { AuthBox } from '../../components/AuthBox/AuthBox'
|
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 AuthForPartners = () => {
|
||||||
const isAuth = useSelector(selectAuth);
|
const isAuth = useSelector(selectAuth);
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
|
|
||||||
const getToken = localStorage.getItem('auth_token')
|
const getToken = localStorage.getItem("auth_token");
|
||||||
|
|
||||||
useEffect(()=> {
|
useEffect(() => {
|
||||||
if (isAuth || getToken) {
|
if (isAuth || getToken) {
|
||||||
navigate('/profile')
|
navigate("/profile");
|
||||||
}
|
}
|
||||||
}, [getToken]);
|
}, [getToken]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='auth-partners'>
|
<section className="auth-partners">
|
||||||
<div className='auth-partners__background'>
|
<AuthHeader />
|
||||||
<img className='auth-partners__vector' src={vector} alt='' />
|
<SliderWorkers />
|
||||||
<img className='auth-partners__vector-black' src={vectorBlack} alt='' />
|
<div className="auth-partners__background">
|
||||||
<div className='container'>
|
<img className="auth-partners__vector" src={vector} alt="" />
|
||||||
<div className='row'>
|
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
|
||||||
<div className='col-12 col-xl-6'>
|
<div className="container">
|
||||||
<div className='auth-partners__box'>
|
<div className="change-mode">
|
||||||
<AuthBox
|
<div className="change-mode__arrow">
|
||||||
title='Для партнёров'
|
<img src={arrowBtn}></img>
|
||||||
altTitle='Для разработчиков'
|
</div>
|
||||||
roleChangeLink='/authdev'
|
<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="row">
|
||||||
|
<div className="col-12 col-xl-6">
|
||||||
|
<div className="auth-partners__box">
|
||||||
|
<AuthBox title="Для партнёров" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='col-xl-2'>
|
<div className="col-xl-2">
|
||||||
<img className='auth-partners__arrow' src={arrow} alt='' />
|
<img className="auth-partners__arrow" src={arrow} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className='col-12 col-xl-4'>
|
<div className="col-12 col-xl-4">
|
||||||
<div className='auth-partners__info'>
|
<div className="auth-partners__info">
|
||||||
<div className='auth-partners__info-box'>
|
<div className="auth-partners__info-box">
|
||||||
<img src={medium} alt='' />
|
<img src={medium} alt="" />
|
||||||
<h3>
|
<h3>
|
||||||
Frontend разработчик,
|
Frontend разработчик,
|
||||||
<br /> Middle
|
<br /> Middle
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='auth-partners__info-container'>
|
<div className="auth-partners__info-container">
|
||||||
<div className='auth-partners__info-img'>
|
<div className="auth-partners__info-img">
|
||||||
<div>
|
<div>
|
||||||
<img className='cross' src={cross} alt='' />
|
<img className="cross" src={cross} alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
|
||||||
<p className='auth-partners__specialists'>
|
<p className="auth-partners__specialists">
|
||||||
20 Специалистов
|
20 Специалистов
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul className='auth-partners__info-list'>
|
<ul className="auth-partners__info-list">
|
||||||
<li className='auth-partners__info-item'>Ruby on Rails</li>
|
<li className="auth-partners__info-item">Ruby on Rails</li>
|
||||||
<li className='auth-partners__info-item'>PHP</li>
|
<li className="auth-partners__info-item">PHP</li>
|
||||||
<li className='auth-partners__info-item'>Python</li>
|
<li className="auth-partners__info-item">Python</li>
|
||||||
<li className='auth-partners__info-item'>Vue.js</li>
|
<li className="auth-partners__info-item">Vue.js</li>
|
||||||
<li className='auth-partners__info-item'>React. JS</li>
|
<li className="auth-partners__info-item">React. JS</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img className='auth-partners__img-text' src={text} alt='' />
|
<img className="auth-partners__img-text" src={text} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<SideBar />
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AuthForPartners
|
export default AuthForPartners;
|
||||||
|
|||||||
@ -1,288 +1,333 @@
|
|||||||
.auth-partners {
|
.auth-partners {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__background {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__vector,
|
&__background {
|
||||||
.auth-partners__vector-black {
|
background-color: #f1f1f1;
|
||||||
position: absolute;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__vector {
|
|
||||||
top: -720px;
|
|
||||||
left: -320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__vector-black {
|
|
||||||
top: 460px;
|
|
||||||
right: -224px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__vector,
|
|
||||||
.auth-partners__vector-black {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__arrow {
|
&__vector,
|
||||||
margin-top: 360px;
|
&__vector-black {
|
||||||
}
|
position: absolute;
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info {
|
&__vector {
|
||||||
background-color: #e1fccf;
|
top: -37px;
|
||||||
margin-top: 70px;
|
left: -285px;
|
||||||
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) {
|
&__vector-black {
|
||||||
.auth-partners__info {
|
top: 460px;
|
||||||
max-width: 340px;
|
right: -224px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-box {
|
&__arrow {
|
||||||
display: flex;
|
margin-top: 360px;
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-box {
|
&__vector,
|
||||||
|
&__vector-black,
|
||||||
|
&__arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
background-color: #e1fccf;
|
||||||
|
margin-top: 70px;
|
||||||
|
max-width: 310px;
|
||||||
|
padding-top: 30px;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 310px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__info {
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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) {
|
||||||
|
&__info-box > img {
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
&__info-box > h3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-container {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-img {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
|
margin-top: 28px;
|
||||||
|
margin-left: -40px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-box > img {
|
&__info-img > div > img {
|
||||||
width: 165px;
|
margin-bottom: 100px;
|
||||||
height: 165px;
|
|
||||||
margin-left: -84px;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__info-box > img {
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-box > h3 {
|
&__specialists {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2em;
|
font-size: 1.8em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 26.12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
transform: rotate(-90deg);
|
||||||
|
text-transform: uppercase;
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__info-box > h3 {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-container {
|
&__info-list {
|
||||||
display: flex;
|
list-style: none;
|
||||||
position: relative;
|
margin-top: 110px;
|
||||||
}
|
position: absolute;
|
||||||
|
right: -70px;
|
||||||
.auth-partners__info-img {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 28px;
|
|
||||||
margin-left: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-img > div > img {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__specialists {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 1.8em;
|
|
||||||
font-weight: 100;
|
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 26.12px;
|
|
||||||
text-align: left;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .specialists {
|
|
||||||
margin-left: 26px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.auth-partners__info-list {
|
|
||||||
list-style: none;
|
|
||||||
margin-top: 110px;
|
|
||||||
position: absolute;
|
|
||||||
right: -70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__info-list {
|
|
||||||
left: 34px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-item {
|
@media (max-width: 575.98px) {
|
||||||
color: #1f1f1f;
|
&__info-list {
|
||||||
font-family: 'GT Eesti Pro Display';
|
left: 34px;
|
||||||
font-size: 4em;
|
}
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 56.95px;
|
|
||||||
text-align: left;
|
|
||||||
text-decoration: underline;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__info-item {
|
|
||||||
font-size: 2.6em;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__img-text {
|
&__info-item {
|
||||||
position: absolute;
|
color: #1f1f1f;
|
||||||
right: -68px;
|
font-family: "GT Eesti Pro Display";
|
||||||
bottom: -84px;
|
font-size: 4em;
|
||||||
}
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
@media (max-width: 575.98px) {
|
letter-spacing: normal;
|
||||||
.auth-partners__img-text {
|
line-height: 56.95px;
|
||||||
right: 0px;
|
text-align: left;
|
||||||
bottom: -40px;
|
text-decoration: underline;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__footer--left {
|
@media (max-width: 575.98px) {
|
||||||
display: flex;
|
&__info-item {
|
||||||
align-items: center;
|
font-size: 2.6em;
|
||||||
margin-bottom: 60px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__footer--left {
|
|
||||||
margin-top: 120px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__footer__sp {
|
&__img-text {
|
||||||
padding: 0 100px 0 34px;
|
position: absolute;
|
||||||
}
|
right: -68px;
|
||||||
|
bottom: -84px;
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__footer__sp {
|
|
||||||
padding: 0;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__footer--left > div > span {
|
@media (max-width: 575.98px) {
|
||||||
color: #18586e;
|
&__img-text {
|
||||||
font-family: 'GT Eesti Pro Display';
|
right: 0px;
|
||||||
font-size: 1.6em;
|
bottom: -40px;
|
||||||
font-weight: 400;
|
}
|
||||||
font-style: normal;
|
}
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 16.81px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
&__footer--left {
|
||||||
.auth-partners__footer--left > div > span {
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__footer--left {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer__sp {
|
||||||
|
padding: 0 100px 0 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__footer__sp {
|
||||||
|
padding: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer--left > div > span {
|
||||||
|
color: #18586e;
|
||||||
|
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) {
|
||||||
|
&__footer--left > div > span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-icon {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-icon > img {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__footer-icon > img {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer--right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
&__footer--right {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__phone {
|
||||||
|
color: #003b65;
|
||||||
|
font-family: "CeraPro";
|
||||||
|
font-size: 2.1em;
|
||||||
|
letter-spacing: normal;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__working-hours {
|
||||||
|
color: #003b65;
|
||||||
|
font-family: "CeraPro";
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
line-height: normal;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__auth-link {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__auth-link a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 766px) {
|
||||||
|
&__form-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__form-btn {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer-icon {
|
.change-mode {
|
||||||
text-align: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__footer-icon > img {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__footer-icon > img {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__footer--right {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: left;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
&__arrow {
|
||||||
.auth-partners__footer--right {
|
margin: 49px 0 43px 0;
|
||||||
margin-bottom: 20px;
|
width: 48px;
|
||||||
}
|
height: 48px;
|
||||||
}
|
background: #8dc63f82;
|
||||||
.auth-partners__phone {
|
|
||||||
color: #003b65;
|
|
||||||
font-family: 'CeraPro';
|
|
||||||
font-size: 2.1em;
|
|
||||||
letter-spacing: normal;
|
|
||||||
line-height: 25px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__working-hours {
|
border-radius: 44px;
|
||||||
color: #003b65;
|
display: flex;
|
||||||
font-family: 'CeraPro';
|
align-items: center;
|
||||||
font-size: 1.2em;
|
justify-content: center;
|
||||||
font-weight: 400;
|
img {
|
||||||
font-style: normal;
|
transform: rotate(90deg);
|
||||||
letter-spacing: normal;
|
}
|
||||||
line-height: normal;
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__auth-link {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__auth-link a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 766px) {
|
|
||||||
.auth-partners__form-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__form-btn {
|
&__partnersForPart {
|
||||||
margin: 0;
|
background: #406128;
|
||||||
margin-bottom: 1.5rem;
|
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 {
|
.single-report-page {
|
||||||
padding: 4.6rem 20px 0;
|
padding: 4.6rem 20px 0;
|
||||||
font-family: 'GT Eesti Pro Display', sans-serif;
|
font-family: "GT Eesti Pro Display", sans-serif;
|
||||||
|
|
||||||
&__back {
|
&__back {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&-text {
|
&-text {
|
||||||
margin-left: 3.1rem;
|
margin-left: 3.1rem;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|||||||
@ -59,8 +59,10 @@ export const Summary = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className='skills__section__items'>
|
<div className='skills__section__items'>
|
||||||
<div className='skills__section__items__wrapper'>
|
<div className='skills__section__items__wrapper'>
|
||||||
{profileInfo.skillValues && profileInfo.skillValues.map((skill) =>
|
{profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
|
||||||
<span key={skill.id} className='skill_item'>{skill.skill.name},</span>
|
<span key={skill.id} className='skill_item'>{skill.skill.name}
|
||||||
|
{profileInfo.skillValues.length > index + 1 && ','}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user