src/entities/project/ui/ProjectCard/ProjectCard.test.tsx

@@ -124,5 +124,11 @@ describe('ProjectCard', () => {
       const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
     });
+
+    it('image is wrapped in a lightbox button with cursor-zoom-in', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
+      const btn = screen.getByRole('button', { name: DEFAULT_PROPS.title });
+      expect(btn).toHaveClass('cursor-zoom-in');
+    });
   });
 });

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -1,6 +1,5 @@
-import Image from 'next/image';
 import { cn } from '$shared/lib';
-import { Badge, Button, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
+import { Badge, Button, Card, CardSidebar, CardTitle, ImageLightbox, RichText } from '$shared/ui';
 
 type Props = {
   /**
@@ -58,11 +57,7 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl }: P
       >
         <div className="flex flex-col gap-4">
           <CardTitle className="font-heading">{title}</CardTitle>
-          {imageUrl && (
-            <div className="brutal-border aspect-video bg-blue overflow-hidden relative">
-              <Image src={imageUrl} alt={title} fill className="object-cover" />
-            </div>
-          )}
+          {imageUrl && <ImageLightbox src={imageUrl} alt={title} className="brutal-border bg-blue" />}
           <RichText html={description} />
         </div>
       </CardSidebar>