feat: hovering thumbnail will jump to 2nd image thumbnail

src/modules/products/components/vt-thumbnail/index.tsx

@@ -22,12 +22,18 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
   className,
   "data-testid": dataTestid,
 }) => {
-  const initialImage = thumbnail || images?.[0]?.url
+  const imageUrls = images?.map((i: any) => i.url) || []
+  const initialImage = thumbnail || imageUrls?.[0]
+
+  let hoverImage: string | undefined = initialImage
+  if (imageUrls.length > 1) {
+     hoverImage = imageUrls.find((u) => u !== initialImage)
+  }
 
   return (
     <Container
       className={clx(
-        "relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
+        "group relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
         className,
         {
           "aspect-[11/14]": isFeatured,
@@ -41,7 +47,18 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
       )}
       data-testid={dataTestid}
     >
-      <ImageOrPlaceholder image={initialImage} size={size} />
+      <ImageOrPlaceholder
+        image={initialImage}
+        size={size}
+        className="opacity-100 group-hover:opacity-0 transition-opacity duration-300"
+      />
+      {hoverImage && (
+        <ImageOrPlaceholder
+          image={hoverImage}
+          size={size}
+          className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+        />
+      )}
     </Container>
   )
 }
@@ -49,19 +66,20 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
 const ImageOrPlaceholder = ({
   image,
   size,
-}: Pick<ThumbnailProps, "size"> & { image?: string }) => {
+  className,
+}: Pick<ThumbnailProps, "size"> & { image?: string; className?: string }) => {
   return image ? (
     <Image
       src={image}
       alt="Thumbnail"
-      className="absolute inset-0 object-cover object-center"
+      className={clx("absolute inset-0 object-cover object-center", className)}
       draggable={false}
       quality={50}
       sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
       fill
     />
   ) : (
-    <div className="w-full h-full absolute inset-0 flex items-center justify-center">
+    <div className={clx("w-full h-full absolute inset-0 flex items-center justify-center", className)}>
       <PlaceholderImage size={size === "small" ? 16 : 24} />
     </div>
   )

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames"
 
-const fileName = jsonFileNames.nam3Bear
+const fileName = jsonFileNames.namVibentec
 
 async function readDesignFile() {
   const filePath = path.join(process.cwd(), "config", fileName)