stack steps
This commit is contained in:
Mikola
parent
13df697614
commit
470bf6ec67
BIN
src/assets/images/stackProjectsFlag.png
Normal file
BIN
src/assets/images/stackProjectsFlag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/stackProjectsFly.png
Normal file
BIN
src/assets/images/stackProjectsFly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/images/stackProjectsHand.png
Normal file
BIN
src/assets/images/stackProjectsHand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/images/stackProjectsRabota.png
Normal file
BIN
src/assets/images/stackProjectsRabota.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/stackSteptsPortfolio.png
Normal file
BIN
src/assets/images/stackSteptsPortfolio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -8,6 +8,11 @@ import backgroundOpp from "assets/images/backgroundOpportunity.png";
|
||||
import cat from "assets/images/cat.png";
|
||||
import clue from "assets/images/clue.png";
|
||||
import code from "assets/images/landingBackgroundCode.png";
|
||||
import flag from "assets/images/stackProjectsFlag.png";
|
||||
import rabota from "assets/images/stackProjectsRabota.png";
|
||||
import hand from "assets/images/stackProjectsHand.png";
|
||||
import fly from "assets/images/stackProjectsFly.png";
|
||||
import portfolio from "assets/images/stackSteptsPortfolio.png"
|
||||
|
||||
import "./stack.scss";
|
||||
|
||||
@ -47,21 +52,48 @@ export const Stack = () => {
|
||||
const projects = [
|
||||
{
|
||||
description:
|
||||
"Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>"
|
||||
"Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
|
||||
img: flag,
|
||||
name: 'flag'
|
||||
},
|
||||
{
|
||||
description:
|
||||
"<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации."
|
||||
"<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
|
||||
img: rabota,
|
||||
name: 'rabota'
|
||||
},
|
||||
{
|
||||
description:
|
||||
"<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов."
|
||||
"<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов.",
|
||||
img: hand,
|
||||
name: hand
|
||||
},
|
||||
{
|
||||
description:
|
||||
"Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары."
|
||||
"Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары.",
|
||||
img: fly,
|
||||
name: 'fly'
|
||||
}
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
miniInfo: 'Окунитесь в экосистему ITGUIL',
|
||||
info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
|
||||
},
|
||||
{
|
||||
miniInfo: 'Окунитесь в экосистему ITGUIL',
|
||||
info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
|
||||
},
|
||||
{
|
||||
miniInfo: 'Окунитесь в экосистему ITGUIL',
|
||||
info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
|
||||
},
|
||||
{
|
||||
miniInfo: 'Окунитесь в экосистему ITGUIL',
|
||||
info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
|
||||
}
|
||||
]
|
||||
return (
|
||||
<section className="stack">
|
||||
<AuthHeader />
|
||||
@ -157,7 +189,9 @@ export const Stack = () => {
|
||||
{projects.map((project, index) => {
|
||||
return (
|
||||
<div key={index} className="stack__project">
|
||||
<span className="project__img"></span>
|
||||
<span className="project__img">
|
||||
<img className={project.name} src={project.img} alt='img' />
|
||||
</span>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{ __html: project.description }}
|
||||
></p>
|
||||
@ -167,7 +201,7 @@ export const Stack = () => {
|
||||
</div>
|
||||
<div className="projects__info">
|
||||
<p>
|
||||
Мы обеспечиваем финансовые, юридические и кадровые гарантии,
|
||||
<span>Мы обеспечиваем</span> финансовые, юридические и кадровые гарантии,
|
||||
предоставляем SLA и берем на себя ответственность за работу
|
||||
команды. Вам не требуется заниматься поиском, оформлением или
|
||||
увольнением сотрудников —{" "}
|
||||
@ -178,6 +212,43 @@ export const Stack = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="stack__steps">
|
||||
<div className="stack__container steps__container">
|
||||
<div className="steps__head">
|
||||
<h4>как это работает?</h4>
|
||||
<div className="steps__info">
|
||||
<p>
|
||||
Аутстаффинг представляет собой специфическую модель найма персонала, отличающуюся от аутсорсинга.
|
||||
</p>
|
||||
<p>
|
||||
<span>В контексте аутстаффинга вы нанимаете специалистов в
|
||||
области ИТ,</span> оплачивая их по их конкретным навыкам, и берете
|
||||
на себя организацию их работы.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="steps__items">
|
||||
{steps.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='steps__item' key={index}>
|
||||
<p className="item__info" dangerouslySetInnerHTML={{__html: step.info}}/>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className="steps__portfolio">
|
||||
<img src={portfolio} alt='portfolio' />
|
||||
</div>
|
||||
<img className="steps__code steps__code--first" src={code} alt='code'/>
|
||||
<img className="steps__code steps__code--second" src={code} alt='code'/>
|
||||
</div>
|
||||
<img src={backgroundOpp} className="steps__background" />
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -389,7 +389,31 @@
|
||||
border-radius: 8px;
|
||||
width: 99px;
|
||||
height: 81px;
|
||||
background: #d9d9d9;
|
||||
background: #A7CA60;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flag {
|
||||
bottom: 21px;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.rabota {
|
||||
top: -40px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.hand {
|
||||
top: -45px;
|
||||
left: -44px;
|
||||
}
|
||||
|
||||
.fly {
|
||||
top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -409,12 +433,15 @@
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
margin: 85px auto 0;
|
||||
column-gap: 66px;
|
||||
margin: 56px auto 0;
|
||||
column-gap: 50px;
|
||||
align-items: center;
|
||||
border: 1px solid #f8f8f8;
|
||||
border-radius: 8px;
|
||||
padding: 47px 91px 47px 55px;
|
||||
|
||||
p {
|
||||
max-width: 633px;
|
||||
max-width: 620px;
|
||||
font-weight: 250;
|
||||
font-size: 14px;
|
||||
line-height: 129%;
|
||||
@ -433,8 +460,156 @@
|
||||
background: #a7ca60;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
max-height: 46px;
|
||||
width: 201px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__steps {
|
||||
background: rgb(30, 30, 30);
|
||||
padding: 90px 0 40px;
|
||||
position: relative;
|
||||
|
||||
.steps {
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
h4 {
|
||||
font-weight: 900;
|
||||
font-size: 66px;
|
||||
line-height: 98%;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #a7ca60;
|
||||
max-width: 380px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
max-width: 499px;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
line-height: 140%;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
margin-top: 115px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__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-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.01em;
|
||||
color: #a7ca60;
|
||||
max-width: 114px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 235px;
|
||||
height: 153px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(8.6999998093px);
|
||||
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;
|
||||
|
||||
.item {
|
||||
|
||||
&__info {
|
||||
font-size: 15px;
|
||||
line-height: 131%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 250;
|
||||
max-width: 160px;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__portfolio {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
position: absolute;
|
||||
|
||||
&--first {
|
||||
top: -40px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
&--second {
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.steps__background {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user