add page LandingTracker
This commit is contained in:
parent
224fc2c935
commit
6dc5122097
BIN
src/assets/images/LandingTrackerIntroBG.png
Normal file
BIN
src/assets/images/LandingTrackerIntroBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
BIN
src/assets/images/ellipseGreen.png
Normal file
BIN
src/assets/images/ellipseGreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 691 KiB |
BIN
src/assets/images/questionMark.png
Normal file
BIN
src/assets/images/questionMark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/images/trackerCup.png
Normal file
BIN
src/assets/images/trackerCup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
src/assets/images/trackerPreview.png
Normal file
BIN
src/assets/images/trackerPreview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
src/assets/images/trackerSign.png
Normal file
BIN
src/assets/images/trackerSign.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
784
src/pages/LandingTracker/LandingTracker.scss
Normal file
784
src/pages/LandingTracker/LandingTracker.scss
Normal file
@ -0,0 +1,784 @@
|
|||||||
|
.tracker {
|
||||||
|
font-family: "GT Eesti Pro Display";
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
margin: 0 auto;
|
||||||
|
// padding: 85px 0 90px;
|
||||||
|
max-width: 1080px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&__intro {
|
||||||
|
background-color: #a7ca60;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
&__question-mark {
|
||||||
|
position: absolute;
|
||||||
|
right: 15%;
|
||||||
|
}
|
||||||
|
&__code {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
bottom: 96px;
|
||||||
|
left: 16%;
|
||||||
|
}
|
||||||
|
&__code--top {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
top: 20px;
|
||||||
|
left: 38%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 165px;
|
||||||
|
height: 475px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Geraspoheko";
|
||||||
|
font-size: 343px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 325.92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cup {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -85px;
|
||||||
|
right: -150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #607536;
|
||||||
|
max-width: 455px;
|
||||||
|
|
||||||
|
&__sublogo {
|
||||||
|
margin-top: 37px;
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 29px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 33.64px;
|
||||||
|
letter-spacing: 0.11em;
|
||||||
|
position: relative;
|
||||||
|
display: inline;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: #ffffff;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 100px;
|
||||||
|
left: 49%;
|
||||||
|
top: -30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 37.29px;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
margin: 101px 0 34px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 37.29px;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__presentation {
|
||||||
|
background-color: #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.presentation {
|
||||||
|
&__code {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
bottom: 225px;
|
||||||
|
right: 18%;
|
||||||
|
}
|
||||||
|
&__code--top {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
top: 60px;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
&__ellipse {
|
||||||
|
position: absolute;
|
||||||
|
width: 563px;
|
||||||
|
height: 563px;
|
||||||
|
top: -90px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 749px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
color: #4a4a4a;
|
||||||
|
font-size: 33px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 38.28px;
|
||||||
|
margin-top: 95px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #a7ca60;
|
||||||
|
font-size: 103px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 119.48px;
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #4a4a4a;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 22.04px;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
max-width: 609px;
|
||||||
|
margin-bottom: 52px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-auth__buttons {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 29px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 185px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 44px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 19.72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signIn {
|
||||||
|
a {
|
||||||
|
color: #607536;
|
||||||
|
}
|
||||||
|
background-color: #a7ca60;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signUp {
|
||||||
|
a {
|
||||||
|
color: #a7ca60;
|
||||||
|
}
|
||||||
|
border: 1px solid #a7ca60;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tracker-preview {
|
||||||
|
margin-top: 61px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tracker-preview {
|
||||||
|
&__buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 155px;
|
||||||
|
right: -75px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
width: 70px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:first-child {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__addition {
|
||||||
|
background-color: #a7ca60;
|
||||||
|
width: 247px;
|
||||||
|
height: 188px;
|
||||||
|
border-radius: 24px 0px 83px 0px;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
padding: 40px 43px 40px 50px;
|
||||||
|
bottom: -34px;
|
||||||
|
left: 21%;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 28.34px;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 19.65px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__goals {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.goals {
|
||||||
|
&__code {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
bottom: -96px;
|
||||||
|
left: 7%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 720px;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-head {
|
||||||
|
margin-top: 24px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
font-family: "Bebas Neue";
|
||||||
|
font-size: 244px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 244px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
background: linear-gradient(0deg, #171717 -59.84%, #2a2a2a 136.14%);
|
||||||
|
filter: drop-shadow(7px 0px 10px rgba(0, 0, 0, 0.1294117647));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 55px;
|
||||||
|
max-width: 552px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 17.4px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: #eeeeee;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__items {
|
||||||
|
margin-top: 31px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
column-gap: 48px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 86px;
|
||||||
|
margin-top: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
&__wrapper {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin-right: 41px;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
margin-left: 41px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
color: #a7ca60;
|
||||||
|
top: -45px;
|
||||||
|
left: 20px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 100px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 13.92px;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
font-size: 14px;
|
||||||
|
max-width: 124px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: 205px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
|
||||||
|
background: linear-gradient(
|
||||||
|
137deg,
|
||||||
|
rgba(87, 87, 87, 0.34) 0%,
|
||||||
|
rgba(104, 104, 104, 0.34) 100%
|
||||||
|
);
|
||||||
|
border: 0.5px solid #717171;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
width: 324px;
|
||||||
|
height: 153px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
&__info {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 19.65px;
|
||||||
|
color: #dddddd;
|
||||||
|
max-width: 148px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__invite {
|
||||||
|
background-color: #a7ca60;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.invite {
|
||||||
|
&__code {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
padding-top: 84px;
|
||||||
|
height: 582px;
|
||||||
|
overflow: hidden;
|
||||||
|
column-gap: 133px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
max-width: 541px;
|
||||||
|
h5 {
|
||||||
|
color: #607536;
|
||||||
|
font-size: 44px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 51.04px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #607536;
|
||||||
|
margin: 39px 0 64px 0;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 19.72px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-auth__buttons {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 29px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 185px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 19.72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signIn {
|
||||||
|
a {
|
||||||
|
color: #607536;
|
||||||
|
}
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signUp {
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Geraspoheko";
|
||||||
|
font-size: 343px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 325.92px;
|
||||||
|
z-index: 3;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sign {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
left: -180px;
|
||||||
|
top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ellipse {
|
||||||
|
position: absolute;
|
||||||
|
width: 463px;
|
||||||
|
height: 563px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav {
|
||||||
|
background-color: #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
&__code {
|
||||||
|
position: absolute;
|
||||||
|
mix-blend-mode: plus-lighter;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
padding-top: 49px;
|
||||||
|
height: 638px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__project {
|
||||||
|
padding: 0 55px;
|
||||||
|
display: flex;
|
||||||
|
column-gap: 80px;
|
||||||
|
height: 142px;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #f8f8f8;
|
||||||
|
|
||||||
|
.project__img {
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 99px;
|
||||||
|
height: 81px;
|
||||||
|
background: #a7ca60;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag {
|
||||||
|
bottom: 21px;
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #717171;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 21.59px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: #4a4a4a;
|
||||||
|
font-size: 46px;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 53.36px;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 42px 0 77px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunities {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: 20px;
|
||||||
|
row-gap: 19px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 86px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunity {
|
||||||
|
width: 320px;
|
||||||
|
height: 91px;
|
||||||
|
padding-left: 55px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
padding: 0;
|
||||||
|
width: 40%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(
|
||||||
|
95.54deg,
|
||||||
|
#ffffff 5.13%,
|
||||||
|
#f1f1f1 97.48%
|
||||||
|
);
|
||||||
|
border: 0.5px solid #ffffff;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 21.4px;
|
||||||
|
color: #838383;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 14.12px;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: -130px;
|
||||||
|
bottom: -15px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
right: auto;
|
||||||
|
bottom: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
&:hover {
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(74, 74, 74, 1);
|
||||||
|
max-width: 165px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: rgba(167, 202, 96, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 432px) {
|
||||||
|
&:hover {
|
||||||
|
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
background: linear-gradient(
|
||||||
|
95.54deg,
|
||||||
|
#ffffff 5.13%,
|
||||||
|
#eeeeee 97.48%
|
||||||
|
);
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(74, 74, 74, 1);
|
||||||
|
min-width: 167px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: rgba(167, 202, 96, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunity:nth-child(-n + 3) {
|
||||||
|
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunity:nth-child(-n + 2) {
|
||||||
|
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunity:nth-child(4) {
|
||||||
|
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__opportunity:nth-child(5) {
|
||||||
|
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outstaffing__offers {
|
||||||
|
padding: 10px 0 25px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
padding: 0;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 91px;
|
||||||
|
padding: 24px 35px 24px 42px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 0.5px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: rgba(167, 202, 96, 1);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 21.4px;
|
||||||
|
max-width: 215px;
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 17.12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 27px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -11,6 +11,7 @@ import { Forms } from "@pages/Forms/Forms";
|
|||||||
import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
|
import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
|
||||||
import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
|
import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
|
||||||
import { Landing } from "@pages/Landing/Landing";
|
import { Landing } from "@pages/Landing/Landing";
|
||||||
|
import { LandingTracker } from "@pages/LandingTracker/LandingTracker";
|
||||||
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
|
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
|
||||||
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
|
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
|
||||||
import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
|
import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
|
||||||
@ -27,6 +28,7 @@ export const GuestPage = () => {
|
|||||||
<Route exact path="/auth" element={<Auth />} />
|
<Route exact path="/auth" element={<Auth />} />
|
||||||
<Route exact path="/welcome-page" element={<WelcomePage />} />
|
<Route exact path="/welcome-page" element={<WelcomePage />} />
|
||||||
<Route exact path="/stack" element={<Stack />} />
|
<Route exact path="/stack" element={<Stack />} />
|
||||||
|
<Route exact path="/landing-tracker" element={<LandingTracker />} />
|
||||||
<Route exact path="/" element={<Landing />} />
|
<Route exact path="/" element={<Landing />} />
|
||||||
<Route path="*" element={<Navigate to="/auth" replace />} />
|
<Route path="*" element={<Navigate to="/auth" replace />} />
|
||||||
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
|
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user