From c690c8292a0e929a0ad3a8f4f70b939d036f7ce8 Mon Sep 17 00:00:00 2001
From: belviskhoremk <belviskhoremk@gmail.com>
Date: Mon, 3 Aug 2026 22:56:12 +0000
Subject: [PATCH] feat: render service images with hover-zoom in ServiceCard

Claude-Session: https://claude.ai/code/session
---
 src/components/ServiceCard.module.css | 13 +++++++++++++
 src/components/ServiceCard.test.tsx   |  1 +
 src/components/ServiceCard.tsx        |  1 +
 3 files changed, 15 insertions(+)

diff --git a/src/components/ServiceCard.module.css b/src/components/ServiceCard.module.css
index 1e10c6c..8d7c7f1 100644
--- a/src/components/ServiceCard.module.css
+++ b/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);
+}
diff --git a/src/components/ServiceCard.test.tsx b/src/components/ServiceCard.test.tsx
index 9e2d8c4..5ca8772 100644
--- a/src/components/ServiceCard.test.tsx
+++ b/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 () => {
diff --git a/src/components/ServiceCard.tsx b/src/components/ServiceCard.tsx
index 8ffeb90..de3e6de 100644
--- a/src/components/ServiceCard.tsx
+++ b/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>