Добавил иконку с названием на вкладку, исправил форму для вопроса

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/jpg" href="/public/MiniLogo.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>front</title>
+    <title>RK PLASTIC</title>
   </head>
   <body>
     <div id="root"></div>

src/components/ModalRequestForm/ModalRequestForm.tsx

@@ -174,7 +174,7 @@ const ModalRequestForm: React.FC<Props> = ({ open, onClose }) => {
 
           <textarea 
             className={styles.textarea} 
-            placeholder="Задайте свой вопрос" 
+            placeholder="Сделайте запрос" 
             {...register("message")}
             disabled={isSubmitting}
           />

src/components/QuestionsBlock/QuestionsBlock.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import styles from "./QuestionsBlock.module.css";
 import Button from "../Button/Button";
 import { PhoneOutlined } from "@ant-design/icons";
-import PhoneRequest from "../../features/MainPage/PhoneRequest";
+import ModalRequestFormQuastion from "../../features/MainPage/PhoneRequest";
+import { useState } from "react";
 
 const QuestionsBlock: React.FC = () => {
 
-    const handleClick = () => {
+  const [open, setOpen] = useState(false);
-        console.log('Кнопка нажата!');
-    };
 
   return (
     <section className={styles.wrapper}>
@@ -45,13 +44,13 @@ const QuestionsBlock: React.FC = () => {
               type="text"
               placeholder="+7 (___) ___-__-__"
               className={styles.input}
-            />
+            />*/}
             <Button 
-                                label="ОТПРАВИТЬ" 
+                                label="ЗАДАТЬ ВОПРОС" 
-                                onClick={handleClick}
+                                onClick={() => setOpen(true)}
                             />
-          </div>*/}
+          
-          <PhoneRequest/>
+          <ModalRequestFormQuastion open={open} onClose={() => setOpen(false)}/>
         </div>
       </div>
     </section>

src/features/MainPage/PhoneRequest.tsx

@@ -1,105 +1,191 @@
-import React, { useState } from "react";
+import React from "react";
-import styles from "./MainPage.module.css";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import InputMask from "react-input-mask";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import styles from "../../components/ModalRequestForm/ModalRequestForm.module.css";
 import Button from "../../components/Button/Button";
 import { client } from "../../api/client";
 
+// ✅ Схема валидации
+const schema = yup.object().shape({
+  name: yup.string().required("Введите имя"),
+  email: yup.string().email("Некорректный Email").required("Введите Email"),
+  phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
+  message: yup.string().nullable(),
+});
+
 interface Props {
-  onSend?: (phone: string) => Promise<void>;
+  open: boolean;
+  onClose: () => void;
 }
 
-const PhoneRequest: React.FC<Props> = ({ onSend }) => {
+interface FormData {
-  const [phone, setPhone] = useState("");
+  name: string;
-  const [loading, setLoading] = useState(false);
+  email: string;
-  const [success, setSuccess] = useState(false);
+  phone: string;
-  const [error, setError] = useState("");
+  message?: string | null;
+}
 
-  // Автоформатирование "+7 (999) 999-99-99"
+const ModalRequestFormQuastion: React.FC<Props> = ({ open, onClose }) => {
-  const formatPhone = (value: string) => {
+    console.log('ModalRequestForm render, open:', open); 
-    const digits = value.replace(/\D/g, "");
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm({ resolver: yupResolver(schema) });
 
-    let result = "+7 ";
+  const handlePhoneInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (digits.length > 1) result += "(" + digits.substring(1, 4);
+    let value = e.target.value.replace(/\D/g, '');
-    if (digits.length >= 4) result += ") " + digits.substring(4, 7);
-    if (digits.length >= 7) result += "-" + digits.substring(7, 9);
-    if (digits.length >= 9) result += "-" + digits.substring(9, 11);
     
-    return result;
+    if (value.startsWith('7') || value.startsWith('8')) {
+      value = value.substring(1);
+    }
+    
+    let formattedValue = '+7 ';
+    
+    if (value.length > 0) {
+      formattedValue += '(' + value.substring(0, 3);
+    }
+    if (value.length > 3) {
+      formattedValue += ') ' + value.substring(3, 6);
+    }
+    if (value.length > 6) {
+      formattedValue += '-' + value.substring(6, 8);
+    }
+    if (value.length > 8) {
+      formattedValue += '-' + value.substring(8, 10);
+    }
+    
+    e.target.value = formattedValue;
   };
 
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // ✅ Отправка данных на бэкенд
-    let v = e.target.value;
+  const sendToBackend = async (data: FormData): Promise<boolean> => {
-
-    if (v.replace(/\D/g, "").length === 0) {
-      setPhone("");
-      return;
-    }
-
-    if (v[0] !== "+") {
-      v = "+7" + v;
-    }
-
-    setPhone(formatPhone(v));
-  };
-
-  const validatePhone = (p: string) => {
-    return p.replace(/\D/g, "").length === 11;
-  };
-
-  const handleSubmit = async () => {
-    setError("");
-
-    if (!validatePhone(phone)) {
-      setError("Введите корректный номер телефона");
-      return;
-    }
-
-    setLoading(true);
-
   try {
-      if (onSend) {
+    const payload = {
-        await onSend(phone);
+      ...data,
-      } else {
+    };
 
-        await client.post("/email/", { phone });
+    const response = await client.post<{ success: boolean }>("/email/", payload);
+    
+    return response.data.success;
+  } catch (error) {
+    console.error("Error sending request:", error);
+    throw new Error("Не удалось отправить заявку. Попробуйте позже.");
   }
+};
 
-      setSuccess(true);
+  // ✅ Submit
-      setPhone("");
+  const onSubmit = async (data: FormData) => {
+    try {
+      await sendToBackend(data);
       
-      setTimeout(() => setSuccess(false), 3000);
+      // Показываем уведомление об успехе
-    } catch (e) {
+      Modal.success({
-      setError("Ошибка отправки. Попробуйте позже.");
+        title: "Заявка отправлена!",
+        content: "Наш менеджер свяжется с вами в ближайшее время.",
+        okText: "Хорошо",
+      });
+      
+      reset();
+      onClose();
+    } catch (error) {
+      // Показываем ошибку
+      Modal.error({
+        title: "Ошибка",
+        content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
+        okText: "Понятно",
+      });
     }
-
-    setLoading(false);
   };
 
   return (
-    <div className={styles.form}>
+    <Modal 
+      open={open} 
+      footer={null} 
+      onCancel={onClose} 
+      centered 
+      width={620}
+      closable={!isSubmitting}
+      maskClosable={!isSubmitting}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className={styles.modalBox}
+      >
+        <h2 className={styles.title}>Задайте вопрос</h2>
+        <p className={styles.subtitle}>
+          Ожидайте ответа на указанную почту
+        </p>
+
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.field}>
             <input 
               className={styles.input} 
-        placeholder="+7 (___) ___-__-__"
+              placeholder="Введите имя *" 
-        type="tel"
+              {...register("name")}
-        value={phone}
+              disabled={isSubmitting}
-        onChange={handlePhoneChange}
-        maxLength={18}
             />
-    <Button 
+            {errors.name && <span className={styles.error}>{errors.name.message}</span>}
-                                label="ОТПРАВИТЬ" 
-                                onClick={handleSubmit}
-                            />
-      {/*<button
-        className={styles.button}
-        onClick={handleSubmit}
-        disabled={loading}
-      >
-        {loading ? "..." : "ОТПРАВИТЬ"}
-      </button>*/}
-
-      {error && <p className={styles.error}>{error}</p>}
-      {success && <p className={styles.success}>Заявка отправлена!</p>}
           </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите email *" 
+              {...register("email")}
+              disabled={isSubmitting}
+            />
+            {errors.email && <span className={styles.error}>{errors.email.message}</span>}
+          </div>
+
+          {/*<div className={styles.field}>
+            <InputMask 
+              mask="+7 (999) 999-99-99" 
+              {...register("phone")}
+              disabled={isSubmitting}
+            >
+              {(inputProps: any) => (
+                <input 
+                  className={styles.input} 
+                  placeholder="Введите № телефона *" 
+                  {...inputProps} 
+                />
+              )}
+            </InputMask>
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>*/}
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="+7 (___) ___-__-__ *" 
+              {...register("phone")}
+              onInput={handlePhoneInput}
+              disabled={isSubmitting}
+            />
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>
+
+          <textarea 
+            className={styles.textarea} 
+            placeholder="Ваш вопрос" 
+            {...register("message")}
+            disabled={isSubmitting}
+          />
+
+          <Button 
+            label={isSubmitting ? "ОТПРАВКА..." : "ОТПРАВИТЬ"} 
+          />
+        </form>
+      </motion.div>
+    </Modal>
   );
 };
 
-export default PhoneRequest;
+export default ModalRequestFormQuastion;