src/pages/Stack/Stack.jsx

@@ -8,11 +8,6 @@ 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";
 
@@ -52,46 +47,19 @@ export const Stack = () => {
   const projects = [
     {
       description:
-        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
-      img: flag,
-      name: "flag"
+        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>"
     },
     {
       description:
-        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
-      img: rabota,
-      name: "rabota"
+        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации."
     },
     {
       description:
-        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов.",
-      img: hand,
-      name: hand
+        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов."
     },
     {
       description:
-        "Новостной портал и удобный каталог компаний <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"
+        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары."
     }
   ];
   return (
@@ -189,13 +157,7 @@ export const Stack = () => {
               {projects.map((project, index) => {
                 return (
                   <div key={index} className="stack__project">
-                    <span className="project__img">
-                      <img
-                        className={project.name}
-                        src={project.img}
-                        alt="img"
-                      />
-                    </span>
+                    <span className="project__img"></span>
                     <p
                       dangerouslySetInnerHTML={{ __html: project.description }}
                     ></p>
@@ -205,10 +167,10 @@ export const Stack = () => {
             </div>
             <div className="projects__info">
               <p>
-                <span>Мы обеспечиваем</span> финансовые, юридические и кадровые
-                гарантии, предоставляем SLA и берем на себя ответственность за
-                работу команды. Вам не требуется заниматься поиском, оформлением
-                или увольнением сотрудников —{" "}
+                Мы обеспечиваем финансовые, юридические и кадровые гарантии,
+                предоставляем SLA и берем на себя ответственность за работу
+                команды. Вам не требуется заниматься поиском, оформлением или
+                увольнением сотрудников —{" "}
                 <span>мы берем на себя все хлопоты.</span>
               </p>
               <button>оставить заявку</button>
@@ -216,59 +178,6 @@ 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,31 +389,7 @@
             border-radius: 8px;
             width: 99px;
             height: 81px;
-            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;
-            }
+            background: #d9d9d9;
           }
 
           p {
@@ -433,15 +409,12 @@
 
       &__info {
         display: flex;
-        margin: 56px auto 0;
-        column-gap: 50px;
+        margin: 85px auto 0;
+        column-gap: 66px;
         align-items: center;
-        border: 1px solid #f8f8f8;
-        border-radius: 8px;
-        padding: 47px 91px 47px 55px;
 
         p {
-          max-width: 620px;
+          max-width: 633px;
           font-weight: 250;
           font-size: 14px;
           line-height: 129%;
@@ -460,156 +433,8 @@
           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;
-    }
-  }
 }