Working state: Serbian at root (/), English at /en, proper i18n structure

src/components/product/ProductCard.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
+
+interface ProductCardProps {
+  product: WooProduct;
+  index?: number;
+}
+
+export default function ProductCard({ product, index = 0 }: ProductCardProps) {
+  const image = getProductImage(product);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+    >
+      <Link href={`/products/${product.slug}`} className="group block">
+        <div className="relative aspect-[4/5] bg-background-ice overflow-hidden mb-4">
+          {image && (
+            <Image
+              src={image}
+              alt={product.name}
+              fill
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          )}
+          {product.stock_status === "outofstock" && (
+            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+              <span className="text-white font-medium">Out of Stock</span>
+            </div>
+          )}
+        </div>
+        
+        <h3 className="font-serif text-lg mb-1 group-hover:text-accent-dark transition-colors">
+          {product.name}
+        </h3>
+        
+        <p className="text-foreground-muted">
+          {product.price ? formatPrice(product.price) : "Contact for price"}
+        </p>
+      </Link>
+    </motion.div>
+  );
+}