Merge remote-tracking branch 'origin/update-page-auth' into parthners-area

This commit is contained in:
Николай Полтщук 2023-03-16 17:35:41 +03:00
commit 9a048a2c7c
17 changed files with 27233 additions and 634 deletions

25901
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -42,12 +42,14 @@
"react-router": "latest",
"react-router-dom": "^6.2.1",
"react-select": "^5.7.0",
"react-slick": "^0.29.0",
"react-syntax-highlighter": "^15.4.5",
"react-yandex-metrika": "^2.6.0",
"redux-devtools-extension": "^2.13.9",
"resolve": "1.18.1",
"resolve-url-loader": "^3.1.2",
"semver": "7.3.2",
"slick-carousel": "^1.8.1",
"sweetalert2": "^11.4.8",
"ts-loader": "^9.4.2"
},

View File

@ -1,29 +1,27 @@
import React, {useEffect, useRef, useState} from 'react'
import {Link, useNavigate} from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux'
import React, { useEffect, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {Loader} from '../Loader/Loader'
import { Loader } from "../Loader/Loader";
import ErrorBoundary from "../../hoc/ErrorBoundary";
import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
import {loading} from '../../redux/loaderSlice'
import {setRole} from '../../redux/roleSlice'
import {selectIsLoading} from '../../redux/loaderSlice'
import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
import { loading } from "../../redux/loaderSlice";
import { setRole } from "../../redux/roleSlice";
import { selectIsLoading } from "../../redux/loaderSlice";
import {apiRequest} from "../../api/request";
import { apiRequest } from "../../api/request";
import ellipse from '../../images/ellipse.png'
import ellipse from "../../images/ellipse.png";
import './authBox.scss'
import "./authBox.scss";
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const SweetAlert = withReactContent(Swal);
export const AuthBox = ({title, altTitle, roleChangeLink}) => {
export const AuthBox = ({ title }) => {
const dispatch = useDispatch();
const ref = useRef();
const navigate = useNavigate();
@ -35,96 +33,79 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
const handleModalError = (error) => {
SweetAlert.fire({
title: 'Ошибка',
text: error
title: "Ошибка",
text: error,
});
setError(null)
setError(null);
};
useEffect(() => {
if (!localStorage.getItem('auth_token')) {
dispatch(auth(false))
if (!localStorage.getItem("auth_token")) {
dispatch(auth(false));
}
}, []);
useEffect(() => {
if (isAuth) {
navigate('/')
navigate("/");
}
});
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest('/user/login',
{
method: 'POST',
data: formData
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
setError('Некорректные данные для входа');
dispatch(loading(false))
setError("Некорректные данные для входа");
dispatch(loading(false));
} else {
localStorage.setItem('auth_token', res.access_token);
localStorage.setItem('id', res.id);
localStorage.setItem('cardId', res.card_id);
localStorage.setItem('role_status', res.status);
localStorage.setItem("auth_token", res.access_token);
localStorage.setItem("id", res.id);
localStorage.setItem("cardId", res.card_id);
localStorage.setItem("role_status", res.status);
localStorage.setItem(
'access_token_expired_at',
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole('ROLE_PARTNER'))
dispatch(setRole("ROLE_PARTNER"));
}
})
});
}
};
return (
<div className='auth-box'>
<h2 className='auth-box__header'>
<div className="auth-box">
<h2 className="auth-box__header">
Войти в <span>систему</span>
</h2>
<div className='auth-box__title'>
<img src={ellipse} alt=''/>
<div className="auth-box__title">
<img src={ellipse} alt="" />
<span>{title}</span>
</div>
<form ref={ref} className='auth-box__form'>
<label htmlFor='login'>Ваш логин:</label>
<input
id='login'
type='text'
name='username'
placeholder='Логин'
/>
<form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш логин:</label>
<input id="login" type="text" name="username" placeholder="Логин" />
<label htmlFor='password'>Пароль:</label>
<label htmlFor="password">Пароль:</label>
<input
id='password'
type='password'
name='password'
placeholder='Пароль'
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
{error && (
<div className='auth-box__form-error'>
<div className="auth-box__form-error">
<ErrorBoundary>
{
handleModalError(error)
}
{handleModalError(error)}
{/*<SweetAlert*/}
{/* show={!!error}*/}
{/* title='Ошибка'*/}
@ -135,25 +116,26 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
</div>
)}
<div className='auth-box__form-buttons'>
<div className="auth-box__form-buttons">
<button
className='auth-box__form-btn'
className="auth-box__form-btn"
onClick={(e) => {
e.preventDefault();
submitHandler()
submitHandler();
}}
>
{isLoading ? <Loader/> : 'Войти'}
{isLoading ? <Loader /> : "Войти"}
</button>
<Link to={roleChangeLink}>
<button className='auth-box__form-btn--role auth-box__auth-link'>
{altTitle}
{/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
<button
className="auth-box__form-btn--role auth-box__auth-link"
onClick={(e) => e.preventDefault()}
>
Регистрация
</button>
</Link>
</div>
</form>
</div>
)
);
};

View File

@ -5,7 +5,7 @@
margin-bottom: 194px;
&__header {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -22,7 +22,7 @@
}
&__sign-in {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -32,7 +32,7 @@
margin-top: 164px;
span {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
@ -49,7 +49,7 @@
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
font-style: normal;
@ -72,7 +72,7 @@
label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.4em;
font-weight: 500;
font-style: normal;
@ -91,7 +91,7 @@
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.2em;
font-weight: 300;
font-style: normal;
@ -124,7 +124,7 @@
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-family: "Muller";
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
@ -152,7 +152,7 @@
border-radius: 38px;
background-color: #ffffff;
border: 2px solid #6aaf5c;
font-family: 'Muller';
font-family: "Muller";
font-size: 2em;
font-weight: 300;
letter-spacing: normal;
@ -174,7 +174,7 @@
margin-bottom: 0px;
&__header {
margin-top: 50px;
margin-top: 120px;
line-height: 20px;
}

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

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

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

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

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

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

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 B

View File

@ -1,101 +1,119 @@
import React, {useEffect} from 'react'
import React, { useEffect } from "react";
import { AuthBox } from '../../components/AuthBox/AuthBox'
import { AuthBox } from "../../components/AuthBox/AuthBox";
import { useSelector } from 'react-redux'
import arrow from '../../images/arrow__login_page.png'
import authImg from '../../images/auth_img.png'
import cross from '../../images/cross.png'
import text from '../../images/Body_Text.png'
import vector from '../../images/Vector_Smart_Object.png'
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import { useSelector } from "react-redux";
import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { selectAuth } from '../../redux/outstaffingSlice'
import { useNavigate} from 'react-router-dom'
import { Footer } from '../../components/Footer/Footer'
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { Footer } from "../../components/Footer/Footer";
import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import './authForDevelopers.scss'
import "./authForDevelopers.scss";
const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem('auth_token')
const getToken = localStorage.getItem("auth_token");
useEffect(()=> {
useEffect(() => {
if (isAuth || getToken) {
navigate('/profile')
navigate("/profile");
}
}, [getToken]);
return (
<section className='auth-developers'>
<div className='auth-developers__background'>
<img className='auth-developers__vector' src={vector} alt='' />
<section className="auth-developers">
<AuthHeader />
<SliderWorkers />
<div className="auth-developers__background">
<img className="auth-developers__vector" src={vector} alt="" />
<img
className='auth-developers__vector-black'
className="auth-developers__vector-black"
src={vectorBlack}
alt=''
/>
<div className='container'>
<div className='row'>
<div className='col-12 col-xl-6'>
<div className='auth-developers__box'>
<AuthBox
title='Для разработчиков'
altTitle='Для партнёров'
roleChangeLink='/auth'
alt="#"
/>
<div className="container">
<div className="change-mode">
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForDev">
Для разработчика
</button>
</Link>
<Link to={"/auth"}>
<button className="change-mode__partnersForDev">
Для партнёров
</button>
</Link>
</div>
</div>
<div className='col-xl-2'>
<img className='auth-developers__arrow' src={arrow} alt='' />
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox title="Для разработчиков" />
</div>
<div className='col-12 col-xl-4'>
<div className='auth-developers__info'>
<div className='auth-developers__info-box'>
<img src={authImg} alt='' />
</div>
<div className="col-xl-2">
<img className="auth-developers__arrow" src={arrow} alt="" />
</div>
<div className="col-12 col-xl-4">
<div className="auth-developers__info">
<div className="auth-developers__info-box">
<img src={authImg} alt="" />
<h3>
Управление
<br /> командой
</h3>
</div>
<div className='auth-developers__info-container'>
<div className='auth-developers__info-img'>
<div className="auth-developers__info-container">
<div className="auth-developers__info-img">
<div>
<img className='cross' src={cross} alt='' />
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className='auth-developers__specialists'>
<p className="auth-developers__specialists">
20 Специалистов
</p>
</div>
</div>
<ul className='auth-developers__info-list'>
<li className='auth-developers__info-item'>
<ul className="auth-developers__info-list">
<li className="auth-developers__info-item">
Рабочее
<br />
пространство
</li>
<li className='auth-info__list-item'>
<li className="auth-info__list-item">
Управление задачами
</li>
</ul>
</div>
<img className='auth-developers__img-text' src={text} alt='' />
<img className="auth-developers__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
)
);
};
export default AuthForDevelopers
export default AuthForDevelopers;

View File

@ -1,132 +1,121 @@
.auth-developers {
overflow: hidden;
}
position: relative;
.auth-developers__background {
&__background {
background-color: #f1f1f1;
position: relative;
}
}
.auth-developers__vector,
.auth-developers__vector-black {
&__vector,
&__vector-black {
position: absolute;
}
}
.auth-developers__vector {
top: -720px;
left: -320px;
}
&__vector {
top: -37px;
left: -285px;
}
.auth-developers__vector-black {
&__vector-black {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.auth-developers__vector,
.auth-developers__vector-black {
display: none;
}
}
/* .form__error {
font-size: 16px;
color: #b21;
margin-left: 45px;
} */
.auth-developers__arrow {
&__arrow {
margin-top: 360px;
}
}
@media (max-width: 575.98px) {
.auth-developers__arrow {
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
}
.auth-developers__info {
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
}
@media (max-width: 575.98px) {
.auth-developers__info {
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
}
}
@media (max-width: 375.98px) {
.auth-developers__info {
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
}
.auth-developers__info-box {
&__info-box {
display: flex;
align-items: center;
}
}
@media (max-width: 575.98px) {
.auth-developers__info-box {
@media (max-width: 575.98px) {
&__info-box {
flex-direction: column;
justify-content: center;
}
}
}
.auth-developers__info-box > img {
&__info-box > img {
width: 150px;
height: 150px;
margin-left: -84px;
margin-right: 30px;
}
}
@media (max-width: 575.98px) {
.auth-developers__info-box > img {
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
}
.auth-developers__info-box > h3 {
font-family: 'GT Eesti Pro Display';
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
}
@media (max-width: 575.98px) {
.auth-developers__info-box > h3 {
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
}
.auth-developers__info-container {
&__info-container {
display: flex;
position: relative;
}
}
.auth-developers__info-img {
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
}
.auth-developers__info-img > div > img {
&__info-img > div > img {
margin-bottom: 100px;
}
}
.auth-developers__specialists {
font-family: 'GT Eesti Pro Display';
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
@ -135,24 +124,24 @@
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
}
.auth-developers__info-list {
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
left: 34px;
}
}
@media (max-width: 575.98px) {
.auth-developers__info-list {
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
}
.auth-developers__info-item {
&__info-item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.6em;
font-weight: 700;
font-style: normal;
@ -162,46 +151,76 @@
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 34px;
}
}
@media (max-width: 575.98px) {
.auth-developers__info-item {
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
margin-bottom: 14px;
}
}
}
.auth-developers__img-text {
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
}
@media (max-width: 575.98px) {
.auth-developers__img-text {
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
}
.auth-developers__auth-link {
&__auth-link {
display: block;
}
}
.auth-developers__auth-link a {
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
}
@media (max-width: 766px) {
.auth-developers__form-buttons {
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
.auth-developers__form-btn {
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
&__partnersForDev {
background: #52b7098c;
color: #2d6505;
margin-left: -40px;
}
&__partnersForDev,
&__developersForDev {
width: 220px;
height: 50px;
border-radius: 44px;
font-size: 16px;
border: none;
}
&__developersForDev {
position: relative;
background: #406128;
color: white;
}
@media (max-width: 768px) {
&__partnersForDev {
margin: 15px 0 0 0;
}
}
}

View File

@ -1,92 +1,112 @@
import React, {useEffect} from 'react'
import arrow from '../../images/arrow__login_page.png'
import medium from '../../images/medium_male_big.png'
import cross from '../../images/cross.png'
import text from '../../images/Body_Text.png'
import vector from '../../images/Vector_Smart_Object.png'
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import { useSelector } from 'react-redux'
import { selectAuth } from '../../redux/outstaffingSlice'
import { useNavigate} from 'react-router-dom'
import React, { useEffect } from "react";
import arrow from "../../images/arrow__login_page.png";
import medium from "../../images/medium_male_big.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { useSelector } from "react-redux";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { Footer } from '../../components/Footer/Footer'
import { AuthBox } from '../../components/AuthBox/AuthBox'
import { Footer } from "../../components/Footer/Footer";
import { AuthBox } from "../../components/AuthBox/AuthBox";
import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import './authForPartners.scss'
import "./authForPartners.scss";
const AuthForPartners = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem('auth_token')
const getToken = localStorage.getItem("auth_token");
useEffect(()=> {
useEffect(() => {
if (isAuth || getToken) {
navigate('/profile')
navigate("/profile");
}
}, [getToken]);
return (
<section className='auth-partners'>
<div className='auth-partners__background'>
<img className='auth-partners__vector' src={vector} alt='' />
<img className='auth-partners__vector-black' src={vectorBlack} alt='' />
<div className='container'>
<div className='row'>
<div className='col-12 col-xl-6'>
<div className='auth-partners__box'>
<AuthBox
title='Для партнёров'
altTitle='Для разработчиков'
roleChangeLink='/authdev'
/>
<section className="auth-partners">
<AuthHeader />
<SliderWorkers />
<div className="auth-partners__background">
<img className="auth-partners__vector" src={vector} alt="" />
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className="container">
<div className="change-mode">
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForPart">
Для разработчика
</button>
</Link>
<Link to={"/auth"}>
<button className="change-mode__partnersForPart">
Для партнёров
</button>
</Link>
</div>
</div>
<div className='col-xl-2'>
<img className='auth-partners__arrow' src={arrow} alt='' />
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-partners__box">
<AuthBox title="Для партнёров" />
</div>
<div className='col-12 col-xl-4'>
<div className='auth-partners__info'>
<div className='auth-partners__info-box'>
<img src={medium} alt='' />
</div>
<div className="col-xl-2">
<img className="auth-partners__arrow" src={arrow} alt="" />
</div>
<div className="col-12 col-xl-4">
<div className="auth-partners__info">
<div className="auth-partners__info-box">
<img src={medium} alt="" />
<h3>
Frontend разработчик,
<br /> Middle
</h3>
</div>
<div className='auth-partners__info-container'>
<div className='auth-partners__info-img'>
<div className="auth-partners__info-container">
<div className="auth-partners__info-img">
<div>
<img className='cross' src={cross} alt='' />
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className='auth-partners__specialists'>
<p className="auth-partners__specialists">
20 Специалистов
</p>
</div>
</div>
<ul className='auth-partners__info-list'>
<li className='auth-partners__info-item'>Ruby on Rails</li>
<li className='auth-partners__info-item'>PHP</li>
<li className='auth-partners__info-item'>Python</li>
<li className='auth-partners__info-item'>Vue.js</li>
<li className='auth-partners__info-item'>React. JS</li>
<ul className="auth-partners__info-list">
<li className="auth-partners__info-item">Ruby on Rails</li>
<li className="auth-partners__info-item">PHP</li>
<li className="auth-partners__info-item">Python</li>
<li className="auth-partners__info-item">Vue.js</li>
<li className="auth-partners__info-item">React. JS</li>
</ul>
</div>
<img className='auth-partners__img-text' src={text} alt='' />
<img className="auth-partners__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
)
);
};
export default AuthForPartners
export default AuthForPartners;

View File

@ -1,126 +1,119 @@
.auth-partners {
overflow: hidden;
}
position: relative;
.auth-partners__background {
&__background {
background-color: #f1f1f1;
position: relative;
}
}
.auth-partners__vector,
.auth-partners__vector-black {
&__vector,
&__vector-black {
position: absolute;
}
}
.auth-partners__vector {
top: -720px;
left: -320px;
}
&__vector {
top: -37px;
left: -285px;
}
.auth-partners__vector-black {
&__vector-black {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.auth-partners__vector,
.auth-partners__vector-black {
display: none;
}
}
.auth-partners__arrow {
&__arrow {
margin-top: 360px;
}
}
@media (max-width: 575.98px) {
.auth-partners__arrow {
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
}
.auth-partners__info {
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.auth-partners__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.auth-partners__info {
max-width: 340px;
}
}
.auth-partners__info-box {
&__info-box {
display: flex;
align-items: center;
}
}
@media (max-width: 575.98px) {
.auth-partners__info-box {
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
&__info-box {
flex-direction: column;
justify-content: center;
}
}
}
.auth-partners__info-box > img {
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
}
@media (max-width: 575.98px) {
.auth-partners__info-box > img {
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
}
.auth-partners__info-box > h3 {
font-family: 'GT Eesti Pro Display';
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
}
@media (max-width: 575.98px) {
.auth-partners__info-box > h3 {
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
}
.auth-partners__info-container {
&__info-container {
display: flex;
position: relative;
}
}
.auth-partners__info-img {
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
}
.auth-partners__info-img > div > img {
&__info-img > div > img {
margin-bottom: 100px;
}
}
.auth-partners__specialists {
font-family: 'GT Eesti Pro Display';
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
@ -129,28 +122,24 @@
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
}
/* .specialists {
margin-left: 26px;
} */
.auth-partners__info-list {
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
}
@media (max-width: 575.98px) {
.auth-partners__info-list {
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
}
.auth-partners__info-item {
&__info-item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
@ -159,130 +148,186 @@
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
}
@media (max-width: 575.98px) {
.auth-partners__info-item {
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
}
}
}
.auth-partners__img-text {
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
}
@media (max-width: 575.98px) {
.auth-partners__img-text {
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
}
.auth-partners__footer--left {
&__footer--left {
display: flex;
align-items: center;
margin-bottom: 60px;
}
}
@media (max-width: 575.98px) {
.auth-partners__footer--left {
@media (max-width: 575.98px) {
&__footer--left {
margin-top: 120px;
}
}
}
.auth-partners__footer__sp {
&__footer__sp {
padding: 0 100px 0 34px;
}
}
@media (max-width: 575.98px) {
.auth-partners__footer__sp {
@media (max-width: 575.98px) {
&__footer__sp {
padding: 0;
margin-left: 10px;
}
}
}
.auth-partners__footer--left > div > span {
&__footer--left > div > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
}
@media (max-width: 575.98px) {
.auth-partners__footer--left > div > span {
@media (max-width: 575.98px) {
&__footer--left > div > span {
font-size: 1.2em;
}
}
}
.auth-partners__footer-icon {
&__footer-icon {
text-align: end;
}
}
.auth-partners__footer-icon > img {
&__footer-icon > img {
margin-left: 20px;
}
}
@media (max-width: 575.98px) {
.auth-partners__footer-icon > img {
@media (max-width: 575.98px) {
&__footer-icon > img {
margin-left: 10px;
}
}
}
.auth-partners__footer--right {
&__footer--right {
display: flex;
flex-direction: column;
align-items: left;
}
}
@media (max-width: 575.98px) {
.auth-partners__footer--right {
@media (max-width: 575.98px) {
&__footer--right {
margin-bottom: 20px;
}
}
.auth-partners__phone {
}
&__phone {
color: #003b65;
font-family: 'CeraPro';
font-family: "CeraPro";
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
}
.auth-partners__working-hours {
&__working-hours {
color: #003b65;
font-family: 'CeraPro';
font-family: "CeraPro";
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
}
.auth-partners__auth-link {
&__auth-link {
display: block;
}
}
.auth-partners__auth-link a {
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
}
@media (max-width: 766px) {
.auth-partners__form-buttons {
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
.auth-partners__form-btn {
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
&__arrow {
margin: 49px 0 43px 0;
width: 48px;
height: 48px;
background: #8dc63f82;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
img {
transform: rotate(90deg);
}
}
&__partnersForPart {
background: #406128;
color: white;
margin-left: -40px;
}
&__partnersForPart,
&__developersForPart {
width: 220px;
height: 50px;
border-radius: 44px;
font-size: 16px;
border: none;
}
&__developersForPart {
background-color: #52b7098c;
color: #2d6505;
}
@media (max-width: 768px) {
.buttons {
display: flex;
align-items: center;
flex-direction: column;
}
&__partnersForPart {
margin: 15px 0 0 0;
}
}
}

View File

@ -1,11 +1,13 @@
.single-report-page {
padding: 4.6rem 20px 0;
font-family: 'GT Eesti Pro Display', sans-serif;
font-family: "GT Eesti Pro Display", sans-serif;
&__back {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
&-text {
margin-left: 3.1rem;
color: #000000;