194 lines
6.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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