diff --git a/front/src/components/QuestionsBlock/QuestionsBlock.tsx b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
index 8139ead..79fc316 100644
--- a/front/src/components/QuestionsBlock/QuestionsBlock.tsx
+++ b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
@@ -2,6 +2,7 @@ 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";
const QuestionsBlock: React.FC = () => {
@@ -39,7 +40,7 @@ const QuestionsBlock: React.FC = () => {
{/* FORM */}
-
+ {/*
{
label="ОТПРАВИТЬ"
onClick={handleClick}
/>
-
+
*/}
+
diff --git a/front/src/features/MainPage/MainPage.module.css b/front/src/features/MainPage/MainPage.module.css
new file mode 100644
index 0000000..1151440
--- /dev/null
+++ b/front/src/features/MainPage/MainPage.module.css
@@ -0,0 +1,26 @@
+.form {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.input {
+ flex: 1;
+ padding: 18px 24px;
+ border-radius: 50px;
+ border: none;
+ font-size: 18px;
+ outline: none;
+}
+
+.error {
+ color: red;
+ margin-top: 10px;
+}
+
+.success {
+ color: green;
+ margin-top: 10px;
+}
+
diff --git a/front/src/features/MainPage/PhoneRequest.tsx b/front/src/features/MainPage/PhoneRequest.tsx
new file mode 100644
index 0000000..228b614
--- /dev/null
+++ b/front/src/features/MainPage/PhoneRequest.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import axios from "axios";
+import styles from "./MainPage.module.css";
+import Button from "../../components/Button/Button";
+
+interface Props {
+ onSend?: (phone: string) => Promise;
+}
+
+const PhoneRequest: React.FC = ({ onSend }) => {
+ const [phone, setPhone] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const [error, setError] = useState("");
+
+ // Автоформатирование "+7 (999) 999-99-99"
+ const formatPhone = (value: string) => {
+ const digits = value.replace(/\D/g, "");
+
+ let result = "+7 ";
+ if (digits.length > 1) result += "(" + digits.substring(1, 4);
+ 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;
+ };
+
+ const handlePhoneChange = (e: React.ChangeEvent) => {
+ let v = e.target.value;
+
+ 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) {
+ await onSend(phone);
+ } else {
+
+ await axios.post("/api/contact/send-phone", { phone });
+ }
+
+ setSuccess(true);
+ setPhone("");
+
+ setTimeout(() => setSuccess(false), 3000);
+ } catch (e) {
+ setError("Ошибка отправки. Попробуйте позже.");
+ }
+
+ setLoading(false);
+ };
+
+ return (
+
+
+
+ {/*
*/}
+
+ {error &&
{error}
}
+ {success &&
Заявка отправлена!
}
+
+ );
+};
+
+export default PhoneRequest;
\ No newline at end of file