feat: render service images with hover-zoom in ServiceCard

Claude-Session: https://claude.ai/code/session

src/components/ServiceCard.module.css

@@ -13,3 +13,16 @@
 .card:hover {
   transform: translateY(-6px) rotateX(2deg);
 }
+
+.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/ServiceCard.test.tsx

@@ -15,6 +15,7 @@ describe('ServiceCard', () => {
     expect(screen.getByText('Knotless Braids')).toBeInTheDocument()
     expect(screen.getByText(/from \$150/i)).toBeInTheDocument()
     expect(screen.getByText('4h')).toBeInTheDocument()
+    expect(screen.getByRole('img', { name: 'Knotless Braids' })).toHaveAttribute('src', '/x.jpg')
   })
 
   it('calls onSelect with the service id when clicked', async () => {

src/components/ServiceCard.tsx

@@ -15,6 +15,7 @@ function formatDuration(minutes: number): string {
 function ServiceCard({ service, onSelect }: ServiceCardProps) {
   return (
     <button type="button" className={styles.card} onClick={() => onSelect?.(service.id)}>
+      <img src={service.image} alt={service.name} className={styles.image} />
       <h3>{service.name}</h3>
       <p>{formatDuration(service.durationMinutes)}</p>
       <p>From ${service.priceFrom}</p>