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,96 +33,79 @@ 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>
|
</div>
|
||||||
<form ref={ref} className='auth-box__form'>
|
<form ref={ref} className="auth-box__form">
|
||||||
<label htmlFor='login'>Ваш логин:</label>
|
<label htmlFor="login">Ваш логин:</label>
|
||||||
<input
|
<input id="login" type="text" name="username" placeholder="Логин" />
|
||||||
id='login'
|
|
||||||
type='text'
|
|
||||||
name='username'
|
|
||||||
placeholder='Логин'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<label htmlFor='password'>Пароль:</label>
|
<label htmlFor="password">Пароль:</label>
|
||||||
<input
|
<input
|
||||||
id='password'
|
id="password"
|
||||||
type='password'
|
type="password"
|
||||||
name='password'
|
name="password"
|
||||||
placeholder='Пароль'
|
placeholder="Пароль"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className='auth-box__form-error'>
|
<div className="auth-box__form-error">
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
|
{handleModalError(error)}
|
||||||
|
|
||||||
{
|
|
||||||
handleModalError(error)
|
|
||||||
}
|
|
||||||
{/*<SweetAlert*/}
|
{/*<SweetAlert*/}
|
||||||
{/* show={!!error}*/}
|
{/* show={!!error}*/}
|
||||||
{/* title='Ошибка'*/}
|
{/* title='Ошибка'*/}
|
||||||
@ -135,25 +116,26 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className='auth-box__form-buttons'>
|
<div className="auth-box__form-buttons">
|
||||||
<button
|
<button
|
||||||
className='auth-box__form-btn'
|
className="auth-box__form-btn"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
submitHandler()
|
submitHandler();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isLoading ? <Loader/> : 'Войти'}
|
{isLoading ? <Loader /> : "Войти"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<Link to={roleChangeLink}>
|
{/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
|
||||||
<button className='auth-box__form-btn--role auth-box__auth-link'>
|
<button
|
||||||
{altTitle}
|
className="auth-box__form-btn--role auth-box__auth-link"
|
||||||
|
onClick={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
Регистрация
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</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='row'>
|
|
||||||
<div className='col-12 col-xl-6'>
|
|
||||||
<div className='auth-developers__box'>
|
|
||||||
<AuthBox
|
|
||||||
title='Для разработчиков'
|
|
||||||
altTitle='Для партнёров'
|
|
||||||
roleChangeLink='/auth'
|
|
||||||
/>
|
/>
|
||||||
|
<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>
|
</div>
|
||||||
<div className='col-xl-2'>
|
<div className="row">
|
||||||
<img className='auth-developers__arrow' src={arrow} alt='' />
|
<div className="col-12 col-xl-6">
|
||||||
|
<div className="auth-developers__box">
|
||||||
|
<AuthBox title="Для разработчиков" />
|
||||||
</div>
|
</div>
|
||||||
<div className='col-12 col-xl-4'>
|
</div>
|
||||||
<div className='auth-developers__info'>
|
<div className="col-xl-2">
|
||||||
<div className='auth-developers__info-box'>
|
<img className="auth-developers__arrow" src={arrow} alt="" />
|
||||||
<img src={authImg} 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>
|
<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,132 +1,121 @@
|
|||||||
.auth-developers {
|
.auth-developers {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
.auth-developers__background {
|
&__background {
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__vector,
|
&__vector,
|
||||||
.auth-developers__vector-black {
|
&__vector-black {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__vector {
|
&__vector {
|
||||||
top: -720px;
|
top: -37px;
|
||||||
left: -320px;
|
left: -285px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__vector-black {
|
&__vector-black {
|
||||||
top: 460px;
|
top: 460px;
|
||||||
right: -224px;
|
right: -224px;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-developers__vector,
|
|
||||||
.auth-developers__vector-black {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* .form__error {
|
&__arrow {
|
||||||
font-size: 16px;
|
|
||||||
color: #b21;
|
|
||||||
margin-left: 45px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.auth-developers__arrow {
|
|
||||||
margin-top: 360px;
|
margin-top: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__arrow {
|
&__vector,
|
||||||
|
&__vector-black,
|
||||||
|
&__arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info {
|
&__info {
|
||||||
background-color: #e1fccf;
|
background-color: #e1fccf;
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
max-width: 310px;
|
max-width: 310px;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 310px;
|
padding-bottom: 310px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info {
|
&__info {
|
||||||
max-width: 380px;
|
max-width: 380px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 375.98px) {
|
@media (max-width: 375.98px) {
|
||||||
.auth-developers__info {
|
&__info {
|
||||||
max-width: 340px;
|
max-width: 340px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-box {
|
&__info-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-box {
|
&__info-box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-box > img {
|
&__info-box > img {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
margin-left: -84px;
|
margin-left: -84px;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-box > img {
|
&__info-box > img {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-box > h3 {
|
&__info-box > h3 {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-box > h3 {
|
&__info-box > h3 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-container {
|
&__info-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-img {
|
&__info-img {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 28px;
|
margin-top: 28px;
|
||||||
margin-left: -40px;
|
margin-left: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-img > div > img {
|
&__info-img > div > img {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__specialists {
|
&__specialists {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -135,24 +124,24 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-list {
|
&__info-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: 110px;
|
margin-top: 110px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 34px;
|
left: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-list {
|
&__info-list {
|
||||||
left: 34px;
|
left: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__info-item {
|
&__info-item {
|
||||||
color: #1f1f1f;
|
color: #1f1f1f;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2.6em;
|
font-size: 2.6em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -162,46 +151,76 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 34px;
|
margin-bottom: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__info-item {
|
&__info-item {
|
||||||
font-size: 2.6em;
|
font-size: 2.6em;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__img-text {
|
&__img-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -68px;
|
right: -68px;
|
||||||
bottom: -84px;
|
bottom: -84px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-developers__img-text {
|
&__img-text {
|
||||||
right: 0px;
|
right: 0px;
|
||||||
bottom: -40px;
|
bottom: -40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__auth-link {
|
&__auth-link {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__auth-link a {
|
&__auth-link a {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 766px) {
|
@media (max-width: 766px) {
|
||||||
.auth-developers__form-buttons {
|
&__form-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-developers__form-btn {
|
&__form-btn {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
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 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>
|
</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>
|
||||||
<div className='col-12 col-xl-4'>
|
</div>
|
||||||
<div className='auth-partners__info'>
|
<div className="col-xl-2">
|
||||||
<div className='auth-partners__info-box'>
|
<img className="auth-partners__arrow" src={arrow} alt="" />
|
||||||
<img src={medium} 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>
|
<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,126 +1,119 @@
|
|||||||
.auth-partners {
|
.auth-partners {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
.auth-partners__background {
|
&__background {
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__vector,
|
&__vector,
|
||||||
.auth-partners__vector-black {
|
&__vector-black {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__vector {
|
&__vector {
|
||||||
top: -720px;
|
top: -37px;
|
||||||
left: -320px;
|
left: -285px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__vector-black {
|
&__vector-black {
|
||||||
top: 460px;
|
top: 460px;
|
||||||
right: -224px;
|
right: -224px;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__vector,
|
|
||||||
.auth-partners__vector-black {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__arrow {
|
&__arrow {
|
||||||
margin-top: 360px;
|
margin-top: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__arrow {
|
&__vector,
|
||||||
|
&__vector-black,
|
||||||
|
&__arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info {
|
&__info {
|
||||||
background-color: #e1fccf;
|
background-color: #e1fccf;
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
max-width: 310px;
|
max-width: 310px;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 310px;
|
padding-bottom: 310px;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
.auth-partners__info {
|
|
||||||
max-width: 380px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 375.98px) {
|
&__info-box {
|
||||||
.auth-partners__info {
|
|
||||||
max-width: 340px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-partners__info-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-box {
|
&__info {
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-box > img {
|
@media (max-width: 375.98px) {
|
||||||
|
&__info {
|
||||||
|
max-width: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-box > img {
|
||||||
width: 165px;
|
width: 165px;
|
||||||
height: 165px;
|
height: 165px;
|
||||||
margin-left: -84px;
|
margin-left: -84px;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-box > img {
|
&__info-box > img {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-box > h3 {
|
&__info-box > h3 {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-box > h3 {
|
&__info-box > h3 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-container {
|
&__info-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-img {
|
&__info-img {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 28px;
|
margin-top: 28px;
|
||||||
margin-left: -40px;
|
margin-left: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-img > div > img {
|
&__info-img > div > img {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__specialists {
|
&__specialists {
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -129,28 +122,24 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .specialists {
|
&__info-list {
|
||||||
margin-left: 26px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.auth-partners__info-list {
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: 110px;
|
margin-top: 110px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -70px;
|
right: -70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-list {
|
&__info-list {
|
||||||
left: 34px;
|
left: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__info-item {
|
&__info-item {
|
||||||
color: #1f1f1f;
|
color: #1f1f1f;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -159,130 +148,186 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__info-item {
|
&__info-item {
|
||||||
font-size: 2.6em;
|
font-size: 2.6em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__img-text {
|
&__img-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -68px;
|
right: -68px;
|
||||||
bottom: -84px;
|
bottom: -84px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__img-text {
|
&__img-text {
|
||||||
right: 0px;
|
right: 0px;
|
||||||
bottom: -40px;
|
bottom: -40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer--left {
|
&__footer--left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__footer--left {
|
&__footer--left {
|
||||||
margin-top: 120px;
|
margin-top: 120px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer__sp {
|
&__footer__sp {
|
||||||
padding: 0 100px 0 34px;
|
padding: 0 100px 0 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__footer__sp {
|
&__footer__sp {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer--left > div > span {
|
&__footer--left > div > span {
|
||||||
color: #18586e;
|
color: #18586e;
|
||||||
font-family: 'GT Eesti Pro Display';
|
font-family: "GT Eesti Pro Display";
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 16.81px;
|
line-height: 16.81px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__footer--left > div > span {
|
&__footer--left > div > span {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer-icon {
|
&__footer-icon {
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer-icon > img {
|
&__footer-icon > img {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__footer-icon > img {
|
&__footer-icon > img {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__footer--right {
|
&__footer--right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: left;
|
align-items: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
@media (max-width: 575.98px) {
|
||||||
.auth-partners__footer--right {
|
&__footer--right {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.auth-partners__phone {
|
|
||||||
|
&__phone {
|
||||||
color: #003b65;
|
color: #003b65;
|
||||||
font-family: 'CeraPro';
|
font-family: "CeraPro";
|
||||||
font-size: 2.1em;
|
font-size: 2.1em;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__working-hours {
|
&__working-hours {
|
||||||
color: #003b65;
|
color: #003b65;
|
||||||
font-family: 'CeraPro';
|
font-family: "CeraPro";
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__auth-link {
|
&__auth-link {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__auth-link a {
|
&__auth-link a {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 766px) {
|
@media (max-width: 766px) {
|
||||||
.auth-partners__form-buttons {
|
&__form-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-partners__form-btn {
|
&__form-btn {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
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 {
|
.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