diff --git a/src/assets/icons/arrows/arrowReviewsLeft.png b/src/assets/icons/arrows/arrowReviewsLeft.png new file mode 100644 index 00000000..c0486907 Binary files /dev/null and b/src/assets/icons/arrows/arrowReviewsLeft.png differ diff --git a/src/assets/icons/arrows/arrowReviewsRight.png b/src/assets/icons/arrows/arrowReviewsRight.png new file mode 100644 index 00000000..3ebe77bc Binary files /dev/null and b/src/assets/icons/arrows/arrowReviewsRight.png differ diff --git a/src/assets/images/landingBackgroundCode1.png b/src/assets/images/landingBackgroundCode1.png new file mode 100644 index 00000000..f7e81da3 Binary files /dev/null and b/src/assets/images/landingBackgroundCode1.png differ diff --git a/src/assets/images/reviewsImgMok.png b/src/assets/images/reviewsImgMok.png new file mode 100644 index 00000000..78ac7693 Binary files /dev/null and b/src/assets/images/reviewsImgMok.png differ diff --git a/src/pages/Stack/Stack.jsx b/src/pages/Stack/Stack.jsx index 7585ff0d..21e52ffb 100644 --- a/src/pages/Stack/Stack.jsx +++ b/src/pages/Stack/Stack.jsx @@ -3,11 +3,15 @@ import SVG from "react-inlinesvg"; import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader"; +import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png"; +import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png"; 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 reviewsImgMok from "assets/images/reviewsImgMok.png"; import flag from "assets/images/stackProjectsFlag.png"; import fly from "assets/images/stackProjectsFly.png"; import hand from "assets/images/stackProjectsHand.png"; @@ -94,6 +98,7 @@ export const Stack = () => { info: "интеграция специалистов в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD" } ]; + return (
@@ -269,6 +274,70 @@ export const Stack = () => {
+
+
+
+
375
+ Довольных клиентов +

+ Предоставляем на аутстаффинг frontend- и backend - разработчиков + уровня от junior до middle+ +

+

+ Можем сделать оценку проекта, ревью кода, составить коммерческое + предложение, рекомендации касаемо стека технологий и организации + архитектуры разрабатываемого проекта. +

+
+ +
+

Что о нас говорят

+
+
+
+ reviewsImgMok + Александр Гузеев +

Руководитель проекта ООО “ЭЛАР”

+
+ +
+

+ Команда ITGUILD берется за решение широкого круга задач, не + боясь при этом ни сжатых сроков, ни сложной специфики + проектов, и успешно доводит их ло решения.
+
+ Разаработчики Кирилла смогли не только усилить существующую + команду разработки, став ее полноценной частью, но и + привести в проект новые идеи, свои знания и опыт. +

+
+
+ +
+ + +
+
+
+ code + code +
+
+
+
+
); }; diff --git a/src/pages/Stack/stack.scss b/src/pages/Stack/stack.scss index abac2025..e3a3a583 100644 --- a/src/pages/Stack/stack.scss +++ b/src/pages/Stack/stack.scss @@ -9,7 +9,7 @@ display: flex; } &__intro { - background: #EEEEEE; + background: #eeeeee; .intro { &__container { @@ -32,7 +32,7 @@ &__title { font-weight: 900; - color: #A7CA60; + color: #a7ca60; font-size: 88px; text-transform: uppercase; letter-spacing: 0.03em; @@ -44,12 +44,12 @@ letter-spacing: 0.05em; font-size: 39px; font-weight: 700; - color: #4A4A4A; + color: #4a4a4a; } &__about { max-width: 380px; - color: #4A4A4A; + color: #4a4a4a; font-size: 14px; font-weight: 250; margin-bottom: 34px; @@ -68,14 +68,14 @@ &__link { font-weight: 700; font-size: 12px; - color: #A7CA60; + color: #a7ca60; } &__ellipse { z-index: 1; top: 45%; - left:50%; - transform:translate(-50%, -50%); + left: 50%; + transform: translate(-50%, -50%); position: absolute; } @@ -96,7 +96,11 @@ position: absolute; backdrop-filter: blur(8.699999809265137px); box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06); - background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(206, 198, 198, 0.34) 100%); + background: linear-gradient( + 137deg, + rgba(255, 255, 255, 0.34) 0%, + rgba(206, 198, 198, 0.34) 100% + ); border-radius: 8px; top: -35px; left: -25px; @@ -106,7 +110,7 @@ .aside { &__logo { z-index: 2; - font-family: 'Geraspoheko'; + font-family: "Geraspoheko"; color: white; font-size: 343px; position: absolute; @@ -119,7 +123,11 @@ position: absolute; 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(206, 198, 198, 0.34) 100%); + background: linear-gradient( + 137deg, + rgba(255, 255, 255, 0.34) 0%, + rgba(206, 198, 198, 0.34) 100% + ); border-radius: 8px; width: 182px; height: 106px; @@ -129,7 +137,11 @@ display: flex; padding: 24px 20px 18px 30px; 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% + ); p { color: rgba(141, 141, 141, 1); @@ -146,7 +158,7 @@ img { position: absolute; top: -25px; - left: 0 ; + left: 0; } &:before { @@ -176,16 +188,16 @@ &__button { max-width: 200px; width: 100%; - background: #A7CA60; + background: #a7ca60; font-size: 15px; - color: #4A4A4A; + color: #4a4a4a; padding: 14px 0; border-radius: 44px; border: none; } &__opportunity { - background: #1E1E1E; + background: #1e1e1e; position: relative; .background__opportunity--left { @@ -201,7 +213,6 @@ } .opportunity { - &__container { padding: 105px 0 0px; flex-direction: column; @@ -223,7 +234,7 @@ display: flex; } &__title { - font-family: 'Geraspoheko'; + font-family: "Geraspoheko"; font-weight: 400; font-size: 343px; line-height: 1.03; @@ -231,7 +242,7 @@ z-index: 2; background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%); -webkit-background-clip: text; - -webkit-text-fill-color: transparent + -webkit-text-fill-color: transparent; } &__info { @@ -267,7 +278,11 @@ 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%); + 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; @@ -301,6 +316,7 @@ flex-direction: column; h4 { + text-transform: uppercase; color: rgba(167, 202, 96, 1); letter-spacing: 0.03em; font-weight: 900; @@ -347,7 +363,10 @@ &__title { font-weight: 400; font-size: 343px; - color: white; + background: linear-gradient(to bottom, #ffffff, #dbdbdb); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; font-family: "Geraspoheko"; margin: 0 auto; position: absolute; @@ -355,6 +374,7 @@ text-align: center; top: -50px; z-index: 2; + filter: drop-shadow(0px 0px 30px #00000021); } &__block { @@ -389,7 +409,7 @@ border-radius: 8px; width: 99px; height: 81px; - background: #A7CA60; + background: #a7ca60; position: relative; img { @@ -475,7 +495,6 @@ position: relative; .steps { - &__container { flex-direction: column; } @@ -558,14 +577,17 @@ display: flex; align-items: center; justify-content: center; - backdrop-filter: blur(8.6999998093px); + backdrop-filter: blur(3px); 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%); + background: linear-gradient( + 137deg, + rgba(87, 87, 87, 0.34) 0%, + rgba(104, 104, 104, 0.34) 100% + ); border: 0.5px solid #717171; border-radius: 8px; .item { - &__info { font-size: 15px; line-height: 131%; @@ -612,4 +634,197 @@ top: -260px; } } + + &__reviews { + background-color: #eeeeee; + + .reviews { + &__container { + align-items: center; + column-gap: 58px; + padding-bottom: 48px; + } + + &__code { + position: absolute; + mix-blend-mode: plus-lighter; + + &--first { + top: 90px; + left: -180px; + } + + &--second { + bottom: 0; + left: 400px; + } + } + + &__info { + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: #a7ca60; + border-radius: 24px 0 113px 0; + padding: 50px 22px 64px 44px; + max-width: 311px; + z-index: 1; + + &::before { + content: ""; + width: 182px; + height: 106px; + position: absolute; + backdrop-filter: blur(8.699999809265137px); + box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06); + background: linear-gradient( + 137deg, + rgba(255, 255, 255, 0.34) 0%, + rgba(206, 198, 198, 0.34) 100% + ); + border-radius: 8px; + top: 62px; + left: 200px; + } + + &::after { + content: ""; + width: 182px; + height: 106px; + position: absolute; + backdrop-filter: blur(8.699999809265137px); + box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06); + background: linear-gradient( + 137deg, + rgba(255, 255, 255, 0.34) 0%, + rgba(206, 198, 198, 0.34) 100% + ); + border-radius: 8px; + bottom: -30px; + left: -100px; + } + + &-counter { + color: #ffffff; + font-weight: 900; + font-size: 124px; + line-height: 122px; + } + + span { + color: #ffffff; + font-weight: 900; + font-size: 29px; + line-height: 31.61px; + text-transform: uppercase; + margin-bottom: 28px; + } + p { + color: #607536; + font-weight: 700; + font-size: 14px; + line-height: 17.22px; + + &:last-child { + color: #ffffff; + font-weight: 300; + font-size: 14px; + margin-top: 37px; + } + } + } + + &__content { + margin: 0 0 45px 0; + + h4 { + text-transform: uppercase; + color: #4a4a4a; + font-weight: 900; + font-size: 46px; + line-height: 45.26px; + margin-bottom: 24px; + } + + &-container { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 20px; + + .review { + display: grid; + grid-template-columns: 45% 55%; + align-items: center; + max-width: 517px; + padding: 35px; + border-radius: 8px; + border: 0.5px solid #ffffff; + background: linear-gradient(137deg, #ffffff -10%, #dddddd 100%); + box-shadow: inset; + + &__client { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + color: #7e7e7e; + font-weight: 300; + font-size: 14px; + line-height: 16.24px; + margin-right: 48px; + + img { + width: 88px; + height: 88px; + border-radius: 100px; + } + + span { + color: #1e1e1e; + font-weight: 500; + font-size: 17px; + line-height: 19.72px; + margin: 18px 0 16px 0; + } + } + + &__comment { + color: #4a4a4a; + font-weight: 250; + font-size: 14px; + line-height: 17px; + } + } + } + + &-buttons { + display: flex; + flex-direction: column; + align-items: center; + + button { + background-color: #ffffff; + width: 70px; + height: 64px; + border-radius: 5px; + border: none; + } + + button:first-child { + margin-bottom: 22px; + } + } + } + } + } + + &__contact { + background-color: #1e1e1e; + + .contact { + &__container { + } + } + } }