bender/574a3b0a-41a8-4e46-b5d4-e7f70ef84668
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4_1780494288262 into main

Browse Source 
Merge version_4_1780494288262 into main
This commit was merged in pull request #4.
This commit is contained in:
bender
2026-06-03 13:46:48 +00:00
parent 311974c386 588c8cddf7
commit 5cb557e570
1 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/HomePage/sections/Hero.tsx
View File

@@ -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>