products and product/slug page done

components/pages/products/productCard.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+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-70 w-[90%] mx-auto overflow-hidden bg-white">
+          <Image
+            src={image || "/placeholder.svg"}
+            alt={title}
+            fill
+            className="object-contain transition-transform duration-300"
+          />
+        </div>
+
+        {/* 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">
+            {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>
+  );
+}