connected backend to service page and detail

components/breadCrumb.tsx

@@ -140,6 +140,7 @@ export function Breadcrumb({
       if (segment === "special_product") {
         return product.name;
       }
+      if(segment === 'detail') return '';
       return t(`breadcrumb.${segment}`);
     } catch {
       // Aks holda, segment nomini formatlash

components/layout/footer.tsx

@@ -61,7 +61,10 @@ export function Footer() {
   const handleSubscribe = (e: React.FormEvent) => {
     e.preventDefault();
     if (email) {
-      formRequest.mutate({ number: email });
+      // Telefon raqamni tozalash (faqat raqamlar)
+      const cleanPhone = email.replace(/\D/g, "");
+      console.log("without 998: ",cleanPhone.slice(3))
+      formRequest.mutate({ number: Number(cleanPhone.slice(3))});
     }
   };
 
@@ -239,7 +242,9 @@ export function Footer() {
       <div className="border-t border-gray-800 px-4 py-8">
         <div className="mx-auto max-w-6xl">
           <div className="font-almarai flex flex-col justify-center gap-4 text-lg text-gray-400 md:flex-row md:items-center">
-            <a href="http://felix-its.uz/" className="hover:text-red-600">{t("footer.create", { name: "Felix-its.uz" })}</a>
+            <a href="http://felix-its.uz/" className="hover:text-red-600">
+              {t("footer.create", { name: "Felix-its.uz" })}
+            </a>
             {/* <div className="flex gap-6">
               <a href="#terms" className="hover:text-white">
                 Terms & Conditions

components/layout/navbar.tsx

@@ -5,12 +5,10 @@ import { ChevronDown, Phone, Menu, X } from "lucide-react";
 import Image from "next/image";
 import LanguageSelectRadix from "../languageSwitcher";
 import { useLocale, useTranslations } from "next-intl";
-import NavbarLogo from "./navbarLogo/navbarLogo";
 
 export function Navbar() {
   const locale = useLocale();
   const t = useTranslations();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
 
@@ -42,7 +40,12 @@ export function Navbar() {
             <Link href={`/${locale}/home`} className="hover:cursor-pointer">
               <div className="flex items-center gap-2">
                 <div className=" flex items-center justify-center">
-                  <Image src={'/images/IGNUM/PNG/1.@6x.png'} alt="logo image" width={80} height={80} />
+                  <Image
+                    src={"/images/IGNUM/PNG/1.@6x.png"}
+                    alt="logo image"
+                    width={80}
+                    height={80}
+                  />
                 </div>
               </div>
             </Link>
@@ -103,8 +106,8 @@ export function Navbar() {
                 </span>
                 <div>
                   <div className="text-white text-sm font-bold">
+                    <div>+998-55-055-21-21</div>
                     <div>+998-77-372-21-21</div>
-                    <div>+998-98-099-21-21</div> 
                   </div>
                 </div>
               </div>

components/pages/home/index.ts

@@ -2,7 +2,7 @@ export { Banner } from "./banner";
 export { Statistics } from "./statistics";
 export { AboutUs } from "./about";
 export { Video } from "./video";
-export { OurService } from "./ourService";
+export { OurService } from "../services/ourService";
 export { Testimonial } from "./testimonal";
 export { Line } from "./line";
 export { Blog } from "./blog/blog";

components/pages/home/ourService.tsx

@@ -1,122 +0,0 @@
-import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
-import { ChevronRight } from "lucide-react";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-import Link from "next/link";
-
-export function OurService() {
-  const t = useTranslations();
-  return (
-    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
-      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="space-y-4 md:space-y-6">
-          <div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
-            <DotAnimatsiya />
-            {t("home.services.title")}
-          </div>
-          <h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
-            {t("home.services.subtitle")}
-          </h1>
-          <p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
-            {t("home.services.description")}
-          </p>
-        </div>
-
-        {/* cards */}
-        <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
-          <div className="relative space-y-4 py-6 px-8 rounded-xl sm:w-[55%] w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)]">
-            <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              {t("home.services.services.operation.title")}
-            </p>
-            <p className="font-almarai text-gray-400 max-w-80 w-full">
-              {t("home.services.services.operation.description")}
-            </p>
-            <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              {t("home.services.learnmore")} <ChevronRight size={20} />
-            </button>
-            <Image
-              src="/images/home/gruop.png"
-              alt="images"
-              width={200}
-              height={100}
-              className="object-contain sm:absolute bottom-0 right-2 z-10"
-            />
-          </div>
-          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl sm:w-[45%] w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)]">
-            <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-              {t("home.services.services.suppression.title")}
-            </p>
-            <p className="font-almarai text-gray-400 max-w-70 w-full">
-              {t("home.services.services.suppression.description")}
-            </p>
-            <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              {t("home.services.learnmore")} <ChevronRight size={20} />
-            </button>
-            <Image
-              src="/images/home/redShlang.png"
-              alt="images"
-              width={200}
-              height={100}
-              className="object-contain sm:absolute -bottom-4 -right-4 z-10"
-            />
-          </div>
-        </div>
-
-        <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt-5 w-full mx-auto">
-          <div className="relative rounded-xl sm:w-[40%] w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)]">
-            <Image
-              src="/images/home/ambulance.png"
-              alt="images"
-              width={300}
-              height={200}
-              className="object-contain mt-5"
-            />
-            <div className="space-y-4 py-6 px-8">
-              <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                {t("home.services.services.safety.title")}
-              </p>
-              <p className="font-almarai text-gray-400 max-w-80 w-full">
-                {t("home.services.services.safety.description")}
-              </p>
-              <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                {t("home.services.learnmore")} <ChevronRight size={20} />
-              </button>
-            </div>
-          </div>
-          <div className="sm:w-[60%] w-full">
-            <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)]">
-              <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
-                {t("home.services.services.monitoring.title")}
-              </p>
-              <p className="font-almarai text-gray-400 max-w-70 w-full">
-                {t("home.services.services.monitoring.description")}
-              </p>
-              <button className="font-almarai sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                {t("home.services.learnmore")} <ChevronRight size={20} />
-              </button>
-              <Image
-                src="/images/home/balon.png"
-                alt="images"
-                width={200}
-                height={100}
-                className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
-              />
-            </div>
-            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col  gap-5 items-center justify-between">
-              <h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
-                {t("home.services.viewMoreServices")}
-              </h2>
-              <Link
-                href="/services"
-                className="font-almarai shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
-              >
-                {t("home.services.viewMore")}
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

components/pages/services/empty.tsx

@@ -0,0 +1,72 @@
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+
+// Empty State Component
+export function EmptyServices() {
+  const t = useTranslations();
+  
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="max-w-250 w-full mx-auto py-20"
+    >
+      <div className="bg-linear-to-br from-gray-900 to-gray-800 rounded-2xl p-10 md:p-16 text-center border border-gray-700/50">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          className="mb-8"
+        >
+          <div className="w-24 h-24 mx-auto bg-red-500/10 rounded-full flex items-center justify-center">
+            <svg
+              className="w-12 h-12 text-red-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              />
+            </svg>
+          </div>
+        </motion.div>
+
+        <motion.h3
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="text-2xl md:text-3xl font-bold text-white font-unbounded mb-4"
+        >
+          {t("home.services.noData.title") || "Xizmatlar topilmadi"}
+        </motion.h3>
+
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="text-gray-400 font-almarai text-base md:text-lg mb-8 max-w-md mx-auto"
+        >
+          {t("home.services.noData.description") || "Hozircha hech qanday xizmat mavjud emas. Tez orada yangi xizmatlar qo'shiladi."}
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+        >
+          <button
+            onClick={() => window.location.reload()}
+            className="font-almarai bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-red-500/50"
+          >
+            {t("home.services.noData.reload") || "Qayta yuklash"}
+          </button>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}

components/pages/services/loading.tsx

@@ -0,0 +1,46 @@
+import { motion } from "framer-motion";
+
+
+// Loading Skeleton Component
+function ServiceCardSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4 py-6 px-8 rounded-xl bg-linear-to-br from-gray-800 to-gray-900">
+      <div className="h-6 bg-gray-700 rounded w-3/4"></div>
+      <div className="h-4 bg-gray-700 rounded w-full"></div>
+      <div className="h-4 bg-gray-700 rounded w-5/6"></div>
+      <div className="h-8 bg-gray-700 rounded w-32"></div>
+    </div>
+  );
+}
+
+// Loading Component
+export function ServicesLoading() {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="max-w-250 w-full mx-auto space-y-5"
+    >
+      {/* Top Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-center gap-5">
+        <div className="sm:w-[55%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[45%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+      </div>
+
+      {/* Bottom Cards Skeleton */}
+      <div className="flex sm:flex-row flex-col items-start justify-between gap-5">
+        <div className="sm:w-[40%] w-full">
+          <ServiceCardSkeleton />
+        </div>
+        <div className="sm:w-[60%] w-full space-y-5">
+          <ServiceCardSkeleton />
+          <div className="h-24 bg-gray-800 rounded-xl animate-pulse"></div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

components/pages/services/ourService.tsx

@@ -0,0 +1,206 @@
+"use client"
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ServicesLoading } from "./loading";
+import { EmptyServices } from "./empty";
+
+export function OurService() {
+  const t = useTranslations();
+  const locale = useLocale();
+
+  // get request 
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['firesafety'],
+    queryFn: () => httpClient(endPoints.services.all)
+  });
+
+  console.log("service data: ", data);
+
+  // Animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.22, 1, 0.36, 1] as const,
+      },
+    },
+  };
+
+  return (
+    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-30">
+      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="space-y-4 md:space-y-6"
+        >
+          <div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
+            <DotAnimatsiya />
+            {t("home.services.title")}
+          </div>
+          <h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
+            {t("home.services.subtitle")}
+          </h1>
+          <p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
+            {t("home.services.description")}
+          </p>
+        </motion.div>
+
+        {/* Conditional Rendering */}
+        {isLoading ? (
+          <div className="my-10">
+            <ServicesLoading />
+          </div>
+        ) : !data || (Array.isArray(data) && data.length === 0) ? (
+          <div className="my-10">
+            <EmptyServices />
+          </div>
+        ) : (
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+          >
+            {/* cards */}
+            <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
+              <motion.div variants={cardVariants} className="sm:w-[55%] w-full">
+                <Link
+                  href={`/${locale}/services/detail`}
+                  className="block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                >
+                  <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                    {t("home.services.services.operation.title")}
+                  </p>
+                  <p className="font-almarai text-gray-400 max-w-80 w-full">
+                    {t("home.services.services.operation.description")}
+                  </p>
+                  <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                    {t("home.services.learnmore")} <ChevronRight size={20} />
+                  </button>
+                  <Image
+                    src="/images/home/gruop.png"
+                    alt="images"
+                    width={200}
+                    height={100}
+                    className="object-contain sm:absolute bottom-0 right-2 z-10"
+                  />
+                </Link>
+              </motion.div>
+
+              <motion.div variants={cardVariants} className="sm:w-[45%] w-full">
+                <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
+                  <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                    {t("home.services.services.suppression.title")}
+                  </p>
+                  <p className="font-almarai text-gray-400 max-w-70 w-full">
+                    {t("home.services.services.suppression.description")}
+                  </p>
+                  <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                    {t("home.services.learnmore")} <ChevronRight size={20} />
+                  </button>
+                  <Image
+                    src="/images/home/redShlang.png"
+                    alt="images"
+                    width={200}
+                    height={100}
+                    className="object-contain sm:absolute -bottom-4 -right-4 z-10"
+                  />
+                </div>
+              </motion.div>
+            </div>
+
+            <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt-5 w-full mx-auto">
+              <motion.div variants={cardVariants} className="sm:w-[40%] w-full">
+                <Link
+                  href={`/${locale}/services/detail`}
+                  className="block hover:cursor-pointer relative rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                >
+                  <Image
+                    src="/images/home/ambulance.png"
+                    alt="images"
+                    width={300}
+                    height={200}
+                    className="object-contain mt-5"
+                  />
+                  <div className="space-y-4 py-6 px-8">
+                    <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                      {t("home.services.services.safety.title")}
+                    </p>
+                    <p className="font-almarai text-gray-400 max-w-80 w-full">
+                      {t("home.services.services.safety.description")}
+                    </p>
+                    <button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                      {t("home.services.learnmore")} <ChevronRight size={20} />
+                    </button>
+                  </div>
+                </Link>
+              </motion.div>
+
+              <div className="sm:w-[60%] w-full">
+                <motion.div variants={cardVariants}>
+                  <Link href={`/${locale}/services/detail`}>
+                    <div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
+                      <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                        {t("home.services.services.monitoring.title")}
+                      </p>
+                      <p className="font-almarai text-gray-400 max-w-70 w-full">
+                        {t("home.services.services.monitoring.description")}
+                      </p>
+                      <button className="font-almarai sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                        {t("home.services.learnmore")} <ChevronRight size={20} />
+                      </button>
+                      <Image
+                        src="/images/home/balon.png"
+                        alt="images"
+                        width={200}
+                        height={100}
+                        className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
+                      />
+                    </div>
+                  </Link>
+                </motion.div>
+
+                <motion.div
+                  variants={cardVariants}
+                  className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                >
+                  <h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
+                    {t("home.services.viewMoreServices")}
+                  </h2>
+                  <Link
+                    href="/services"
+                    className="font-almarai shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
+                  >
+                    {t("home.services.viewMore")}
+                  </Link>
+                </motion.div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}

components/priceContact.tsx

@@ -12,7 +12,7 @@ import { toast } from "react-toastify";
 interface FormType {
   name: string;
   product: number;
-  phone: number; // ✅ String bo'lishi kerak
+  number: number; // ✅ String bo'lishi kerak
 }
 
 export function PriceModal() {
@@ -21,12 +21,12 @@ export function PriceModal() {
 
   const [formData, setFormData] = useState({
     name: "",
-    phone: "+998 ",
+    number: "+998 ",
   });
 
   const [errors, setErrors] = useState({
     name: "",
-    phone: "",
+    number: "",
   });
 
   const formRequest = useMutation({
@@ -35,7 +35,7 @@ export function PriceModal() {
     onSuccess: () => {
       setFormData({
         name: "",
-        phone: "+998 ",
+        number: "+998 ",
       });
       toast.success(t("success") || "Muvaffaqiyatli yuborildi!");
       closeModal();
@@ -51,11 +51,11 @@ export function PriceModal() {
     if (!isOpen) {
       setFormData({
         name: "",
-        phone: "+998 ",
+        number: "+998 ",
       });
       setErrors({
         name: "",
-        phone: "",
+        number: '',
       });
     }
   }, [isOpen]);
@@ -90,9 +90,9 @@ export function PriceModal() {
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const formatted = formatPhoneNumber(e.target.value);
-    setFormData({ ...formData, phone: formatted });
-    if (errors.phone) {
-      setErrors({ ...errors, phone: "" });
+    setFormData({ ...formData, number: formatted });
+    if (errors.number) {
+      setErrors({ ...errors, number: "" });
     }
   };
 
@@ -107,7 +107,7 @@ export function PriceModal() {
   const validateForm = () => {
     const newErrors = {
       name: "",
-      phone: "",
+      number: "",
     };
 
     // Name validation
@@ -116,17 +116,17 @@ export function PriceModal() {
     }
 
     // Phone validation
-    const phoneNumbers = formData.phone.replace(/\D/g, "");
+    const phoneNumbers = formData.number.replace(/\D/g, "");
     if (phoneNumbers.length !== 12) {
-      newErrors.phone =
+      newErrors.number =
         t("validation.phoneRequired") || "To'liq telefon raqam kiriting";
     } else if (!phoneNumbers.startsWith("998")) {
-      newErrors.phone =
+      newErrors.number =
         t("validation.phoneInvalid") || "Noto'g'ri telefon raqam";
     }
 
     setErrors(newErrors);
-    return !newErrors.name && !newErrors.phone;
+    return !newErrors.name && !newErrors.number;
   };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -137,11 +137,11 @@ export function PriceModal() {
     }
 
     // Telefon raqamni tozalash (faqat raqamlar)
-    const cleanPhone = formData.phone.replace(/\D/g, "");
+    const cleanPhone = formData.number.replace(/\D/g, "");
 
     const sendedData: FormType = {
       name: formData.name,
-      phone: Number(cleanPhone), // ✅ String sifatida yuborish
+      number: Number(cleanPhone.slice(3)), // ✅ String sifatida yuborish
       product: product?.id || 0,
     };
 
@@ -236,16 +236,16 @@ export function PriceModal() {
                 type="tel"
                 id="phone"
                 name="phone"
-                value={formData.phone}
+                value={formData.number}
                 onChange={handlePhoneChange}
                 className={`w-full px-4 py-3 bg-[#1e1e1e] border ${
-                  errors.phone ? "border-red-500" : "border-gray-700"
+                  errors.number ? "border-red-500" : "border-gray-700"
                 } rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-700 transition`}
                 placeholder="+998 90 123 45 67"
                 maxLength={17}
               />
-              {errors.phone && (
-                <p className="mt-1 text-sm text-red-500">{errors.phone}</p>
+              {errors.number && (
+                <p className="mt-1 text-sm text-red-500">{errors.number}</p>
               )}
             </div>