file name and location updayed for better be

pages/subCategory/body.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useCategory } from "@/zustand/useCategory";
+import Card from "./card";
+import { useTranslations } from "next-intl";
+
+export function MainSubCategory() {
+  const category = useCategory((state) => state.category);
+  const t = useTranslations();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["subCategory"],
+    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
+    select: (data) => data?.data?.results,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-red-500 py-10">
+        {t("loading_error")}
+      </div>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="text-center text-gray-400 py-10">
+        {t("products_not_found")}
+      </div>
+    );
+  }
+  return (
+    <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+      {data.map((item: any) => (
+        <Card
+          key={item.id}
+          title={item.name}
+          image={item.image}
+          slug={item.slug}
+          id={item.id}
+          category={item.category}
+        />
+      ))}
+    </div>
+  );
+}

pages/subCategory/card.tsx

@@ -0,0 +1,60 @@
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useLocale } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+interface ProductCardProps {
+  id: number;
+  category: number;
+  title: string;
+  image: string;
+  slug: string;
+}
+
+export default function Card({
+  title,
+  image,
+  slug,
+  id,
+  category,
+}: ProductCardProps) {
+  const locale = useLocale();
+  const router = useRouter();
+  const setSubCategory = useSubCategory((state) => state.setSubCategory);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    setSubCategory({
+      id,
+      name: title,
+      image,
+      category,
+    });
+    router.push(`/${locale}/catalog_page/products`);
+  };
+  return (
+    <Link href="#" onClick={handleClick}>
+      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
+        {/* Image Container */}
+        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">
+          <Image
+            src={image || "/placeholder.svg"}
+            alt={title}
+            fill
+            className="object-contain transition-transform duration-300 group-hover:scale-105"
+            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
+          />
+        </div>
+
+        {/* Content Container */}
+        <div className="p-6 sm:p-4">
+          <h3 className="text-lg text-center font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+            {title}
+          </h3>
+        </div>
+      </article>
+    </Link>
+  );
+}

pages/subCategory/index.ts

@@ -0,0 +1 @@
+export { MainSubCategory } from "./body";