stack

src/pages/Stack/Stack.jsx

@@ -6,10 +6,22 @@ import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 import Ellipse from "assets/images/EllipseIntro.svg";
 import cat from "assets/images/cat.png";
 import clue from "assets/images/clue.png";
+import backgroundOpp from "assets/images/backgroundOpportunity.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 />
@@ -54,7 +66,44 @@ export const Stack = () => {
         </div>
       </section>
       <section className="stack__opportunity">
-        <div className="stack__container"></div>
+        <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

@@ -37,6 +37,7 @@
         text-transform: uppercase;
         letter-spacing: 0.03em;
         margin: 39px 0 6px;
+        z-index: 2;
       }
 
       &__subtitle {
@@ -72,7 +73,7 @@
 
       &__ellipse {
         z-index: 1;
-        top: 65%;
+        top: 45%;
         left:50%;
         transform:translate(-50%, -50%);
         position: absolute;
@@ -185,5 +186,146 @@
 
   &__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;
+            }
+          }
+        }
+      }
+    }
   }
 }