102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
|
// file as the canonical source for the "hero" section.
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
import Button from "@/components/ui/Button";
|
|
|
|
const IMAGES = [
|
|
"http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952344.jpg",
|
|
"https://images.unsplash.com/photo-1522071820075-bc879564763a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1552664730-d307ca8849d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1517245381810-b23468734b09?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
];
|
|
|
|
export default function HeroSection(): React.JSX.Element {
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const duration = 5000; // 5 seconds per image
|
|
const interval = 50; // update progress every 50ms
|
|
const step = (interval / duration) * 100;
|
|
|
|
const timer = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 100) {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % IMAGES.length);
|
|
return 0;
|
|
}
|
|
return prev + step;
|
|
});
|
|
}, interval);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="container mx-auto mb-12">
|
|
<h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8 text-center">
|
|
Innovate Marketing
|
|
</h1>
|
|
|
|
<div className="flex flex-col md:flex-row justify-end items-end gap-6">
|
|
<div className="max-w-md text-right">
|
|
<p className="text-base md:text-lg text-muted-foreground mb-6">
|
|
Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together.
|
|
</p>
|
|
<div className="flex items-center justify-end gap-4">
|
|
<Button href="#services" text="Our Services" variant="primary" />
|
|
<Button href="#contact" text="Contact Us" variant="secondary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full container mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
|
|
{IMAGES.map((src, index) => (
|
|
<div
|
|
key={src}
|
|
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
|
|
index === currentImageIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
|
|
}`}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={`Slide ${index + 1}`}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
{/* Progress Bars Overlay */}
|
|
<div className="absolute bottom-6 left-0 right-0 z-20 flex justify-center gap-3 px-6">
|
|
{IMAGES.map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="h-1.5 w-16 sm:w-24 bg-white/30 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer"
|
|
onClick={() => {
|
|
setCurrentImageIndex(index);
|
|
setProgress(0);
|
|
}}
|
|
>
|
|
<div
|
|
className="h-full bg-white transition-all duration-75 ease-linear"
|
|
style={{
|
|
width: index === currentImageIndex
|
|
? `${progress}%`
|
|
: index < currentImageIndex ? '100%' : '0%'
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|