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

trackerIntro

Browse Source
This commit is contained in:
Николай Полтщук
2023-07-04 22:26:00 +03:00
parent f6c7609b1c
commit ad7874b500
9 changed files with 291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/TrackerIntro/TrackerIntro.js Normal file
View File

@ -0,0 +1,86 @@
import React from "react";
import { NavLink } from "react-router-dom";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import SideBar from "@components/SideBar/SideBar";
import { Footer } from "@components/Common/Footer/Footer";
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import introInfo from "assets/icons/starTrackerIntro.svg";
import introImg from "assets/images/trackerIntroImg.png";
import trackerBoard from "assets/images/trackerBoardImg.png";
import trackerHeard from "assets/images/trackerHeard.png";
import "./trackerIntro.scss"
export const TrackerIntro = () => {
return (
<div className="trackerIntro">
<AuthHeader />
<SideBar />
<div className='trackerIntro__content'>
<div className='container'>
<div className='trackerIntro__intro'>
<div className='trackerIntro__intro__info'>
<div className='trackerIntro__intro__suptitle'>
<img src={introInfo} alt='img' />
<span>Подключись и пользуйся бесплатно!</span>
</div>
<h1 className='trackerIntro__intro__title'>
Сервис для планирования и работы
<span> для Вашей команды</span><img src={arrowInfo} alt='img' /></h1>
<p className='trackerIntro__intro__subtitle'>Российский сервис
для совместной работы команд. Все процессы компании в одном месте:
проекты, задачи, цели, сотрудники, документы, переписки, отчеты</p>
<NavLink to='/auth' className='trackerIntro__btn'>Начать работу</NavLink>
</div>
<img className='trackerIntro__intro__img' src={introImg} alt='img' />
</div>
</div>
<div className='trackerIntro__board'>
<div className='trackerIntro__boardImg'>
<img className='board' src={trackerBoard} alt='board' />
<img className='heard' src={trackerHeard} alt='heard' />
</div>
<div className='trackerIntro__board__info'>
<p>
Управление большим количеством проектов и гибкая
настройка структуры под любые процессы
</p>
<NavLink to='/auth' className='trackerIntro__btn'>Начать работу</NavLink>
</div>
</div>
<div className='container'>
<div className='trackerIntro__info'>
<h2 className='trackerIntro__info__title'>
Используйте сервис, который позаботится о персональных данных вашей компании и<br/>
<span> не уйдет с рынка.</span>
<img src={arrowInfo} alt='img' />
</h2>
<div className='trackerIntro__info__items'>
<div className='trackerIntro__info__item'>
<div className='trackerIntro__info__itemHead'>
<span>+</span>
<h3>Настраиваемые<br/>доски</h3>
</div>
<p>Настраиваемые доски позволяют контролировать все ваши задачи
и работу вашей команды.</p>
</div>
<div className='trackerIntro__info__item'>
<div className='trackerIntro__info__itemHead'>
<span>+</span>
<h3>Учет<br/>времени</h3>
</div>
<p>Учитывайте загрузку и ресурсы
сотрудников, получайте доступные
отчеты о времени работы над каждой
задачей или проектом.</p>
</div>
</div>
</div>
</div>
<Footer />
</div>
</div>
)
};

181
src/pages/TrackerIntro/trackerIntro.scss Normal file
View File

@ -0,0 +1,181 @@
.trackerIntro {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1;
color: #000000;
}
&__intro {
display: flex;
justify-content: space-between;
align-items: end;
padding: 50px 0 75px;
&__img {
max-width: 530px;
max-height: 287px;
}
&__info {
display: flex;
flex-direction: column;
margin-right: 50px;
}
&__suptitle {
display: flex;
align-items: center;
margin-bottom: 63px;
span {
margin-left: 25px;
font-weight: 500;
font-size: 16px;
}
}
&__title {
position: relative;
font-size: 40px;
font-weight: 700;
margin-bottom: 75px;
span {
color: #52B709;
}
img {
position: absolute;
bottom: -30px;
right: 0;
max-width: 405px;
}
}
&__subtitle {
font-size: 17px;
font-weight: 500;
margin-bottom: 105px;
}
}
&__btn {
background: #52B709;
border-radius: 44px;
padding: 9px 48px;
color: white;
font-weight: 500;
font-size: 15px;
line-height: 32px;
max-width: 200px;
transition: all 0.3s ease;
&:hover {
color: white;
scale: 1.05;
}
}
&__board {
display: flex;
flex-direction: column;
max-width: 1350px;
align-items: end;
margin: 0 auto 115px;
&Img {
position: relative;
margin-bottom: 34px;
}
.heard {
position: absolute;
bottom: -64px;
left: 325px;
}
&__info {
display: flex;
flex-direction: column;
padding-right: 140px;
p {
font-size: 27px;
line-height: 31px;
font-weight: 500;
max-width: 695px;
margin-bottom: 30px;
}
}
}
&__info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
&__title {
position: relative;
font-size: 38px;
font-weight: 500;
text-align: center;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
span {
color: #52B709;
}
img {
position: absolute;
max-width: 311px;
bottom: -28px;
}
}
&__items {
display: flex;
justify-content: space-between;
width: 100%;
}
&__item {
display: flex;
flex-direction: column;
max-width: 415px;
&Head {
display: flex;
align-items: center;
margin-bottom: 45px;
span {
background: #52B709;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
width: 71px;
height: 71px;
color: #FFFFFF;
font-size: 30px;
}
h3 {
margin-left: 30px;
font-size: 32px;
font-weight: 500;
margin-bottom: 0;
}
}
p {
font-size: 19px;
font-weight: 500;
line-height: 32px;
}
}
}
}