trackerIntro

This commit is contained in:
nik.polishuk committed 2023-07-04 22:26:00 +03:00
1 parent f6c7609b1c
commit ad7874b500
9 files changed
+291

No files matched your search

+2
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
View File
@@ -0,0 +1,9 @@
<svg width="20" height="33" viewBox="0 0 20 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="20" height="33" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1388_1275" transform="matrix(0.000725594 0 0 0.000439754 -0.00138522 0)"/>
</pattern>
<image id="image0_1388_1275" width="1382" height="2274" xlink:href="data:image/png;base64,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 truncated
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.6 MiB

+10
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>

After

Width:  |  Height:  |  Size: 685 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

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