service page updated for multiple data

2026-02-17 19:12:52 +05:00
parent 974d31c096
commit 137dc3e7c2
18 changed files with 323 additions and 138 deletions
--- a/app/[locale]/catalog_page/products/[slug]/page.tsx
+++ b/app/[locale]/catalog_page/products/[slug]/page.tsx
@@ -35,7 +35,6 @@ interface ProductDetail {
 export default function SlugPage() {
  const searchParams = useSearchParams();
  const productId = searchParams.get("productId");
-  console.log("product Id : ", productId);
  const productZustand = useProductPageInfo((state) => state.product);
  const id = productId ? Number(productId) : productZustand.id;
  const { data: product, isLoading } = useQuery({
@@ -44,8 +43,6 @@ export default function SlugPage() {
    select: (data) => data?.data?.data as ProductDetail,
  });

-  useEffect(() => console.log("product detail: ", product));
-
  // Loading State
  if (isLoading) {
    return <LoadingSkeleton />;
--- a/app/[locale]/services/detail/page.tsx
+++ b/app/[locale]/services/detail/page.tsx
@@ -13,11 +13,11 @@ import { useServiceDetail } from "@/store/useService";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
+import { cardVariants, containerVariants } from "@/lib/animations";

 export default function OperationalSystemsPage() {
  const t = useTranslations("operationalSystems");
  const serviceId = useServiceDetail((state) => state.serviceId);
-  console.log("service id: ", serviceId);

  const {
    data,
@@ -29,8 +29,6 @@ export default function OperationalSystemsPage() {
    select: (data) => data?.data?.data,
  });

-  console.log("service detail: ", data);
-
  // Demo data - fallback ma'lumotlar
  const demoData: SystemFeature[] = [
    {
@@ -48,41 +46,6 @@ export default function OperationalSystemsPage() {
    },
  ];

-  // Animation variants
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.15,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 30 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        ease: [0.22, 1, 0.36, 1] as const,
-      },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, scale: 0.95 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: {
-        duration: 0.5,
-        ease: [0.22, 1, 0.36, 1] as const,
-      },
-    },
-  };
-
  // Loading state
  if (loading) {
    return (
--- a/app/[locale]/services/page.tsx
+++ b/app/[locale]/services/page.tsx
@@ -1,11 +1,15 @@
-import { OurService, Video } from "@/components/pages/home";
-import { ServiceBanner, ServiceFaq } from "@/components/pages/services";
+import { Video } from "@/components/pages/home";
+import {
+  ServiceBanner,
+  ServiceFaq,
+  ServicePageServices,
+} from "@/components/pages/services";

 export default function Page() {
  return (
    <div className="">
      <ServiceBanner />
-      <OurService />
+      <ServicePageServices />
      <Video />
      <ServiceFaq />
    </div>
--- a/components/breadCrumb.tsx
+++ b/components/breadCrumb.tsx
@@ -21,7 +21,6 @@ export function Breadcrumb({
  const category = useCategory((state) => state.category);
  const subCategory = useSubCategory((state) => state.subCategory);
  const product = useProductPageInfo((state) => state.product);
-  console.log("sub category: ", subCategory);

  // Pathdan segments olish
  const segments = pathname.split("/").filter((segment) => segment !== "");
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -63,7 +63,6 @@ export function Footer() {
    if (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,11 +238,11 @@ export function Footer() {
      </div>

      {/* Copyright Section */}
-      <div className="border-t border-gray-800 px-4 py-8">
+      <div className="border-t border-gray-800 px-4 py-6">
        <div className="mx-auto max-w-6xl">
-          <div className="font-almarai flex flex-col justify-between gap-4 text-lg text-gray-400 md:flex-row md:items-center">
+          <div className="font-almarai flex flex-col justify-end items-end w-full gap-4 text-lg text-gray-400 md:flex-row md:items-center">
            {locale === "uz" ? (
-              <div className="flex gap-2 ">
+              <div className="flex gap-2 w-full justify-center items-end ">
                <a
                  href="http://felix-its.uz/"
                  className="hover:text-red-600 hover:cursor-pointer text-blue-300 underline"
@@ -253,7 +252,7 @@ export function Footer() {
                <p>- Jamoasi tomonidan ishlab chiqilgan</p>
              </div>
            ) : (
-              <div className="flex gap-2">
+              <div className="flex w-full justify-center items-end gap-2">
                {locale === "ru" ? <p>Разработано -</p> : <p>Created by - </p>}
                <a
                  href="http://felix-its.uz/"
--- a/components/pages/home/index.ts
+++ b/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 "../services/ourService";
+export { OurService } from "./ourService";
 export { Testimonial } from "./testimonal";
 export { Line } from "./line";
 export { Blog } from "./blog/blog";
--- a/components/pages/services/ourService.tsx
+++ b/components/pages/services/ourService.tsx
@@ -8,9 +8,10 @@ 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";
+import { ServicesLoading } from "../services/loading";
+import { EmptyServices } from "../services/empty";
 import { useServiceDetail } from "@/store/useService";
+import { cardVariants, containerVariants } from "@/lib/animations";

 export function OurService() {
  const t = useTranslations();
@@ -21,34 +22,9 @@ export function OurService() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["firesafety"],
    queryFn: () => httpClient(endPoints.services.all),
-    select: (data) => data?.data?.data?.results,
+    select: (data) => data?.data?.data?.results.slice(0, 4),
  });

-  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">
@@ -116,30 +92,34 @@ export function OurService() {
                </Link>
              </motion.div>

-              <motion.div
-                onClick={() => setServiceId(data[1].id)}
-                variants={cardVariants}
+              <Link
+                href={`/${locale}/services/detail`}
                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">
-                    {data[1].title}
-                  </p>
-                  <p className="font-almarai text-gray-400 max-w-70 w-full">
-                    {data[1].subtitle}
-                  </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={data[1].main_image}
-                    alt="images"
-                    width={200}
-                    height={100}
-                    className="object-contain sm:absolute -bottom-4 -right-4 z-10"
-                  />
-                </div>
-              </motion.div>
+                <motion.div
+                  onClick={() => setServiceId(data[1].id)}
+                  variants={cardVariants}
+                >
+                  <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">
+                      {data[1].title}
+                    </p>
+                    <p className="font-almarai text-gray-400 max-w-70 w-full">
+                      {data[1].subtitle}
+                    </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={data[1].main_image}
+                      alt="images"
+                      width={200}
+                      height={100}
+                      className="object-contain sm:absolute -bottom-4 -right-4 z-10"
+                    />
+                  </div>
+                </motion.div>
+              </Link>
            </div>

            <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
@@ -209,7 +189,7 @@ export function OurService() {
                    {t("home.services.viewMoreServices")}
                  </h2>
                  <Link
-                    href="/services"
+                    href={`/${locale}/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")}
--- a/components/pages/products/filter/catalog/filterCatalog.tsx
+++ b/components/pages/products/filter/catalog/filterCatalog.tsx
@@ -6,7 +6,6 @@ import { getRouteLang } from "@/request/getLang";
 import { endPoints } from "@/request/links";
 import { useCategory } from "@/store/useCategory";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
 import CatalogCardSkeletonSmall from "./loading";
 import Image from "next/image";
 import { ArrowUpRight } from "lucide-react";
@@ -19,9 +18,6 @@ export default function FilterCatalog() {
    queryFn: () => httpClient(endPoints.category.all),
    select: (data): CategoryType[] => data?.data?.results,
  });
-  useEffect(() => {
-    console.log("product catalog data: ", data);
-  }, [data]);

  if (isLoading) {
    return (
--- a/components/pages/products/filter/filter.tsx
+++ b/components/pages/products/filter/filter.tsx
@@ -38,10 +38,7 @@ export default function Filter() {
  const { data: categoryBack } = useQuery({
    queryKey: ["category"],
    queryFn: () => httpClient(endPoints.category.all),
-    select: (data) => {
-      console.log("category data on filter: ", data?.data?.results);
-      return data?.data?.results;
-    },
+    select: (data) => data?.data?.results,
  });

  // ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
@@ -53,10 +50,7 @@ export default function Filter() {
      !!category.id &&
      category.have_sub_category === true &&
      openDropdowns[category.id] === true,
-    select: (data) => {
-      console.log("subCategory filter data: ", data?.data?.results);
-      return data?.data?.results;
-    },
+    select: (data) => data?.data?.results,
  });

  // ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
--- a/components/pages/products/product/mianProduct.tsx
+++ b/components/pages/products/product/mianProduct.tsx
@@ -5,18 +5,18 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useProductPageInfo } from "@/store/useProduct";
 import { useSubCategory } from "@/store/useSubCategory";
+import { useTranslations } from "next-intl";

 export default function MainProduct() {
+  const t = useTranslations();
  const category = useCategory((state) => state.category);
  const subCategory = useSubCategory((state) => state.subCategory);
  const filter = useFilter((state) => state.filter);
  const getFiltersByType = useFilter((state) => state.getFiltersByType);
  const setProduct = useProductPageInfo((state) => state.setProducts);
-
-  console.log("subCategory data: ", subCategory);
  // Query params yaratish
  const queryParams = useMemo(() => {
    const catalog = getFiltersByType("catalog");
@@ -40,15 +40,12 @@ export default function MainProduct() {

    // Query params qo'shish
    return `${baseLink}${queryParams}`;
-  }, [category.id, category.have_sub_category, queryParams , subCategory.id]);
+  }, [category.id, category.have_sub_category, queryParams, subCategory.id]);

  const { data, isLoading, error } = useQuery({
    queryKey: ["products", subCategory.id, queryParams],
    queryFn: () => httpClient(requestLink),
-    select: (data) => {
-      console.log("product: ", data?.data?.data?.results);
-      return data?.data?.data?.results;
-    },
+    select: (data) => data?.data?.data?.results,
  });

  if (isLoading) {
@@ -62,17 +59,13 @@ export default function MainProduct() {
  }

  if (error) {
-    return (
-      <div className="text-center text-red-500 py-10">
-        Ma'lumotlarni yuklashda xatolik yuz berdi
-      </div>
-    );
+    return <div className="text-center text-red-500 py-10">{t("loadingError")}</div>;
  }

  if (!data || data.length === 0) {
    return (
      <div className="text-center text-gray-400 py-10">
-        Mahsulotlar topilmadi
+        {t("productsNotFound")}
      </div>
    );
  }
--- a/components/pages/services/index.ts
+++ b/components/pages/services/index.ts
@@ -1,2 +1,3 @@
 export { ServiceBanner } from "./serviceBanner";
 export { ServiceFaq } from "./serviceFaq";
+export { ServicePageServices } from "./servicePageServices";
--- a/components/pages/services/servicePageServices.tsx
+++ b/components/pages/services/servicePageServices.tsx
@@ -0,0 +1,222 @@
+"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";
+import { useServiceDetail } from "@/store/useService";
+import { cardVariants, containerVariants } from "@/lib/animations";
+
+export function ServicePageServices() {
+  const t = useTranslations();
+  const locale = useLocale();
+  const setServiceId = useServiceDetail((state) => state.setServiceId);
+
+  // get request
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["firesafety"],
+    queryFn: () => httpClient(endPoints.services.all),
+    select: (data) => {
+      const serviceData = data?.data?.data?.results;
+      return serviceData.reduce(
+        (resultArray: any, item: any, index: number) => {
+          const chunkIndex = Math.floor(index / 4);
+
+          if (!resultArray[chunkIndex]) {
+            resultArray[chunkIndex] = []; // Yangi chunk boshlash
+          }
+
+          resultArray[chunkIndex].push(item);
+
+          return resultArray;
+        },
+        [] as any[][],
+      );
+    },
+  });
+
+  console.log("service page services: ", data);
+
+  return (
+    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
+      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header for github */}
+        <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>
+        ) : (
+          data.map((item: any, index: number) => (
+            <motion.div
+              key={index}
+              variants={containerVariants}
+              initial="hidden"
+              animate="visible"
+            >
+              {/* cards */}
+              <div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-3 my-4">
+                {item[0] && (
+                  <motion.div
+                    variants={cardVariants}
+                    className="sm:w-[55%] overflow-hidden w-full"
+                    onClick={() => setServiceId(item[0].id)}
+                  >
+                    <Link
+                      href={`/${locale}/services/detail`}
+                      className="overflow-hidden 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">
+                        {item[0]?.title}
+                      </p>
+                      <p className="font-almarai text-gray-400 max-w-80 w-full">
+                        {item[0]?.subtitle}
+                      </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={item[0]?.main_image}
+                        alt="images"
+                        width={200}
+                        height={100}
+                        className="object-contain sm:absolute bottom-0 -right-2 z-10"
+                      />
+                    </Link>
+                  </motion.div>
+                )}
+
+                {item[1] && (
+                  <Link
+                    href={`/${locale}/services/detail`}
+                    className="sm:w-[45%] w-full"
+                  >
+                    <motion.div
+                      onClick={() => setServiceId(item[1]?.id)}
+                      variants={cardVariants}
+                    >
+                      <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">
+                          {item[1]?.title}
+                        </p>
+                        <p className="font-almarai text-gray-400 max-w-70 w-full">
+                          {item[1]?.subtitle}
+                        </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={item[1]?.main_image}
+                          alt="images"
+                          width={200}
+                          height={100}
+                          className="object-contain sm:absolute -bottom-4 -right-4 z-10"
+                        />
+                      </div>
+                    </motion.div>
+                  </Link>
+                )}
+              </div>
+
+              <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-3 w-full mx-auto">
+                {item[2] && (
+                  <motion.div
+                    variants={cardVariants}
+                    onClick={() => setServiceId(item[2]?.id)}
+                    className="sm:w-[40%] w-full -mt-5"
+                  >
+                    <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={item[2]?.main_image}
+                        alt="images"
+                        width={250}
+                        height={200}
+                        className="object-contain mt-5"
+                      />
+                      <div className="space-y-1 pb-3 px-5">
+                        <p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                          {item[2]?.title}
+                        </p>
+                        <p className="font-almarai text-gray-400 max-w-80 w-full">
+                          {item[2]?.subtitle}
+                        </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">
+                  {item[3] && (
+                    <motion.div
+                      onClick={() => setServiceId(item[3]?.id)}
+                      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">
+                            {item[3]?.title}
+                          </p>
+                          <p className="font-almarai text-gray-400 max-w-70 w-full">
+                            {item[3]?.subtitle}
+                          </p>
+                          <button className="font-almarai sm:mt-40 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={item[3]?.main_image}
+                            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>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
--- a/components/priceContact.tsx
+++ b/components/priceContact.tsx
@@ -55,7 +55,7 @@ export function PriceModal() {
      });
      setErrors({
        name: "",
-        number: '',
+        number: "",
      });
    }
  }, [isOpen]);
@@ -144,8 +144,6 @@ export function PriceModal() {
      number: Number(cleanPhone.slice(3)), // ✅ String sifatida yuborish
      product: product?.id || 0,
    };
-
-    console.log("Sended data:", sendedData);
    formRequest.mutate(sendedData);
  };

@@ -264,4 +262,4 @@ export function PriceModal() {
      </div>
    </div>
  );
-}
+}
--- a/lib/animations.ts
+++ b/lib/animations.ts
@@ -0,0 +1,33 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+export const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1] as const,
+    },
+  },
+};
+
+export const cardVariants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.5,
+      ease: [0.22, 1, 0.36, 1] as const,
+    },
+  },
+};
--- a/messages/en.json
+++ b/messages/en.json
@@ -136,12 +136,12 @@
        "subject": "Subject",
        "message": "Leave us a message"
      },
-      "privacy": "You agree to our friendly privacy policy",
+      "privacy": "You agree to our Privacy Policy.",
      "send": "SEND MESSAGE",
      "email": "EMAIL",
      "emailAddress": "info@ignum-tech.com",
      "location": "Our Location",
-      "address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
+      "address": "39, 3rd Niyozbek Yoli Street, Yunusabad District, Tashkent, Uzbekistan",
      "phone": "Phone"
    }
  },
@@ -291,6 +291,8 @@
  "send": "Sent",
  "error": "Error!",
  "succes": "sent!",
+  "loadingError": "An error occurred while loading data",
+  "productsNotFound": "Products not found",
  "priceModal": {
    "title": "Get Price",
    "product": {
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -136,12 +136,12 @@
        "subject": "Тема",
        "message": "Оставьте нам сообщение"
      },
-      "privacy": "Вы соглашаетесь с нашей дружественной политикой конфиденциальности",
+      "privacy": "Вы соглашаетесь с нашей Политикой конфиденциальности.",
      "send": "ОТПРАВИТЬ СООБЩЕНИЕ",
      "email": "ЭЛЕКТРОННАЯ ПОЧТА",
      "emailAddress": "info@ignum-tech.com",
      "location": "Наше Местоположение",
-      "address": "Toshkent shahri , Yunusabod tumani , Niyozbek yo'li 3 tor ko'chasi , 39 uy",
+      "address": "г. Ташкент, Юнусабадский район, 3-й проезд Ниёзбек йули, дом 39",
      "phone": "Телефон"
    }
  },
@@ -291,6 +291,8 @@
  "send": "Отправить",
  "error": "Ошибка!",
  "succes": "Отправлено!",
+  "loadingError": "Произошла ошибка при загрузке данных",
+  "productsNotFound": "Товары не найдены",
  "priceModal": {
    "title": "Узнать цену",
    "product": {
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -136,7 +136,7 @@
        "subject": "Mavzu",
        "message": "Xabaringizni qoldiring"
      },
-      "privacy": "Bizning maxfiylik siyosatimizga rozilik bildirasiz",
+      "privacy": "Siz bizning Maxfiylik siyosatimizga rozilik bildirasiz.",
      "send": "XABAR YUBORISH",
      "email": "ELEKTRON POCHTA",
      "emailAddress": "info@ignum-tech.com",
@@ -291,6 +291,8 @@
  "send": "Yuborish",
  "error": "Xatolik!",
  "succes": "Yuborildi!",
+  "loadingError": "Ma'lumotlarni yuklashda xatolik yuz berdi",
+  "productsNotFound": "Mahsulotlar topilmadi",
  "priceModal": {
    "title": "Narxni bilish",
    "product": {
--- a/request/links.ts
+++ b/request/links.ts
@@ -6,7 +6,7 @@ export const endPoints = {
    byId: (id: number) => `subCategory/?category=${id}`,
  },
  services: {
-    all: "firesafety/",
+    all: "firesafety/?page_size=500",
    detail: (id: number) => `firesafety/${id}`,
  },
  product: {