Merge pull request #124 from apuc/tracker-tasks

company page

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 = () => {
           <Route exact path="/tracker-intro" element={<TrackerIntro />} />
           <Route exact path="/tracker-auth" element={<TrackerAuth />} />
           <Route exact path="/tracker-registration" element={<TrackerRegistration />} />
+          <Route exact path="/company" element={<CompanyInfo />} />
 
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route

src/assets/icons/companyCountingBlockImg.svg

@@ -0,0 +1,3 @@
+<svg width="49" height="32" viewBox="0 0 49 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.7244 1.70311C42.3116 1.17567 39.1146 0.885142 35.7224 0.885142C31.0443 0.885142 25.663 1.49189 23.5123 2.83655C21.2493 1.5546 18.6923 0.882191 16.0914 0.885142C7.75703 0.885142 0.976562 7.66561 0.976562 16C0.976562 24.3344 7.75703 31.1148 16.0914 31.1148C18.6921 31.1178 21.2489 30.4455 23.5118 29.1637C25.6626 30.5082 31.0446 31.1148 35.7224 31.1148C39.1147 31.1148 42.3116 30.8242 44.7244 30.2969C47.5857 29.6713 48.9766 28.7993 48.9766 27.6311V4.3688C48.9766 3.20058 47.5857 2.3287 44.7244 1.70311ZM47.4766 19.8494C47.422 19.9343 46.9205 20.5749 44.0332 21.155C41.7682 21.6101 38.8167 21.8607 35.7224 21.8607C33.8586 21.865 31.996 21.7676 30.1428 21.5689C30.8472 19.7968 31.2081 17.9069 31.2062 16C31.2062 15.8068 31.2013 15.6148 31.1941 15.4233C32.6366 15.5443 34.1548 15.6065 35.7222 15.6065C39.1144 15.6065 42.3114 15.3159 44.7243 14.7885C45.8798 14.5359 46.7972 14.242 47.4764 13.9067L47.4766 19.8494ZM47.4766 12.0952C47.422 12.1801 46.9205 12.8207 44.0332 13.4009C41.7682 13.8559 38.8167 14.1065 35.7224 14.1065C34.1025 14.1065 32.5374 14.0393 31.0606 13.9069C30.7323 11.5507 29.8494 9.30598 28.4843 7.35755C30.5961 7.67948 33.0922 7.85245 35.7224 7.85245C39.1147 7.85245 42.3116 7.56183 44.7244 7.03448C45.88 6.78186 46.7974 6.48792 47.4766 6.15267V12.0952ZM35.7224 2.38514C38.8167 2.38514 41.7682 2.63574 44.0332 3.0908C46.7079 3.62817 47.3349 4.21739 47.4562 4.3688C47.335 4.52011 46.7083 5.10942 44.0333 5.6467C41.7683 6.10186 38.8168 6.35245 35.7224 6.35245C32.4558 6.35245 29.2995 6.06549 27.0141 5.56298C26.3867 4.90697 25.7019 4.30834 24.9678 3.77424C26.7747 3.03539 30.6532 2.38514 35.7224 2.38514ZM2.47656 16C2.47656 8.49277 8.58409 2.38514 16.0914 2.38514C23.5987 2.38514 29.7062 8.49277 29.7062 16C29.7062 23.5072 23.5984 29.6148 16.0914 29.6148C8.58438 29.6148 2.47656 23.5072 2.47656 16ZM44.0333 28.9094C41.7683 29.3645 38.8168 29.6151 35.7224 29.6151C30.6535 29.6151 26.7748 28.965 24.9676 28.2262C26.8531 26.8537 28.3981 25.0663 29.4833 23.002C31.5539 23.2472 33.6374 23.3671 35.7224 23.361C39.1146 23.361 42.3116 23.0703 44.7244 22.543C45.88 22.2903 46.7974 21.9964 47.4766 21.6612V27.6034C47.4216 27.6889 46.9191 28.3293 44.0333 28.9094ZM22.1338 11.0183L11.1097 22.0424C10.9691 22.183 10.7783 22.2621 10.5794 22.2621C10.3804 22.2621 10.1897 22.1831 10.049 22.0424C9.90832 21.9018 9.82928 21.711 9.82928 21.512C9.82927 21.3131 9.90828 21.1223 10.0489 20.9817L21.073 9.95761C21.1426 9.88796 21.2253 9.83271 21.3163 9.79501C21.4073 9.75731 21.5049 9.73791 21.6034 9.7379C21.7019 9.7379 21.7994 9.75729 21.8904 9.79498C21.9814 9.83267 22.0641 9.88792 22.1337 9.95756C22.2034 10.0272 22.2586 10.1099 22.2963 10.2009C22.334 10.2919 22.3534 10.3894 22.3534 10.4879C22.3534 10.5864 22.3341 10.684 22.2964 10.775C22.2587 10.866 22.2034 10.9486 22.1338 11.0183ZM12.4642 15.4669C13.0761 15.4669 13.6742 15.2855 14.183 14.9455C14.6918 14.6056 15.0883 14.1224 15.3225 13.5571C15.5566 12.9918 15.6179 12.3697 15.4985 11.7696C15.3791 11.1695 15.0845 10.6182 14.6518 10.1856C14.2192 9.75289 13.6679 9.45824 13.0678 9.33887C12.4677 9.2195 11.8456 9.28076 11.2803 9.51492C10.715 9.74908 10.2318 10.1456 9.89186 10.6544C9.55191 11.1631 9.37047 11.7613 9.37047 12.3732C9.37151 13.1934 9.69779 13.9797 10.2778 14.5596C10.8577 15.1396 11.644 15.4659 12.4642 15.4669ZM12.4642 10.7786C12.7794 10.7786 13.0876 10.8721 13.3497 11.0472C13.6117 11.2223 13.816 11.4712 13.9367 11.7624C14.0573 12.0536 14.0888 12.3741 14.0273 12.6833C13.9658 12.9924 13.8141 13.2764 13.5912 13.4993C13.3683 13.7222 13.0843 13.874 12.7751 13.9355C12.466 13.997 12.1455 13.9654 11.8543 13.8448C11.5631 13.7241 11.3142 13.5199 11.1391 13.2578C10.9639 12.9957 10.8705 12.6875 10.8705 12.3723C10.8711 11.9498 11.0392 11.5448 11.3379 11.246C11.6367 10.9473 12.0417 10.7792 12.4642 10.7786ZM19.7186 16.533C19.1067 16.533 18.5086 16.7145 17.9998 17.0544C17.491 17.3944 17.0945 17.8776 16.8603 18.4429C16.6262 19.0082 16.5649 19.6302 16.6843 20.2304C16.8037 20.8305 17.0983 21.3817 17.531 21.8144C17.9637 22.2471 18.5149 22.5417 19.115 22.6611C19.7152 22.7805 20.3372 22.7192 20.9025 22.485C21.4678 22.2509 21.951 21.8544 22.291 21.3456C22.6309 20.8368 22.8123 20.2387 22.8123 19.6268C22.8113 18.8066 22.485 18.0203 21.9051 17.4403C21.3251 16.8604 20.5388 16.5341 19.7186 16.533ZM19.7186 21.2214C19.4034 21.2214 19.0952 21.1279 18.8332 20.9528C18.5711 20.7777 18.3668 20.5288 18.2462 20.2375C18.1255 19.9463 18.094 19.6259 18.1555 19.3167C18.217 19.0076 18.3688 18.7236 18.5916 18.5007C18.8145 18.2778 19.0985 18.126 19.4077 18.0645C19.7168 18.003 20.0373 18.0346 20.3285 18.1552C20.6197 18.2758 20.8686 18.4801 21.0437 18.7422C21.2189 19.0043 21.3123 19.3124 21.3123 19.6276C21.3119 20.0502 21.1438 20.4554 20.8451 20.7542C20.5463 21.0531 20.1412 21.2213 19.7186 21.2219V21.2214Z" fill="black"/>
+</svg>

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -264,6 +264,10 @@
         }
       }
     }
+
+    @media (max-width: 500px) {
+      min-width: auto;
+    }
   }
 
   .open {

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 (
+    <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>
+  );
+};

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;
+    }
+  }
+}