Fixed imports in pages
This commit is contained in:
MaxOvs19
55
src/components/Common/AuthHeader/AuthHeader.jsx
Normal file
55
src/components/Common/AuthHeader/AuthHeader.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
import { scrollToForm } from "@utils/helper";
|
||||
|
||||
import userIcon from "assets/icons/userIcon.svg";
|
||||
|
||||
import "./authHeader.scss";
|
||||
|
||||
export const AuthHeader = ({}) => {
|
||||
return (
|
||||
<div className="auth-header">
|
||||
<div className="auth-header__logo">
|
||||
<h3>
|
||||
itguild.<span>аутстафинг ИТ специалистов</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="auth-header__navigation">
|
||||
<div className="container">
|
||||
<div className="auth-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink to={"/auth"}>
|
||||
<span>Главная</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Кабинет разработчика</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Школа</a>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to={"/auth-candidate"} className="candidate">
|
||||
<span>Войти в команду</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
scrollToForm();
|
||||
}}
|
||||
>
|
||||
<img src={userIcon}></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthHeader;
|
||||
78
src/components/Common/AuthHeader/authHeader.scss
Normal file
78
src/components/Common/AuthHeader/authHeader.scss
Normal file
@ -0,0 +1,78 @@
|
||||
.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;
|
||||
}
|
||||
span {
|
||||
color: #52b709;
|
||||
}
|
||||
}
|
||||
|
||||
&__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 {
|
||||
color: #897676;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.candidate {
|
||||
color: #1458dd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1375px) {
|
||||
.auth-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
53
src/components/Common/Footer/Footer.jsx
Normal file
53
src/components/Common/Footer/Footer.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
|
||||
import logo from "assets/images/logo/LogoITguild.svg";
|
||||
import vk from "assets/icons/vkLogo.svg";
|
||||
import tg from "assets/icons/tgFooter.svg";
|
||||
import email from "assets/icons/emailLogo.svg";
|
||||
|
||||
import "./footer.scss";
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer>
|
||||
<div className="container">
|
||||
<div className="footer">
|
||||
<div className="footer__top">
|
||||
<img src={logo} alt="logo" className="logo" />
|
||||
<p>
|
||||
Подберем и документально оформим IT-специалистов, после чего
|
||||
передадим исполнителей под ваше руководство. Вы получаете полное
|
||||
управление над сотрудниками, имея возможность контролировать и
|
||||
заменять IT штат.
|
||||
</p>
|
||||
<div className="footer__copyright">
|
||||
© {new Date().getFullYear()} - Все права защищены
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer__bottom">
|
||||
<div className="footer__social">
|
||||
<div className="footer__social__icons">
|
||||
<a>
|
||||
<img src={vk} alt="vk" />
|
||||
</a>
|
||||
<a>
|
||||
<img src={tg} alt="tg" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Войти в команду</p>
|
||||
</div>
|
||||
<div className="footer__info">
|
||||
<div className="footer__mail">
|
||||
<a>
|
||||
<img src={email} alt="email" />
|
||||
</a>
|
||||
<p>office@itguild.info</p>
|
||||
</div>
|
||||
<a className="footer__policy">Политика конфиденциальности</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
121
src/components/Common/Footer/footer.scss
Normal file
121
src/components/Common/Footer/footer.scss
Normal file
@ -0,0 +1,121 @@
|
||||
footer {
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 35px 0 50px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
&__top {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
|
||||
@media (max-width: 620px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 83px;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 620px;
|
||||
margin-left: 33px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #5b6871;
|
||||
|
||||
@media (max-width: 620px) {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icons {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
cursor: pointer;
|
||||
margin-left: 60px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 33px;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__mail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 13px;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #5b6871;
|
||||
}
|
||||
}
|
||||
|
||||
&__policy {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
color: #5b6871;
|
||||
margin-left: 150px;
|
||||
|
||||
@media (max-width: 720px) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #5b6871;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
margin-left: auto;
|
||||
|
||||
@media (max-width: 910px) {
|
||||
min-width: 142px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/components/Common/Loader/Loader.jsx
Normal file
17
src/components/Common/Loader/Loader.jsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import SVGLoader from "react-loader-spinner";
|
||||
|
||||
import "./loader.scss";
|
||||
|
||||
export const Loader = ({ width = 50, height = 50, style }) => {
|
||||
return (
|
||||
<div className="loader">
|
||||
<SVGLoader
|
||||
type="Circles"
|
||||
color={style ? style : `#fff`}
|
||||
height={height}
|
||||
width={width}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
14
src/components/Common/Loader/loader.scss
Normal file
14
src/components/Common/Loader/loader.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.loader {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
fill: #6aaf5c;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user