diff --git a/src/App.js b/src/App.js index f758f1a7..4c774b32 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import { getNotification } from "@redux/outstaffingSlice"; import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro" +import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo"; import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth"; import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration"; import Home from "./pages/Home/Home"; @@ -63,6 +64,7 @@ const App = () => { } /> } /> } /> + } /> } /> + + diff --git a/src/assets/images/countingBlockBrace.png b/src/assets/images/countingBlockBrace.png new file mode 100644 index 00000000..98dc1771 Binary files /dev/null and b/src/assets/images/countingBlockBrace.png differ diff --git a/src/assets/images/countingBlockCalcImg.png b/src/assets/images/countingBlockCalcImg.png new file mode 100644 index 00000000..c4de771a Binary files /dev/null and b/src/assets/images/countingBlockCalcImg.png differ diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index a4f54347..49570f96 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -264,6 +264,10 @@ } } } + + @media (max-width: 500px) { + min-width: auto; + } } .open { diff --git a/src/pages/CompanyInfo/CompanyInfo.jsx b/src/pages/CompanyInfo/CompanyInfo.jsx new file mode 100644 index 00000000..f7f99641 --- /dev/null +++ b/src/pages/CompanyInfo/CompanyInfo.jsx @@ -0,0 +1,109 @@ +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 braceImg from "assets/images/countingBlockBrace.png"; +import calcImg from "assets/images/countingBlockCalcImg.png"; + +import "./companyInfo.scss"; + +export const CompanyInfo = () => { + return ( +
+ + +
+
+

+ Арендуйте IT специалистов: +
+ быстро, выгодно, на любой срок. +

+
+ arrow +
+

+ Мы предоставляем вам «в аренду» it-специалистов. При этом они + находятся в нашем штате. Оплата происходит за отработанные часы +

+
+
+
+ countingImg +
+

+ Экономия бюджета компании - главное преимущество аутстафинга +

+

+ Приблизительный просчет дал результаты в экономии до 50% + бюджета +

+
+
+ arrow +
+
+
+ Давайте просчитаем: +

+ Оплата работы разработчика в штат 1500 руб/ч (250 + 000 руб/мес). +

+
+ calc +
+
+ brace +
+
+
+
    +
  • НДФЛ (13% от зарплаты)
    • +
  • взносы в ПФР (22% от заработка)
    • +
  • взносы в ФСС (3%)
    • +
  • взносы в ОМС (5%)
    • +
+
+
+
    +
  • Закупка рабочего оборудования.
    • +
  • + Расходы на рекрутмент (10% от гросс либо 1−2 оклада для + штатного HR), затраты на размещение вакансий +
    • +
  • Затраты на обучения, аренду, амортизацию оборудования
    • +
+
+
+
+ + В итоге у нас получается: + +
+

+ Специалист с изначальной расценкой в 1 500 руб/ч с учетом всех + остальных расходов + + {" "} + будет стоить для
+ компании около 3 000 руб/ч. + +

+

+ Услуги IT-аутстаффинга персонала позволяют сократить эти + расходы. Мы разбираемся с налогами, обучением, техникой — вы + оплачиваете только почасовую работу сотрудника. +

+
+
+
+
+
+
+ ); +}; diff --git a/src/pages/CompanyInfo/companyInfo.scss b/src/pages/CompanyInfo/companyInfo.scss new file mode 100644 index 00000000..fbac5743 --- /dev/null +++ b/src/pages/CompanyInfo/companyInfo.scss @@ -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; + } + } +}