src/pages/HomePage/sections/Hero.tsx

@@ -1,14 +1,40 @@
 // AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
 // file as the canonical source for the "hero" section.
 
-import React from 'react';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+import React, { useState, useEffect } from 'react';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import Button from '@/components/ui/Button';
 import Tag from '@/components/ui/Tag';
 import ImageOrVideo from '@/components/ui/ImageOrVideo';
 
 export default function HeroSection(): React.JSX.Element {
+  const images = [
+    "http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg",
+    "http://img.b2bpic.net/free-photo/luxury-pool-villa-spectacular-contemporary-design-digital-art-real-estate-home-house-property-ge_1258-150749.jpg",
+    "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-luxury-bedroom-suite-hotel-with-tv_105762-2301.jpg"
+  ];
+  
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const intervalTime = 5000; // 5 seconds
+    const updateInterval = 50; // Update progress every 50ms
+    const step = (updateInterval / intervalTime) * 100;
+
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+          return 0;
+        }
+        return prev + step;
+      });
+    }, updateInterval);
+
+    return () => clearInterval(timer);
+  }, [images.length]);
+
   return (
     <div id="hero" data-webild-section="hero" className="w-full pt-32 pb-16 px-4 md:px-8 bg-background">
         <SectionErrorBoundary name="hero">
@@ -27,11 +53,26 @@ export default function HeroSection(): React.JSX.Element {
                     </div>
                 </div>
                 
-                <div className="w-full rounded-3xl overflow-hidden shadow-2xl border border-border">
-                    <ImageOrVideo 
-                        imageSrc="http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg"
-                        className="w-full h-[60vh] object-cover"
-                    />
+                <div className="w-full rounded-3xl overflow-hidden shadow-2xl border border-border relative">
+                    <div className="relative w-full h-[60vh]">
+                        {images.map((src, index) => (
+                            <div 
+                                key={src}
+                                className={`absolute inset-0 transition-opacity duration-1000 ${index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
+                            >
+                                <ImageOrVideo 
+                                    imageSrc={src}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        ))}
+                    </div>
+                    <div className="absolute bottom-0 left-0 h-1.5 bg-white/30 w-full z-20">
+                        <div 
+                            className="h-full bg-white transition-all duration-75 ease-linear"
+                            style={{ width: `${progress}%` }}
+                        />
+                    </div>
                 </div>
             </div>
         </SectionErrorBoundary>