diff --git a/src/pages/LandingTracker/LandingTracker.jsx b/src/pages/LandingTracker/LandingTracker.jsx index e31fb2e9..97072749 100644 --- a/src/pages/LandingTracker/LandingTracker.jsx +++ b/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 (
+
@@ -125,7 +127,7 @@ export const LandingTracker = () => { войти
@@ -200,7 +202,7 @@ export const LandingTracker = () => { войти
@@ -210,6 +212,14 @@ export const LandingTracker = () => { +
+ + +
diff --git a/src/pages/LandingTracker/LandingTracker.scss b/src/pages/LandingTracker/LandingTracker.scss index 1e425fb0..e7d503fb 100644 --- a/src/pages/LandingTracker/LandingTracker.scss +++ b/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; - max-width: 124px; + font-size: 12px; + font-weight: 700; + max-width: 107px; text-align: left; } } @@ -424,8 +603,8 @@ border-radius: 8px; @media (max-width: 431px) { - width: 324px; - height: 153px; + width: 200px; + 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; } }