diff --git a/src/components/sections/hero/HeroOverlay.tsx b/src/components/sections/hero/HeroOverlay.tsx index 7dd7345..e43ec5f 100644 --- a/src/components/sections/hero/HeroOverlay.tsx +++ b/src/components/sections/hero/HeroOverlay.tsx @@ -3,6 +3,7 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot"; import TextAnimation from "@/components/ui/TextAnimation"; import ImageOrVideo from "@/components/ui/ImageOrVideo"; import AvatarGroup from "@/components/ui/AvatarGroup"; +import { useState, useEffect } from "react"; type HeroOverlayProps = { tag: string; @@ -12,7 +13,7 @@ type HeroOverlayProps = { secondaryButton: { text: string; href: string }; avatars?: { src: string }[]; avatarsLabel?: string; -} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }); +} & ({ imageSrcs: string[]; videoSrc?: never } | { videoSrc: string; imageSrcs?: never }); const HeroOverlay = ({ tag, @@ -20,22 +21,42 @@ const HeroOverlay = ({ description, primaryButton, secondaryButton, - imageSrc, + imageSrcs, videoSrc, avatars, avatarsLabel, }: HeroOverlayProps) => { + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + useEffect(() => { + if (imageSrcs && imageSrcs.length > 1) { + const interval = setInterval(() => { + setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imageSrcs.length); + }, 5000); // Change image every 5 seconds + return () => clearInterval(interval); + } + }, [imageSrcs]); + + const currentImageSrc = imageSrcs ? imageSrcs[currentImageIndex] : undefined; + return (
- + {currentImageSrc && ( + + )} + {videoSrc && ( + + )}