Update components/product-card.tsx

components/product-card.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Product } from "@/lib/data";
+import { Star, ShoppingCart } from "lucide-react";
+import Link from "next/link";
+import { useCart } from "@/lib/use-cart";
+
+export function ProductCard({ product }: { product: Product }) {
+  const { addToCart } = useCart();
+
+  return (
+    <Card className="group overflow-hidden border-none shadow-sm hover:shadow-md transition-all duration-300 rounded-2xl">
+      <Link href={`/products/${product.id}`}>
+        <div className="relative aspect-square overflow-hidden bg-neutral-100">
+          <img
+            src={product.image}
+            alt={product.name}
+            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
+          />
+          {product.isOffer && (
+            <div className="absolute top-3 left-3 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-full uppercase">
+              Offer
+            </div>
+          )}
+        </div>
+      </Link>
+      <CardContent className="p-4">
+        <div className="text-xs text-neutral-500 mb-1">{product.category}</div>
+        <Link href={`/products/${product.id}`}>
+          <h3 className="font-semibold text-neutral-900 line-clamp-1 group-hover:text-blue-600 transition-colors">
+            {product.name}
+          </h3>
+        </Link>
+        <div className="flex items-center gap-1 mt-1 mb-2">
+          <div className="flex items-center text-yellow-400">
+            <Star className="w-3 h-3 fill-current" />
+            <span className="text-xs font-medium text-neutral-700 ml-1">{product.rating}</span>
+          </div>
+          <span className="text-[10px] text-neutral-400">({product.reviews})</span>
+        </div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="flex flex-col">
+            <span className="text-lg font-bold text-neutral-900">₹{product.price}</span>
+            {product.originalPrice && (
+              <span className="text-xs text-neutral-400 line-through">₹{product.originalPrice}</span>
+            )}
+          </div>
+          <Button 
+            size="icon" 
+            variant="secondary" 
+            className="rounded-full h-9 w-9"
+            onClick={() => addToCart(product)}
+          >
+            <ShoppingCart className="w-4 h-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}