contact form updated , added telegram instagram icon buttons

components/pages/contact/form.tsx

@@ -45,7 +45,8 @@ export default function Form() {
 
   const formRequest = useMutation({
     mutationKey: [],
-    mutationFn: (data: FormData) => httpClient.post(endPoints.post.contact, data),
+    mutationFn: (data: FormData) =>
+      httpClient.post(endPoints.post.contact, data),
     onSuccess: () => {
       setSubmitStatus("success");
       setFormData({
@@ -78,10 +79,13 @@ export default function Form() {
     if (!formData.surname.trim()) {
       newErrors.surname = "Last name is required";
     }
-    if (!formData.address.trim()) {
-      newErrors.address = "address is required";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.address)) {
-      newErrors.address = "Please enter a valid address";
+    const phoneNumbers = formData.address.replace(/\D/g, "");
+    if (phoneNumbers.length !== 12) {
+      newErrors.address =
+        t("validation.phoneRequired") || "To'liq telefon raqam kiriting";
+    } else if (!phoneNumbers.startsWith("998")) {
+      newErrors.address =
+        t("validation.phoneInvalid") || "Noto'g'ri telefon raqam";
     }
     if (!formData.theme.trim()) {
       newErrors.theme = "theme is required";
@@ -97,6 +101,30 @@ export default function Form() {
     return Object.keys(newErrors).length === 0;
   };
 
+  const formatPhoneNumber = (value: string) => {
+    const numbers = value.replace(/\D/g, "");
+    if (!numbers.startsWith("998")) {
+      return "+998 ";
+    }
+
+    let formatted = "+998 ";
+    const rest = numbers.slice(3);
+    if (rest.length > 0) formatted += rest.slice(0, 2);
+    if (rest.length > 2) formatted += " " + rest.slice(2, 5);
+    if (rest.length > 5) formatted += " " + rest.slice(5, 7);
+    if (rest.length > 7) formatted += " " + rest.slice(7, 9);
+
+    return formatted;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhoneNumber(e.target.value);
+    setFormData({ ...formData, address: formatted });
+    if (errors.address) {
+      setErrors({ ...errors, address: "" });
+    }
+  };
+
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -169,19 +197,19 @@ export default function Form() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
           <input
-            type="address"
-            name="address"
-            placeholder={t("contact.form.placeholders.email")}
+            type="tel"
+            id="phone"
+            name="phone"
             value={formData.address}
-            onChange={handleChange}
+            onChange={handlePhoneChange}
             className={`font-almarai w-full rounded-3xl border bg-white px-4 py-3 text-sm text-gray-700 placeholder-gray-400 outline-none transition focus:ring-2 focus:ring-red-500 ${
               errors.address ? "border-red-500" : "border-transparent"
             }`}
+            placeholder="+998 90 123 45 67"
+            maxLength={17}
           />
           {errors.address && (
-            <p className="font-almarai mt-1 text-xs text-red-500">
-              {errors.address}
-            </p>
+            <p className="mt-1 text-sm text-red-500">{errors.address}</p>
           )}
         </div>
         <div>