add page LandingTracker
This commit is contained in:
251
src/pages/LandingTracker/LandingTracker.jsx
Normal file
251
src/pages/LandingTracker/LandingTracker.jsx
Normal file
@ -0,0 +1,251 @@
|
||||
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/EllipseIntro.svg";
|
||||
import ellipseGreen from "assets/images/ellipseGreen.png";
|
||||
import code from "assets/images/landingBackgroundCode.png";
|
||||
import cat from "assets/images/landingCat.png";
|
||||
import questionMark from "assets/images/questionMark.png";
|
||||
import flag from "assets/images/stackProjectsFlag.png";
|
||||
import trackerCup from "assets/images/trackerCup.png";
|
||||
import trackerPreview from "assets/images/trackerPreview.png";
|
||||
import trackerSign from "assets/images/trackerSign.png";
|
||||
|
||||
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: "/stack",
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user