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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -8,6 +8,7 @@ import {
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
import Home from "./pages/Home/Home";
import Candidate from "./components/Candidate/Candidate";
import Calendar from "./components/Calendar/Calendar";
@ -52,6 +53,7 @@ const App = () => {
<Routes>
<Route exact path="/authdev" element={<AuthForDevelopers />} />
<Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
<Route

9
src/assets/icons/starTrackerIntro.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

10
src/assets/icons/trackerIntroInfo.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="468" height="17" viewBox="0 0 468 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1393_1197)">
<path d="M2.65831 16.9721C62.5674 9.50253 122.934 6.27598 183.291 5.69781C243.47 5.11964 303.631 7.1339 363.727 10.0714C397.432 11.7219 431.118 13.6616 464.804 15.6106C468.404 15.8157 468.386 10.2206 464.804 10.0154C404.4 6.52776 343.987 3.04943 283.509 1.25897C223.441 -0.531484 163.28 -0.662039 103.259 2.55519C69.6386 4.35497 36.0738 7.2085 2.65831 11.3769C-0.867951 11.8152 -0.914595 17.4197 2.65831 16.9721Z" fill="#8DC63F"/>
</g>
<defs>
<clipPath id="clip0_1393_1197">
<rect width="467.5" height="17" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 685 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

3
src/components/SideBar/SideBar.jsx
View File

@ -52,6 +52,9 @@ export const SideBar = () => {
<li>
<Link to={"/auth"}>Кабинет разработчика</Link>
</li>
<li>
<Link to={"/tracker-intro"}>Трекер</Link>
</li>
<li>
<a href="#">Школа</a>
</li>

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;
}
}
}
}