feat: render product images with hover-zoom in ProductCard

src/components/ProductCard.module.css

@@ -31,3 +31,16 @@
   background: #b7ada3;
   cursor: not-allowed;
 }
+
+.image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 3px;
+  margin-bottom: var(--space-sm);
+  transition: transform 0.3s ease;
+}
+
+.card:hover .image {
+  transform: scale(1.05);
+}

src/components/ProductCard.test.tsx

@@ -15,6 +15,7 @@ describe('ProductCard', () => {
     render(<ProductCard product={product} onInquire={onInquire} />)
     expect(screen.getByText('Silk Edge Control')).toBeInTheDocument()
     expect(screen.getByText('$12')).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: 'Silk Edge Control' })).toHaveAttribute('src', '/x.jpg')
     await userEvent.click(screen.getByRole('button', { name: /ask about this/i }))
     expect(onInquire).toHaveBeenCalledWith(product)
   })

src/components/ProductCard.tsx

@@ -9,6 +9,7 @@ interface ProductCardProps {
 function ProductCard({ product, onInquire }: ProductCardProps) {
   return (
     <div className={styles.card}>
+      <img src={product.image} alt={product.name} className={styles.image} />
       <h3>{product.name}</h3>
       <p>${product.price}</p>
       <p>{product.description}</p>