Merge branch 'main' of https://git.itguild.info/apuc/guild_front into fixed/components

Reviewed-on: #33

src/assets/fonts/stylesheet.css

@@ -394,3 +394,16 @@
   url('LabGrotesque-Light.ttf') format('truetype');
   font-weight: 300;
 }
+
+@font-face {
+  font-family: 'Geraspoheko';
+  src: url('GeraspohekoRegular.eot');
+  src: local('Geraspoheko'), local('GeraspohekoRegular'),
+  url('GeraspohekoRegular.eot?#iefix') format('embedded-opentype'),
+  url('GeraspohekoRegular.woff2') format('woff2'),
+  url('GeraspohekoRegular.woff') format('woff'),
+  url('GeraspohekoRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/assets/icons/arrows/arrowLanding.svg

@@ -0,0 +1,10 @@
+<svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_76_12)">
+<path d="M22.7685 8.75957H22.345C15.3781 8.75957 8.41109 8.75957 1.44414 8.75957C1.22469 8.76628 1.00541 8.7416 0.792717 8.68623C0.259454 8.5302 -0.0459255 8.00204 0.00624986 7.38338C0.0222895 7.10907 0.131776 6.84899 0.315899 6.64783C0.500021 6.44667 0.747298 6.31697 1.01524 6.28102C1.18606 6.26022 1.35806 6.2511 1.53009 6.25372C8.46839 6.25372 15.407 6.25372 22.3458 6.25372H22.7931C22.6734 6.12655 22.6066 6.05322 22.5376 5.98222C21.3043 4.73398 20.0705 3.48392 18.8362 2.23203C18.4764 1.86848 18.2991 1.45188 18.438 0.941657C18.4905 0.730456 18.5968 0.537048 18.7462 0.38089C18.8956 0.224732 19.0828 0.111333 19.289 0.052101C19.4952 -0.00713091 19.7131 -0.0101062 19.9208 0.043474C20.1284 0.0970542 20.3186 0.205301 20.472 0.357322C20.9393 0.80435 21.3828 1.27556 21.8355 1.73663C23.3982 3.32762 24.9604 4.9181 26.5221 6.50805C27.1582 7.15557 27.1597 7.85069 26.5275 8.4951C24.5402 10.5235 22.5445 12.5363 20.568 14.5725C19.717 15.4494 18.6574 14.8432 18.4418 14.0724C18.377 13.8673 18.3702 13.6478 18.4221 13.439C18.4741 13.2301 18.5827 13.0403 18.7357 12.8913C19.0672 12.541 19.4086 12.2 19.747 11.856L22.5092 9.04745C22.5798 8.96787 22.6465 8.88985 22.7685 8.75957Z" fill="#A7CA60"/>
+</g>
+<defs>
+<clipPath id="clip0_76_12">
+<rect width="27" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/authIcon.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_68_166)">
+<path d="M7.83533 -0.000427246C8.01139 0.0347969 8.19098 0.0603351 8.36352 0.106127C10.1325 0.574608 11.2721 1.69782 11.6378 3.48501C12.1598 6.0326 10.4182 8.17423 8.22135 8.59868C7.24129 8.79102 6.22489 8.63913 5.34382 8.16864C4.46275 7.69816 3.771 6.93791 3.38538 6.0163C2.7159 4.41052 3.02929 2.48332 4.40345 1.19367C5.09537 0.544667 5.89733 0.14003 6.8441 0.0330362C6.87122 0.0255363 6.89714 0.014272 6.92113 -0.000427246H7.83533Z" fill="#838383"/>
+<path d="M7.5037 17.9969C5.99838 17.9969 4.49305 18.0057 2.98817 17.993C2.33244 17.997 1.69302 17.7886 1.16549 17.399C0.50526 16.9094 0.11176 16.2485 0.0408957 15.4344C-0.0880693 13.9523 0.0822738 12.4997 0.633346 11.1106C0.967863 10.2674 1.46655 9.54135 2.29624 9.0962C2.79777 8.82462 3.36124 8.68806 3.93142 8.69993C4.11276 8.70345 4.30467 8.79195 4.47016 8.88178C4.7369 9.0262 4.98559 9.20408 5.24263 9.36611C6.01995 9.85749 6.86152 10.1243 7.78716 10.0547C8.46852 10.0037 9.09838 9.77647 9.67982 9.42071C9.87921 9.29874 10.0861 9.18338 10.2674 9.03764C10.7428 8.65414 11.2683 8.64798 11.8295 8.77346C12.8648 9.00374 13.5937 9.61928 14.0981 10.5311C14.6025 11.443 14.8301 12.4244 14.9273 13.4442C14.9789 13.9979 15.0026 14.5538 14.9982 15.1099C14.989 16.6108 13.8608 17.8252 12.3652 17.9648C12.1328 17.9863 11.8982 17.9987 11.6649 17.9991C10.2767 18.0026 8.88887 17.9991 7.50063 17.9991L7.5037 17.9969Z" fill="#838383"/>
+</g>
+<defs>
+<clipPath id="clip0_68_166">
+<rect width="15" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/telegramIcon.svg

@@ -0,0 +1,15 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_66)">
+<mask id="mask0_64_66" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23" height="22">
+<path d="M22.0015 0H0V22H22.0015V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_66)">
+<path d="M10.9461 22.0001C4.87347 21.9702 -0.0423218 16.9977 0.000274756 10.9273C0.0436186 4.86661 4.99678 -0.0297562 11.0545 0.000136144C17.1159 0.0307758 22.0317 4.98468 22.0018 11.0349C21.9719 17.1247 17.0255 22.0293 10.9461 22.0001ZM16.0487 7.6025C16.0711 6.87985 15.8103 6.63324 15.2715 6.68256C14.9591 6.71096 14.664 6.8126 14.3777 6.93217C12.3622 7.77513 10.3475 8.61809 8.335 9.46778C7.12361 9.97969 5.91447 10.4968 4.71056 11.0259C4.48935 11.1231 4.25096 11.2531 4.27338 11.567C4.2958 11.8749 4.56782 11.9234 4.77557 11.9937C5.37491 12.1962 5.97874 12.392 6.59303 12.5415C7.0997 12.6655 7.61161 12.6199 8.06298 12.3173C9.56955 11.3069 11.0709 10.2898 12.5782 9.28021C12.7307 9.17857 12.9108 8.94392 13.0901 9.15316C13.2747 9.36764 13.0087 9.5029 12.8801 9.62995C11.8354 10.6612 10.7809 11.6828 9.7362 12.7133C9.26839 13.1752 9.31397 13.6011 9.85727 13.9718C10.1547 14.1743 10.4603 14.3656 10.76 14.5667C11.5544 15.0995 12.3361 15.6525 13.1447 16.1629C14.0243 16.7182 14.4457 16.5523 14.7476 15.5852C14.7768 15.4911 14.8029 15.3947 14.8239 15.2983C15.1318 13.9016 15.3246 12.4847 15.5465 11.073C15.7378 9.85713 15.8993 8.63678 16.0472 7.6025H16.0487Z" fill="#9F9F9F"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_66">
+<rect width="23" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/vkIcon.svg

@@ -0,0 +1,16 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_59)">
+<mask id="mask0_64_59" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22">
+<path d="M21.9955 0H0V22H21.9955V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_59)">
+<path d="M10.9755 22C4.9123 21.9881 -0.0230861 17.0228 8.12304e-05 10.9589C0.0232485 4.91 4.97209 -0.0119356 11.0195 2.17408e-05C17.07 0.0119791 21.9994 4.95335 21.9956 11.003C21.9919 17.0743 17.0438 22.012 10.9755 22ZM11.4724 9.84166C11.4724 9.53076 11.4807 9.21913 11.4702 8.90824C11.4545 8.42621 11.3454 8.29393 10.8716 8.20798C10.2289 8.09215 9.58239 8.10336 8.93968 8.20873C8.77303 8.23638 8.60861 8.31336 8.4569 8.39332C8.28875 8.48151 8.26708 8.58987 8.47858 8.66012C8.78797 8.76325 8.99424 8.96653 9.04132 9.29162C9.12203 9.84689 9.16313 10.4044 9.05552 10.9634C8.95164 11.503 8.5974 11.6315 8.1774 11.2691C8.07502 11.1801 7.98758 11.0718 7.90014 10.9671C7.31797 10.2669 6.96373 9.44856 6.68348 8.59436C6.58409 8.29019 6.37633 8.13923 6.07739 8.134C5.45561 8.12279 4.83308 8.12129 4.2113 8.13998C3.84959 8.15119 3.76739 8.28645 3.91685 8.62126C4.63728 10.2355 5.43095 11.8101 6.52953 13.2084C7.66324 14.6515 9.10634 15.4354 10.9874 15.2972C11.314 15.2733 11.515 15.2045 11.4702 14.8226C11.4538 14.6784 11.4821 14.5237 11.5158 14.3795C11.6234 13.9139 11.9208 13.7756 12.3491 13.9841C12.6428 14.1276 12.8931 14.3376 13.127 14.5581C13.6898 15.0909 14.3302 15.3689 15.1202 15.2987C15.5155 15.2636 15.9161 15.2927 16.3144 15.292C16.6387 15.292 17.0117 15.3241 17.1589 14.9684C17.3001 14.6261 17.0109 14.3854 16.7957 14.1702C16.3024 13.6792 15.7838 13.2136 15.2868 12.7256C14.9468 12.3916 14.9274 12.1935 15.2046 11.8116C15.4819 11.4297 15.789 11.0688 16.0768 10.6944C16.5401 10.0913 16.9661 9.465 17.1634 8.71617C17.2785 8.27898 17.2037 8.15567 16.7576 8.14521C15.999 8.12802 15.2397 8.14297 14.4812 8.15119C14.2189 8.15418 14.0874 8.32307 14.0066 8.554C13.8788 8.91646 13.757 9.28265 13.6038 9.63464C13.334 10.2557 12.9701 10.8192 12.4634 11.2758C12.2885 11.4335 12.0793 11.5874 11.8252 11.4963C11.5509 11.3984 11.4919 11.1368 11.4784 10.8849C11.4597 10.5374 11.4739 10.1884 11.4724 9.84016V9.84166Z" fill="#9F9F9F"/>
+<path d="M11.4733 9.84153C11.4733 10.1898 11.4598 10.5388 11.4785 10.8863C11.492 11.1381 11.5518 11.3997 11.8253 11.4976C12.0794 11.588 12.2894 11.4341 12.4635 11.2772C12.9702 10.8205 13.3334 10.257 13.6039 9.63601C13.7571 9.28402 13.879 8.91782 14.0067 8.55537C14.0882 8.32369 14.219 8.15479 14.4813 8.15255C15.2398 8.14433 15.9991 8.13013 16.7577 8.14657C17.2038 8.15629 17.2793 8.2796 17.1635 8.71754C16.9662 9.46636 16.5402 10.0926 16.0769 10.6957C15.7891 11.0701 15.482 11.4311 15.2047 11.813C14.9275 12.1956 14.9461 12.3929 15.2869 12.727C15.7839 13.215 16.3026 13.6806 16.7958 14.1716C17.011 14.3861 17.3002 14.6267 17.159 14.9697C17.0125 15.3255 16.6396 15.2933 16.3145 15.2933C15.9162 15.2933 15.5156 15.2649 15.1203 15.3C14.3303 15.3703 13.6906 15.0923 13.1271 14.5594C12.894 14.3382 12.6436 14.129 12.3492 13.9855C11.9209 13.7762 11.6235 13.9152 11.5159 14.3808C11.4823 14.5251 11.4539 14.6798 11.4703 14.824C11.5144 15.2059 11.3141 15.2746 10.9875 15.2986C9.10646 15.4368 7.66337 14.6529 6.52967 13.2098C5.43109 11.8115 4.63817 10.2369 3.91699 8.62262C3.76752 8.28782 3.84973 8.15255 4.21144 8.14134C4.83321 8.12266 5.45575 8.12415 6.07753 8.13536C6.37721 8.1406 6.58422 8.29156 6.68362 8.59572C6.96312 9.44992 7.3181 10.2683 7.90028 10.9685C7.98772 11.0739 8.07441 11.1822 8.17754 11.2704C8.59679 11.6329 8.95178 11.5051 9.05566 10.9648C9.16327 10.4058 9.12217 9.84825 9.04146 9.29298C8.99437 8.96715 8.78811 8.76387 8.47871 8.66149C8.26647 8.59124 8.28889 8.48287 8.45704 8.39469C8.60875 8.31472 8.77315 8.237 8.93981 8.2101C9.58177 8.10472 10.229 8.09351 10.8717 8.20935C11.3455 8.29455 11.4546 8.42682 11.4703 8.9096C11.48 9.22049 11.4725 9.53213 11.4725 9.84302L11.4733 9.84153Z" fill="#FBFBFB"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_59">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/EllipseIntro.svg

@@ -0,0 +1,12 @@
+<svg width="1005" height="969" viewBox="0 0 1005 969" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_53_13)">
+<circle cx="502.5" cy="466.5" r="281.5" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_f_53_13" x="0.300003" y="-35.7" width="1004.4" height="1004.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="110.35" result="effect1_foregroundBlur_53_13"/>
+</filter>
+</defs>
+</svg>

src/components/Candidate/candidate.scss

@@ -3,7 +3,6 @@
 .candidate {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
   background: #f1f1f1;
 
   .container {

src/pages/Landing/Landing.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+import { Link } from "react-router-dom";
+
+import { Footer } from "@components/Common/Footer/Footer";
+
+import arrow from "assets/icons/arrows/arrowLanding.svg";
+import authIcon from "assets/icons/authIcon.svg";
+import clue from "assets/icons/landingClue.svg";
+import telegram from "assets/icons/telegramIcon.svg";
+import vk from "assets/icons/vkIcon.svg";
+import codeBg from "assets/images/landingBackgroundCode.svg";
+import cat from "assets/images/landingCat.png";
+
+import "./landing.scss";
+
+export const Landing = () => {
+  const opportunities = [
+    {
+      name: "<span>Аутстаффинг</span> сотрудников",
+      class: "outstaffing__employees",
+      img: cat
+    },
+    {
+      name: "Модуль для видеоконференций"
+    },
+    {
+      name: "Система контроля версий GIT"
+    },
+    {
+      name: "Управление задачами"
+    },
+    {
+      name: "Система для отчётности"
+    },
+    {
+      name: "Все наши предложения",
+      class: "outstaffing__offers",
+      img: arrow
+    }
+  ];
+
+  return (
+    <section className="landing">
+      <div className="landing__container">
+        <div className="landing__head">
+          <h2 className="head__logo">ITGUILD</h2>
+          <Link className="head__signIn" to="/auth">
+            войти в систему
+          </Link>
+          <Link className="head__signUp" to="/auth">
+            <SVG src={authIcon} />
+            авторизация
+          </Link>
+        </div>
+        <div className="landing__info">
+          <p className="info__title">
+            <SVG className="code" src={codeBg} />
+            <span>Экосистема</span> для диджитализации бизнеса
+          </p>
+          <div className="landing__background">
+            <h3>ITGuild</h3>
+            <SVG className="clue" src={clue} />
+            <SVG className="code" src={codeBg} />
+          </div>
+          <div className="info__block">
+            <p>
+              Подберем и документально оформим IT-специалистов, после чего
+              передадим исполнителей под ваше руководство.
+              <br />
+              <br />
+              <span>Вы получаете полное управление над сотрудниками,</span> имея
+              возможность контролировать и заменять IT штат.
+            </p>
+          </div>
+        </div>
+        <div className="landing__opportunities">
+          {opportunities.map((opportunity, index) => {
+            return (
+              <div
+                className={
+                  opportunity.class ? opportunity.class : "landing__opportunity"
+                }
+                key={index}
+              >
+                {opportunity.class ? (
+                  <div>
+                    <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
+                    {opportunity.img ? (
+                      <img src={opportunity.img} alt="img" />
+                    ) : (
+                      ""
+                    )}
+                  </div>
+                ) : (
+                  <p>{opportunity.name}</p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <Footer />
+      </div>
+    </section>
+  );
+};

src/pages/Landing/landing.scss

@@ -0,0 +1,246 @@
+.landing {
+  background: #EEEEEE;
+  min-height: 100vh;
+  padding: 20px 0;
+  font-family: "GT Eesti Pro Display";
+
+  &__container {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+  }
+
+  &__head {
+    display: flex;
+    column-gap: 35px;
+    align-items: center;
+
+    .head {
+      &__logo {
+        margin-bottom: 0;
+        color: rgba(74, 74, 74, 1);
+        font-size: 35px;
+        font-weight: 900;
+        position: relative;
+
+        &:before {
+          content: '';
+          position: absolute;
+          background: rgba(167, 202, 96, 1);
+          width: 31px;
+          height: 31px;
+          border-radius: 50px;
+          left: 39%;
+          top: -35px;
+        }
+      }
+
+      &__signIn {
+        padding: 12px 30px 15px;
+        color: rgba(30, 30, 30, 1);
+        font-size: 13px;
+        background: rgba(167, 202, 96, 1);
+        font-weight: 400;
+        border-radius: 32px;
+      }
+
+      &__signUp {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+        color: rgba(131, 131, 131, 1);
+        font-weight: 400;
+        font-size: 13px;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 75px;
+    column-gap: 45px;
+
+
+    .info {
+      &__title {
+        font-weight: 900;
+        font-size: 49px;
+        color: #4A4A4A;
+        max-width: 444px;
+        line-height: 1;
+        position: relative;
+
+        .code {
+          position: absolute;
+          left: -260px;
+          top: -55px;
+        }
+
+        span {
+          color: #A7CA60;
+        }
+      }
+
+      &__block {
+        backdrop-filter: blur(8.699999809265137px);
+        box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
+        background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(239, 239, 239, 0.34) 100%);
+        border: 0.5px solid;
+        border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);
+        border-radius: 8px;
+        padding: 59px 89px 68px 102px;
+        position: relative;
+        z-index: 1;
+
+        p {
+          font-weight: 250;
+          font-size: 14px;
+          line-height: 137%;
+          color: #4a4a4a;
+
+          span {
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  &__background {
+    position: absolute;
+    right: -200px;
+    top: -100px;
+    h3 {
+      font-family: 'Geraspoheko';
+      color: rgba(255, 255, 255, 1);
+      font-size: 343px;
+      font-weight: 400;
+      margin-bottom: 0;
+    }
+    .clue {
+      width: 130px;
+      height: 120px;
+      top: 165px;
+      position: absolute;
+      right: 147px;
+    }
+
+    .code {
+      position: absolute;
+      width: 360px;
+      height: 134px;
+      right: -110px;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 82px;
+      height: 82px;
+      border-radius: 50px;
+      background: rgba(167, 202, 96, 0.8);
+      right: 160px;
+      bottom: -75px;
+    }
+  }
+
+  &__opportunities {
+    margin: 120px 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  }
+
+  &__opportunity {
+    padding: 40px 60px;
+
+    p {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 107%;
+      color: rgba(131, 131, 131, 1);
+    }
+  }
+
+  &__opportunity:nth-child(-n+3) {
+    border-bottom: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(-n+2) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(4) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(5) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  .outstaffing__employees {
+    padding: 16px 12px 14px 2px;
+    border-right: 1px solid rgba(245, 245, 245, 1);
+    border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+    div {
+      display: flex;
+      background: linear-gradient(95.54deg, #FFFFFF 5.13%, #EEEEEE 97.48%);
+      border-radius: 5px;
+      padding: 24px 0px 25px 33px;
+      height: 100%;
+      align-items: center;
+      position: relative;
+
+      p {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 21.4px;
+        color: rgba(74, 74, 74, 1);
+        max-width: 135px;
+
+        span {
+          color: rgba(167, 202, 96, 1);
+        }
+      }
+    }
+
+    img {
+      position: absolute;
+      right: -50px;
+      bottom: -15px;
+    }
+  }
+
+  .outstaffing__offers {
+    padding: 10px 0 25px 10px;
+
+    div {
+      display: flex;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 5px;
+      height: 91px;
+      padding: 24px 35px 24px 42px;
+      align-items: center;
+      justify-content: space-between;
+
+      p {
+        color: rgba(167, 202, 96, 1);
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 21.4px;
+        max-width: 215px;
+      }
+
+      img {
+        width: 27px;
+        height: 15px;
+      }
+    }
+  }
+}

src/pages/Stack/Stack.jsx

@@ -0,0 +1,133 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
+
+import Ellipse from "assets/images/EllipseIntro.svg";
+import backgroundOpp from "assets/images/backgroundOpportunity.png";
+import cat from "assets/images/cat.png";
+import clue from "assets/images/clue.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>
+  );
+};

src/pages/Stack/stack.scss

@@ -0,0 +1,331 @@
+.stack {
+  font-family: "GT Eesti Pro Display";
+
+  &__container {
+    margin: 0 auto;
+    padding: 85px 0 90px;
+    max-width: 1020px;
+    position: relative;
+    display: flex;
+  }
+  &__intro {
+    background: #EEEEEE;
+
+    .intro {
+      &__container {
+        background-image: url("../../assets/images/backgroundLandingIntro.svg");
+        background-repeat: no-repeat;
+        background-position: center bottom;
+      }
+      &__info {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        z-index: 2;
+      }
+
+      &__suptitle {
+        font-weight: 700;
+        font-size: 16px;
+        color: #838383;
+      }
+
+      &__title {
+        font-weight: 900;
+        color: #A7CA60;
+        font-size: 88px;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        margin: 39px 0 6px;
+        z-index: 2;
+      }
+
+      &__subtitle {
+        letter-spacing: 0.05em;
+        font-size: 39px;
+        font-weight: 700;
+        color: #4A4A4A;
+      }
+
+      &__about {
+        max-width: 380px;
+        color: #4A4A4A;
+        font-size: 14px;
+        font-weight: 250;
+        margin-bottom: 34px;
+
+        span {
+          font-weight: 400;
+        }
+      }
+
+      &__links {
+        display: flex;
+        column-gap: 30px;
+        align-items: center;
+      }
+
+      &__link {
+        font-weight: 700;
+        font-size: 12px;
+        color: #A7CA60;
+      }
+
+      &__ellipse {
+        z-index: 1;
+        top: 45%;
+        left:50%;
+        transform:translate(-50%, -50%);
+        position: absolute;
+      }
+
+      &__aside {
+        position: relative;
+        border-radius: 24px 0 113px 0;
+        top: 55px;
+        width: 330px;
+        height: 517px;
+        background: rgba(167, 202, 96, 0.7);
+        margin-left: 96px;
+        z-index: 1;
+
+        &:before {
+          content: "";
+          width: 182px;
+          height: 106px;
+          position: absolute;
+          backdrop-filter: blur(8.699999809265137px);
+          box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+          background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%);
+          border-radius: 8px;
+          top: -35px;
+          left: -25px;
+          z-index: 3;
+        }
+
+        .aside {
+          &__logo {
+            z-index: 2;
+            font-family: 'Geraspoheko';
+            color: white;
+            font-size: 343px;
+            position: absolute;
+            line-height: 325.92px;
+            left: 80px;
+            top: -30px;
+          }
+
+          &__clue {
+            position: absolute;
+            backdrop-filter: blur(8.699999809265137px);
+            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
+            background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%);
+            border-radius: 8px;
+            width: 182px;
+            height: 106px;
+            bottom: 35px;
+            right: -140px;
+            z-index: 2;
+            display: flex;
+            padding: 24px 20px 18px 30px;
+            border: 0.5px solid;
+            border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);
+
+            p {
+              color: rgba(141, 141, 141, 1);
+              font-size: 14px;
+              font-weight: 300;
+              letter-spacing: 0.03em;
+              line-height: 15.96px;
+
+              span {
+                font-weight: 700;
+              }
+            }
+
+            img {
+              position: absolute;
+              top: -25px;
+              left: 0 ;
+            }
+
+            &:before {
+              position: absolute;
+              content: "Подсказка";
+              font-weight: 700;
+              color: rgba(205, 205, 205, 1);
+              font-size: 14px;
+              line-height: 19.18px;
+              letter-spacing: 0.03em;
+              top: -22px;
+              right: 10px;
+            }
+          }
+
+          &__cat {
+            position: absolute;
+            z-index: 3;
+            bottom: 0;
+            left: -125px;
+          }
+        }
+      }
+    }
+  }
+
+  &__button {
+    max-width: 200px;
+    width: 100%;
+    background: #A7CA60;
+    font-size: 15px;
+    color: #4A4A4A;
+    padding: 14px 0;
+    border-radius: 44px;
+    border: none;
+  }
+
+  &__opportunity {
+    background: #1E1E1E;
+    position: relative;
+
+    .background__opportunity--left {
+      position: absolute;
+      top: -50%;
+      left: -5%;
+    }
+
+    .background__opportunity--right {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+
+    .opportunity {
+
+      &__container {
+        padding: 105px 0 0px;
+        flex-direction: column;
+      }
+
+      &__code {
+        position: absolute;
+        top: 35px;
+        left: 55px;
+
+        &--center {
+          position: absolute;
+          right: 31%;
+          top: 34%;
+        }
+      }
+
+      &__block {
+        display: flex;
+      }
+      &__title {
+        font-family: 'Geraspoheko';
+        font-weight: 400;
+        font-size: 343px;
+        line-height: 1.03;
+        margin-bottom: 0;
+        z-index: 2;
+        background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        margin-left: 15px;
+        .info {
+          &__subtitle {
+            padding-left: 31px;
+            color: rgba(167, 202, 96, 1);
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 16.24px;
+            margin-bottom: 30px;
+          }
+
+          &__about {
+            padding-left: 31px;
+            font-size: 14px;
+            color: rgba(238, 238, 238, 1);
+            line-height: 19.18px;
+            font-weight: 250;
+            max-width: 355px;
+            margin-bottom: 27px;
+
+            span {
+              font-weight: 400;
+            }
+          }
+
+          &__notification {
+            padding: 21px 19px 23px 31px;
+            border-radius: 8px;
+            backdrop-filter: blur(8.699999809265137px);
+            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+            background: linear-gradient(137deg, rgba(87, 87, 87, 0.34) 0%, rgba(104, 104, 104, 0.34) 100%);
+            position: relative;
+            border: 0.5px solid #717171;
+
+            img {
+              position: absolute;
+              width: 80.93px;
+              height: 74.19px;
+              left: -68px;
+              top: -10px;
+            }
+
+            p {
+              color: rgba(238, 238, 238, 1);
+              line-height: 19.18px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      &__subjects {
+        display: flex;
+        column-gap: 100px;
+        position: relative;
+        top: -100px;
+        z-index: 3;
+        right: -35px;
+
+        .subject {
+          display: flex;
+          flex-direction: column;
+
+          h4 {
+            color: rgba(167, 202, 96, 1);
+            letter-spacing: 0.03em;
+            font-weight: 900;
+            font-size: 88px;
+            line-height: 86.58px;
+            margin-bottom: 0;
+          }
+
+          &__skills {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 14px;
+            margin-top: 20px;
+
+            span {
+              border: 0.5px solid rgba(167, 202, 96, 0.5);
+              border-radius: 56px;
+              padding: 8px 25px 8px;
+              color: rgba(167, 202, 96, 1);
+              font-size: 17px;
+              line-height: 20.88px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/roles/GuestPage.jsx

@@ -10,10 +10,12 @@ import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
 import { Forms } from "@pages/Forms/Forms";
 import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
 import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
+import { Landing } from "@pages/Landing/Landing";
 import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
 import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
 import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
 import { SingleReportPage } from "@pages/SingleReportPage/SingleReportPage";
+import { Stack } from "@pages/Stack/Stack";
 import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro";
 import { WelcomePage } from "@pages/WelcomePage/WelcomePage";
 
@@ -24,6 +26,8 @@ export const GuestPage = () => {
     <Routes>
       <Route exact path="/auth" element={<Auth />} />
       <Route exact path="/welcome-page" element={<WelcomePage />} />
+      <Route exact path="/stack" element={<Stack />} />
+      <Route exact path="/" element={<Landing />} />
       <Route path="*" element={<Navigate to="/auth" replace />} />
       <Route exact path="/tracker-intro" element={<TrackerIntro />} />
       <Route exact path="/forms" element={<Forms />} />