194 lines
6.1 KiB
JavaScript
194 lines
6.1 KiB
JavaScript
import React, { useState } from "react";
|
||
import SVG from "react-inlinesvg";
|
||
import { Link, NavLink } from "react-router-dom";
|
||
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
|
||
|
||
import arrow from "assets/icons/arrows/arrowLanding.svg";
|
||
import authIcon from "assets/icons/authIcon.svg";
|
||
import clue from "assets/icons/landingClue.svg";
|
||
import tracker from "assets/icons/landingTracker.svg";
|
||
import codeBg from "assets/images/landingBackgroundCode.svg";
|
||
import cat from "assets/images/landingCat.png";
|
||
import ITguild from "assets/images/logo/ITguild.svg";
|
||
|
||
import "./landing.scss";
|
||
|
||
export const Landing = () => {
|
||
const [active, setActive] = useState(false);
|
||
const [modalReg, setModalReg] = useState(false);
|
||
|
||
const toggleBar = () => {
|
||
if (active) {
|
||
setActive(false);
|
||
document.body.style.overflow = "auto";
|
||
} else {
|
||
setActive(true);
|
||
document.body.style.overflow = "hidden";
|
||
}
|
||
};
|
||
|
||
const opportunities = [
|
||
{
|
||
name: "<span>Аутстаффинг</span> сотрудников",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Найти</span> работу <br/> в IT",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Система</span> контроля версий GIT",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Управление</span> задачами",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Система</span> для отчётности",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "Все наши предложения",
|
||
path: "/stack",
|
||
class: "outstaffing__offers",
|
||
img: arrow
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="landing">
|
||
<ModalRegistration active={modalReg} setActive={setModalReg} />
|
||
<div className="landing__container">
|
||
<div className="landing__head">
|
||
<h2 className="head__logo">ITGUILD</h2>
|
||
<Link className="head__signIn" to="/auth">
|
||
войти в систему
|
||
</Link>
|
||
|
||
<div
|
||
className="head__signUp"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
setModalReg(true);
|
||
}}
|
||
>
|
||
<SVG src={authIcon} />
|
||
регистрация
|
||
</div>
|
||
<div className="burger-menu" onClick={() => toggleBar()}>
|
||
<div className="burger">
|
||
<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 className="burger-menu__logo">меню</h3>
|
||
</div>
|
||
<div className="head__tracker">
|
||
<div>
|
||
<img src={tracker} alt="tracker" />
|
||
</div>
|
||
<span>трекер</span>
|
||
</div>
|
||
<SVG className="head__auth" src={authIcon} />
|
||
</div>
|
||
<div className="landing__info">
|
||
<p className="info__title">
|
||
<SVG className="code" src={codeBg} />
|
||
<span>Экосистема</span> для диджитализации бизнеса
|
||
</p>
|
||
<Link className="info__signIn" to="/auth">
|
||
войти в систему
|
||
</Link>
|
||
<div className="landing__background">
|
||
<h3>ITGuild</h3>
|
||
<SVG className="clue" src={clue} />
|
||
<SVG className="code" src={codeBg} />
|
||
</div>
|
||
<div className="info__block">
|
||
<p>
|
||
Подберем и документально оформим IT-специалистов, после чего
|
||
передадим исполнителей под ваше руководство.
|
||
<br />
|
||
<br />
|
||
<span>Вы получаете полное управление над сотрудниками,</span> имея
|
||
возможность контролировать и заменять IT штат.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="landing__opportunities">
|
||
{opportunities.map((opportunity, index) => {
|
||
return (
|
||
<NavLink
|
||
className={
|
||
opportunity.class ? opportunity.class : "landing__opportunity"
|
||
}
|
||
key={index}
|
||
to={`${opportunity.path}`}
|
||
>
|
||
<div>
|
||
<p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
|
||
{opportunity.img ? (
|
||
<img src={opportunity.img} alt="img" />
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
</NavLink>
|
||
);
|
||
})}
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
<div className={active ? "auth-body active" : "auth-body"}>
|
||
<div className="auth-body__title">
|
||
<img src={ITguild}></img>
|
||
</div>
|
||
<ul className="auth-body__navigation">
|
||
<li>
|
||
<Link to={"/auth"}>Вход</Link>
|
||
</li>
|
||
<li>
|
||
<Link to={"/profile"}>Личный кабинет</Link>
|
||
</li>
|
||
<li>
|
||
<Link to={"/tracker-intro"}>Трекер</Link>
|
||
</li>
|
||
<li>
|
||
<Link to={"/quiz"}>Тесты</Link>
|
||
</li>
|
||
<li>
|
||
<Link to={"/forms"}>Формы</Link>
|
||
</li>
|
||
<li>
|
||
<a href="#">Школа</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">Контакты</a>
|
||
</li>
|
||
<li>
|
||
<Link to={"/blog"}>Блог</Link>
|
||
</li>
|
||
<li>
|
||
<Link to={"/frequently-asked-questions"}>FAQ</Link>
|
||
</li>
|
||
</ul>
|
||
<p className="auth-body__politic">Политика конфиденциальности</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|