Update components/product-card.tsx

components/product-card.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Badge } from "@/components/badge";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+  image: string;
+  isNew?: boolean;
+  isSale?: boolean;
+}
+
+export function ProductCard({ product }: { product: Product }) {
+  return (
+    <Card className="group overflow-hidden border-none shadow-sm hover:shadow-md transition-all duration-300">
+      <Link href={`/shop/${product.id}`}>
+        <div className="relative aspect-[4/5] overflow-hidden bg-neutral-100">
+          <Image
+            src={product.image}
+            alt={product.name}
+            fill
+            className="object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+          <div className="absolute top-4 left-4 flex flex-col gap-2">
+            {product.isNew && <Badge className="bg-black text-white">New Arrival</Badge>}
+            {product.isSale && <Badge variant="outline" className="bg-red-500 text-white border-none">Sale</Badge>}
+          </div>
+        </div>
+      </Link>
+      <CardContent className="pt-4 px-2">
+        <p className="text-xs text-neutral-500 uppercase tracking-wider mb-1">{product.category}</p>
+        <h3 className="font-semibold text-neutral-900 group-hover:text-primary transition-colors">
+          {product.name}
+        </h3>
+        <p className="mt-1 font-bold text-neutral-900">${product.price}</p>
+      </CardContent>
+      <CardFooter className="px-2 pb-4 pt-0">
+        <Button variant="secondary" className="w-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+          Add to Cart
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}