92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
|
// file as the canonical source for the "about" section.
|
|
|
|
import React from 'react';
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
import Tag from "@/components/ui/Tag";
|
|
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
|
import ScrollReveal from "@/components/ui/ScrollReveal";
|
|
import { CheckCircle2 } from "lucide-react";
|
|
|
|
export default function AboutSection(): React.JSX.Element {
|
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
const IMAGES = [
|
|
"https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80",
|
|
"https://images.unsplash.com/photo-1582719478250-c894e4dc24a5?auto=format&fit=crop&q=80",
|
|
"https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80"
|
|
];
|
|
|
|
React.useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % IMAGES.length);
|
|
}, 5000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div id="about" data-section="about" className="py-24 bg-background">
|
|
<SectionErrorBoundary name="about">
|
|
<style>{`
|
|
@keyframes progress-bar {
|
|
0% { width: 0%; }
|
|
100% { width: 100%; }
|
|
}
|
|
`}</style>
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<ScrollReveal variant="slide-up">
|
|
<div className="space-y-6">
|
|
<Tag text="About Us" />
|
|
<h2 className="text-4xl md:text-5xl font-bold text-foreground">
|
|
A Legacy of Excellence
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Experience the perfect blend of classic elegance and modern luxury. Since our founding, we have been dedicated to providing unparalleled service and unforgettable experiences for our guests.
|
|
</p>
|
|
<ul className="space-y-4 mt-8">
|
|
{[
|
|
"Award-winning dining experiences",
|
|
"World-class spa and wellness center",
|
|
"Prime location in the heart of the city",
|
|
"Exceptional personalized concierge service"
|
|
].map((item, index) => (
|
|
<li key={index} className="flex items-center space-x-3 text-foreground">
|
|
<CheckCircle2 className="w-6 h-6 text-primary" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal variant="fade-blur">
|
|
<div className="relative h-[500px] rounded-2xl overflow-hidden">
|
|
{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 className="absolute bottom-0 left-0 right-0 h-1.5 bg-black/40 z-20">
|
|
<div
|
|
key={currentIndex}
|
|
className="h-full bg-primary"
|
|
style={{ animation: 'progress-bar 5s linear' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
);
|
|
}
|