Change zooming effect

Author: pvkudr

client/src/components/ui/eventCarousel.tsx

@@ -137,14 +137,14 @@ export default function EventCarousel({ items }: EventCarouselProps) {
                 href={`/events/${event.id}`}
                 key={event.id}
                 ref={index === 0 ? firstItemRef : undefined}
-                className="group block w-full flex-shrink-0 overflow-hidden rounded-xl md:w-[calc((100%-80px)/3)]"
+                className={`block w-full flex-shrink-0 rounded-xl transition-transform duration-200 ease-in-out hover:scale-110 md:w-[calc((100%-80px)/3)] ${index === 0 ? "origin-left" : ""}`}
               >
                 <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
                   <Image
                     src={event.coverImage}
                     alt={event.name}
                     fill
-                    className="object-cover transition-transform duration-300 group-hover:scale-105"
+                    className="object-cover"
                   />
                 </div>
 

client/src/hooks/useEvents.ts

@@ -18,11 +18,10 @@ export type UiEvent = Omit<ApiEvent, "cover_image"> & {
   coverImage: string;
 };
 
-// TODO: replace "/game_event_poster.png" with "/game_dev_club_logo.svg" after tests
 function transformApiEventToUiEvent(data: ApiEvent): UiEvent {
   return {
     ...data,
-    coverImage: data.cover_image ?? "/game_event_poster.png",
+    coverImage: data.cover_image ?? "/game_dev_club_logo.svg",
   };
 }