Add hover effect to ShopByCategory section to display video

src/features/creators/data.ts

@@ -1,7 +1,7 @@
 import { SocialNetworkEnum, type CreatorInfo } from './types';
 import nhr_1 from '../../shared/assets/img/nhr_1.webp';
 import nhr_2 from '../../shared/assets/img/nhr_2.webp';
-import vpm from '../../shared/assets/img/vpm.jpg'
+import vpm from '../../shared/assets/img/vpm.jpg';
 import mkm_1 from '../../shared/assets/img/mkm_1.webp';
 
 export const creators: CreatorInfo[] = [
@@ -60,5 +60,5 @@ export const creators: CreatorInfo[] = [
         icon: SocialNetworkEnum.TELEGRAM,
       },
     ],
-  }
+  },
 ];

src/features/home/components/CategoryItem/CategoryItem.scss

@@ -2,22 +2,56 @@
 @use '../../../../shared/styles/vars' as *;
 @use '../../../../shared/styles/mixins' as *;
 
+$animation-duration: 0.4s;
+
 .category-item {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   width: 100%;
 
-  transition: transform $base-transition ease-in-out;
-
-  &:hover {
-    transform: translateY(-#{map.get($spacing, 'sm')});
+  &__media-wrapper {
+    padding-bottom: 100%; 
+    height: 0;
+    position: relative;
+    overflow: hidden; 
+    margin-bottom: map.get($spacing, 'xl'); 
   }
 
-  &__img {
+  &__media {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
     object-fit: cover;
-    margin-bottom: map.get($spacing, 'xl');
+
+    transition: 
+        transform $animation-duration ease-out, 
+        opacity $animation-duration ease-out; 
+  }
+
+  &__media--img {
+    transform: scale(1);
+    opacity: 1;
+    z-index: 2;
+  }
+
+  .hidden-on-hover {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  &__media--video {
+    transform: scale(0.9);
+    opacity: 0;            
+    z-index: 1;           
+  }
+
+  .visible-on-hover {
+    transform: scale(1);   
+    opacity: 1;           
+    z-index: 3;           
   }
 
   &__title {
@@ -26,6 +60,6 @@
   }
 
   &__count {
-    color: #89939a;
+    color: map.get($colors, 'gray-light');;
   }
-}
+}

src/features/home/components/CategoryItem/CategoryItem.tsx

@@ -1,35 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './CategoryItem.scss';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
   categoryImg: string;
+  categoryVideo: string;
   categoryQuantity: number;
   categoryName: string;
 };
 
 const CategoryItem: React.FC<Props> = ({
   categoryImg,
+  categoryVideo,
   categoryQuantity,
   categoryName,
 }) => {
   const { t } = useTranslation('homePage');
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <article className="category-item">
-      <div className="category-item__img-wrapper">
+    <article
+      className="category-item"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="category-item__media-wrapper">
+
         <img
           src={categoryImg}
           alt={categoryName}
-          className="category-item__img"
+          className={`category-item__media category-item__media--img ${
+            isHovered && categoryVideo ? 'hidden-on-hover' : ''
+          }`}
         />
+
+        {categoryVideo && (
+          <video
+            src={categoryVideo}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className={`category-item__media category-item__media--video ${
+              isHovered ? 'visible-on-hover' : ''
+            }`}
+          />
+        )}
+
       </div>
 
       <h3 className="category-item__title">{t(categoryName)}</h3>
-
       <p className="category-item__count">{categoryQuantity} models</p>
     </article>
   );
 };
 
-export default CategoryItem;
+export default CategoryItem;

src/features/home/components/CategoryList/CategoryList.tsx

@@ -7,6 +7,10 @@ import { CategoryLabels } from '../../../catalog/types';
 import categoryPhones from '../../../../shared/assets/img/category-phones.webp';
 import categoryTablets from '../../../../shared/assets/img/category-tablets.webp';
 import categoryAccessories from '../../../../shared/assets/img/category-accessories.webp';
+import categoryPhonesVideo from '../../../../shared/assets/video/video-1.webm';
+import categoryTabletsVideo from '../../../../shared/assets/video/video-2.webm';
+import categoryAccessoriesVideo from '../../../../shared/assets/video/video-3.webm';
+
 import type { Category } from '../../../../services/product';
 import { Link } from 'react-router-dom';
 import { useLanguage } from '../../../../shared/context/language';
@@ -35,34 +39,48 @@ const CategoryList: React.FC<CategoryListProps> = ({ sectionTitle }) => {
     fetchCategoryStats();
   }, []);
 
-  const getCategoryImage = (category: string) => {
+  const getCategoryMedia = (category: string) => {
     switch (category.toLowerCase()) {
       case 'phones':
-        return categoryPhones;
+        return {
+          img: categoryPhones,
+          video: categoryPhonesVideo,
+        };
       case 'tablets':
-        return categoryTablets;
+        return {
+          img: categoryTablets,
+          video: categoryTabletsVideo,
+        };
       case 'accessories':
-        return categoryAccessories;
+        return {
+          img: categoryAccessories,
+          video: categoryAccessoriesVideo,
+        };
       default:
-        return '';
+        return { img: '', video: '' };
     }
   };
 
   return (
     <div className="category-list">
       <h2 className="category-list__title">{sectionTitle}</h2>
       <ul className="category-list__list">
-        {categories.map((category) => (
-          <li className="category-list__item" key={category.category}>
-            <Link to={`/${lng}/catalog/${category.category}`}>
-              <CategoryItem
-                categoryName={CategoryLabels[category.category as Category]}
-                categoryQuantity={category.numberOfModels}
-                categoryImg={getCategoryImage(category.category)}
-              />
-            </Link>
-          </li>
-        ))}
+        {categories.map((category) => {
+          const media = getCategoryMedia(category.category);
+
+          return (
+            <li className="category-list__item" key={category.category}>
+              <Link to={`/${lng}/catalog/${category.category}`} title="">
+                <CategoryItem
+                  categoryName={CategoryLabels[category.category as Category]}
+                  categoryQuantity={category.numberOfModels}
+                  categoryImg={media.img}
+                  categoryVideo={media.video}
+                />
+              </Link>
+            </li>
+          );
+        })}
       </ul>
     </div>
   );