From dcdfce4d792e453781ca7bceb80d483d8d95d9bc Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Mon, 9 Feb 2026 19:21:22 +0500
Subject: [PATCH] contact form updated , added telegram instagram icon buttons

---
 components/layout/footer.tsx                 | 62 ++++++++++++++++----
 components/pages/contact/form.tsx            | 52 ++++++++++++----
 components/pages/contact/main.tsx            |  2 +-
 components/pages/home/about.tsx              | 10 ++--
 components/pages/home/banner.tsx             | 17 ++++--
 components/pages/products/slug/rightSide.tsx | 30 +++-------
 components/provider/index.tsx                |  2 +-
 7 files changed, 118 insertions(+), 57 deletions(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 790edba..3f5a045 100644
--- a/components/layout/footer.tsx
+++ b/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>
diff --git a/components/pages/contact/form.tsx b/components/pages/contact/form.tsx
index 9a10a07..eb69ece 100644
--- a/components/pages/contact/form.tsx
+++ b/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>
diff --git a/components/pages/contact/main.tsx b/components/pages/contact/main.tsx
index c6db2e2..0224e8c 100644
--- a/components/pages/contact/main.tsx
+++ b/components/pages/contact/main.tsx
@@ -42,7 +42,7 @@ export function Contact() {
           className="absolute inset-0"
           style={{
             background:
-              "radial-gradient(ellipse at bottom center, #d2610a 0%, #1e1d1ce9 70% , #1e1d1ce9 70%)",
+              "radial-gradient(at center bottom, rgb(144 74 20) 0%, rgba(30, 29, 28, 0.914) 70%, rgba(30, 29, 28, 0.914) 70%)",
           }}
         />
       </div>
diff --git a/components/pages/home/about.tsx b/components/pages/home/about.tsx
index 3c76cde..fab3528 100644
--- a/components/pages/home/about.tsx
+++ b/components/pages/home/about.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import React from "react";
-
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import { Flame, Building2, Ambulance } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
 
 interface ServiceItem {
   icon: React.ReactNode;
@@ -16,6 +15,7 @@ interface ServiceItem {
 
 export function AboutUs() {
   const t = useTranslations();
+  const locale = useLocale();
   const services: ServiceItem[] = [
     {
       icon: <Flame width={40} height={40} className="text-red-500" />,
@@ -76,9 +76,9 @@ export function AboutUs() {
 
             {/* Button */}
             <div>
-              <Button className="font-almarai bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
+              <Link href={`/${locale}/about`} className="font-almarai bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
                 {t("home.about.title")}
-              </Button>
+              </Link>
             </div>
           </div>
 
diff --git a/components/pages/home/banner.tsx b/components/pages/home/banner.tsx
index e8b61ac..cad5c1c 100644
--- a/components/pages/home/banner.tsx
+++ b/components/pages/home/banner.tsx
@@ -1,8 +1,10 @@
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import DotAnimatsiya from "../../dot/DotAnimatsiya";
+import Link from "next/link";
 
 export function Banner() {
   const t = useTranslations();
+  const locale = useLocale();
   return (
     <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
       {/* Background Image */}
@@ -77,8 +79,10 @@ export function Banner() {
               </div>
 
               {/* Main Heading */}
-              <h1 className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
-  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+              <h1
+                className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+              >
                 {t("home.banner.title2")}
               </h1>
 
@@ -88,9 +92,12 @@ export function Banner() {
               </p>
 
               {/* CTA Button */}
-              <button className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+              <Link
+                href={`/${locale}/contact`}
+                className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
+              >
                 {t("home.banner.cta")}
-              </button>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/components/pages/products/slug/rightSide.tsx b/components/pages/products/slug/rightSide.tsx
index ffcac6c..c76802d 100644
--- a/components/pages/products/slug/rightSide.tsx
+++ b/components/pages/products/slug/rightSide.tsx
@@ -1,12 +1,5 @@
 import { usePriceModalStore } from "@/store/useProceModalStore";
-import { Facebook, Share2 } from "lucide-react";
-
-const socialLinks = [
-  { name: "telegram", icon: "✈️", color: "#0088cc" },
-  { name: "facebook", icon: <Facebook size={18} />, color: "#1877F2" },
-  { name: "whatsapp", icon: "💬", color: "#25D366" },
-  { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
-];
+import { Instagram, Send, Share2 } from "lucide-react";
 
 interface RightSideProps {
   id: number;
@@ -95,19 +88,14 @@ export function RightSide({
             <Share2 className="w-5 h-5 text-gray-400" />
             <span className="text-sm text-gray-400">Ulashish:</span>
           </div>
-          <div className="flex flex-wrap gap-2">
-            {socialLinks.map((social) => (
-              <a
-                key={social.name}
-                href="#"
-                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition-all duration-300 hover:scale-110 hover:shadow-lg"
-                style={{ backgroundColor: social.color }}
-                title={social.name}
-              >
-                {social.icon}
-              </a>
-            ))}
-          </div>
+          <div className="flex items-center gap-5 mt-5">
+                <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
+                  <Instagram />
+                </a>
+                <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
+                  <Send />
+                </a>
+              </div>
         </div>
       </div>
     </div>
diff --git a/components/provider/index.tsx b/components/provider/index.tsx
index d658665..8df5fe9 100644
--- a/components/provider/index.tsx
+++ b/components/provider/index.tsx
@@ -14,7 +14,7 @@ export function Providers({ children }: { children: ReactNode }) {
   return (
     <div>
       <QueryClientProvider client={queryClient}>
-        <BackAnimatsiya />
+        {/* <BackAnimatsiya /> */}
         <Navbar />
         {children}
         <Footer />