catalog part is done

components/pages/home/blog.tsx

@@ -1,40 +1,13 @@
-import Image from "next/image";
-import { ChevronRight } from "lucide-react";
 import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
 import { useTranslations } from "next-intl";
-import ProductCard from "../products/productCard";
+import { ProductCatalog } from "@/lib/demoData";
+import CatalogCard from "../products/catalog";
 
 export function Blog() {
   const t = useTranslations();
-  const blogPosts = [
-    {
-      id: 1,
-      image: "/images/img14.webp",
-      category: "Tips & Trick",
-      title: t("home.blog.articles.article1"),
-      author: "John Doe",
-      date: "July 24, 2025",
-    },
-    {
-      id: 2,
-      image: "/images/img15.webp",
-      category: "Insight",
-      title: t("home.blog.articles.article2"),
-      author: "John Doe",
-      date: "July 24, 2025",
-    },
-    {
-      id: 3,
-      image: "/images/img16.webp",
-      category: "News",
-      title: t("home.blog.articles.article3"),
-      author: "John Doe",
-      date: "July 24, 2025",
-    },
-  ];
 
   return (
-    <section className="bg-[#1f1f1f] py-45">
+    <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">
@@ -53,57 +26,16 @@ export function Blog() {
         </div>
 
         {/* Blog Cards Grid */}
-        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
-          {/* {blogPosts.map((post) => (
-            <article key={post.id} className="group">
-
-              <div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
-                <Image
-                  src={post.image || "/placeholder.svg"}
-                  alt={post.title}
-                  fill
-                  className="object-cover transition-transform duration-300 group-hover:scale-105"
-                />
-
-                <div className="absolute bottom-4 left-4">
-                  <span className="font-almarai rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
-                    {post.category}
-                  </span>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="font-unbounded uppercase mb-3 text-lg font-bold leading-tight tracking-wide text-white md:text-xl">
-                  {post.title}
-                </h3>
-                <p className="font-almarai mb-4 text-sm text-gray-400">
-                  <span className="text-gray-500">by </span>
-                  <span className="text-white">{post.author}</span>
-                  <span className="mx-2 text-gray-500">•</span>
-                  <span className="text-gray-400">{post.date}</span>
-                </p>
-                <a
-                  href="#"
-                  className="font-almarai inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
-                >
-                  {t("home.blog.readMore")}
-                  <ChevronRight className="h-4 w-4" />
-                </a>
-              </div>
-            </article>
-          ))} */}
-          {Array(3)
-            .fill(null)
-            .map((_, index) => (
-              <ProductCard
-                key={index}
-                title="Elektr yong'in detektori-Ypres ver.2"
-                name="P-0834404"
-                image="/images/products/products.webp"
-                slug="P_0834404"
-                status="full"
-              />
-            ))}
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 place-items-center">
+          {ProductCatalog.map((item, index) => (
+            <CatalogCard
+              key={index}
+              id={item.id}
+              title={item.title}
+              description={item.description}
+              image={item.image}
+            />
+          ))}
         </div>
       </div>
     </section>