Merge pull request 'landing' (#33) from landing into main

Reviewed-on: #33

src/pages/Landing/Landing.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import SVG from "react-inlinesvg";
 import { Link } from "react-router-dom";
 
+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";
@@ -37,16 +39,7 @@ export const Landing = () => {
       img: arrow
     }
   ];
-  const socials = [
+
-    {
-      img: vk,
-      to: ""
-    },
-    {
-      img: telegram,
-      to: ""
-    }
-  ];
   return (
     <section className="landing">
       <div className="landing__container">
@@ -106,26 +99,7 @@ export const Landing = () => {
             );
           })}
         </div>
-        <div className="landing__footer">
+        <Footer />
-          <div className="footer__links">
-            <div className="footer__socials">
-              {socials.map((social, index) => {
-                return (
-                  <Link to={social.to} key={index}>
-                    <SVG src={social.img} />
-                  </Link>
-                );
-              })}
-            </div>
-            <Link className="footer__invite" to="/auth">
-              Присоединиться к команде
-            </Link>
-          </div>
-          <div className="footer__info">
-            <p>office@itguild.info</p>
-            <p>© 2024 - Outstaffing. Все права защищены</p>
-          </div>
-        </div>
       </div>
     </section>
   );

src/pages/Landing/landing.scss

@@ -1,6 +1,6 @@
 .landing {
   background: #EEEEEE;
-  height: 100vh;
+  min-height: 100vh;
   padding: 20px 0;
   font-family: "GT Eesti Pro Display";
 
@@ -151,7 +151,7 @@
   }
 
   &__opportunities {
-    margin-top: 120px;
+    margin: 120px 0;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
   }
@@ -243,46 +243,4 @@
       }
     }
   }
-
-  &__footer {
-    margin-top: auto;
-    display: flex;
-    justify-content: space-between;
-
-    .footer {
-      display: flex;
-      &__links {
-        display: flex;
-        column-gap: 23px;
-        align-items: center;
-      }
-
-      &__socials {
-        display: flex;
-        column-gap: 16px;
-      }
-
-      &__invite {
-        color: rgba(159, 159, 159, 1);
-        font-size: 12px;
-        line-height: 14px;
-        letter-spacing: 0.01em;
-        text-decoration: underline;
-      }
-
-      &__info {
-        display: flex;
-        column-gap: 100px;
-        align-items: center;
-        font-size: 12px;
-        line-height: 14px;
-        letter-spacing: 0.01em;
-        color: rgba(159, 159, 159, 1);
-
-        p:first-child {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
 }

src/pages/Stack/Stack.jsx

@@ -4,12 +4,45 @@ import SVG from "react-inlinesvg";
 import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 
 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 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 +87,46 @@ 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;
+            }
+          }
+        }
+      }
+    }
   }
 }