Bob AI: Add hover effects to the product cards (scale, shadow, lift,

Merge version_8 into main

src/components/sections/hero/HeroBillboard.tsx

@@ -6,6 +6,7 @@ import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/b
 import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
 import { cls } from "@/lib/utils";
 import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
 import type { Avatar } from "@/components/shared/AvatarGroup";
@@ -61,7 +62,7 @@ interface HeroBillboardProps {
   buttonTextClassName?: string;
   mediaWrapperClassName?: string;
   imageClassName?: string;
-  marqueeClassName?: string;
+   marqueeClassName?: string;
   marqueeItemClassName?: string;
   marqueeCardClassName?: string;
   marqueeImageClassName?: string;
@@ -70,45 +71,46 @@ interface HeroBillboardProps {
 }
 
 const HeroBillboard = ({
-  title,
-  description,
-  background,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  avatars,
-  avatarText,
-  imageSrc,
-  videoSrc,
-  imageAlt = "",
-  videoAriaLabel = "Hero video",
-  mediaAnimation = "none",
-  marqueeItems,
-  marqueeSpeed = 30,
-  showMarqueeCard = true,
-  ariaLabel = "Hero section",
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  avatarGroupClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  mediaWrapperClassName = "",
-  imageClassName = "",
-  marqueeClassName = "",
-  marqueeItemClassName = "",
-  marqueeCardClassName = "",
-  marqueeImageClassName = "",
-  marqueeTextClassName = "",
-  marqueeIconClassName = "",
+   title,
+   description,
+   background,
+   tag,
+   tagIcon,
+   tagAnimation,
+   buttons,
+   buttonAnimation,
+   avatars,
+   avatarText,
+   imageSrc,
+   videoSrc,
+   imageAlt = "",
+   videoAriaLabel = "Hero video",
+   mediaAnimation = "none",
+   marqueeItems,
+   marqueeSpeed = 30,
+   showMarqueeCard = true,
+   ariaLabel = "Hero section",
+   className = "",
+   containerClassName = "",
+   textBoxClassName = "",
+   titleClassName = "",
+   descriptionClassName = "",
+   tagClassName = "",
+   avatarGroupClassName = "",
+   buttonContainerClassName = "",
+   buttonClassName = "",
+   buttonTextClassName = "",
+   mediaWrapperClassName = "",
+   imageClassName = "",
+   marqueeClassName = "",
+   marqueeItemClassName = "",
+   marqueeCardClassName = "",
+   marqueeImageClassName = "",
+   marqueeTextClassName = "",
+   marqueeIconClassName = "",
 }: HeroBillboardProps) => {
-  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+   const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+   const [isHovering, setIsHovering] = useState(false);
 
   return (
     <section
@@ -139,17 +141,35 @@ const HeroBillboard = ({
           center={true}
         />
         <div className="flex flex-col gap-6" >
-          <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}>
-            <div className="w-full h-full transition-transform duration-500 [transform-style:preserve-3d] hover:[transform:rotateX(180deg)]">
-              <MediaContent
-                imageSrc={imageSrc}
-                videoSrc={videoSrc}
-                imageAlt={imageAlt}
-                videoAriaLabel={videoAriaLabel}
-                imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
-              />
+            <div 
+              ref={mediaContainerRef} 
+              className={cls("w-full overflow-hidden rounded-theme-capped card p-4 [perspective:1000px]", mediaWrapperClassName)}
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
+            >
+              <style>{`
+                @keyframes infiniteSpin {
+                  from {
+                    transform: rotate(0deg);
+                  }
+                  to {
+                    transform: rotate(360deg);
+                  }
+                }
+                .spin-on-hover {
+                  animation: infiniteSpin 8s linear infinite;
+                }
+              `}</style>
+              <div className={cls("w-full h-full [transform-style:preserve-3d]", isHovering && "spin-on-hover")}>
+                <MediaContent
+                  imageSrc={imageSrc}
+                  videoSrc={videoSrc}
+                  imageAlt={imageAlt}
+                  videoAriaLabel={videoAriaLabel}
+                  imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+                />
+              </div>
             </div>
-          </div>
           {marqueeItems && marqueeItems.length > 0 && (
             <LogoMarquee
               items={marqueeItems}

src/components/sections/product/ProductCardOne.tsx

@@ -72,7 +72,7 @@ const ProductCardItem = memo(({
     cardPriceClassName = "",
 }: ProductCardItemProps) => {
     return (
-        <article
+        <article className="transition-all duration-300 ease-out hover:scale-105 hover:shadow-lg"
             className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
             onClick={product.onProductClick}
             role="article"