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..e68d1883 --- /dev/null +++ b/src/pages/RegistrationSetting/RegistrationSetting.js @@ -0,0 +1,219 @@ +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 "./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; + } +}