diff --git a/src/assets/images/backgroundOpportunity.png b/src/assets/images/backgroundOpportunity.png new file mode 100644 index 00000000..ea60fe3e Binary files /dev/null and b/src/assets/images/backgroundOpportunity.png differ diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx index 820bf939..94acb940 100644 --- a/src/pages/Landing/Landing.jsx +++ b/src/pages/Landing/Landing.jsx @@ -2,6 +2,8 @@ import React from "react"; import SVG from "react-inlinesvg"; import { Link } 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"; @@ -37,16 +39,7 @@ export const Landing = () => { img: arrow } ]; - const socials = [ - { - img: vk, - to: "" - }, - { - img: telegram, - to: "" - } - ]; + return (
@@ -106,26 +99,7 @@ export const Landing = () => { ); })}
-
-
-
- {socials.map((social, index) => { - return ( - - - - ); - })} -
- - Присоединиться к команде - -
-
-

office@itguild.info

-

© 2024 - Outstaffing. Все права защищены

-
-
+
); diff --git a/src/pages/Landing/landing.scss b/src/pages/Landing/landing.scss index f5389227..8c0e18cb 100644 --- a/src/pages/Landing/landing.scss +++ b/src/pages/Landing/landing.scss @@ -1,6 +1,6 @@ .landing { background: #EEEEEE; - height: 100vh; + min-height: 100vh; padding: 20px 0; font-family: "GT Eesti Pro Display"; @@ -151,7 +151,7 @@ } &__opportunities { - margin-top: 120px; + margin: 120px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } @@ -243,46 +243,4 @@ } } } - - &__footer { - margin-top: auto; - display: flex; - justify-content: space-between; - - .footer { - display: flex; - &__links { - display: flex; - column-gap: 23px; - align-items: center; - } - - &__socials { - display: flex; - column-gap: 16px; - } - - &__invite { - color: rgba(159, 159, 159, 1); - font-size: 12px; - line-height: 14px; - letter-spacing: 0.01em; - text-decoration: underline; - } - - &__info { - display: flex; - column-gap: 100px; - align-items: center; - font-size: 12px; - line-height: 14px; - letter-spacing: 0.01em; - color: rgba(159, 159, 159, 1); - - p:first-child { - text-decoration: underline; - } - } - } - } } diff --git a/src/pages/Stack/Stack.jsx b/src/pages/Stack/Stack.jsx index 0c36d0bd..94a22cd4 100644 --- a/src/pages/Stack/Stack.jsx +++ b/src/pages/Stack/Stack.jsx @@ -4,12 +4,45 @@ import SVG from "react-inlinesvg"; import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader"; 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 code from "assets/images/landingBackgroundCode.png"; import "./stack.scss"; export const Stack = () => { + const subjects = [ + { + name: "Backend", + skills: [ + "php", + "yii2", + "laravel", + "symfony", + "django", + "nodejs", + "fastAPI", + "flask", + "python", + "exspress", + "adonis" + ] + }, + { + name: "Front", + skills: [ + "react", + "next.js", + "typescript", + "redux", + "angular", + "vue", + "jquery", + "css (sass/scss, tailwind, bootstrap, БЭМ)" + ] + } + ]; return (
@@ -54,7 +87,46 @@ export const Stack = () => {
-
+ + +
+ + +
+

Stack

+
+ + Окунитесь в экосистему ITGUIL + +

+ Вы получаете полное управление над сотрудниками,{" "} + имея возможность контролировать и заменять IT штат. +

+
+ clue +

+ Можем подготовить специалиста конкретно под ваш проект и + используемый стек. Таким образом вы сможете сэкономить ресурсы + на поиск кандидата. +

+
+
+
+
+ {subjects.map((subject) => { + return ( +
+

{subject.name}

+
+ {subject.skills.map((skill) => { + return {skill}; + })} +
+
+ ); + })} +
+
); diff --git a/src/pages/Stack/stack.scss b/src/pages/Stack/stack.scss index a1c55672..9397911c 100644 --- a/src/pages/Stack/stack.scss +++ b/src/pages/Stack/stack.scss @@ -37,6 +37,7 @@ text-transform: uppercase; letter-spacing: 0.03em; margin: 39px 0 6px; + z-index: 2; } &__subtitle { @@ -72,7 +73,7 @@ &__ellipse { z-index: 1; - top: 65%; + top: 45%; left:50%; transform:translate(-50%, -50%); position: absolute; @@ -185,5 +186,146 @@ &__opportunity { background: #1E1E1E; + position: relative; + + .background__opportunity--left { + position: absolute; + top: -50%; + left: -5%; + } + + .background__opportunity--right { + position: absolute; + bottom: 0; + right: 0; + } + + .opportunity { + + &__container { + padding: 105px 0 0px; + flex-direction: column; + } + + &__code { + position: absolute; + top: 35px; + left: 55px; + + &--center { + position: absolute; + right: 31%; + top: 34%; + } + } + + &__block { + display: flex; + } + &__title { + font-family: 'Geraspoheko'; + font-weight: 400; + font-size: 343px; + line-height: 1.03; + margin-bottom: 0; + z-index: 2; + background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent + } + + &__info { + display: flex; + flex-direction: column; + margin-left: 15px; + .info { + &__subtitle { + padding-left: 31px; + color: rgba(167, 202, 96, 1); + font-weight: 700; + font-size: 14px; + line-height: 16.24px; + margin-bottom: 30px; + } + + &__about { + padding-left: 31px; + font-size: 14px; + color: rgba(238, 238, 238, 1); + line-height: 19.18px; + font-weight: 250; + max-width: 355px; + margin-bottom: 27px; + + span { + font-weight: 400; + } + } + + &__notification { + padding: 21px 19px 23px 31px; + 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%); + position: relative; + border: 0.5px solid #717171; + + img { + position: absolute; + width: 80.93px; + height: 74.19px; + left: -68px; + top: -10px; + } + + p { + color: rgba(238, 238, 238, 1); + line-height: 19.18px; + font-size: 14px; + } + } + } + } + + &__subjects { + display: flex; + column-gap: 100px; + position: relative; + top: -100px; + z-index: 3; + right: -35px; + + .subject { + display: flex; + flex-direction: column; + + h4 { + color: rgba(167, 202, 96, 1); + letter-spacing: 0.03em; + font-weight: 900; + font-size: 88px; + line-height: 86.58px; + margin-bottom: 0; + } + + &__skills { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-top: 20px; + + span { + border: 0.5px solid rgba(167, 202, 96, 0.5); + border-radius: 56px; + padding: 8px 25px 8px; + color: rgba(167, 202, 96, 1); + font-size: 17px; + line-height: 20.88px; + } + } + } + } + } } }