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

stack steps

Browse Source
This commit is contained in:
Mikola 2024-04-22 19:03:00 +03:00
parent 470bf6ec67
commit 8de343016f
1 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/Stack/Stack.jsx
View File

@ -9,10 +9,10 @@ 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 hand from "assets/images/stackProjectsHand.png";
import rabota from "assets/images/stackProjectsRabota.png";
import portfolio from "assets/images/stackSteptsPortfolio.png";
import "./stack.scss";
@ -54,13 +54,13 @@ export const Stack = () => {
description:
"Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
img: flag,
name: 'flag'
name: "flag"
},
{
description:
"<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
img: rabota,
name: 'rabota'
name: "rabota"
},
{
description:
@ -72,28 +72,28 @@ export const Stack = () => {
description:
"Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары.",
img: fly,
name: 'fly'
name: "fly"
}
];
const steps = [
{
miniInfo: 'Окунитесь в экосистему ITGUIL',
miniInfo: "Окунитесь в экосистему ITGUIL",
info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
},
{
miniInfo: 'Окунитесь в экосистему ITGUIL',
miniInfo: "Окунитесь в экосистему ITGUIL",
info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
},
{
miniInfo: 'Окунитесь в экосистему ITGUIL',
miniInfo: "Окунитесь в экосистему ITGUIL",
info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
},
{
miniInfo: 'Окунитесь в экосистему ITGUIL',
miniInfo: "Окунитесь в экосистему ITGUIL",
info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
}
]
];
return (
<section className="stack">
<AuthHeader />
@ -190,7 +190,11 @@ export const Stack = () => {
return (
<div key={index} className="stack__project">
<span className="project__img">
<img className={project.name} src={project.img} alt='img' />
<img
className={project.name}
src={project.img}
alt="img"
/>
</span>
<p
dangerouslySetInnerHTML={{ __html: project.description }}
@ -201,10 +205,10 @@ export const Stack = () => {
</div>
<div className="projects__info">
<p>
<span>Мы обеспечиваем</span> финансовые, юридические и кадровые гарантии,
предоставляем SLA и берем на себя ответственность за работу
команды. Вам не требуется заниматься поиском, оформлением или
увольнением сотрудников —{" "}
<span>Мы обеспечиваем</span> финансовые, юридические и кадровые
гарантии, предоставляем SLA и берем на себя ответственность за
работу команды. Вам не требуется заниматься поиском, оформлением
или увольнением сотрудников —{" "}
<span>мы берем на себя все хлопоты.</span>
</p>
<button>оставить заявку</button>
@ -218,34 +222,50 @@ export const Stack = () => {
<h4>как это работает?</h4>
<div className="steps__info">
<p>
Аутстаффинг представляет собой специфическую модель найма персонала, отличающуюся от аутсорсинга.
Аутстаффинг представляет собой специфическую модель найма
персонала, отличающуюся от аутсорсинга.
</p>
<p>
<span>В контексте аутстаффинга вы нанимаете специалистов в
области ИТ,</span> оплачивая их по их конкретным навыкам, и берете
на себя организацию их работы.
<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>
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 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' />
<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'/>
<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>