LandingTracker adaptive

src/pages/LandingTracker/LandingTracker.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link, NavLink } from "react-router-dom";
 
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 
 import arrow from "assets/icons/arrows/arrowLanding.svg";
@@ -79,6 +80,7 @@ export const LandingTracker = () => {
 
   return (
     <section className="tracker">
+      <AuthHeader />
       <section className="tracker__intro">
         <img className="intro__question-mark" src={questionMark} alt="" />
         <img className="intro__code" src={code} alt="" />
@@ -125,7 +127,7 @@ export const LandingTracker = () => {
               <Link to="/auth">войти</Link>
             </button>
             <button className="signUp">
-              <Link to="/auth">регистрация</Link>
+              <Link to="/auth">авторизация</Link>
             </button>
           </div>
           <div className="presentation__tracker-preview">
@@ -200,7 +202,7 @@ export const LandingTracker = () => {
                 <Link to="/auth">войти</Link>
               </button>
               <button className="signUp">
-                <Link to="/auth">регистрация</Link>
+                <Link to="/auth">авторизация</Link>
               </button>
             </div>
           </div>
@@ -210,6 +212,14 @@ export const LandingTracker = () => {
             </h3>
             <img className="invite__logo__sign" src={trackerSign} alt="" />
             <img className="invite__logo__ellipse" src={ellipseGreen} alt="" />
+            <div className="invite-auth__buttons">
+              <button className="signUp-modile">
+                <Link to="/auth">авторизация</Link>
+              </button>
+              <button className="signIn-modile">
+                <Link to="/auth">войти</Link>
+              </button>
+            </div>
           </div>
         </div>
       </section>

src/pages/LandingTracker/LandingTracker.scss

@@ -1,6 +1,31 @@
 .tracker {
   font-family: "GT Eesti Pro Display";
 
+  // section:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(
+  //     :nth-child(5)
+  //   ):not(:nth-child(6)) {
+  //   display: none;
+  // }
+
+  .auth-header {
+    display: none;
+
+    @media (max-width: 431px) {
+      display: flex;
+      background-color: #a7ca60;
+    }
+
+    .burger__line {
+      background-color: #4a4a4a;
+    }
+
+    .auth__buttons {
+      .signIn {
+        background-color: #eeeeee;
+      }
+    }
+  }
+
   &__container {
     margin: 0 auto;
     // padding: 85px 0 90px;
@@ -12,22 +37,39 @@
     background-color: #a7ca60;
     position: relative;
 
+    @media (max-width: 431px) {
+      height: 485px;
+      overflow: hidden;
+    }
+
     .intro {
       &__question-mark {
         position: absolute;
         right: 15%;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
       &__code {
         position: absolute;
         mix-blend-mode: plus-lighter;
         bottom: 96px;
         left: 16%;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
       &__code--top {
         position: absolute;
         mix-blend-mode: plus-lighter;
         top: 20px;
         left: 38%;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
 
       &__container {
@@ -37,6 +79,9 @@
         overflow: hidden;
 
         @media (max-width: 431px) {
+          flex-direction: column-reverse;
+          align-items: center;
+          height: auto;
         }
       }
 
@@ -51,6 +96,10 @@
           font-size: 343px;
           font-weight: 400;
           line-height: 325.92px;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
         }
 
         &__cup {
@@ -58,6 +107,17 @@
           bottom: -85px;
           right: -150px;
 
+          @media (max-width: 431px) {
+            position: static;
+            margin: -90px 0 0 0;
+          }
+
+          img {
+            @media (max-width: 431px) {
+              height: 350px;
+            }
+          }
+
           &::before {
             content: "Не нужно заваривать мышь";
             display: flex;
@@ -82,6 +142,12 @@
             line-height: 19.72px;
             letter-spacing: 0.01em;
             text-align: center;
+
+            @media (max-width: 431px) {
+              width: 125px;
+              height: 106px;
+              left: 170px;
+            }
           }
         }
       }
@@ -92,9 +158,17 @@
         color: #607536;
         max-width: 455px;
 
+        @media (max-width: 431px) {
+          margin: 0 20px;
+        }
+
         &__sublogo {
           margin-top: 37px;
 
+          @media (max-width: 431px) {
+            display: none;
+          }
+
           h5 {
             font-size: 29px;
             font-weight: 900;
@@ -122,6 +196,13 @@
           line-height: 37.29px;
           letter-spacing: 0.01em;
           margin: 101px 0 34px 0;
+
+          @media (max-width: 431px) {
+            font-size: 29px;
+            line-height: 32.77px;
+            text-align: center;
+            margin: 21px 0 26px 0;
+          }
         }
 
         p {
@@ -129,6 +210,12 @@
           font-weight: 500;
           line-height: 37.29px;
           letter-spacing: 0.01em;
+
+          @media (max-width: 431px) {
+            font-size: 25px;
+            line-height: 28.25px;
+            text-align: center;
+          }
         }
       }
     }
@@ -144,12 +231,20 @@
         mix-blend-mode: plus-lighter;
         bottom: 225px;
         right: 18%;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
       &__code--top {
         position: absolute;
         mix-blend-mode: plus-lighter;
         top: 60px;
         left: 25%;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
       &__ellipse {
         position: absolute;
@@ -158,6 +253,10 @@
         top: -90px;
         left: 50%;
         transform: translate(-50%);
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
 
       &__container {
@@ -170,6 +269,7 @@
         z-index: 2;
 
         @media (max-width: 431px) {
+          height: 660px;
         }
 
         h5 {
@@ -178,6 +278,13 @@
           font-weight: 700;
           line-height: 38.28px;
           margin-top: 95px;
+
+          @media (max-width: 431px) {
+            font-size: 19px;
+            line-height: 22.04px;
+            text-align: center;
+            margin-top: 37px;
+          }
         }
 
         h4 {
@@ -187,6 +294,13 @@
           font-weight: 900;
           line-height: 119.48px;
           margin-top: 9px;
+
+          @media (max-width: 431px) {
+            font-size: 50px;
+            font-weight: 900;
+            line-height: 58px;
+            text-align: center;
+          }
         }
 
         p {
@@ -198,6 +312,13 @@
           max-width: 609px;
           margin-bottom: 52px;
 
+          @media (max-width: 431px) {
+            font-size: 15px;
+            line-height: 17.4px;
+            text-align: center;
+            max-width: 370px;
+          }
+
           span {
             font-weight: 700;
           }
@@ -208,6 +329,10 @@
         display: flex;
         column-gap: 29px;
 
+        @media (max-width: 431px) {
+          column-gap: 12px;
+        }
+
         button {
           width: 185px;
           height: 45px;
@@ -238,6 +363,13 @@
         margin-top: 61px;
         position: relative;
 
+        @media (max-width: 431px) {
+          margin-top: 37px;
+          overflow: hidden;
+          height: 315px;
+          left: 150px;
+        }
+
         .tracker-preview {
           &__buttons {
             display: flex;
@@ -278,12 +410,24 @@
         left: 21%;
         z-index: 2;
 
+        @media (max-width: 431px) {
+          width: 255px;
+          height: 102px;
+          left: -22.26px;
+          border-radius: 24px 0px 44px 0px;
+          padding: 25px 0 0 60px;
+        }
+
         span {
           font-size: 26px;
           font-weight: 900;
           line-height: 28.34px;
           letter-spacing: 0.03em;
           text-align: left;
+
+          @media (max-width: 431px) {
+            max-width: 174px;
+          }
         }
 
         p {
@@ -291,6 +435,10 @@
           font-weight: 300;
           line-height: 19.65px;
           text-align: left;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
         }
       }
     }
@@ -307,6 +455,10 @@
         bottom: -96px;
         left: 7%;
         z-index: 1;
+
+        @media (max-width: 431px) {
+          display: none;
+        }
       }
 
       &__container {
@@ -315,6 +467,11 @@
         height: 720px;
         text-align: center;
         align-items: center;
+
+        @media (max-width: 431px) {
+          height: 1020px;
+          overflow: hidden;
+        }
       }
 
       &-head {
@@ -333,6 +490,13 @@
           filter: drop-shadow(7px 0px 10px rgba(0, 0, 0, 0.1294117647));
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
+
+          @media (max-width: 431px) {
+            font-size: 110px;
+            line-height: 110px;
+            letter-spacing: 0.01em;
+            margin-top: 20px;
+          }
         }
 
         &__info {
@@ -345,6 +509,11 @@
           letter-spacing: 0.02em;
           color: #eeeeee;
 
+          @media (max-width: 431px) {
+            bottom: -55px;
+            max-width: 372px;
+          }
+
           span {
             font-weight: 700;
           }
@@ -358,9 +527,10 @@
         column-gap: 48px;
 
         @media (max-width: 431px) {
-          flex-direction: column;
+          display: grid;
+          grid-template-columns: 1fr 1fr;
           row-gap: 86px;
-          margin-top: 65px;
+          margin-top: 95px;
         }
 
         .item {
@@ -369,9 +539,17 @@
 
             &:nth-child(2) {
               margin-right: 41px;
+
+              @media (max-width: 431px) {
+                margin: 0;
+              }
             }
             &:nth-child(3) {
               margin-left: 41px;
+
+              @media (max-width: 431px) {
+                margin: 0;
+              }
             }
           }
 
@@ -397,8 +575,9 @@
               letter-spacing: 0.01em;
 
               @media (max-width: 431px) {
-                font-size: 14px;
+                font-size: 12px;
-                max-width: 124px;
+                font-weight: 700;
+                max-width: 107px;
                 text-align: left;
               }
             }
@@ -424,8 +603,8 @@
         border-radius: 8px;
 
         @media (max-width: 431px) {
-          width: 324px;
+          width: 200px;
-          height: 153px;
+          height: 205px;
         }
 
         .item {
@@ -471,15 +650,33 @@
         height: 582px;
         overflow: hidden;
         column-gap: 133px;
+
+        @media (max-width: 431px) {
+          height: auto;
+          padding-top: 35px;
+          display: flex;
+          flex-direction: column;
+        }
       }
 
       &__info {
         max-width: 541px;
+
+        @media (max-width: 431px) {
+          max-width: 377px;
+          margin: 0 auto;
+        }
+
         h5 {
           color: #607536;
           font-size: 44px;
           font-weight: 700;
           line-height: 51.04px;
+
+          @media (max-width: 431px) {
+            font-size: 29px;
+            line-height: 33.64px;
+          }
         }
 
         p {
@@ -489,6 +686,10 @@
           font-weight: 300;
           line-height: 19.72px;
 
+          @media (max-width: 431px) {
+            margin: 30px 0 22px 0;
+          }
+
           span {
             font-weight: 700;
           }
@@ -499,6 +700,11 @@
         display: flex;
         column-gap: 29px;
 
+        @media (max-width: 431px) {
+          flex-direction: column;
+          row-gap: 22px;
+        }
+
         button {
           width: 185px;
           height: 45px;
@@ -514,6 +720,18 @@
           }
           background-color: #ffffff;
           border: none;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
+
+          &-modile {
+            a {
+              color: #607536;
+            }
+            background-color: #ffffff;
+            border: none;
+          }
         }
 
         .signUp {
@@ -522,6 +740,18 @@
           }
           border: 1px solid #ffffff;
           background: none;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
+
+          &-modile {
+            a {
+              color: #ffffff;
+            }
+            border: 1px solid #ffffff;
+            background: none;
+          }
         }
       }
 
@@ -531,6 +761,12 @@
         position: relative;
         align-items: center;
 
+        @media (max-width: 431px) {
+          flex-direction: row;
+          padding-left: 18px;
+          column-gap: 18px;
+        }
+
         h3 {
           color: #ffffff;
           font-family: "Geraspoheko";
@@ -539,6 +775,13 @@
           line-height: 325.92px;
           z-index: 3;
           position: relative;
+
+          @media (max-width: 431px) {
+            font-size: 140px;
+            font-weight: 400;
+            line-height: 140px;
+            z-index: 2;
+          }
         }
 
         &__sign {
@@ -546,6 +789,12 @@
           z-index: 2;
           left: -180px;
           top: 70px;
+
+          @media (max-width: 431px) {
+            width: 90px;
+            left: -40px;
+            top: 50px;
+          }
         }
 
         &__ellipse {
@@ -553,6 +802,11 @@
           width: 463px;
           height: 563px;
           z-index: 1;
+
+          @media (max-width: 431px) {
+            width: 220px;
+            height: 220px;
+          }
         }
       }
     }
@@ -576,6 +830,10 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
+        @media (max-width: 431px) {
+          height: 1170px;
+        }
       }
 
       &__project {
@@ -587,6 +845,15 @@
         border-radius: 8px;
         border: 1px solid #f8f8f8;
 
+        @media (max-width: 431px) {
+          align-items: normal;
+          flex-direction: column;
+          row-gap: 32px;
+          height: 266px;
+          max-width: 397px;
+          padding: 32px 30px;
+        }
+
         .project__img {
           border-radius: 8px;
           width: 99px;
@@ -625,6 +892,11 @@
         letter-spacing: 0.03em;
         text-align: center;
         margin: 42px 0 77px 0;
+
+        @media (max-width: 431px) {
+          font-size: 19px;
+          line-height: 22.04px;
+        }
       }
 
       &__opportunities {
@@ -654,6 +926,8 @@
         @media (max-width: 431px) {
           padding: 0;
           width: 40%;
+          height: auto;
+          display: block;
 
           div {
             display: flex;
@@ -668,6 +942,7 @@
             border: 0.5px solid #ffffff;
             border-radius: 18px;
             padding: 10px;
+            height: 221px;
           }
         }