src/components/AuthBlock/authBlock.scss

@@ -101,6 +101,21 @@
         line-height: 32px;
         color: white;
         height: 45px;
+
+        @media (max-width: 900px) {
+          max-width: 185px;
+        }
+
+        @media (max-width: 450px) {
+          width: 100%;
+          max-width: none;
+          margin-right: 0;
+        }
+      }
+
+      @media (max-width: 450px) {
+        flex-direction: column;
+        row-gap: 10px;
       }
     }
 
@@ -139,6 +154,11 @@
       transform: scale(1.03);
       color: white;
     }
+
+    @media (max-width: 450px) {
+      width: 100%;
+      max-width: none;
+    }
   }
 
   &__img {

src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Link } from "react-router-dom";
 import close from "assets/icons/closeProjectPersons.svg";
 
 import "./modalTrackerRegistration.scss";
@@ -16,12 +17,13 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
         для активации вашего аккаунта на почту
         <br /> <span>{email}</span>
       </p>
-      <button
+      <Link
+        to={'/registration-setting'}
         onClick={() => setModalReset(false)}
         className="modalConfirmTracker__btn"
       >
         Понятно
-      </button>
+      </Link>
       <img
         onClick={() => setModalReset(false)}
         src={close}

src/components/PartnerPersonCard/PartnerPersonCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { urlForLocal } from "@utils/helper";
+
+import rightArrow from "assets/icons/arrows/arrowRight.svg";
+
+import "./partnerPersonCard.scss";
+
+export const PartnerPersonCard = ({name, img, userId}) => {
+  return (
+    <div className="partnerPersonCard">
+      <div className="partnerPersonCard__img">
+        <img src={urlForLocal(img)} alt='avatar' />
+      </div>
+      <div className="partnerPersonCard__info">
+        <h2 className="partnerPersonCard__name">{name}</h2>
+        <Link className="partnerPersonCard__report" to={`calendar/${userId}`}>
+          Подробный отчет
+          <div className="partnerPersonCard__more">
+            <img src={rightArrow} alt='arrow' />
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default PartnerPersonCard;

src/components/PartnerPersonCard/partnerPersonCard.scss

@@ -0,0 +1,45 @@
+.partnerPersonCard {
+  display: flex;
+  position: relative;
+
+  &__img {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    z-index: 2;
+    img {
+      width: 77px;
+      height: 77px;
+    }
+  }
+
+  &__info {
+    position: relative;
+    background: #E1FCCF;
+    z-index: 1;
+    padding: 15px 15px 15px 30px;
+    left: -15px;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__report {
+    display: flex;
+    column-gap: 10px;
+    color: black;
+    font-size: 16px;
+    align-items: center;
+  }
+
+  &__more {
+    width: 41px;
+    height: 41px;
+    background: white;
+    border-radius: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/pages/PartnerСategories/partnerСategories.scss

@@ -14,6 +14,7 @@
   &__items {
     display: flex;
     gap: 10px;
+    flex-wrap: wrap;
     //flex-wrap: wrap;
     //margin-top: 25px;
     //row-gap: 24px;

src/pages/TrackerRegistration/TrackerRegistration.js

@@ -5,6 +5,9 @@ import { Footer } from "@components/Common/Footer/Footer";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
 import SideBar from "@components/SideBar/SideBar";
+import { useFormValidation } from "@hooks/useFormValidation";
+import { useNotification } from "@hooks/useNotification";
+import { Navigate } from "react-router-dom";
 
 import arrowInfo from "assets/icons/trackerIntroInfo.svg";
 import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
@@ -14,9 +17,42 @@ import "./trackerRegistration.scss";
 
 export const TrackerRegistration = () => {
   const [modalConfirmOpen, setModalConfirm] = useState(false);
-  const [inputs, setInputs] = useState({
+  const fields = {
-    email: ""
+    username: "",
+    email: "",
+    password: "",
+    secondPassword: ""
+  };
+
+  const apiEndpoint = "/register/sign-up";
+
+  const { showNotification } = useNotification();
+  const showNotificationError = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт с таким логином или email уже существует",
+      type: "error"
     });
+  };
+  const showNotificationTrue = () => {
+    showNotification({
+      show: true,
+      text: "Аккаунт успешно создан",
+      type: "success"
+    });
+  };
+
+  const {
+    formData,
+    validationErrors,
+    handleChange,
+    handleSubmit,
+  } = useFormValidation(
+    apiEndpoint,
+    fields,
+    showNotificationError,
+    showNotificationTrue,
+  );
 
   return (
     <div className="tracker-registration">
@@ -34,33 +70,64 @@ export const TrackerRegistration = () => {
           <div className="tracker-registration__form">
             <div className="tracker-registration__form__inputs">
               <div className="tracker-registration__inputContainer">
-                <span>Ваше имя</span>
+                <h5>Ваше имя</h5>
-                <input placeholder="Имя" />
-              </div>
-              <div className="tracker-registration__inputContainer">
-                <span>Ваш e-mail</span>
                 <input
-                  placeholder="E-mail"
+                  placeholder="Имя"
-                  onChange={(e) =>
+                  className={validationErrors.username ? "error" : ""}
-                    setInputs((prevState) => ({
+                  onChange={handleChange}
-                      ...prevState,
+                  value={formData.username}
-                      email: e.target.value
+                  id="username"
-                    }))
-                  }
-                  type="email"
                 />
+                <span>{validationErrors.username}</span>
               </div>
               <div className="tracker-registration__inputContainer">
-                <span>Придумайте пароль</span>
+                <h5>Ваш e-mail</h5>
-                <input placeholder="Пароль" />
+                <input
+                  onChange={handleChange}
+                  className={validationErrors.email ? "error" : ""}
+                  placeholder="E-mail"
+                  type="email"
+                  id="email"
+                  value={formData.email}
+                />
+                <span>{validationErrors.email}</span>
               </div>
               <div className="tracker-registration__inputContainer">
-                <span>Повторите пароль</span>
+                <h5>Придумайте пароль</h5>
-                <input placeholder="Повторите пароль" />
+                <input
+                  placeholder="Пароль"
+                  className={validationErrors.password ? "error" : ""}
+                  onChange={handleChange}
+                  value={formData.password}
+                  type="password"
+                  id="password"
+                />
+                <span>{validationErrors.password}</span>
+              </div>
+              <div className="tracker-registration__inputContainer">
+                <h5>Повторите пароль</h5>
+                <input
+                  placeholder="Повторите пароль"
+                  className={validationErrors.secondPassword ? "error" : ""}
+                  value={formData.secondPassword}
+                  type="password"
+                  onChange={handleChange}
+                  id="secondPassword"
+                />
+                <span>{validationErrors.secondPassword}</span>
               </div>
             </div>
             <div className="tracker-registration__form__submit">
-              <button onClick={() => setModalConfirm(true)}>Отправить</button>
+              <button
+                onClick={async (e) => {
+                  e.preventDefault();
+                  const result = await handleSubmit(e);
+                  if (result === true) {
+                    setModalConfirm(true)
+                  }
+                }}
+              >
+                Отправить</button>
               <div className="tracker-registration__form__info">
                 <img src={authImg} alt="img" />
                 <p>
@@ -80,7 +147,7 @@ export const TrackerRegistration = () => {
           <ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
             <ModalTrackerRegistration
               setModalReset={setModalConfirm}
-              email={inputs.email}
+              email={formData.email}
             />
           </ModalLayout>
         )}

src/pages/TrackerRegistration/trackerRegistration.scss

@@ -41,6 +41,7 @@
     &__submit {
       display: flex;
       align-items: center;
+      margin-top: 5px;
 
       button {
         border-radius: 44px;
@@ -106,15 +107,18 @@
   &__inputContainer {
     display: flex;
     flex-direction: column;
-    row-gap: 15px;
     max-width: 300px;
     width: 100%;
     margin-bottom: 44px;
 
+    h5 {
+      font-size: 15px;
+    }
+
     span {
       font-weight: 400;
-      font-size: 15px;
+      font-size: 12px;
-      color: #000;
+      color: red;
     }
 
     input {
@@ -122,6 +126,7 @@
       padding: 8px 12px 9px;
       background-color: #EFF2F7;
       border-radius: 8px;
+      margin: 10px 0;
       border: none;
       font-weight: 400;
       font-size: 15px;
@@ -132,5 +137,9 @@
       margin-bottom: 0;
       max-width: none;
     }
+
+    .error {
+      border: 1px solid red;
+    }
   }
 }