catalog part is done

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>