diff --git a/src/assets/fonts/GeraspohekoRegular.eot b/src/assets/fonts/GeraspohekoRegular.eot new file mode 100644 index 00000000..b694f585 Binary files /dev/null and b/src/assets/fonts/GeraspohekoRegular.eot differ diff --git a/src/assets/fonts/GeraspohekoRegular.ttf b/src/assets/fonts/GeraspohekoRegular.ttf new file mode 100644 index 00000000..fea3af98 Binary files /dev/null and b/src/assets/fonts/GeraspohekoRegular.ttf differ diff --git a/src/assets/fonts/GeraspohekoRegular.woff b/src/assets/fonts/GeraspohekoRegular.woff new file mode 100644 index 00000000..915b1b29 Binary files /dev/null and b/src/assets/fonts/GeraspohekoRegular.woff differ diff --git a/src/assets/fonts/GeraspohekoRegular.woff2 b/src/assets/fonts/GeraspohekoRegular.woff2 new file mode 100644 index 00000000..150cc1f2 Binary files /dev/null and b/src/assets/fonts/GeraspohekoRegular.woff2 differ diff --git a/src/assets/fonts/stylesheet.css b/src/assets/fonts/stylesheet.css index d911692c..578fc53f 100644 --- a/src/assets/fonts/stylesheet.css +++ b/src/assets/fonts/stylesheet.css @@ -394,3 +394,16 @@ url('LabGrotesque-Light.ttf') format('truetype'); font-weight: 300; } + +@font-face { + font-family: 'Geraspoheko'; + src: url('GeraspohekoRegular.eot'); + src: local('Geraspoheko'), local('GeraspohekoRegular'), + url('GeraspohekoRegular.eot?#iefix') format('embedded-opentype'), + url('GeraspohekoRegular.woff2') format('woff2'), + url('GeraspohekoRegular.woff') format('woff'), + url('GeraspohekoRegular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} diff --git a/src/assets/icons/arrows/arrowLanding.svg b/src/assets/icons/arrows/arrowLanding.svg new file mode 100644 index 00000000..ad32172e --- /dev/null +++ b/src/assets/icons/arrows/arrowLanding.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/authIcon.svg b/src/assets/icons/authIcon.svg new file mode 100644 index 00000000..4507abba --- /dev/null +++ b/src/assets/icons/authIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/landingClue.svg b/src/assets/icons/landingClue.svg new file mode 100644 index 00000000..41155ebe --- /dev/null +++ b/src/assets/icons/landingClue.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/telegramIcon.svg b/src/assets/icons/telegramIcon.svg new file mode 100644 index 00000000..4114c91f --- /dev/null +++ b/src/assets/icons/telegramIcon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/icons/vkIcon.svg b/src/assets/icons/vkIcon.svg new file mode 100644 index 00000000..c48df8fa --- /dev/null +++ b/src/assets/icons/vkIcon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/images/EllipseIntro.svg b/src/assets/images/EllipseIntro.svg new file mode 100644 index 00000000..81ae27b9 --- /dev/null +++ b/src/assets/images/EllipseIntro.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/backgroundLandingIntro.png b/src/assets/images/backgroundLandingIntro.png new file mode 100644 index 00000000..7775aafa Binary files /dev/null and b/src/assets/images/backgroundLandingIntro.png differ diff --git a/src/assets/images/backgroundLandingIntro.svg b/src/assets/images/backgroundLandingIntro.svg new file mode 100644 index 00000000..556ca7c1 --- /dev/null +++ b/src/assets/images/backgroundLandingIntro.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + 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/assets/images/cat.png b/src/assets/images/cat.png new file mode 100644 index 00000000..791fca8d Binary files /dev/null and b/src/assets/images/cat.png differ diff --git a/src/assets/images/clue.png b/src/assets/images/clue.png new file mode 100644 index 00000000..0dbb427f Binary files /dev/null and b/src/assets/images/clue.png differ diff --git a/src/assets/images/landingBackgroundCode.png b/src/assets/images/landingBackgroundCode.png new file mode 100644 index 00000000..521855f9 Binary files /dev/null and b/src/assets/images/landingBackgroundCode.png differ diff --git a/src/assets/images/landingBackgroundCode.svg b/src/assets/images/landingBackgroundCode.svg new file mode 100644 index 00000000..5555c816 --- /dev/null +++ b/src/assets/images/landingBackgroundCode.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/landingCat.png b/src/assets/images/landingCat.png new file mode 100644 index 00000000..f67def34 Binary files /dev/null and b/src/assets/images/landingCat.png differ diff --git a/src/components/Candidate/candidate.scss b/src/components/Candidate/candidate.scss index 5d3caf4b..b35ea1f3 100644 --- a/src/components/Candidate/candidate.scss +++ b/src/components/Candidate/candidate.scss @@ -3,7 +3,6 @@ .candidate { display: flex; flex-direction: column; - min-height: 100vh; background: #f1f1f1; .container { diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx new file mode 100644 index 00000000..94acb940 --- /dev/null +++ b/src/pages/Landing/Landing.jsx @@ -0,0 +1,106 @@ +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"; +import telegram from "assets/icons/telegramIcon.svg"; +import vk from "assets/icons/vkIcon.svg"; +import codeBg from "assets/images/landingBackgroundCode.svg"; +import cat from "assets/images/landingCat.png"; + +import "./landing.scss"; + +export const Landing = () => { + const opportunities = [ + { + name: "Аутстаффинг сотрудников", + class: "outstaffing__employees", + img: cat + }, + { + name: "Модуль для видеоконференций" + }, + { + name: "Система контроля версий GIT" + }, + { + name: "Управление задачами" + }, + { + name: "Система для отчётности" + }, + { + name: "Все наши предложения", + class: "outstaffing__offers", + img: arrow + } + ]; + + return ( +
+
+
+

ITGUILD

+ + войти в систему + + + + авторизация + +
+
+

+ + Экосистема для диджитализации бизнеса +

+
+

ITGuild

+ + +
+
+

+ Подберем и документально оформим IT-специалистов, после чего + передадим исполнителей под ваше руководство. +
+
+ Вы получаете полное управление над сотрудниками, имея + возможность контролировать и заменять IT штат. +

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

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

+ ) : ( +

{opportunity.name}

+ )} +
+ ); + })} +
+
+
+ ); +}; diff --git a/src/pages/Landing/landing.scss b/src/pages/Landing/landing.scss new file mode 100644 index 00000000..8c0e18cb --- /dev/null +++ b/src/pages/Landing/landing.scss @@ -0,0 +1,246 @@ +.landing { + background: #EEEEEE; + min-height: 100vh; + padding: 20px 0; + font-family: "GT Eesti Pro Display"; + + &__container { + max-width: 1100px; + margin: 0 auto; + display: flex; + flex-direction: column; + position: relative; + height: 100%; + } + + &__head { + display: flex; + column-gap: 35px; + align-items: center; + + .head { + &__logo { + margin-bottom: 0; + color: rgba(74, 74, 74, 1); + font-size: 35px; + font-weight: 900; + position: relative; + + &:before { + content: ''; + position: absolute; + background: rgba(167, 202, 96, 1); + width: 31px; + height: 31px; + border-radius: 50px; + left: 39%; + top: -35px; + } + } + + &__signIn { + padding: 12px 30px 15px; + color: rgba(30, 30, 30, 1); + font-size: 13px; + background: rgba(167, 202, 96, 1); + font-weight: 400; + border-radius: 32px; + } + + &__signUp { + display: flex; + column-gap: 8px; + align-items: center; + color: rgba(131, 131, 131, 1); + font-weight: 400; + font-size: 13px; + text-decoration: underline; + } + } + } + + &__info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 75px; + column-gap: 45px; + + + .info { + &__title { + font-weight: 900; + font-size: 49px; + color: #4A4A4A; + max-width: 444px; + line-height: 1; + position: relative; + + .code { + position: absolute; + left: -260px; + top: -55px; + } + + span { + 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%); + border: 0.5px solid; + border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%); + border-radius: 8px; + padding: 59px 89px 68px 102px; + position: relative; + z-index: 1; + + p { + font-weight: 250; + font-size: 14px; + line-height: 137%; + color: #4a4a4a; + + span { + font-weight: 400; + } + } + } + } + } + + &__background { + position: absolute; + right: -200px; + top: -100px; + h3 { + font-family: 'Geraspoheko'; + color: rgba(255, 255, 255, 1); + font-size: 343px; + font-weight: 400; + margin-bottom: 0; + } + .clue { + width: 130px; + height: 120px; + top: 165px; + position: absolute; + right: 147px; + } + + .code { + position: absolute; + width: 360px; + height: 134px; + right: -110px; + } + + &:after { + content: ''; + position: absolute; + width: 82px; + height: 82px; + border-radius: 50px; + background: rgba(167, 202, 96, 0.8); + right: 160px; + bottom: -75px; + } + } + + &__opportunities { + margin: 120px 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + } + + &__opportunity { + padding: 40px 60px; + + p { + font-weight: 500; + font-size: 20px; + line-height: 107%; + color: rgba(131, 131, 131, 1); + } + } + + &__opportunity:nth-child(-n+3) { + border-bottom: 1px solid rgba(245, 245, 245, 1); + } + + &__opportunity:nth-child(-n+2) { + border-right: 1px solid rgba(245, 245, 245, 1); + } + + &__opportunity:nth-child(4) { + border-right: 1px solid rgba(245, 245, 245, 1); + } + + &__opportunity:nth-child(5) { + 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; + + div { + display: flex; + background: rgba(255, 255, 255, 1); + border-radius: 5px; + height: 91px; + padding: 24px 35px 24px 42px; + align-items: center; + justify-content: space-between; + + p { + color: rgba(167, 202, 96, 1); + font-weight: 500; + font-size: 20px; + line-height: 21.4px; + max-width: 215px; + } + + img { + width: 27px; + height: 15px; + } + } + } +} diff --git a/src/pages/Stack/Stack.jsx b/src/pages/Stack/Stack.jsx new file mode 100644 index 00000000..94a22cd4 --- /dev/null +++ b/src/pages/Stack/Stack.jsx @@ -0,0 +1,133 @@ +import React from "react"; +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 ( +
+ +
+
+
+ + Все еще пытаетесь +
пасти котов?* + +

+ Аутстаф +
+ финг +

+ IT-специалистов +

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

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

ITGu ild

+
+ clue +

+ Каждый день база специалистов пополняется на{" "} + +15 резюме +

+
+ cat +
+
+
+
+ + +
+ + +
+

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 new file mode 100644 index 00000000..9397911c --- /dev/null +++ b/src/pages/Stack/stack.scss @@ -0,0 +1,331 @@ +.stack { + font-family: "GT Eesti Pro Display"; + + &__container { + margin: 0 auto; + padding: 85px 0 90px; + max-width: 1020px; + position: relative; + display: flex; + } + &__intro { + background: #EEEEEE; + + .intro { + &__container { + background-image: url("../../assets/images/backgroundLandingIntro.svg"); + background-repeat: no-repeat; + background-position: center bottom; + } + &__info { + display: flex; + flex-direction: column; + position: relative; + z-index: 2; + } + + &__suptitle { + font-weight: 700; + font-size: 16px; + color: #838383; + } + + &__title { + font-weight: 900; + color: #A7CA60; + font-size: 88px; + text-transform: uppercase; + letter-spacing: 0.03em; + margin: 39px 0 6px; + z-index: 2; + } + + &__subtitle { + letter-spacing: 0.05em; + font-size: 39px; + font-weight: 700; + color: #4A4A4A; + } + + &__about { + max-width: 380px; + color: #4A4A4A; + font-size: 14px; + font-weight: 250; + margin-bottom: 34px; + + span { + font-weight: 400; + } + } + + &__links { + display: flex; + column-gap: 30px; + align-items: center; + } + + &__link { + font-weight: 700; + font-size: 12px; + color: #A7CA60; + } + + &__ellipse { + z-index: 1; + top: 45%; + left:50%; + transform:translate(-50%, -50%); + position: absolute; + } + + &__aside { + position: relative; + border-radius: 24px 0 113px 0; + top: 55px; + width: 330px; + height: 517px; + background: rgba(167, 202, 96, 0.7); + margin-left: 96px; + 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: -35px; + left: -25px; + z-index: 3; + } + + .aside { + &__logo { + z-index: 2; + font-family: 'Geraspoheko'; + color: white; + font-size: 343px; + position: absolute; + line-height: 325.92px; + left: 80px; + top: -30px; + } + + &__clue { + 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%); + border-radius: 8px; + width: 182px; + height: 106px; + bottom: 35px; + right: -140px; + z-index: 2; + display: flex; + padding: 24px 20px 18px 30px; + border: 0.5px solid; + border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%); + + p { + color: rgba(141, 141, 141, 1); + font-size: 14px; + font-weight: 300; + letter-spacing: 0.03em; + line-height: 15.96px; + + span { + font-weight: 700; + } + } + + img { + position: absolute; + top: -25px; + left: 0 ; + } + + &:before { + position: absolute; + content: "Подсказка"; + font-weight: 700; + color: rgba(205, 205, 205, 1); + font-size: 14px; + line-height: 19.18px; + letter-spacing: 0.03em; + top: -22px; + right: 10px; + } + } + + &__cat { + position: absolute; + z-index: 3; + bottom: 0; + left: -125px; + } + } + } + } + } + + &__button { + max-width: 200px; + width: 100%; + background: #A7CA60; + font-size: 15px; + color: #4A4A4A; + padding: 14px 0; + border-radius: 44px; + border: none; + } + + &__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; + } + } + } + } + } + } +} diff --git a/src/pages/roles/GuestPage.jsx b/src/pages/roles/GuestPage.jsx index 2386887d..806f3f46 100644 --- a/src/pages/roles/GuestPage.jsx +++ b/src/pages/roles/GuestPage.jsx @@ -10,10 +10,12 @@ import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo"; import { Forms } from "@pages/Forms/Forms"; import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion"; import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions"; +import { Landing } from "@pages/Landing/Landing"; import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate"; import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate"; import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting"; import { SingleReportPage } from "@pages/SingleReportPage/SingleReportPage"; +import { Stack } from "@pages/Stack/Stack"; import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro"; import { WelcomePage } from "@pages/WelcomePage/WelcomePage"; @@ -24,6 +26,8 @@ export const GuestPage = () => { } /> } /> + } /> + } /> } /> } /> } />