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

company page

Browse Source
This commit is contained in:
Николай Полтщук
2023-08-11 20:38:12 +03:00
parent 0406af40b8
commit 9028339c30
7 changed files with 278 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/CompanyInfo/CompanyInfo.jsx Normal file
View File

@ -0,0 +1,102 @@
import React from "react";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import arrow from "assets/icons/arrows/arrowRight.svg";
import countingImg from "assets/icons/companyCountingBlockImg.svg"
import calcImg from "assets/images/countingBlockCalcImg.png"
import braceImg from "assets/images/countingBlockBrace.png"
import "./companyInfo.scss";
export const CompanyInfo = () => {
return (
<div className="companyInfo">
<AuthHeader />
<SideBar />
<div className="companyInfo__content">
<div className="container">
<h1 className="companyInfo__title">
<span>
Арендуйте IT специалистов:
</span>
<br />
быстро, выгодно, на любой срок.
</h1>
<div className='arrowElement arrowDown'>
<img src={arrow} alt='arrow' />
</div>
<p className="companyInfo__subTitle">
Мы предоставляем вам «в аренду» it-специалистов. При этом они находятся в нашем штате.
Оплата происходит за отработанные часы
</p>
<div className="companyInfo__info">
<div className="companyInfo__countingBlock">
<div className="companyInfo__countingBlock__head">
<img src={countingImg} alt="countingImg" />
<div className="countingBlock__info">
<h3 className="countingBlock__title">
Экономия бюджета компании - главное преимущество аутстафинга
</h3>
<p className="countingBlock__subTitle">
Приблизительный просчет дал результаты в экономии до 50% бюджета
</p>
</div>
<div className='arrowElement'>
<img src={arrow} alt='arrow' />
</div>
</div>
<div className="companyInfo__countingBlock__bottom">
<span className='titleBottom'>
Давайте просчитаем:
</span>
<p className='subTitleBottom'>
Оплата работы <span>разработчика</span> в штат 1500 руб/ч (250 000 руб/мес).
</p>
</div>
<img className='countingBlockImg' src={calcImg} alt='calc' />
</div>
<div className="companyInfo__info__img">
<img src={braceImg} alt='brace' />
</div>
<div className="companyInfo__info__items">
<div className="info__item">
<ul>
<li>НДФЛ (13% от зарплаты)</li>
<li>
взносы в ПФР (22% от заработка)
</li>
<li>взносы в ФСС (3%)</li>
<li>взносы в ОМС (5%)</li>
</ul>
</div>
<div className="info__item">
<ul>
<li>Закупка рабочего оборудования.</li>
<li>Расходы на рекрутмент (10% от гросс либо 1−2 оклада для штатного HR),
затраты на размещение вакансий</li>
<li>Затраты на обучения, аренду, амортизацию оборудования</li>
</ul>
</div>
</div>
<div className="companyInfo__info__total">
<span className="companyInfo__info__total__title">В итоге у нас получается:</span>
<div className="companyInfo__info__total__text">
<p>Специалист с изначальной расценкой в 1 500 руб/ч с учетом всех остальных расходов
<span> будет стоить для <br/>компании около 3 000 руб/ч.</span></p>
<p>
Услуги IT-аутстаффинга персонала позволяют сократить эти расходы. Мы разбираемся
с налогами, обучением, техникой — вы оплачиваете только почасовую работу сотрудника.
</p>
</div>
</div>
</div>
</div>
<Footer />
</div>
</div>
);
};

167
src/pages/CompanyInfo/companyInfo.scss Normal file
View File

@ -0,0 +1,167 @@
.companyInfo {
&__content {
font-family: "LabGrotesque", sans-serif;
background-color: #F1F1F1;
padding-top: 60px;
}
&__title {
font-weight: 500;
font-size: 48px;
color: #000000;
line-height: 48px;
max-width: 745px;
margin: 0 auto;
text-align: center;
span {
color: #52B709;
font-weight: 700;
}
}
&__subTitle {
max-width: 735px;
margin: 0 auto;
text-align: center;
font-size: 22px;
line-height: 32px;
}
.arrowElement {
width: 48px;
height: 48px;
background-color: #D3E4BC;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.arrowDown {
margin: 35px auto 45px;
img {
transform: rotate(90deg);
}
}
&__info {
padding-top: 85px;
&__img {
margin: 20.5px 0;
display: flex;
justify-content: center;
}
&__items {
display: flex;
column-gap: 17px;
.info__item {
padding: 32px 40px;
border-radius: 12px;
background-color: white;
width: 50%;
font-size: 15px;
line-height: 22px;
color: #000000;
ul {
padding-left: 18px;
}
}
}
&__total {
display: flex;
flex-direction: column;
row-gap: 12px;
margin: 20px auto 70px;
max-width: 1000px;
span {
color: #52B709;
font-weight: 700;
}
&__title {
font-size: 21px;
line-height: 48px;
}
&__text {
display: flex;
flex-direction: column;
font-size: 18px;
line-height: 22px;
row-gap: 20px;
}
}
}
&__countingBlock {
padding: 27px 185px 26px 45px;
border-radius: 12px;
background: white;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 16px;
position: relative;
&__head {
display: flex;
justify-content: space-between;
align-items: center;
}
&__bottom {
display: flex;
flex-direction: column;
row-gap: 12px;
.titleBottom {
font-size: 21px;
font-weight: 700;
line-height: 48px;
}
.subTitleBottom {
color: #000000;
font-weight: 500;
font-size: 18px;
line-height: 22px;
}
span {
color: #52B709;
}
}
.countingBlock__info {
display: flex;
flex-direction: column;
row-gap: 12px;
}
.countingBlock {
&__title {
font-size: 18px;
font-weight: 500;
color: #000000;
line-height: 22px;
}
&__subTitle {
color: #6F6F6F;
font-size: 12px;
line-height: 20px;
}
}
.countingBlockImg {
position: absolute;
right: -140px;
top: -55px;
}
}
}