stack projects

src/pages/Landing/Landing.jsx

@@ -7,8 +7,6 @@ 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";
 

src/pages/Stack/Stack.jsx

@@ -43,6 +43,25 @@ export const Stack = () => {
       ]
     }
   ];
+
+  const projects = [
+    {
+      description:
+        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>"
+    },
+    {
+      description:
+        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации."
+    },
+    {
+      description:
+        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов."
+    },
+    {
+      description:
+        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары."
+    }
+  ];
   return (
     <section className="stack">
       <AuthHeader />
@@ -128,6 +147,37 @@ export const Stack = () => {
           </div>
         </div>
       </section>
+      <section className="stack__projects projects">
+        <div className="stack__container projects__container">
+          <img className="projects__code" src={code} alt="code" />
+          <h3 className="projects__title">ITGUILD</h3>
+          <div className="projects__block">
+            <h4>Наши проекты</h4>
+            <div className="projects__examples">
+              {projects.map((project, index) => {
+                return (
+                  <div key={index} className="stack__project">
+                    <span className="project__img"></span>
+                    <p
+                      dangerouslySetInnerHTML={{ __html: project.description }}
+                    ></p>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="projects__info">
+              <p>
+                Мы обеспечиваем финансовые, юридические и кадровые гарантии,
+                предоставляем SLA и берем на себя ответственность за работу
+                команды. Вам не требуется заниматься поиском, оформлением или
+                увольнением сотрудников —{" "}
+                <span>мы берем на себя все хлопоты.</span>
+              </p>
+              <button>оставить заявку</button>
+            </div>
+          </div>
+        </div>
+      </section>
     </section>
   );
 };

src/pages/Stack/stack.scss

@@ -196,7 +196,7 @@
 
     .background__opportunity--right {
       position: absolute;
-      bottom: 0;
+      bottom: -361px;
       right: 0;
     }
 
@@ -328,4 +328,113 @@
       }
     }
   }
+
+  &__projects {
+    background: rgba(238, 238, 238, 1);
+
+    .projects {
+      &__container {
+        padding-top: 190px;
+        padding-bottom: 81px;
+      }
+
+      &__code {
+        position: absolute;
+        left: -170px;
+        top: 24px;
+      }
+
+      &__title {
+        font-weight: 400;
+        font-size: 343px;
+        color: white;
+        font-family: "Geraspoheko";
+        margin: 0 auto;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: -50px;
+        z-index: 2;
+      }
+
+      &__block {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+        z-index: 3;
+        h4 {
+          font-weight: 900;
+          font-size: 46px;
+          line-height: 98%;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          color: #4a4a4a;
+        }
+      }
+
+      &__examples {
+        display: flex;
+        margin-top: 98px;
+        justify-content: space-between;
+        width: 100%;
+
+        .stack__project {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          row-gap: 35px;
+
+          .project__img {
+            border-radius: 8px;
+            width: 99px;
+            height: 81px;
+            background: #d9d9d9;
+          }
+
+          p {
+            font-weight: 250;
+            font-size: 14px;
+            line-height: 129%;
+            text-align: center;
+            color: #4a4a4a;
+            max-width: 226px;
+
+            span {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      &__info {
+        display: flex;
+        margin: 85px auto 0;
+        column-gap: 66px;
+        align-items: center;
+
+        p {
+          max-width: 633px;
+          font-weight: 250;
+          font-size: 14px;
+          line-height: 129%;
+          color: #4a4a4a;
+
+          span {
+            font-weight: 500;
+          }
+        }
+
+        button {
+          padding: 15px 43px;
+          font-weight: 700;
+          font-size: 15px;
+          color: #4a4a4a;
+          background: #a7ca60;
+          border-radius: 44px;
+          border: none;
+        }
+      }
+    }
+  }
 }