catalog part is done

app/[locale]/products/page.tsx

@@ -1,10 +1,14 @@
+"use client"
 import { ProductBanner, Products } from "@/components/pages/products";
+import { useSearchParams } from "next/navigation";
 
 export default function Page() {
+  const searchParams = useSearchParams()
+  const category = searchParams.get("category");
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      <Products />
+      <Products categoryName={category || null} />
     </div>
   );
 }

components/backAnimatsiya/backAnimatsiya.tsx

@@ -2,7 +2,7 @@ import "./back.css";
 
 export default function BackAnimatsiya() {
   return (
-    <div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-50">
+    <div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-10">
       <svg
         id="Layer_2"
         xmlns="http://www.w3.org/2000/svg"

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>

components/pages/products/catalog.tsx

@@ -0,0 +1,133 @@
+// import { useTranslations } from "next-intl";
+// import Image from "next/image";
+// import Link from "next/link";
+
+// interface CatalogProps {
+//   image: string;
+//   title: string;
+//   slug: string;
+//   description: string;
+//   id:string;
+// }
+
+// export default function CatalogCard({
+//   image,
+//   title,
+//   slug,
+//   description,
+//   id,
+// }: CatalogProps) {
+//   const t = useTranslations();
+//   return (
+//     <Link
+//       href={`/products?category=${id}`}
+//       className="group h-118 flex flex-col items-center justify-start" // Added 'group' here
+//     >
+//       <div className="h-full flex flex-col justify-between group-hover:scale-105 transition ease-in-out">
+//         <p className="text-white text-2xl font-unbounded font-semibold text-center transition-colors">
+//           {title}
+//         </p>
+//         <p className="text-white/50 font-almarai font-medium text-center">
+//           {t(`${description}`)}
+//         </p>
+//         <Image
+//           src={image}
+//           alt="image"
+//           width={400}
+//           height={90}
+//           className="h-90! rounded-xl object-contain bg-[#444242] transition-colors duration-300" // Added smooth transition
+//         />
+//       </div>
+//     </Link>
+//   );
+// }
+
+// bg-[#444242]
+"use client";
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+
+interface CatalogProps {
+  id: string;
+  image: string;
+  title: string;
+  description: string;
+}
+
+export default function CatalogCard({
+  image,
+  title,
+  description,
+  id,
+}: CatalogProps) {
+  const t = useTranslations();
+  const locale = useLocale();
+  console.log("category id: ", id);
+
+  return (
+    <Link
+      href={`/${locale}/products?category=${id}`}
+      className="group relative h-[450px] w-full overflow-hidden rounded-2xl bg-linear-to-br from-[#444242] to-black border border-white/10 transition-all duration-500 hover:border-red-500/50 hover:-translate-y-1"
+    >
+      {/* Background glow effect */}
+      <div className="absolute inset-0 bg-gradient-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Content container */}
+      <div className="relative h-full flex flex-col p-6">
+        {/* Title section */}
+        <div className="mb-4">
+          <div className="flex items-start justify-between mb-2">
+            <h3 className="text-2xl font-unbounded font-bold text-white leading-tight group-hover:text-red-400 transition-colors duration-300">
+              {title}
+            </h3>
+            <div className="shrink-0 w-8 h-8 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
+              <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2.5} />
+            </div>
+          </div>
+
+          {/* Description */}
+          <p className="text-sm font-almarai text-white/60 line-clamp-2 group-hover:text-white/80 transition-colors duration-300">
+            {t(description)}
+          </p>
+        </div>
+
+        {/* Image container with elegant frame */}
+        <div className="relative flex-1 rounded-xl overflow-hidden bg-gradient-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
+          {/* Animated gradient overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent z-10" />
+
+          {/* Image */}
+          <div className="relative w-full h-full">
+            <Image
+              src={image}
+              alt={title}
+              fill
+              className="object-contain p-4 transition-transform duration-700 group-hover:scale-105"
+            />
+          </div>
+
+          {/* Hover shimmer effect */}
+          {/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
+          </div> */}
+        </div>
+
+        {/* Bottom accent bar */}
+        <div className="mt-4 h-1 w-0 bg-gradient-to-r from-red-500 to-red-600 group-hover:w-full transition-all duration-500 rounded-full" />
+      </div>
+
+      {/* Subtle noise texture overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E")`,
+        }}
+      />
+    </Link>
+  );
+}

components/pages/products/productCard.tsx

@@ -2,41 +2,23 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowRight } from "lucide-react";
 
 interface ProductCardProps {
   title: string;
-  name: string;
   image: string;
   slug: string;
-  status: "full" | "empty" | "withOrder";
 }
 
 export default function ProductCard({
   title,
-  name,
   image,
   slug,
-  status,
 }: ProductCardProps) {
-  const statusColor =
-    status === "full"
-      ? "text-green-500"
-      : status === "empty"
-        ? "text-red-600"
-        : "text-yellow-800";
-
-  const statusText =
-    status === "full"
-      ? "Sotuvda mavjud"
-      : status === "empty"
-        ? "Sotuvda qolmagan"
-        : "Buyurtma asosida";
   return (
     <Link href={`/products/${slug}`}>
       <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 bg-white">
+        <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}
@@ -48,21 +30,9 @@ export default function ProductCard({
         {/* Content Container */}
         <div className="p-6 sm:p-4">
           {/* Title */}
-          <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+          <h3 className="text-lg text-center sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
             {title}
           </h3>
-
-          {/* Meta Information */}
-          <div className="flex flex-col items-start gap-0 text-gray-400 text-sm sm:text-base mb-6">
-            <span className="font-medium">{name}</span>
-            <span className={`font-medium ${statusColor}`}>{statusText}</span>
-          </div>
-
-          {/* Read More Link */}
-          <span className="inline-flex items-center gap-2 text-red-600 font-bold text-base sm:text-lg uppercase tracking-wide hover:gap-4 transition-all duration-300 group/link">
-            Read More
-            <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
-          </span>
         </div>
       </article>
     </Link>

components/pages/products/products.tsx

@@ -1,31 +1,45 @@
+import { ca, lede, slt } from "@/lib/demoData";
 import Filter from "./filter";
 import FilterInfo from "./filterInfo";
 import ProductCard from "./productCard";
 
-export function Products() {
+// slt , ca , lede
+
+export function Products({ categoryName }: { categoryName: string | null }) {
+  console.log("category name: ",categoryName)
+  const getProducts = () => {
+    switch (categoryName) {
+      case "slt":
+        return slt;
+      case "ca":
+        return ca;
+      case "lede":
+        return lede;
+      default:
+        return [...slt, ...ca, ...lede];
+    }
+  };
+
+  const products = getProducts();
   return (
     <div className="bg-[#1e1d1c] py-20">
       <div className="max-w-300 mx-auto w-full z-20 relative">
         <div className="flex items-start gap-5">
           {/* filter part */}
-          <Filter/>
+          <Filter />
 
           {/* main products */}
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-            {Array(9)
-              .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"
-                />
-              ))}
+            {products.map((item, index) => (
+              <ProductCard
+                key={index}
+                title={item.name}
+                image={item.image}
+                slug={item.slug}
+              />
+            ))}
           </div>
-          <FilterInfo/>
+          <FilterInfo />
         </div>
       </div>
     </div>

lib/demoData.ts

@@ -1,4 +1,3 @@
-
 export const DATA = [
   {
     name: "P-0834405",
@@ -67,4 +66,100 @@ export const faqItems = [
     answer:
       "Candidates must be at least 18 years old, have a high school diploma or GED, possess a valid drivers license, and pass a background check and medical examination. Physical fitness is essential, and candidates must pass the Candidate Physical Ability Test (CPAT).",
   },
-];
+];
+
+export const ProductCatalog = [
+  {
+    id: "slt",
+    slug: "slt_blockfire",
+    title: "SLT Blockfire",
+    description: "products.catalog.blockdescription",
+    image: "/images/products/category/slt.png",
+  },
+  {
+    id: "ca",
+    slug: "ca_fire_mech",
+    title: "CA-FIRE | MECH",
+    description: "products.catalog.cadescription",
+    image: "/images/products/category/ca.png",
+  },
+  {
+    id: "lede",
+    slug: "lede",
+    title: "LEDE",
+    description: "products.catalog.lededescription",
+    image: "/images/products/category/lede.png",
+  },
+];
+
+export const slt = [
+  {
+    id: 1,
+    slug: "slt_bir_qavatli_quvr",
+    name: "Bir qavatli PP-R quvuri (SDR 6) SLT BLOCKFIRE",
+    description: "",
+    image: "/images/products/slt/slt_blackfirebittalik-removebg-preview.png",
+  },
+  {
+    id: 2,
+    slug: "slt_yonginga_qarshi_45_burilish",
+    name: "Yong‘inga qarshi polipropilenli 45° burilish",
+    description: "",
+    image: "/images/products/slt/slt_blackfireburilish-removebg-preview.png",
+  },
+  {
+    id: 3,
+    slug: "slt_otish_nuftasi",
+    name: "SLT BLOCKFIRE PP-R o'tish muftasi BxH",
+    description: "",
+    image: "/images/products/slt/slt_blackfireperexodnaya-removebg-preview.png",
+  },
+];
+
+export const ca = [
+  {
+    id: 1,
+    slug: "takozli_eshik_klapan",
+    name: "Takozli eshik klapanlari",
+    description: "",
+    image: "/images/products/ca/zadviji-removebg-preview.png",
+  },
+  {
+    id: 2,
+    slug: "takozli_eshik_klapan",
+    name: "Bosim Regulyatorlari",
+    description: "",
+    image: "/images/products/ca/regulyator-removebg-preview.png",
+  },
+  {
+    id: 3,
+    slug: "vites_kapalak_klapan",
+    name: "Vites qutisi bilan kapalak klapanlar",
+    description: "",
+    image: "/images/products/ca/zatvori-removebg-preview.png",
+  },
+];
+
+export const lede = [
+  {
+    id: 1,
+    slug: "tishli_tirsak",
+    name: "Tishli tirsak 3j",
+    description: "",
+    image: "/images/products/lede/atvot_rezbavoy-removebg-preview.png",
+  },
+  {
+    id: 2,
+    slug: "yivli_flanes",
+    name: "PN16 321 bo'lingan yivli birlashma flanesi",
+    description: "",
+    image: "/images/products/lede/flanes_nakidnoy-removebg-preview.png",
+  },
+  {
+    id: 2,
+    slug: "qisqartiruvchi_tee",
+    name: "130R o'yilgan qisqartiruvchi tee",
+    description: "",
+    image: "/images/products/lede/troynik_perexadnoy-removebg-preview.png",
+  },
+];

messages/en.json

@@ -146,6 +146,11 @@
     }
   },
   "products": {
+    "catalog": {
+      "blockdescription": "Polypropylene pipes and fittings for automatic fire suppression systems and internal fire water supply",
+      "cadescription": "Equipment for automatic fire suppression",
+      "lededescription": "Weld-free coupling connections for installation of water pipelines of any purpose"
+    },
     "banner": {
       "title": "Products",
       "subtitle": "Ignum Technology Ready",

messages/ru.json

@@ -146,6 +146,11 @@
     }
   },
   "products": {
+    "catalog": {
+      "blockdescription": "Полипропиленовые трубы и фитинги для систем автоматического пожаротушения и внутреннего противопожарного водопровода",
+      "cadescription": "Оборудование для автоматического пожаротушения",
+      "lededescription": "Безсварные муфтовые соединения для монтажа водяных трубопроводов любого назначения"
+    },
     "banner": {
       "title": "Продукты",
       "subtitle": "Технология Ignum Готова",

messages/uz.json

@@ -146,6 +146,11 @@
     }
   },
   "products": {
+    "catalog": {
+      "blockdescription": "Avtomatik yong‘in o‘chirish tizimlari va ichki yong‘inga qarshi suv ta’minoti uchun polipropilen quvurlar va fitinglar",
+      "cadescription": "Avtomatik yong‘in o‘chirish uchun uskunalar",
+      "lededescription": "Har qanday maqsaddagi suv quvurlarini o‘rnatish uchun payvandsiz muftali ulanishlar"
+    },
     "banner": {
       "title": "Mahsulotlar",
       "subtitle": "Ignum Texnologiyasi Tayyor",
@@ -222,6 +227,6 @@
   "fotogalereya": "Fotogalereya",
   "contactTitle": "Bizga raqamingizni yuboring",
   "contactSubTitle": "Xodimlarimiz siz bilan bog'lanishadi",
-  "enterPhone":"Telefon raqamingiz kiriting",
-  "send":"Yuborish"
+  "enterPhone": "Telefon raqamingiz kiriting",
+  "send": "Yuborish"
 }