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 (
     <section
       aria-label="Hero section"
       className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
     >
       <HeroBackgroundSlot />
-      <ImageOrVideo
-        imageSrc={imageSrc}
-        videoSrc={videoSrc}
-        className="absolute inset-0 w-full h-full object-cover rounded-none"
-      />
+      {currentImageSrc && (
+        <ImageOrVideo
+          imageSrc={currentImageSrc}
+          className="absolute inset-0 w-full h-full object-cover rounded-none transition-opacity duration-1000 ease-in-out"
+        />
+      )}
+      {videoSrc && (
+        <ImageOrVideo
+          videoSrc={videoSrc}
+          className="absolute inset-0 w-full h-full object-cover rounded-none"
+        />
+      )}
 
       <div
         className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"

src/pages/HomePage.tsx

@@ -26,7 +26,12 @@ export default function HomePage() {
         text: "Get a Free Quote",
         href: "#contact",
       }}
-      imageSrc="http://img.b2bpic.net/free-photo/brown-black-wooden-bench-near-glass-window_417767-129.jpg"
+      imageSrcs={[
+        "http://img.b2bpic.net/free-photo/brown-black-wooden-bench-near-glass-window_417767-129.jpg",
+        "https://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-office-with-decor-shelf_105762-1676.jpg",
+        "https://img.b2bpic.net/free-photo/modern-house-with-swimming-pool_1340-26694.jpg",
+        "https://img.b2bpic.net/free-photo/beautiful-view-green-park-with-trees-bushes-sunlight_181624-19017.jpg"
+      ]}
       avatars={[
         {
           src: "http://img.b2bpic.net/free-photo/portrait-cute-green-eyed-woman-white-t-shirt-knitted-sweater-smiling-botanical-garden_197531-12363.jpg",