From d8e34980f264ca0fce5a790ea98376b1179c13cb Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 11 Jan 2024 17:43:09 +0300 Subject: [PATCH] registration setting --- src/App.js | 2 + src/assets/icons/QA.svg | 15 ++ src/assets/icons/curse.svg | 14 ++ src/assets/icons/git.svg | 11 + src/assets/icons/myTeam.svg | 8 + src/assets/icons/outstaffing.svg | 17 ++ src/assets/icons/tasks.svg | 23 ++ .../RegistrationSetting.js | 184 ++++++++++++++ .../registrationSetting.scss | 226 ++++++++++++++++++ 9 files changed, 500 insertions(+) create mode 100644 src/assets/icons/QA.svg create mode 100644 src/assets/icons/curse.svg create mode 100644 src/assets/icons/git.svg create mode 100644 src/assets/icons/myTeam.svg create mode 100644 src/assets/icons/outstaffing.svg create mode 100644 src/assets/icons/tasks.svg create mode 100644 src/pages/RegistrationSetting/RegistrationSetting.js create mode 100644 src/pages/RegistrationSetting/registrationSetting.scss diff --git a/src/App.js b/src/App.js index 57bf33e1..0470c964 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,7 @@ import ReportForm from "./components/ReportForm/ReportForm"; import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers"; import { TicketFullScreen } from "./components/Modal/Tracker/TicketFullScreen/TicketFullScreen"; import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar"; +import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting"; import Article from "./pages/Article/Article"; import FormPage from "./pages/FormPage/FormPage"; import SingleReportPage from "./pages/SingleReportPage/SingleReportPage"; @@ -64,6 +65,7 @@ const App = () => { } /> } /> } /> + } /> } /> + + + + + + + + + + + + + + diff --git a/src/assets/icons/curse.svg b/src/assets/icons/curse.svg new file mode 100644 index 00000000..02db3b3d --- /dev/null +++ b/src/assets/icons/curse.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/git.svg b/src/assets/icons/git.svg new file mode 100644 index 00000000..53f05e82 --- /dev/null +++ b/src/assets/icons/git.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/myTeam.svg b/src/assets/icons/myTeam.svg new file mode 100644 index 00000000..c24d41f4 --- /dev/null +++ b/src/assets/icons/myTeam.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/outstaffing.svg b/src/assets/icons/outstaffing.svg new file mode 100644 index 00000000..12a35178 --- /dev/null +++ b/src/assets/icons/outstaffing.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/tasks.svg b/src/assets/icons/tasks.svg new file mode 100644 index 00000000..99565cdd --- /dev/null +++ b/src/assets/icons/tasks.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/RegistrationSetting/RegistrationSetting.js b/src/pages/RegistrationSetting/RegistrationSetting.js new file mode 100644 index 00000000..f3ae5a37 --- /dev/null +++ b/src/pages/RegistrationSetting/RegistrationSetting.js @@ -0,0 +1,184 @@ +import React, { useState } from "react"; + +import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; +import { Footer } from "@components/Common/Footer/Footer"; +import SideBar from "@components/SideBar/SideBar"; + +import arrowInfo from "assets/icons/trackerIntroInfo.svg"; +import registrationImg from "assets/images/trackerRegistrationImg.png"; +import curse from "assets/icons/curse.svg" +import git from "assets/icons/git.svg" +import myTeam from "assets/icons/myTeam.svg" +import outstaffing from "assets/icons/outstaffing.svg" +import qa from "assets/icons/QA.svg" +import tasks from "assets/icons/tasks.svg" +import rightArrow from "assets/icons/arrows/arrowRight.svg"; + +import "./registrationSetting.scss" + +export const RegistrationSetting = () => { + + const questions = { + countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'], + role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'], + environment: [ + { + title: 'Задачи и трекер', + subtitle: 'Сервис управления проектами и задачами', + icon: tasks, + }, + { + title: 'Моя команда', + subtitle: 'Данные вашего персонала', + icon: myTeam, + }, + { + title: 'Тестирование ', + subtitle: 'Сотрудники для вашего сервиса', + icon: qa, + }, + { + title: 'Гит', + subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git', + icon: git, + }, + { + title: 'Аутстафинг', + subtitle: 'Каталог IT специалистов', + icon: outstaffing, + }, + { + title: 'Курсы IT ', + subtitle: 'Обучайтесь сами обучайте персонал', + icon: curse, + } + ] + } + + const [selectedOptions, setSelectedOptions] = useState({ + countPeople: '', + role: '' + }) + + const [selectedEnvironment, setSelectedEnvironment] = useState([]) + + const [step, setStep] = useState(1) + + return ( +
+ + +
+
+

+ Добро пожаловать {" "} + + в ITGuild + arrow + +

+
+
+ + Эти ответы помогут сформировать кабинет + +
+ + = 2 ? "active" : ""} /> + = 3 ? "active" : ""} /> +
+
+

+ Со сколькими людьми ты будешь работать? +

+
+ {questions.countPeople.map((item, index) => { + return + }) + } +
+ img +
+ {step >= 2 && +
+

+ Какая у тебя роль? +

+
+ {questions.role.map((item, index) => { + return + }) + } +
+
+ } + {step >= 3 && +
+ Организуй комфортную среду для продуктивности +

Добавь сервисы для своего рабочего пространства

+
+ {questions.environment.map((item, index) => { + return
{ + if (selectedEnvironment.includes(item.title)) { + setSelectedEnvironment((prevState) => prevState.filter((name) => name !== item.title)) + } else { + setSelectedEnvironment((prevState) => [...prevState, item.title]) + } + }} + > +
+ icon +
{item.title}
+
+
+

{item.subtitle}

+
+ arrow +
+
+
+ }) + } +
+ +
+ } + {step !== 3 && + + } +
+
+
+ ); +}; diff --git a/src/pages/RegistrationSetting/registrationSetting.scss b/src/pages/RegistrationSetting/registrationSetting.scss new file mode 100644 index 00000000..184914c8 --- /dev/null +++ b/src/pages/RegistrationSetting/registrationSetting.scss @@ -0,0 +1,226 @@ +.registrationSetting { + &__content { + font-family: "LabGrotesque", sans-serif; + background-color: #f1f1f1; + color: #000000; + padding: 50px 0 0; + min-height: 100vh; + + @media (max-width: 1375px) { + padding-top: 100px; + } + + .container { + padding-bottom: 30px; + } + } + + &__title { + font-size: 30px; + font-weight: 500; + margin-bottom: 46px; + color: #000000; + span { + color: #52B709; + position: relative; + img { + position: absolute; + bottom: -15px; + right: -85px; + max-width: 280px; + + @media (max-width: 600px) { + max-width: 257px; + right: 0; + } + + @media (max-width: 483px) { + max-width: 160px; + left: -175px; + } + } + } + + @media (max-width: 600px) { + font-size: 24px; + margin-bottom: 25px; + } + } + + &__question { + background: #FFFFFF; + border-radius: 12px; + padding: 46.5px 75.5px 38px; + position: relative; + + &__img { + position: absolute; + top: -100px; + right: 58px; + } + } + + .questionBlock { + display: flex; + flex-direction: column; + margin-bottom: 18px; + &__head { + display: flex; + margin-bottom: 33px; + } + + &__suptitle { + color: #6F6F6F; + font-size: 14px; + margin-right: 70px; + } + + &__steps { + display: flex; + column-gap: 9px; + align-items: center; + + span { + width: 75px; + height: 6.5px; + background: #B0BABF; + border-radius: 77px; + } + + .active { + background: #6F6F6F; + } + } + + &__question { + font-size: 20px; + font-weight: 500; + color: #000000; + } + + &__answers { + margin-top: 45px; + display: flex; + column-gap: 20px; + + button { + border-radius: 12px; + border: 1px solid #8DC63F; + padding: 4px 30px; + line-height: 32px; + font-size: 15px; + } + + .active { + background: #1458DD; + color: whitesmoke; + font-weight: 500; + border: none; + } + } + } + + &__environment { + margin-top: 13px; + padding: 32px 20px 42px 44px; + background: #E2EBEF; + border-radius: 12px; + + .environment { + &__suptitle { + font-size: 14px; + color: #6F6F6F; + margin-left: 31px; + } + + &__title { + color: #000000; + font-size: 20px; + margin: 24px 0 48px 31px; + font-weight: 500; + } + + &__items { + display: flex; + flex-wrap: wrap; + row-gap: 19px; + column-gap: 21px; + margin-bottom: 30px; + } + + &__item { + opacity: 0.6; + background: white; + padding: 35px 32px 26px 27.5px; + border-radius: 12px; + max-width: 341px; + width: 100%; + height: 181px; + cursor: pointer; + + .item { + &__head { + display: flex; + column-gap: 19.5px; + margin-bottom: 35px; + img { + max-width: 48px; + max-height: 48px; + } + + h5 { + font-size: 18px; + font-weight: 500; + color: #000000; + max-width: 128px; + } + } + + &__bottom { + display: flex; + column-gap: 22.4px; + + p { + color: #6F6F6F; + font-size: 12px; + max-width: 189px; + } + + .arrow { + width: 48px; + height: 48px; + border-radius: 50px; + background: #DDEEC6; + margin-left: auto; + display: flex; + align-items: center; + justify-content: center; + } + } + } + } + } + } + + .item--active { + opacity: 1; + border: 2px solid #1458DD; + } + + &__continue { + margin: 6px 0 0 75.5px; + background-color: #52B709; + width: 174px; + height: 46px; + color: white; + font-size: 18px; + font-weight: 500; + padding: 7px 33px; + border: none; + border-radius: 44px; + } + + &__done { + margin: 0; + } +}