Adaptive main page

src/pages/Landing/Landing.jsx

@@ -98,6 +98,9 @@ export const Landing = () => {
             <SVG className="code" src={codeBg} />
             <span>Экосистема</span> для диджитализации бизнеса
           </p>
+          <Link className="info__signIn" to="/auth">
+            войти в систему
+          </Link>
           <div className="landing__background">
             <h3>ITGuild</h3>
             <SVG className="clue" src={clue} />

src/pages/Landing/landing.scss

@@ -11,6 +11,7 @@
     flex-direction: column;
     position: relative;
     height: 100%;
+    width: 100%;
   }
 
   &__head {
@@ -248,6 +249,12 @@
     margin-top: 75px;
     column-gap: 45px;
 
+    @media (max-width: 431px) {
+      margin-top: 217px;
+      justify-content: center;
+      flex-direction: column;
+    }
+
     .info {
       &__title {
         font-weight: 900;
@@ -257,6 +264,14 @@
         line-height: 1;
         position: relative;
 
+        @media (max-width: 431px) {
+          font-weight: 900;
+          font-size: 42px;
+          line-height: 46.62px;
+          text-align: center;
+          z-index: 2;
+        }
+
         .code {
           position: absolute;
           left: -260px;
@@ -268,6 +283,16 @@
         }
       }
 
+      &__signIn {
+        padding: 12px 30px 15px;
+        color: rgba(30, 30, 30, 1);
+        font-size: 13px;
+        background: rgba(167, 202, 96, 1);
+        font-weight: 400;
+        border-radius: 32px;
+        margin-top: 45px;
+      }
+
       &__block {
         backdrop-filter: blur(8.699999809265137px);
         box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
@@ -287,33 +312,65 @@
         position: relative;
         z-index: 1;
 
+        @media (max-width: 431px) {
+          backdrop-filter: none;
+          box-shadow: none;
+          background: none;
+          border: none;
+          border-image-source: none;
+          // border-radius: none;
+          padding: 46px 40px 63px 40px;
+          text-align: center;
+        }
+
         p {
           font-weight: 250;
           font-size: 14px;
           line-height: 137%;
           color: #4a4a4a;
 
+          @media (max-width: 431px) {
+            font-size: 17px;
+            line-height: 23.29px;
+          }
+
           span {
             font-weight: 400;
           }
         }
       }
     }
-    @media (max-width: 431px) {
-      display: none;
-    }
   }
 
   &__background {
     position: absolute;
     right: -200px;
     top: -100px;
+
+    @media (max-width: 431px) {
+      right: auto;
+      top: 100px;
+      display: flex;
+      justify-content: center;
+    }
+
     h3 {
       font-family: "Geraspoheko";
       color: rgba(255, 255, 255, 1);
       font-size: 343px;
       font-weight: 400;
       margin-bottom: 0;
+
+      @media (max-width: 431px) {
+        font-size: 180px;
+        font-weight: 700;
+        z-index: 1;
+        background: linear-gradient(to bottom, #fffefe, #eeeeee);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        letter-spacing: 2px;
+      }
     }
     .clue {
       width: 130px;
@@ -321,6 +378,13 @@
       top: 165px;
       position: absolute;
       right: 147px;
+
+      @media (max-width: 431px) {
+        right: auto;
+        top: auto;
+        bottom: -150px;
+        left: -105px;
+      }
     }
 
     .code {
@@ -328,6 +392,12 @@
       width: 360px;
       height: 134px;
       right: -5px;
+
+      @media (max-width: 431px) {
+        right: auto;
+        top: -30px;
+        left: -30px;
+      }
     }
 
     &:after {
@@ -339,15 +409,11 @@
       background: rgba(167, 202, 96, 0.8);
       right: 160px;
       bottom: -75px;
-    }
 
-    @media (max-width: 431px) {
+      @media (max-width: 431px) {
-      right: 0px;
+        right: auto;
-      top: 0px;
+        bottom: auto;
-
+        top: -25px;
-      h3 {
-        font-size: 180px;
-        font-weight: 700;
       }
     }
   }
@@ -358,12 +424,14 @@
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 
     @media (max-width: 431px) {
-      grid-template-columns: 50% 50%;
+      display: flex;
-      padding: 0 40px;
+      flex-direction: row;
-      column-gap: 30px;
+      flex-wrap: wrap;
+      justify-content: center;
+      column-gap: 20px;
       row-gap: 19px;
-      align-items: center;
+      width: 100%;
-      justify-items: center;
+      margin: 0 0 86px 0;
     }
   }
 
@@ -372,15 +440,17 @@
 
     @media (max-width: 431px) {
       padding: 0;
+      width: 40%;
 
       div {
         display: flex;
         justify-content: center;
         flex-direction: column;
         align-items: center;
-        background-color: #4a4a4a;
+        background: linear-gradient(95.54deg, #ffffff 5.13%, #f1f1f1 97.48%);
+        border: 0.5px solid #ffffff;
         border-radius: 18px;
-        padding: 30px 10px 5px 10px;
+        padding: 10px;
       }
     }
 
@@ -468,6 +538,7 @@
 
     @media (max-width: 431px) {
       padding: 0;
+      width: 40%;
     }
 
     div {
@@ -480,8 +551,12 @@
       justify-content: space-between;
 
       @media (max-width: 431px) {
-        height: 262px;
+        height: 100%;
         padding: 0;
+        flex-direction: column;
+        justify-content: space-evenly;
+        border-radius: 18px;
+        border: 0.5px solid #ffffff;
       }
 
       p {
@@ -490,6 +565,13 @@
         font-size: 20px;
         line-height: 21.4px;
         max-width: 215px;
+
+        @media (max-width: 431px) {
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 17.12px;
+          text-align: center;
+        }
       }
 
       img {