base commit

client/src/entities/product/ui/ProductCard.tsx

@@ -11,14 +11,39 @@ type Props = { product: Product }
 
 export function ProductCard({ product }: Props) {
   return (
-    <Card variant="outlined" sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <Card
+      variant="outlined"
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        transition: 'transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease',
+        '&:hover': {
+          transform: 'translateY(-3px)',
+          boxShadow: 6,
+          borderColor: 'divider',
+        },
+        '&:hover .product-card__media': { transform: 'scale(1.03)' },
+        '@media (prefers-reduced-motion: reduce)': {
+          transition: 'none',
+          '&:hover': { transform: 'none' },
+          '&:hover .product-card__media': { transform: 'none' },
+        },
+      }}
+    >
       {product.imageUrl ? (
         <CardMedia
           component="img"
           height="200"
           image={product.imageUrl}
           alt={product.title}
-          sx={{ objectFit: 'cover' }}
+          sx={{
+            objectFit: 'cover',
+            transition: 'transform 240ms ease',
+            '@media (prefers-reduced-motion: reduce)': { transition: 'none' },
+          }}
+          className="product-card__media"
         />
       ) : (
         <CardMedia