updated compoennt file structure

components/pages/home/blog/blog.tsx

@@ -0,0 +1,32 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
+import Catalog from "./catalog";
+
+export function Blog() {
+  const t = useTranslations();
+
+  return (
+    <section className="bg-[#1f1f1f] py-30">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-12 text-center">
+          <div className="mb-4 flex items-center justify-center gap-2">
+            <DotAnimatsiya />
+            <span className="font-almarai text-sm font-semibold tracking-wider text-white uppercase">
+              {t("products.banner.title")}
+            </span>
+          </div>
+          <h2
+            className="font-unbounded bg-linear-to-br from-white py-2 via-white to-black
+  text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
+          >
+            {t("products.ourproducts")}
+          </h2>
+        </div>
+
+        {/* Blog Cards Grid */}
+        <Catalog />
+      </div>
+    </section>
+  );
+}

components/pages/home/blog/catalog.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import CatalogCard from "../../products/catalog";
+import CatalogCardSkeleton from "@/components/loadingSkleton";
+import EmptyData from "@/components/EmptyData";
+import { getRouteLang } from "@/request/getLang";
+import { CategoryType } from "@/lib/types";
+import { useTranslations } from "next-intl";
+
+export default function Catalog() {
+  const language = getRouteLang();
+  const { data, isLoading } = useQuery({
+    queryKey: ["category", language],
+    queryFn: () => httpClient(endPoints.category.all),
+    select: (data): CategoryType[] => data?.data?.results,
+  });
+  const t = useTranslations();
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {[...Array(3)].map((_, index) => (
+          <CatalogCardSkeleton key={index} />
+        ))}
+      </div>
+    );
+  }
+
+  // Ma'lumot yo'q holati
+  if (!data || data.length === 0) {
+    return (
+      <EmptyData
+        title={t("products.noData.title")}
+        description={t("products.noData.description")}
+        icon="shopping"
+      />
+    );
+  }
+
+  return (
+    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
+      {data.map((item, index) => (
+        <CatalogCard
+          key={index}
+          id={item.id}
+          title={item.name}
+          description={item.description}
+          image={item.image}
+          have_sub_category={item.have_sub_category}
+        />
+      ))}
+    </div>
+  );
+}