contact form updated , added telegram instagram icon buttons

components/layout/footer.tsx

@@ -3,18 +3,18 @@
 import React from "react";
 
 import { useState } from "react";
-import { Mail, Phone, MapPin } from "lucide-react";
+import { Mail, Phone, MapPin, Instagram, Send } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "react-toastify";
-import axios from "axios";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 
 export function Footer() {
   const locale = useLocale();
+  const [errors, setErrors] = useState<any>({});
   const t = useTranslations();
   const [email, setEmail] = useState("");
   const [subscribed, setSubscribed] = useState(false);
@@ -34,6 +34,30 @@ export function Footer() {
     },
   });
 
+    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);
+    setEmail(formatted);
+    if (errors.address) {
+      setErrors({ ...errors, address: "" });
+    }
+  };
+
   const handleSubscribe = (e: React.FormEvent) => {
     e.preventDefault();
     if (email) {
@@ -67,14 +91,16 @@ export function Footer() {
               className="flex sm:flex-row flex-col w-full gap-2 md:w-auto"
             >
               <input
-                type="text"
-                placeholder={t("enterPhone")}
+                type="tel"
+                id="phone"
+                name="phone"
                 value={email}
-                minLength={9}
-                maxLength={13}
-                onChange={(e) => setEmail(e.target.value)}
-                className="font-almarai flex-1 rounded-full bg-white px-6 py-3 text-gray-800 placeholder-gray-400 focus:outline-none md:w-64"
-                required
+                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.email ? "border-red-500" : "border-transparent"
+                }`}
+                placeholder="+998 90 123 45 67"
+                maxLength={17}
               />
               <button
                 type="submit"
@@ -107,6 +133,20 @@ export function Footer() {
               <p className="font-almarai text-sm leading-relaxed text-gray-300">
                 {t("footer.description")}
               </p>
+              <div className="flex items-center gap-5 mt-5">
+                <a
+                  href=""
+                  className="p-2 rounded-md bg-gray-700 hover:bg-red-500"
+                >
+                  <Instagram />
+                </a>
+                <a
+                  href=""
+                  className="p-2 rounded-md bg-gray-700 hover:bg-red-500"
+                >
+                  <Send />
+                </a>
+              </div>
             </div>
 
             {/* Quick Links */}
@@ -187,9 +227,7 @@ export function Footer() {
                 </li>
                 <li className="flex items-start gap-3">
                   <MapPin className="mt-1 h-5 w-5 shrink-0 text-white" />
-                  <span>
-                    {t("footer.address")}
-                  </span>
+                  <span>{t("footer.address")}</span>
                 </li>
               </ul>
             </div>