From d8e34980f264ca0fce5a790ea98376b1179c13cb Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 11 Jan 2024 17:43:09 +0300 Subject: [PATCH 1/2] 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; + } +} -- 2.34.1 From d5f6f5ba6063d74361ba98b4c956f5420fa717e5 Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 11 Jan 2024 17:43:25 +0300 Subject: [PATCH 2/2] registration setting --- .../RegistrationSetting.js | 217 ++++++++++-------- 1 file changed, 126 insertions(+), 91 deletions(-) diff --git a/src/pages/RegistrationSetting/RegistrationSetting.js b/src/pages/RegistrationSetting/RegistrationSetting.js index f3ae5a37..e68d1883 100644 --- a/src/pages/RegistrationSetting/RegistrationSetting.js +++ b/src/pages/RegistrationSetting/RegistrationSetting.js @@ -1,68 +1,74 @@ -import React, { useState } from "react"; +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 qa from "assets/icons/QA.svg"; +import rightArrow from "assets/icons/arrows/arrowRight.svg"; +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 tasks from "assets/icons/tasks.svg"; 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" +import "./registrationSetting.scss"; export const RegistrationSetting = () => { - const questions = { - countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'], - role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'], + countPeople: ["Только я", "2-5", "6-12", "13-40", "более 50", "более 100"], + role: [ + "Лидер команды", + "Член команды", + "Менеджер", + "Программист", + "Владелец бизнеса" + ], environment: [ { - title: 'Задачи и трекер', - subtitle: 'Сервис управления проектами и задачами', - icon: tasks, + title: "Задачи и трекер", + subtitle: "Сервис управления проектами и задачами", + icon: tasks }, { - title: 'Моя команда', - subtitle: 'Данные вашего персонала', - icon: myTeam, + title: "Моя команда", + subtitle: "Данные вашего персонала", + icon: myTeam }, { - title: 'Тестирование ', - subtitle: 'Сотрудники для вашего сервиса', - icon: qa, + title: "Тестирование ", + subtitle: "Сотрудники для вашего сервиса", + icon: qa }, { - title: 'Гит', - subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git', - icon: git, + title: "Гит", + subtitle: + "ПО для хостинга IT-проектов и совместной разработки на базе Git", + icon: git }, { - title: 'Аутстафинг', - subtitle: 'Каталог IT специалистов', - icon: outstaffing, + title: "Аутстафинг", + subtitle: "Каталог IT специалистов", + icon: outstaffing }, { - title: 'Курсы IT ', - subtitle: 'Обучайтесь сами обучайте персонал', - icon: curse, + title: "Курсы IT ", + subtitle: "Обучайтесь сами обучайте персонал", + icon: curse } ] - } + }; const [selectedOptions, setSelectedOptions] = useState({ - countPeople: '', - role: '' - }) + countPeople: "", + role: "" + }); - const [selectedEnvironment, setSelectedEnvironment] = useState([]) + const [selectedEnvironment, setSelectedEnvironment] = useState([]); - const [step, setStep] = useState(1) + const [step, setStep] = useState(1); return (
@@ -71,7 +77,7 @@ export const RegistrationSetting = () => {

- Добро пожаловать {" "} + Добро пожаловать{" "} в ITGuild arrow @@ -93,15 +99,23 @@ export const RegistrationSetting = () => {

{questions.countPeople.map((item, index) => { - return - }) - } + return ( + + ); + })}
{ alt="img" />
- {step >= 2 && + {step >= 2 && (
-

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

+

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

{questions.role.map((item, index) => { - return - }) - } + return ( + + ); + })}
- } - {step >= 3 && + )} + {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]) + return ( +
-
- icon -
{item.title}
-
-
-

{item.subtitle}

-
- arrow + key={index} + onClick={() => { + 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 && + )} + {step !== 3 && ( - } + )}
-- 2.34.1