Add welcome to the registration

src/pages/ViewReport/ViewReport.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
+import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setEditReport } from "@redux/reportSlice";
 
 import {
@@ -9,6 +10,7 @@ import {
   getCreatedDate,
   hourOfNum
 } from "@utils/calendarHelper";
+import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -20,8 +22,9 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
+import arrowSwitchDate from "assets/icons/arrows/arrowCalendar_right.png";
 import arrow from "assets/icons/arrows/left-arrow.png";
+import avatarMok from "assets/images/avatarMok.png";
 
 import "./viewReport.scss";
 
@@ -31,6 +34,7 @@ export const ViewReport = () => {
   const [previousReportDay] = useState(new Date(params.date));
   const [nextReportDay] = useState(new Date(params.date));
 
+  const profileInfo = useSelector(getProfileInfo);
   const [taskText, setTaskText] = useState([]);
   const [difficulties, setDifficulties] = useState([]);
   const [tomorrowTask, setTomorrowTask] = useState([]);
@@ -140,6 +144,33 @@ export const ViewReport = () => {
             <img src={arrow} alt="#" />
             <p>Вернуться</p>
           </Link>
+          <div className="summary__info">
+            <div className="summary__person">
+              <img
+                src={
+                  profileInfo?.photo
+                    ? urlForLocal(profileInfo.photo)
+                    : avatarMok
+                }
+                className="summary__avatar"
+                alt="avatar"
+              />
+              <p className="summary__name">
+                {profileInfo?.fio || profileInfo?.username}{" "}
+                {profileInfo.specification}
+              </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
+            </div>
+            <div className="summary__skill">
+              <p>Ключевые навыки:</p>
+              <div>Java</div>
+              <div>Java</div>
+              <div>Solid</div>
+              <div>Java</div>
+            </div>
+          </div>
           {localStorage.getItem("role_status") !== "18" && (
             <div className="view-report__bar">
               <Link

src/pages/ViewReport/viewReport.scss

@@ -4,6 +4,25 @@
   flex-direction: column;
   min-height: 100vh;
 
+  .summary__skill {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+
+    div {
+      font-size: 12px;
+      font-weight: 400;
+
+      border: #8dc63f 0.5px solid;
+      border-radius: 44px;
+      padding: 3px 20px;
+    }
+  }
+
   .container {
     max-width: 1160px;
     display: flex;
@@ -68,7 +87,7 @@
     background: #ffffff;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
-    padding: 20px 33px;
+    padding: 55px;
     align-items: center;
     column-gap: 20px;
     height: 72px;

src/pages/WelcomePage/WelcomePage.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import SideBar from "@components/SideBar/SideBar";
+
+import ITguild from "assets/images/logo/ITguild.svg";
+
+import "./welcomePage.scss";
+
+export const WelcomePage = () => {
+  const [loader, setLoader] = useState(false);
+
+  return (
+    <div className="welcome-page">
+      <AuthHeader />
+
+      <div className="welcome-page-component">
+        <div className="welcome-page-component__title">
+          <img src={ITguild}></img>
+          <h1>
+            Добро пожаловать в <span>ITGuild</span>
+          </h1>
+        </div>
+        <div className="welcome-page-component__text">
+          <p>
+            Создавайте и редактируйте задачи и проекты вместе с другими
+            участниками
+            <br /> команды. Сервис для работы с IT специалистами
+          </p>
+        </div>
+
+        <div className="button-box">
+          {loader ? (
+            <Loader />
+          ) : (
+            <BaseButton
+              onClick={() => {
+                setLoader(true);
+              }}
+              styles="button-box__submit"
+            >
+              Начать
+            </BaseButton>
+          )}
+        </div>
+      </div>
+      <SideBar />
+      <Footer />
+    </div>
+  );
+};

src/pages/WelcomePage/welcomePage.scss

@@ -0,0 +1,44 @@
+.welcome-page {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  &-component {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex: 1;
+
+    &__title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-weight: 500;
+      font-size: 30px;
+      line-height: 32px;
+      margin-bottom: 45px;
+
+      img {
+        width: 151px;
+        margin: 70px 0 19px 0;
+      }
+    }
+
+    &__text {
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      margin-bottom: 45px;
+    }
+
+    .button-box__submit {
+      width: 174px;
+      height: 50px;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}

src/pages/roles/GuestPage.jsx

@@ -15,6 +15,7 @@ import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/Regist
 import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
 import { SingleReportPage } from "@pages/SingleReportPage/SingleReportPage";
 import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro";
+import { WelcomePage } from "@pages/WelcomePage/WelcomePage";
 
 import { FreeDevelopers } from "@components/FreeDevelopers/FreeDevelopers";
 
@@ -22,6 +23,7 @@ export const GuestPage = () => {
   return (
     <Routes>
       <Route exact path="/auth" element={<Auth />} />
+      <Route exact path="/welcome-page" element={<WelcomePage />} />
       <Route path="*" element={<Navigate to="/auth" replace />} />
       <Route exact path="/tracker-intro" element={<TrackerIntro />} />
       <Route exact path="/forms" element={<Forms />} />