new styles

frontend/style/components/product-card.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image"
+import { Heart } from 'lucide-react'
+import { Button } from "./ui/button"
+import { Badge } from "./ui/badge"
+
+interface ProductCardProps {
+  product: {
+    id: number
+    title: string
+    price: number
+    oldPrice: number
+    discount: number
+    image: string
+    isHotDeal?: boolean
+    isSale?: boolean
+  }
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  return (
+    <div className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg">
+      <div className="relative aspect-square mb-2">
+        <Image
+          src={product.image}
+          alt={product.title}
+          fill
+          className="object-cover rounded-lg"
+        />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+        >
+          <Heart className="h-5 w-5" />
+        </Button>
+        {product.isHotDeal && (
+          <div className="absolute top-2 left-2 bg-pink-500 text-white px-2 py-1 text-xs font-medium rounded">
+            НАРАСХВАТ
+          </div>
+        )}
+      </div>
+      <div className="space-y-2">
+        <div className="flex items-baseline gap-2">
+          <span className="text-xl font-bold">{product.price} ₽</span>
+          <span className="text-sm text-muted-foreground line-through">
+            {product.oldPrice} ₽
+          </span>
+          <span className="text-sm text-red-500">-{product.discount}%</span>
+        </div>
+        <h3 className="text-sm line-clamp-2">{product.title}</h3>
+        {product.isSale && (
+          <Badge variant="destructive" className="mt-2">
+            Распродажа
+          </Badge>
+        )}
+      </div>
+    </div>
+  )
+}
+