stack steps

src/pages/Stack/Stack.jsx

@@ -8,6 +8,11 @@ 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 flag from "assets/images/stackProjectsFlag.png";
+import fly from "assets/images/stackProjectsFly.png";
+import hand from "assets/images/stackProjectsHand.png";
+import rabota from "assets/images/stackProjectsRabota.png";
+import portfolio from "assets/images/stackSteptsPortfolio.png";
 
 import "./stack.scss";
 
@@ -47,19 +52,46 @@ export const Stack = () => {
   const projects = [
     {
       description:
-        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>"
+        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
+      img: flag,
+      name: "flag"
     },
     {
       description:
-        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации."
+        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
+      img: rabota,
+      name: "rabota"
     },
     {
       description:
-        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов."
+        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов.",
+      img: hand,
+      name: hand
     },
     {
       description:
-        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары."
+        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары.",
+      img: fly,
+      name: "fly"
+    }
+  ];
+
+  const steps = [
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
     }
   ];
   return (
@@ -157,7 +189,13 @@ export const Stack = () => {
               {projects.map((project, index) => {
                 return (
                   <div key={index} className="stack__project">
-                    <span className="project__img"></span>
+                    <span className="project__img">
+                      <img
+                        className={project.name}
+                        src={project.img}
+                        alt="img"
+                      />
+                    </span>
                     <p
                       dangerouslySetInnerHTML={{ __html: project.description }}
                     ></p>
@@ -167,10 +205,10 @@ export const Stack = () => {
             </div>
             <div className="projects__info">
               <p>
-                Мы обеспечиваем финансовые, юридические и кадровые гарантии,
+                <span>Мы обеспечиваем</span> финансовые, юридические и кадровые
-                предоставляем SLA и берем на себя ответственность за работу
+                гарантии, предоставляем SLA и берем на себя ответственность за
-                команды. Вам не требуется заниматься поиском, оформлением или
+                работу команды. Вам не требуется заниматься поиском, оформлением
-                увольнением сотрудников —{" "}
+                или увольнением сотрудников —{" "}
                 <span>мы берем на себя все хлопоты.</span>
               </p>
               <button>оставить заявку</button>
@@ -178,6 +216,59 @@ export const Stack = () => {
           </div>
         </div>
       </section>
+      <section className="stack__steps">
+        <div className="stack__container steps__container">
+          <div className="steps__head">
+            <h4>как это работает?</h4>
+            <div className="steps__info">
+              <p>
+                Аутстаффинг представляет собой специфическую модель найма
+                персонала, отличающуюся от аутсорсинга.
+              </p>
+              <p>
+                <span>
+                  В контексте аутстаффинга вы нанимаете специалистов в области
+                  ИТ,
+                </span>{" "}
+                оплачивая их по их конкретным навыкам, и берете на себя
+                организацию их работы.
+              </p>
+            </div>
+          </div>
+          <div className="steps__items">
+            {steps.map((step, index) => {
+              return (
+                <div key={index} className="item__wrapper">
+                  <div className="item__head">
+                    <h4>{`${index + 1}.`}</h4>
+                    <p>{step.miniInfo}</p>
+                  </div>
+                  <div className="steps__item" key={index}>
+                    <p
+                      className="item__info"
+                      dangerouslySetInnerHTML={{ __html: step.info }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="steps__portfolio">
+            <img src={portfolio} alt="portfolio" />
+          </div>
+          <img
+            className="steps__code steps__code--first"
+            src={code}
+            alt="code"
+          />
+          <img
+            className="steps__code steps__code--second"
+            src={code}
+            alt="code"
+          />
+        </div>
+        <img src={backgroundOpp} className="steps__background" />
+      </section>
     </section>
   );
 };

src/pages/Stack/stack.scss

@@ -389,7 +389,31 @@
             border-radius: 8px;
             width: 99px;
             height: 81px;
-            background: #d9d9d9;
+            background: #A7CA60;
+            position: relative;
+
+            img {
+              position: relative;
+            }
+
+            .flag {
+              bottom: 21px;
+              right: -10px;
+            }
+
+            .rabota {
+              top: -40px;
+              right: 25px;
+            }
+
+            .hand {
+              top: -45px;
+              left: -44px;
+            }
+
+            .fly {
+              top: -30px;
+            }
           }
 
           p {
@@ -409,12 +433,15 @@
 
       &__info {
         display: flex;
-        margin: 85px auto 0;
+        margin: 56px auto 0;
-        column-gap: 66px;
+        column-gap: 50px;
         align-items: center;
+        border: 1px solid #f8f8f8;
+        border-radius: 8px;
+        padding: 47px 91px 47px 55px;
 
         p {
-          max-width: 633px;
+          max-width: 620px;
           font-weight: 250;
           font-size: 14px;
           line-height: 129%;
@@ -433,8 +460,156 @@
           background: #a7ca60;
           border-radius: 44px;
           border: none;
+          max-height: 46px;
+          width: 201px;
+          display: flex;
+          align-items: center;
         }
       }
     }
   }
+
+  &__steps {
+    background: rgb(30, 30, 30);
+    padding: 90px 0 40px;
+    position: relative;
+
+    .steps {
+
+      &__container {
+        flex-direction: column;
+      }
+
+      &__head {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        h4 {
+          font-weight: 900;
+          font-size: 66px;
+          line-height: 98%;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          color: #a7ca60;
+          max-width: 380px;
+          margin-bottom: 0;
+        }
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        max-width: 499px;
+
+        p {
+          font-weight: 300;
+          font-size: 15px;
+          line-height: 140%;
+          color: #bdbdbd;
+        }
+
+        span {
+          font-weight: 700;
+        }
+      }
+
+      &__items {
+        margin-top: 115px;
+        display: flex;
+        justify-content: space-between;
+
+        .item {
+          &__wrapper {
+            position: relative;
+          }
+
+          &__head {
+            position: absolute;
+            display: flex;
+            color: #a7ca60;
+            top: -45px;
+            left: 20px;
+
+            h4 {
+              margin-bottom: 0;
+              font-weight: 700;
+              font-size: 100px;
+              text-transform: uppercase;
+              line-height: 0.8;
+            }
+
+            p {
+              font-weight: 700;
+              font-size: 12px;
+              letter-spacing: 0.01em;
+              color: #a7ca60;
+              max-width: 114px;
+            }
+          }
+        }
+      }
+
+      &__item {
+        position: relative;
+        width: 235px;
+        height: 153px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(8.6999998093px);
+        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%);
+        border: 0.5px solid #717171;
+        border-radius: 8px;
+
+        .item {
+
+          &__info {
+            font-size: 15px;
+            line-height: 131%;
+            text-align: center;
+            color: #fff;
+            font-weight: 250;
+            max-width: 160px;
+
+            span {
+              font-weight: 700;
+            }
+          }
+        }
+      }
+
+      &__portfolio {
+        width: 100%;
+        position: absolute;
+        bottom: -40px;
+        display: flex;
+
+        img {
+          margin: 0 auto;
+        }
+      }
+
+      &__code {
+        position: absolute;
+
+        &--first {
+          top: -40px;
+          left: 70px;
+        }
+
+        &--second {
+          bottom: -40px;
+          right: 0;
+        }
+      }
+    }
+    .steps__background {
+      position: absolute;
+      right: 0;
+      top: -260px;
+    }
+  }
 }