diff --git a/src/assets/icons/landingTracker.svg b/src/assets/icons/landingTracker.svg new file mode 100644 index 00000000..7d43890d --- /dev/null +++ b/src/assets/icons/landingTracker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/cat.png b/src/assets/images/cat.png index 791fca8d..f464a45e 100644 Binary files a/src/assets/images/cat.png and b/src/assets/images/cat.png differ diff --git a/src/assets/images/landingBackgroundCode1.png b/src/assets/images/landingBackgroundCodeWhite.png similarity index 100% rename from src/assets/images/landingBackgroundCode1.png rename to src/assets/images/landingBackgroundCodeWhite.png diff --git a/src/assets/images/landingCat.png b/src/assets/images/landingCat.png index f67def34..7a36c2ab 100644 Binary files a/src/assets/images/landingCat.png and b/src/assets/images/landingCat.png differ diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx index e3e0f5dd..278c89dd 100644 --- a/src/pages/Landing/Landing.jsx +++ b/src/pages/Landing/Landing.jsx @@ -1,38 +1,59 @@ -import React from "react"; +import React, { useState } from "react"; import SVG from "react-inlinesvg"; -import { Link } from "react-router-dom"; +import { Link, NavLink } 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"; +import tracker from "assets/icons/landingTracker.svg"; import codeBg from "assets/images/landingBackgroundCode.svg"; import cat from "assets/images/landingCat.png"; +import ITguild from "assets/images/logo/ITguild.svg"; import "./landing.scss"; export const Landing = () => { + const [active, setActive] = useState(false); + + const toggleBar = () => { + if (active) { + setActive(false); + } else { + setActive(true); + } + }; + const opportunities = [ { name: "Аутстаффинг сотрудников", - class: "outstaffing__employees", + path: "/stack", img: cat }, { - name: "Модуль для видеоконференций" + name: "Найти работу
в IT", + path: "/stack", + img: cat }, { - name: "Система контроля версий GIT" + name: "Система контроля версий GIT", + path: "/stack", + img: cat }, { - name: "Управление задачами" + name: "Управление задачами", + path: "/stack", + img: cat }, { - name: "Система для отчётности" + name: "Система для отчётности", + path: "/stack", + img: cat }, { name: "Все наши предложения", + path: "/stack", class: "outstaffing__offers", img: arrow } @@ -48,8 +69,29 @@ export const Landing = () => { - авторизация + регистрация +
toggleBar()}> +
+
+
+
+
+

меню

+
+
+
+ tracker +
+ трекер +
+

@@ -75,30 +117,62 @@ export const Landing = () => {

{opportunities.map((opportunity, index) => { return ( -
- {opportunity.class ? ( -
-

- {opportunity.img ? ( - img - ) : ( - "" - )} -

- ) : ( -

{opportunity.name}

- )} -
+
+

+ {opportunity.img ? ( + img + ) : ( + "" + )} +

+ ); })}
+
+
+ +
+ +

Политика конфиденциальности

+
); }; diff --git a/src/pages/Landing/landing.scss b/src/pages/Landing/landing.scss index 8c0e18cb..34bd975f 100644 --- a/src/pages/Landing/landing.scss +++ b/src/pages/Landing/landing.scss @@ -1,5 +1,5 @@ .landing { - background: #EEEEEE; + background: #eeeeee; min-height: 100vh; padding: 20px 0; font-family: "GT Eesti Pro Display"; @@ -15,27 +15,37 @@ &__head { display: flex; - column-gap: 35px; + column-gap: 45px; align-items: center; + z-index: 1; + + @media (max-width: 431px) { + padding: 0 24px; + } .head { &__logo { margin-bottom: 0; - color: rgba(74, 74, 74, 1); - font-size: 35px; + color: #4a4a4a; + font-size: 44px; font-weight: 900; position: relative; + letter-spacing: 4px; &:before { - content: ''; + content: ""; position: absolute; background: rgba(167, 202, 96, 1); width: 31px; height: 31px; border-radius: 50px; - left: 39%; + left: 41%; top: -35px; } + + @media (max-width: 431px) { + display: none; + } } &__signIn { @@ -45,6 +55,10 @@ background: rgba(167, 202, 96, 1); font-weight: 400; border-radius: 32px; + + @media (max-width: 431px) { + display: none; + } } &__signUp { @@ -55,8 +69,176 @@ font-weight: 400; font-size: 13px; text-decoration: underline; + + @media (max-width: 431px) { + display: none; + } + } + + &__tracker { + display: flex; + align-items: center; + column-gap: 5px; + border-radius: 38px; + background-color: #ffffff; + border: 0.5px solid #e3e3e9; + padding: 6px 20px 6px 6px; + margin: 0 auto; + + @media (max-width: 431px) { + margin: 0; + } + + span { + color: #4a4a4a; + font-size: 14px; + font-weight: 700; + line-height: 30px; + } + + div { + display: flex; + align-items: center; + justify-content: center; + background-color: #a7ca60; + border-radius: 62px; + border: 3px solid #ffffff; + width: 34px; + height: 34px; + } + } + + &__auth { + display: none; + + @media (max-width: 431px) { + display: block; + margin: 0 0 0 auto; + } } } + .burger-menu { + cursor: pointer; + display: flex; + column-gap: 14px; + margin: 0 auto; + + @media (max-width: 431px) { + margin: 0; + } + + &__logo { + color: #838383; + font-weight: 700; + font-size: 14px; + line-height: 16.24px; + text-decoration: underline; + + @media (max-width: 431px) { + display: none; + } + } + .burger { + padding: 1px; + display: flex; + flex-direction: column; + row-gap: 3px; + + @media (max-width: 431px) { + padding: 0; + } + + &__line { + width: 19px; + border-radius: 39px; + height: 3.8px; + background-color: #a7ca60; + transition: 0.4s; + + &:last-child { + width: 10.6px; + } + } + + .l1.change { + transform: rotate(-45deg) translate(-5px, 5px); + } + .l2.change { + opacity: 0; + } + .l3.change { + transform: rotate(45deg) translate(-5px, -5px); + width: 19px; + } + } + } + } + + .auth-body { + padding: 40px 10px; + visibility: hidden; + transition: 0.2s ease-in-out; + opacity: 0; + z-index: 99; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: #e1fccf; + width: 0; + flex-direction: column; + align-items: stretch; + + &__title { + display: flex; + margin-top: 24px; + + img { + width: 160px; + } + } + + &__navigation { + margin-top: 28px; + padding: 0; + list-style: none; + font-size: 20px; + line-height: 33px; + + a, + a:hover, + a:active { + color: #000000; + } + } + + &__politic { + margin-top: 42px; + font-size: 14px; + line-height: 22px; + color: #000000; + } + + &__contacts { + margin-top: 127px; + color: #000000; + h4 { + font-size: 20px; + line-height: 33px; + } + p { + font-size: 14px; + } + } + } + + .auth-body.active { + visibility: visible; + transition: 0.1s ease-in-out; + opacity: 1; + display: flex; + width: 24%; + left: 0; } &__info { @@ -66,12 +248,11 @@ margin-top: 75px; column-gap: 45px; - .info { &__title { font-weight: 900; font-size: 49px; - color: #4A4A4A; + color: #4a4a4a; max-width: 444px; line-height: 1; position: relative; @@ -83,16 +264,24 @@ } span { - color: #A7CA60; + color: #a7ca60; } } &__block { backdrop-filter: blur(8.699999809265137px); box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03); - background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(239, 239, 239, 0.34) 100%); + background: linear-gradient( + 137deg, + rgba(255, 255, 255, 0.34) 0%, + rgba(239, 239, 239, 0.34) 100% + ); border: 0.5px solid; - border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%); + border-image-source: linear-gradient( + 137.79deg, + #ffffff 9.15%, + #f4f4f4 76.22% + ); border-radius: 8px; padding: 59px 89px 68px 102px; position: relative; @@ -110,6 +299,9 @@ } } } + @media (max-width: 431px) { + display: none; + } } &__background { @@ -117,7 +309,7 @@ right: -200px; top: -100px; h3 { - font-family: 'Geraspoheko'; + font-family: "Geraspoheko"; color: rgba(255, 255, 255, 1); font-size: 343px; font-weight: 400; @@ -135,11 +327,11 @@ position: absolute; width: 360px; height: 134px; - right: -110px; + right: -5px; } &:after { - content: ''; + content: ""; position: absolute; width: 82px; height: 82px; @@ -148,30 +340,117 @@ right: 160px; bottom: -75px; } + + @media (max-width: 431px) { + right: 0px; + top: 0px; + + h3 { + font-size: 180px; + font-weight: 700; + } + } } &__opportunities { margin: 120px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + + @media (max-width: 431px) { + grid-template-columns: 50% 50%; + padding: 0 40px; + column-gap: 30px; + row-gap: 19px; + align-items: center; + justify-items: center; + } } &__opportunity { - padding: 40px 60px; + padding: 52px 60px; + + @media (max-width: 431px) { + padding: 0; + + div { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background-color: #4a4a4a; + border-radius: 18px; + padding: 30px 10px 5px 10px; + } + } p { font-weight: 500; font-size: 20px; - line-height: 107%; - color: rgba(131, 131, 131, 1); + line-height: 21.4px; + color: #838383; + + @media (max-width: 431px) { + font-size: 14px; + font-weight: 500; + line-height: 14.12px; + text-align: center; + min-height: 55px; + } + } + + img { + display: none; + position: absolute; + right: -50px; + bottom: -15px; + + @media (max-width: 431px) { + display: block; + position: relative; + right: auto; + bottom: auto; + } + } + + @media (min-width: 432px) { + &:hover { + padding: 16px 12px 14px 2px; + border-right: 1px solid rgba(245, 245, 245, 1); + border-bottom: 1px solid rgba(245, 245, 245, 1); + cursor: pointer; + + div { + display: flex; + background: linear-gradient(95.54deg, #ffffff 5.13%, #eeeeee 97.48%); + border-radius: 5px; + padding: 24px 0px 25px 33px; + height: 100%; + align-items: center; + position: relative; + } + + p { + font-weight: 700; + color: rgba(74, 74, 74, 1); + max-width: 165px; + + span { + color: rgba(167, 202, 96, 1); + } + } + img { + display: block; + } + } } } - &__opportunity:nth-child(-n+3) { + &__opportunity:nth-child(-n + 3) { border-bottom: 1px solid rgba(245, 245, 245, 1); } - &__opportunity:nth-child(-n+2) { + &__opportunity:nth-child(-n + 2) { border-right: 1px solid rgba(245, 245, 245, 1); } @@ -183,42 +462,13 @@ border-right: 1px solid rgba(245, 245, 245, 1); } - .outstaffing__employees { - padding: 16px 12px 14px 2px; - border-right: 1px solid rgba(245, 245, 245, 1); - border-bottom: 1px solid rgba(245, 245, 245, 1); - - div { - display: flex; - background: linear-gradient(95.54deg, #FFFFFF 5.13%, #EEEEEE 97.48%); - border-radius: 5px; - padding: 24px 0px 25px 33px; - height: 100%; - align-items: center; - position: relative; - - p { - font-weight: 700; - font-size: 20px; - line-height: 21.4px; - color: rgba(74, 74, 74, 1); - max-width: 135px; - - span { - color: rgba(167, 202, 96, 1); - } - } - } - - img { - position: absolute; - right: -50px; - bottom: -15px; - } - } - .outstaffing__offers { padding: 10px 0 25px 10px; + cursor: pointer; + + @media (max-width: 431px) { + padding: 0; + } div { display: flex; @@ -229,6 +479,11 @@ align-items: center; justify-content: space-between; + @media (max-width: 431px) { + height: 262px; + padding: 0; + } + p { color: rgba(167, 202, 96, 1); font-weight: 500; diff --git a/src/pages/Stack/Stack.jsx b/src/pages/Stack/Stack.jsx index 21e52ffb..f66e725e 100644 --- a/src/pages/Stack/Stack.jsx +++ b/src/pages/Stack/Stack.jsx @@ -9,8 +9,8 @@ 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 code1 from "assets/images/landingBackgroundCode1.png"; import code from "assets/images/landingBackgroundCode.png"; +import codeWhite from "assets/images/landingBackgroundCodeWhite.png"; import reviewsImgMok from "assets/images/reviewsImgMok.png"; import flag from "assets/images/stackProjectsFlag.png"; import fly from "assets/images/stackProjectsFly.png"; @@ -325,12 +325,12 @@ export const Stack = () => { code code