111 lines
4.7 KiB
JavaScript
111 lines
4.7 KiB
JavaScript
import React from "react";
|
||
import SVG from "react-inlinesvg";
|
||
|
||
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
|
||
|
||
import Ellipse from "assets/images/EllipseIntro.svg";
|
||
import cat from "assets/images/cat.png";
|
||
import clue from "assets/images/clue.png";
|
||
import backgroundOpp from "assets/images/backgroundOpportunity.png"
|
||
import code from "assets/images/landingBackgroundCode.png"
|
||
|
||
import "./stack.scss";
|
||
|
||
export const Stack = () => {
|
||
const subjects = [
|
||
{
|
||
name: 'Backend',
|
||
skills: ['php', 'yii2', 'laravel', 'symfony', 'django', 'nodejs', 'fastAPI', 'flask', 'python', 'exspress', 'adonis']
|
||
},
|
||
{
|
||
name: 'Front',
|
||
skills: ['react', 'next.js', 'typescript', 'redux', 'angular', 'vue', 'jquery', 'css (sass/scss, tailwind, bootstrap, БЭМ)']
|
||
}
|
||
]
|
||
return (
|
||
<section className="stack">
|
||
<AuthHeader />
|
||
<section className="stack__intro">
|
||
<div className="stack__container intro__container">
|
||
<div className="intro__info">
|
||
<span className="intro__suptitle">
|
||
Все еще пытаетесь
|
||
<br /> пасти котов?*
|
||
</span>
|
||
<h1 className="intro__title">
|
||
Аутстаф
|
||
<br />
|
||
финг
|
||
</h1>
|
||
<span className="intro__subtitle">IT-специалистов</span>
|
||
<p className="intro__about">
|
||
Подберем и документально оформим IT-специалистов, после чего
|
||
передадим исполнителей под ваше руководство.{" "}
|
||
<span>Вы получаете полное управление над сотрудниками,</span> имея
|
||
возможность контролировать и заменять IT штат.
|
||
</p>
|
||
<div className="intro__links">
|
||
<button className="stack__button">оставить заявку</button>
|
||
<span className="intro__link">
|
||
Окунитесь в<br /> экосистему ITGUIL
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<SVG className="intro__ellipse" src={Ellipse} />
|
||
<div className="intro__aside">
|
||
<h3 className="aside__logo">ITGu ild</h3>
|
||
<div className="aside__clue">
|
||
<img src={clue} alt="clue" />
|
||
<p>
|
||
<span>Каждый день</span> база специалистов пополняется на{" "}
|
||
<span>+15 резюме</span>
|
||
</p>
|
||
</div>
|
||
<img className="aside__cat" src={cat} alt="cat" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="stack__opportunity">
|
||
<img src={backgroundOpp} className="background__opportunity--left" />
|
||
<img src={backgroundOpp} className="background__opportunity--right" />
|
||
<div className="stack__container opportunity__container">
|
||
<img src={code} className="opportunity__code" />
|
||
<img src={code} className="opportunity__code--center" />
|
||
<div className="opportunity__block">
|
||
<h3 className="opportunity__title">Stack</h3>
|
||
<div className="opportunity__info">
|
||
<span className="info__subtitle">
|
||
Окунитесь в экосистему ITGUIL
|
||
</span>
|
||
<p className="info__about">
|
||
<span>Вы получаете полное управление над сотрудниками,</span> имея возможность контролировать и заменять IT штат.
|
||
</p>
|
||
<div className="info__notification">
|
||
<img src={clue} alt='clue'/>
|
||
<p>
|
||
Можем подготовить специалиста конкретно под ваш проект и используемый стек.
|
||
Таким образом вы сможете сэкономить ресурсы на поиск кандидата.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="opportunity__subjects">
|
||
{subjects.map((subject) => {
|
||
return <div className="subject" key={subject.name}>
|
||
<h4>{subject.name}</h4>
|
||
<div className="subject__skills">
|
||
{subject.skills.map((skill) => {
|
||
return <span key={skill}>{skill}</span>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
);
|
||
};
|