From cf73b468001d2c3f130a1280cf101c122ab37972 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Fri, 27 Feb 2026 09:58:09 +0000
Subject: [PATCH] Bob AI: Modify the carousel component to: 1) Slow down the
 auto-play

---
 .../sections/hero/HeroBillboardCarousel.tsx          | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index 97f3c86..d1a75c0 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useRef } from "react";
 import TextBox from "@/components/Textbox";
 import MediaContent from "@/components/shared/MediaContent";
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
@@ -83,6 +84,8 @@ const HeroBillboardCarousel = ({
     buttonTextClassName = "",
     mediaWrapperClassName = "",
 }: HeroBillboardCarouselProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const carouselRef = useRef<HTMLDivElement>(null);
     const renderCarouselItem = (item: MediaItem, index: number) => (
         <div
             key={index}
@@ -146,7 +149,12 @@ const HeroBillboardCarousel = ({
                     center={true}
                 />
 
-                <div className={cls("w-full -mx-[var(--content-padding)] relative z-20", mediaWrapperClassName)}>
+                <div 
+                    ref={carouselRef}
+                    className={cls("w-full -mx-[var(--content-padding)] relative z-20", mediaWrapperClassName)}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
                     <AutoCarousel
                         title=""
                         description=""
@@ -158,6 +166,8 @@ const HeroBillboardCarousel = ({
                         itemClassName="!w-55 md:!w-carousel-item-4"
                         ariaLabel="Hero carousel"
                         showTextBox={false}
+                        autoPlayInterval={isHovered ? 0 : 5000}
+                        pauseOnHover={true}
                     >
                         {mediaItems?.map(renderCarouselItem)}
                     </AutoCarousel>
-- 
2.49.1