layout of the outstaffing page

src/pages/Stack/Stack.jsx

@@ -3,11 +3,15 @@ import SVG from "react-inlinesvg";
 
 import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 
+import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
+import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
 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 code1 from "assets/images/landingBackgroundCode1.png";
 import code from "assets/images/landingBackgroundCode.png";
+import reviewsImgMok from "assets/images/reviewsImgMok.png";
 import flag from "assets/images/stackProjectsFlag.png";
 import fly from "assets/images/stackProjectsFly.png";
 import hand from "assets/images/stackProjectsHand.png";
@@ -94,6 +98,7 @@ export const Stack = () => {
       info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
     }
   ];
+
   return (
     <section className="stack">
       <AuthHeader />
@@ -269,6 +274,70 @@ export const Stack = () => {
         </div>
         <img src={backgroundOpp} className="steps__background" />
       </section>
+      <section className="stack__reviews">
+        <div className="stack__container reviews__container">
+          <div className="reviews__info">
+            <div className="reviews__info-counter">375</div>
+            <span>Довольных клиентов</span>
+            <p>
+              Предоставляем на аутстаффинг frontend- и backend - разработчиков
+              уровня от junior до middle+
+            </p>
+            <p>
+              Можем сделать оценку проекта, ревью кода, составить коммерческое
+              предложение, рекомендации касаемо стека технологий и организации
+              архитектуры разрабатываемого проекта.
+            </p>
+          </div>
+
+          <div className="reviews__content">
+            <h4>Что о нас говорят</h4>
+            <div className="reviews__content-container">
+              <div className="review">
+                <div className="review__client">
+                  <img src={reviewsImgMok} alt="reviewsImgMok" />
+                  <span>Александр Гузеев</span>
+                  <p>Руководитель проекта ООО “ЭЛАР”</p>
+                </div>
+
+                <div className="review__comment">
+                  <p>
+                    Команда ITGUILD берется за решение широкого круга задач, не
+                    боясь при этом ни сжатых сроков, ни сложной специфики
+                    проектов, и успешно доводит их ло решения. <br />
+                    <br />
+                    Разаработчики Кирилла смогли не только усилить существующую
+                    команду разработки, став ее полноценной частью, но и
+                    привести в проект новые идеи, свои знания и опыт.
+                  </p>
+                </div>
+              </div>
+
+              <div className="reviews__content-buttons">
+                <button>
+                  <img src={arrowReviewsLeft} alt="" />
+                </button>
+                <button>
+                  <img src={arrowReviewsRight} alt="" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <img
+            className="reviews__code reviews__code--first"
+            src={code1}
+            alt="code"
+          />
+          <img
+            className="reviews__code reviews__code--second"
+            src={code1}
+            alt="code"
+          />
+        </div>
+      </section>
+      <section className="stack__contact">
+        <div className="stack__container contact__container"></div>
+      </section>
     </section>
   );
 };

src/pages/Stack/stack.scss

@@ -9,7 +9,7 @@
     display: flex;
   }
   &__intro {
-    background: #EEEEEE;
+    background: #eeeeee;
 
     .intro {
       &__container {
@@ -32,7 +32,7 @@
 
       &__title {
         font-weight: 900;
-        color: #A7CA60;
+        color: #a7ca60;
         font-size: 88px;
         text-transform: uppercase;
         letter-spacing: 0.03em;
@@ -44,12 +44,12 @@
         letter-spacing: 0.05em;
         font-size: 39px;
         font-weight: 700;
-        color: #4A4A4A;
+        color: #4a4a4a;
       }
 
       &__about {
         max-width: 380px;
-        color: #4A4A4A;
+        color: #4a4a4a;
         font-size: 14px;
         font-weight: 250;
         margin-bottom: 34px;
@@ -68,7 +68,7 @@
       &__link {
         font-weight: 700;
         font-size: 12px;
-        color: #A7CA60;
+        color: #a7ca60;
       }
 
       &__ellipse {
@@ -96,7 +96,11 @@
           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%);
+          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;
@@ -106,7 +110,7 @@
         .aside {
           &__logo {
             z-index: 2;
-            font-family: 'Geraspoheko';
+            font-family: "Geraspoheko";
             color: white;
             font-size: 343px;
             position: absolute;
@@ -119,7 +123,11 @@
             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%);
+            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;
@@ -129,7 +137,11 @@
             display: flex;
             padding: 24px 20px 18px 30px;
             border: 0.5px solid;
-            border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);
+            border-image-source: linear-gradient(
+              137.79deg,
+              #ffffff 9.15%,
+              #f4f4f4 76.22%
+            );
 
             p {
               color: rgba(141, 141, 141, 1);
@@ -176,16 +188,16 @@
   &__button {
     max-width: 200px;
     width: 100%;
-    background: #A7CA60;
+    background: #a7ca60;
     font-size: 15px;
-    color: #4A4A4A;
+    color: #4a4a4a;
     padding: 14px 0;
     border-radius: 44px;
     border: none;
   }
 
   &__opportunity {
-    background: #1E1E1E;
+    background: #1e1e1e;
     position: relative;
 
     .background__opportunity--left {
@@ -201,7 +213,6 @@
     }
 
     .opportunity {
-
       &__container {
         padding: 105px 0 0px;
         flex-direction: column;
@@ -223,7 +234,7 @@
         display: flex;
       }
       &__title {
-        font-family: 'Geraspoheko';
+        font-family: "Geraspoheko";
         font-weight: 400;
         font-size: 343px;
         line-height: 1.03;
@@ -231,7 +242,7 @@
         z-index: 2;
         background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%);
         -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent
+        -webkit-text-fill-color: transparent;
       }
 
       &__info {
@@ -267,7 +278,11 @@
             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%);
+            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;
 
@@ -301,6 +316,7 @@
           flex-direction: column;
 
           h4 {
+            text-transform: uppercase;
             color: rgba(167, 202, 96, 1);
             letter-spacing: 0.03em;
             font-weight: 900;
@@ -347,7 +363,10 @@
       &__title {
         font-weight: 400;
         font-size: 343px;
-        color: white;
+        background: linear-gradient(to bottom, #ffffff, #dbdbdb);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
         font-family: "Geraspoheko";
         margin: 0 auto;
         position: absolute;
@@ -355,6 +374,7 @@
         text-align: center;
         top: -50px;
         z-index: 2;
+        filter: drop-shadow(0px 0px 30px #00000021);
       }
 
       &__block {
@@ -389,7 +409,7 @@
             border-radius: 8px;
             width: 99px;
             height: 81px;
-            background: #A7CA60;
+            background: #a7ca60;
             position: relative;
 
             img {
@@ -475,7 +495,6 @@
     position: relative;
 
     .steps {
-
       &__container {
         flex-direction: column;
       }
@@ -558,14 +577,17 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        backdrop-filter: blur(8.6999998093px);
+        backdrop-filter: blur(3px);
         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%);
+        background: linear-gradient(
+          137deg,
+          rgba(87, 87, 87, 0.34) 0%,
+          rgba(104, 104, 104, 0.34) 100%
+        );
         border: 0.5px solid #717171;
         border-radius: 8px;
 
         .item {
-
           &__info {
             font-size: 15px;
             line-height: 131%;
@@ -612,4 +634,197 @@
       top: -260px;
     }
   }
+
+  &__reviews {
+    background-color: #eeeeee;
+
+    .reviews {
+      &__container {
+        align-items: center;
+        column-gap: 58px;
+        padding-bottom: 48px;
+      }
+
+      &__code {
+        position: absolute;
+        mix-blend-mode: plus-lighter;
+
+        &--first {
+          top: 90px;
+          left: -180px;
+        }
+
+        &--second {
+          bottom: 0;
+          left: 400px;
+        }
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        background-color: #a7ca60;
+        border-radius: 24px 0 113px 0;
+        padding: 50px 22px 64px 44px;
+        max-width: 311px;
+        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: 62px;
+          left: 200px;
+        }
+
+        &::after {
+          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;
+          bottom: -30px;
+          left: -100px;
+        }
+
+        &-counter {
+          color: #ffffff;
+          font-weight: 900;
+          font-size: 124px;
+          line-height: 122px;
+        }
+
+        span {
+          color: #ffffff;
+          font-weight: 900;
+          font-size: 29px;
+          line-height: 31.61px;
+          text-transform: uppercase;
+          margin-bottom: 28px;
+        }
+        p {
+          color: #607536;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 17.22px;
+
+          &:last-child {
+            color: #ffffff;
+            font-weight: 300;
+            font-size: 14px;
+            margin-top: 37px;
+          }
+        }
+      }
+
+      &__content {
+        margin: 0 0 45px 0;
+
+        h4 {
+          text-transform: uppercase;
+          color: #4a4a4a;
+          font-weight: 900;
+          font-size: 46px;
+          line-height: 45.26px;
+          margin-bottom: 24px;
+        }
+
+        &-container {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          column-gap: 20px;
+
+          .review {
+            display: grid;
+            grid-template-columns: 45% 55%;
+            align-items: center;
+            max-width: 517px;
+            padding: 35px;
+            border-radius: 8px;
+            border: 0.5px solid #ffffff;
+            background: linear-gradient(137deg, #ffffff -10%, #dddddd 100%);
+            box-shadow: inset;
+
+            &__client {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              text-align: center;
+              color: #7e7e7e;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 16.24px;
+              margin-right: 48px;
+
+              img {
+                width: 88px;
+                height: 88px;
+                border-radius: 100px;
+              }
+
+              span {
+                color: #1e1e1e;
+                font-weight: 500;
+                font-size: 17px;
+                line-height: 19.72px;
+                margin: 18px 0 16px 0;
+              }
+            }
+
+            &__comment {
+              color: #4a4a4a;
+              font-weight: 250;
+              font-size: 14px;
+              line-height: 17px;
+            }
+          }
+        }
+
+        &-buttons {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          button {
+            background-color: #ffffff;
+            width: 70px;
+            height: 64px;
+            border-radius: 5px;
+            border: none;
+          }
+
+          button:first-child {
+            margin-bottom: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  &__contact {
+    background-color: #1e1e1e;
+
+    .contact {
+      &__container {
+      }
+    }
+  }
 }