apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add page LandingTracker

Browse Source
This commit is contained in:
Никита Губарь 2024-06-04 20:21:38 +03:00
parent 224fc2c935
commit 6dc5122097
9 changed files with 1037 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/LandingTrackerIntroBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB

BIN
src/assets/images/ellipseGreen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 KiB

BIN
src/assets/images/questionMark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/images/trackerCup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
src/assets/images/trackerPreview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
src/assets/images/trackerSign.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

251
src/pages/LandingTracker/LandingTracker.jsx Normal file
View 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
View 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;
}
}
}
}
}

2
src/pages/roles/GuestPage.jsx
View File

@ -11,6 +11,7 @@ import { Forms } from "@pages/Forms/Forms";
import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
import { Landing } from "@pages/Landing/Landing";
import { LandingTracker } from "@pages/LandingTracker/LandingTracker";
import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
@ -27,6 +28,7 @@ export const GuestPage = () => {
<Route exact path="/auth" element={<Auth />} />
<Route exact path="/welcome-page" element={<WelcomePage />} />
<Route exact path="/stack" element={<Stack />} />
<Route exact path="/landing-tracker" element={<LandingTracker />} />
<Route exact path="/" element={<Landing />} />
<Route path="*" element={<Navigate to="/auth" replace />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />