trackerIntro
This commit is contained in:
parent
f6c7609b1c
commit
ad7874b500
@ -8,6 +8,7 @@ import {
|
|||||||
|
|
||||||
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
|
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
|
||||||
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
|
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
|
||||||
|
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
|
||||||
import Home from "./pages/Home/Home";
|
import Home from "./pages/Home/Home";
|
||||||
import Candidate from "./components/Candidate/Candidate";
|
import Candidate from "./components/Candidate/Candidate";
|
||||||
import Calendar from "./components/Calendar/Calendar";
|
import Calendar from "./components/Calendar/Calendar";
|
||||||
@ -52,6 +53,7 @@ const App = () => {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route exact path="/authdev" element={<AuthForDevelopers />} />
|
<Route exact path="/authdev" element={<AuthForDevelopers />} />
|
||||||
<Route exact path="/auth" element={<AuthForPartners />} />
|
<Route exact path="/auth" element={<AuthForPartners />} />
|
||||||
|
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
|
||||||
|
|
||||||
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
||||||
<Route
|
<Route
|
||||||
|
|||||||
9
src/assets/icons/starTrackerIntro.svg
Normal file
9
src/assets/icons/starTrackerIntro.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.6 MiB |
10
src/assets/icons/trackerIntroInfo.svg
Normal file
10
src/assets/icons/trackerIntroInfo.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 685 B |
BIN
src/assets/images/trackerBoardImg.png
Normal file
BIN
src/assets/images/trackerBoardImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
src/assets/images/trackerHeard.png
Normal file
BIN
src/assets/images/trackerHeard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/trackerIntroImg.png
Normal file
BIN
src/assets/images/trackerIntroImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
@ -52,6 +52,9 @@ export const SideBar = () => {
|
|||||||
<li>
|
<li>
|
||||||
<Link to={"/auth"}>Кабинет разработчика</Link>
|
<Link to={"/auth"}>Кабинет разработчика</Link>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to={"/tracker-intro"}>Трекер</Link>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">Школа</a>
|
<a href="#">Школа</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
86
src/pages/TrackerIntro/TrackerIntro.js
Normal file
86
src/pages/TrackerIntro/TrackerIntro.js
Normal 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
181
src/pages/TrackerIntro/trackerIntro.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user