add adaptive registationForCandidate,

modalRegistration,
create hook useFormValidation,
add Validation in registationForCandidate

src/components/AuthBlock/authBlock.scss

@@ -67,7 +67,7 @@
       margin-bottom: 30px;
       background: #eff2f7;
       border-radius: 8px;
-      min-width: 300px;
+      min-width: 200px;
       width: 100%;
       padding: 8px 12px;
       border: none;

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -18,13 +18,15 @@ export const ModalRegistration = ({ active, setActive }) => {
   const [inputsValue, setInputsValue] = useState({
     userName: "",
     email: "",
-    password: ""
+    password: "",
+    secondPassword: ""
   });
 
   const [inputsError, setInputsError] = useState({
     name: false,
     email: false,
-    password: false
+    password: false,
+    secondPassword: false
   });
 
   const [loader, setLoader] = useState(false);
@@ -43,6 +45,9 @@ export const ModalRegistration = ({ active, setActive }) => {
     if (inputsValue.password.length < 6) {
       setInputsError((prevValue) => ({ ...prevValue, password: true }));
     }
+    if (inputsValue.password !== inputsValue.secondPassword) {
+      setInputsError((prevValue) => ({ ...prevValue, secondPassword: true }));
+    }
     if (inputsValue.userName.length < 2) {
       setInputsError((prevValue) => ({ ...prevValue, name: true }));
     }
@@ -105,8 +110,8 @@ export const ModalRegistration = ({ active, setActive }) => {
   return (
     <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
       <div className="registration-body__main">
-        <h2>
+        <h2 className="registration-body__main-title">
-          Подключайтесь к <p>ITguild</p>
+          Подключайтесь к <span>ITguild</span>
         </h2>
         <p className="registration-body__main-desc">
           Зарегистрируйтесь и начните работу уже сегодня
@@ -182,23 +187,25 @@ export const ModalRegistration = ({ active, setActive }) => {
             <div className="inputContainer">
               <h5>Повторите пароль</h5>
               <input
-                className={inputsError.password ? "error" : ""}
+                className={inputsError.secondPassword ? "error" : ""}
                 type="password"
                 onChange={(e) => {
                   setInputsError({
                     name: false,
                     email: false,
-                    password: false
+                    secondPassword: false
                   });
                   setInputsValue((prevValue) => ({
                     ...prevValue,
-                    password: e.target.value
+                    secondPassword: e.target.value
                   }));
                 }}
-                value={inputsValue.password}
+                value={inputsValue.secondPassword}
                 placeholder="Пароль"
               />
-              {inputsError.password && <span>Минимум 6 символов</span>}
+              {inputsError.secondPassword && (
+                <span>Пароли должны совпадать</span>
+              )}
             </div>
           </div>
         </div>

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -2,58 +2,105 @@
   background: white;
   display: flex;
   flex-direction: row;
-  padding: 0;
+  padding: 40px 20px 40px 20px;
   justify-content: space-between;
   border: 1px solid #dde2e4;
   border-radius: 8px;
+  width: 60%;
+
+  @media (max-width: 1375px) {
+    width: 80%;
+  }
+
+  @media (max-width: 617px) {
+    top: 7%;
+    padding: 20px 10px 20px 10px;
+  }
 
   &-body {
     &__main {
-      padding-left: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0 0 0 30px;
+      width: 65%;
 
-      h2 {
+      @media (max-width: 740px) {
+        width: 100%;
+        padding: 0;
+      }
+
+      &-title {
         font-weight: 500;
         font-size: 35px;
         line-height: 32px;
         display: flex;
         justify-content: space-between;
-        width: 405px;
+        margin: 0;
-        margin: 0 auto;
+
+        @media (max-width: 960px) {
+          font-size: 25px;
         }
 
-      h2 > p {
+        @media (max-width: 617px) {
-        font-size: 35px;
+          flex-direction: column;
+          align-items: center;
+          font-size: 20px;
+        }
+
+        span {
           color: #52b709;
+          margin: 0 0 0 10px;
+        }
       }
 
       &-desc {
         text-align: center;
-        width: 500px;
+        width: 100%;
         font-weight: 500;
         font-size: 16px;
         line-height: 28px;
-        margin: 20px auto 0 auto;
+        margin: 20px 0 0 0;
+
+        @media (max-width: 960px) {
+          font-size: 15px;
+        }
+
+        @media (max-width: 617px) {
+          margin: 10px 0 0 0;
+        }
       }
 
       .input-body {
-        margin-top: 44px;
+        margin: 44px 0 0 0;
         display: flex;
         flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+
+        @media (max-width: 617px) {
+          flex-direction: column;
+          align-items: center;
+          margin: 22px 0 0 0;
+        }
 
         &__box {
-          margin-right: 25px;
           display: flex;
           flex-direction: column;
+          width: 47%;
+
+          @media (max-width: 617px) {
+            width: 75%;
+          }
 
           h5 {
             font-weight: 400;
             font-size: 15px;
             line-height: 18px;
-            margin-left: 10px;
+            margin: 0 0 0 10px;
           }
 
           input {
-            width: 294px;
             height: 35px;
             background: #eff2f7;
             border-radius: 8px;
@@ -63,9 +110,8 @@
           }
 
           .inputContainer {
-            height: 81px;
+            margin: 0 0 20px 0;
-            margin-bottom: 10px;
+            width: 100%;
-            max-width: 294px;
           }
 
           span {
@@ -88,7 +134,11 @@
           width: 174px;
           height: 50px;
           font-size: 18px;
-          margin-right: 55px;
+          margin: 0 55px 0 0;
+
+          @media (max-width: 740px) {
+            margin: 0;
+          }
         }
 
         .disable {
@@ -112,20 +162,34 @@
     }
 
     &__about {
-      border-left: 1px solid #f1f1f1;
+      border-left: 1px solid #cdcdcd;
-      padding: 20px;
+      padding: 0 20px 0 10px;
+      margin: 0 0 0 10px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+      width: 35%;
+
+      @media (max-width: 960px) {
+        padding: 0 0 0 10px;
+      }
+
+      @media (max-width: 740px) {
+        display: none;
+      }
 
       h4 {
-        margin: 22px 0 22px 0;
+        margin: 30px 0 5px 0;
         font-weight: 900;
         font-size: 14px;
         line-height: 24px;
         color: #52b709;
-        margin-right: 100px;
+        width: 100%;
-        width: 180px;
+
+        @media (max-width: 960px) {
+          margin: 15px 0 5px 0;
+          font-size: 12px;
+        }
       }
 
       &-text {
@@ -136,7 +200,15 @@
           font-weight: 400;
           font-size: 12px;
           line-height: 22px;
-          width: 205px;
+          width: 230px;
+
+          @media (max-width: 1643px) {
+            width: 100%;
+          }
+
+          @media (max-width: 960px) {
+            font-size: 10px;
+          }
         }
 
         img {

src/components/SliderWorkers/sliderWorkers.scss

@@ -103,6 +103,9 @@
     &:hover {
       background-color: #8ec63f91;
     }
+    @media (max-width: 1200px) {
+      margin-right: 20px;
+    }
   }
 
   .slick-prev {
@@ -125,6 +128,9 @@
     &:hover {
       background-color: #8ec63f91;
     }
+    @media (max-width: 1200px) {
+      margin-left: 20px;
+    }
   }
 
   @media (max-width: 1375px) {

src/components/StepsForCandidate/stepForCandidate.scss

@@ -47,8 +47,8 @@
       font-weight: 400;
       font-size: 16px;
 
-      @media (max-width: 450px) {
+      @media (max-width: 312px) {
-        max-width: 180px;
+        font-size: 14px;
       }
     }
 
@@ -57,6 +57,10 @@
       font-weight: 400;
       font-size: 16px;
       line-height: 32px;
+
+      @media (max-width: 450px) {
+        display: none;
+      }
     }
   }
 }

src/hooks/useFormValidation.js

@@ -0,0 +1,77 @@
+import { useState } from "react";
+
+export const useFormValidation = () => {
+  // Состояние формы, содержащее значения полей
+  const [formData, setFormData] = useState({
+    name: "",
+    summary: "",
+    email: "",
+    tg: "",
+    password: "",
+    secondPassword: ""
+  });
+
+  // Состояние ошибок валидации
+  const [validationErrors, setValidationErrors] = useState({});
+
+  // Функция для обработки изменений в полях ввода
+  const handleChange = (e) => {
+    const { id, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [id]: value }));
+  };
+
+  // Функция для валидации формы
+  const validateForm = () => {
+    const errors = {};
+
+    if (formData.name.trim() === "") {
+      errors.name = "Имя обязательно к заполнению";
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (formData.email.trim() === "") {
+      errors.email = "E-mail обязателен к заполнению";
+    } else if (!emailRegex.test(formData.email)) {
+      errors.email = "Неверный адрес электронной почты";
+    }
+
+    if (formData.tg.trim() === "") {
+      errors.tg = "Telegram обязателен к заполнению";
+    }
+
+    if (formData.password.trim() === "") {
+      errors.password = "Пароль обязателен к заполнению";
+    } else if (formData.password.length < 8) {
+      errors.password = "Пароль должен содержать более 8 символов";
+    }
+
+    if (formData.secondPassword.trim() === "") {
+      errors.secondPassword = "Повторите пароль";
+    } else if (formData.secondPassword !== formData.password) {
+      errors.secondPassword = "Пароли должны совпадать";
+    }
+
+    setValidationErrors(errors);
+
+    // Возвращаем true, если ошибок нет, иначе - false
+    return Object.keys(errors).length === 0;
+  };
+
+  // Функция для обработки отправки формы
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (validateForm()) {
+      alert("Форма успешно отправлена!");
+    } else {
+      alert("Пожалуйста, заполните форму правильно.");
+    }
+  };
+
+  return {
+    formData,
+    validationErrors,
+    handleChange,
+    handleSubmit
+  };
+};

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { useFormValidation } from "@hooks/useFormValidation";
+
 import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 import SideBar from "@components/SideBar/SideBar";
@@ -11,6 +13,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./registationForCandidate.scss";
 
 export const RegistrationForCandidate = () => {
+  const form = useFormValidation();
   return (
     <div className="registrationCandidate">
       <AuthHeader />
@@ -23,7 +26,7 @@ export const RegistrationForCandidate = () => {
             <img src={arrowBtn}></img>
           </div>
           <p className="auth-candidate__start__description">
-            Для нас не имеет значение Ваша локация.
+            Для нас не имеет значения Ваша локация.
           </p>
           <StepsForCandidate step="шаг 2 - заполните данные" />
           <div className="registrationCandidate__formWrapper">
@@ -39,33 +42,87 @@ export const RegistrationForCandidate = () => {
                 <img src={arrowBtn} alt="img" />
               </div>
             </div>
-            <form className="registrationCandidate__form">
+            {/* форма регистрации */}
+            <form
+              className="registrationCandidate__form"
+              onSubmit={form.handleSubmit}
+            >
               <div className="registrationCandidate__form__input">
                 <label htmlFor="name">Ваше имя</label>
-                <input id="name" type="text" placeholder="Имя" />
+                <input
+                  className={form.validationErrors.name ? "error" : ""}
+                  value={form.formData.name}
+                  onChange={form.handleChange}
+                  id="name"
+                  type="text"
+                  placeholder="Имя"
+                />
+                <span>{form.validationErrors.name}</span>
               </div>
               <div className="registrationCandidate__form__input">
                 <label htmlFor="summary">Если есть ссылка на резюме</label>
-                <input id="summary" type="text" placeholder="Резюме" />
+                <input
+                  className={form.validationErrors.summary ? "error" : ""}
+                  value={form.formData.summary}
+                  onChange={form.handleChange}
+                  id="summary"
+                  type="url"
+                  placeholder="Резюме"
+                />
+                <span>{form.validationErrors.summary}</span>
               </div>
               <div className="registrationCandidate__form__input">
                 <label htmlFor="email">Ваш e-mail</label>
-                <input id="email" type="text" placeholder="E-mail" />
+                <input
+                  className={form.validationErrors.email ? "error" : ""}
+                  value={form.formData.email}
+                  onChange={form.handleChange}
+                  id="email"
+                  type="email"
+                  placeholder="E-mail"
+                />
+                <span>{form.validationErrors.email}</span>
               </div>
               <div className="registrationCandidate__form__input">
                 <label htmlFor="tg">Ваш telegram</label>
-                <input id="tg" type="text" placeholder="Telegram" />
+                <input
+                  className={form.validationErrors.tg ? "error" : ""}
+                  value={form.formData.tg}
+                  onChange={form.handleChange}
+                  id="tg"
+                  type="text"
+                  placeholder="Telegram"
+                />
+                <span>{form.validationErrors.tg}</span>
               </div>
               <div className="registrationCandidate__form__input">
                 <label htmlFor="password">Придумайте пароль</label>
-                <input id="password" type="text" placeholder="Пароль" />
+                <input
+                  className={form.validationErrors.password ? "error" : ""}
+                  value={form.formData.password}
+                  onChange={form.handleChange}
+                  id="password"
+                  type="password"
+                  placeholder="Пароль"
+                />
+                <span>{form.validationErrors.password}</span>
               </div>
               <div className="registrationCandidate__form__input">
                 <label htmlFor="secondPassword">Повторите пароль</label>
-                <input id="secondPassword" type="text" placeholder="Пароль" />
+                <input
+                  className={
+                    form.validationErrors.secondPassword ? "error" : ""
+                  }
+                  value={form.formData.secondPassword}
+                  onChange={form.handleChange}
+                  id="secondPassword"
+                  type="password"
+                  placeholder="Пароль"
+                />
+                <span>{form.validationErrors.secondPassword}</span>
               </div>
               <div className="registrationCandidate__form__submit">
-                <button>Отправить</button>
+                <button type="submit">Отправить</button>
               </div>
             </form>
           </div>

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -142,6 +142,15 @@
         font-size: 15px;
         line-height: 18px;
       }
+
+      .error {
+        border: 1px solid red;
+      }
+
+      span {
+        color: red;
+        font-size: 12px;
+      }
     }
 
     &__submit {