252 lines
10 KiB
JavaScript
252 lines
10 KiB
JavaScript
import React from "react";
|
||
import { Link, NavLink } from "react-router-dom";
|
||
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
|
||
import arrow from "assets/icons/arrows/arrowLanding.svg";
|
||
import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
|
||
import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
|
||
import Ellipse from "assets/images/landingTracker/EllipseIntro.svg";
|
||
import code from "assets/images/landingTracker/backgroundCode.webp";
|
||
import ellipseGreen from "assets/images/landingTracker/ellipseGreen.svg";
|
||
import cat from "assets/images/landingTracker/landingCat.webp";
|
||
import flag from "assets/images/landingTracker/projectsFlag.webp";
|
||
import questionMark from "assets/images/landingTracker/questionMark.svg";
|
||
import trackerCup from "assets/images/landingTracker/trackerCup.webp";
|
||
import trackerPreview from "assets/images/landingTracker/trackerPreview.webp";
|
||
import trackerSign from "assets/images/landingTracker/trackerSign.webp";
|
||
|
||
import "./LandingTracker.scss";
|
||
|
||
export const LandingTracker = () => {
|
||
const goals = [
|
||
{
|
||
miniInfo: "Окунитесь в экосистему ITGUIL",
|
||
info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
|
||
},
|
||
{
|
||
miniInfo: "Окунитесь в экосистему ITGUIL",
|
||
info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
|
||
},
|
||
{
|
||
miniInfo: "Окунитесь в экосистему ITGUIL",
|
||
info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
|
||
},
|
||
{
|
||
miniInfo: "Окунитесь в экосистему ITGUIL",
|
||
info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
|
||
}
|
||
];
|
||
|
||
const opportunities = [
|
||
{
|
||
name: "<span>Аутстаффинг</span> <br/> сотрудников",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Найти</span> работу <br/> в IT",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Система</span> контроля <br/> версий GIT",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Управление</span> <br/> задачами",
|
||
path: "/landing-tracker",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "<span>Система</span> для <br/> отчётности",
|
||
path: "/stack",
|
||
img: cat
|
||
},
|
||
{
|
||
name: "Все наши <br/> предложения",
|
||
path: "/stack",
|
||
class: "outstaffing__offers",
|
||
img: arrow
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="tracker">
|
||
<section className="tracker__intro">
|
||
<img className="intro__question-mark" src={questionMark} alt="" />
|
||
<img className="intro__code" src={code} alt="" />
|
||
<img className="intro__code--top" src={code} alt="" />
|
||
|
||
<div className="tracker__container intro__container">
|
||
<div className="intro-logo">
|
||
<h3>
|
||
ITGu <br /> ild
|
||
</h3>
|
||
<img className="intro-logo__cup" src={trackerCup} alt="" />
|
||
</div>
|
||
<div className="intro-content">
|
||
<div className="intro-content__sublogo">
|
||
<h5>IT GUILD</h5>
|
||
</div>
|
||
<span>
|
||
Устали от хаоса в <br />
|
||
управлении проектами?
|
||
</span>
|
||
<p>
|
||
Хотите сделать командную работу более эффективной и продуктивной?
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="tracker__presentation">
|
||
<img className="presentation__code" src={code} alt="" />
|
||
<img className="presentation__code--top" src={code} alt="" />
|
||
<img className="presentation__ellipse" src={Ellipse} alt="" />
|
||
<div className="tracker__container presentation__container">
|
||
<h5>Мы здесь, чтобы помочь вам в этом!</h5>
|
||
<h4>Трекер itguild</h4>
|
||
<p>
|
||
это ваш лучший <span>инструмент для эффективного управления</span>{" "}
|
||
проектами и командной работы, созданный с учетом потребностей
|
||
российских компаний и команд.
|
||
</p>
|
||
<div className="presentation-auth__buttons">
|
||
<button className="signIn">
|
||
<Link to="/auth">войти</Link>
|
||
</button>
|
||
<button className="signUp">
|
||
<Link to="/auth">регистрация</Link>
|
||
</button>
|
||
</div>
|
||
<div className="presentation__tracker-preview">
|
||
<img src={trackerPreview} alt="" />
|
||
<div className="tracker-preview__buttons">
|
||
<button>
|
||
<img src={arrowReviewsLeft} alt="" />
|
||
</button>
|
||
<button>
|
||
<img src={arrowReviewsRight} alt="" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="presentation__addition">
|
||
<span>понятный интерфейс</span>
|
||
<p>интуитивно понятный интерфейс</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="tracker__goals">
|
||
<img className="goals__code" src={code} alt="" />
|
||
<div className="tracker__container goals__container">
|
||
<div className="goals-head">
|
||
<h4 className="goals-head__logo">НАША ЦЕЛЬ</h4>
|
||
<p className="goals-head__info">
|
||
<span>
|
||
Мы стремимся помочь российским компаниям и командам достичь
|
||
своих целей,
|
||
</span>{" "}
|
||
предоставляя инструменты, которые улучшают процесс планирования,
|
||
совместной работы и управления проектами.
|
||
</p>
|
||
</div>
|
||
<div className="goals__items">
|
||
{goals.map((step, index) => {
|
||
return (
|
||
<div key={index} className="item__wrapper">
|
||
<div className="item__head">
|
||
<h4>{`${index + 1}.`}</h4>
|
||
<p>{step.miniInfo}</p>
|
||
</div>
|
||
<div className="goals__item" key={index}>
|
||
<p
|
||
className="item__info"
|
||
dangerouslySetInnerHTML={{ __html: step.info }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{/* <div className="steps__portfolio">
|
||
<img src={portfolio} alt="portfolio" />
|
||
</div> */}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="tracker__invite">
|
||
<img className="invite__code" src={code} alt="" />
|
||
<div className="tracker__container invite__container">
|
||
<div className="invite__info">
|
||
<h5>Присоединяйтесь к нам сегодня, уже завтра будет результат!</h5>
|
||
<p>
|
||
Готовы упростить свою жизнь и повысить эффективность работы вашей
|
||
команды с помощью российской платформы? <br /> Присоединяйтесь к{" "}
|
||
<span>Трекер it guild</span> уже сегодня и начните достигать
|
||
больших результатов вместе с нами!
|
||
</p>
|
||
<div className="invite-auth__buttons">
|
||
<button className="signIn">
|
||
<Link to="/auth">войти</Link>
|
||
</button>
|
||
<button className="signUp">
|
||
<Link to="/auth">регистрация</Link>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="invite__logo">
|
||
<h3>
|
||
ITGu <br /> ild
|
||
</h3>
|
||
<img className="invite__logo__sign" src={trackerSign} alt="" />
|
||
<img className="invite__logo__ellipse" src={ellipseGreen} alt="" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="tracker__nav">
|
||
<div className="tracker__container nav__container">
|
||
<div className="nav__project">
|
||
<span className="project__img">
|
||
<img className="flag" src={flag} alt="img" />
|
||
</span>
|
||
<p>
|
||
<span>Мы гордимся</span> тем, что предлагаем инновационные решения
|
||
прямо здесь, в <br /> России, и{" "}
|
||
<span>способствуем развитию импортозамещения</span> в сфере
|
||
IT-продуктов.
|
||
</p>
|
||
</div>
|
||
<h5 className="nav__title">другие наши продукты</h5>
|
||
<div className="nav__opportunities">
|
||
{opportunities.map((opportunity, index) => {
|
||
return (
|
||
<NavLink
|
||
className={
|
||
opportunity.class ? opportunity.class : "nav__opportunity"
|
||
}
|
||
key={index}
|
||
to={`${opportunity.path}`}
|
||
>
|
||
<div>
|
||
<p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
|
||
{opportunity.img ? (
|
||
<img src={opportunity.img} alt="img" />
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
</NavLink>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</section>
|
||
</section>
|
||
);
|
||
};
|