Bob AI: Added rotating image carousel with progress bar to about sec

Merge version_6_1780416011152 into main

src/pages/HomePage.tsx

@@ -14,6 +14,12 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
+
+
+{/* webild-stub @2026-06-02T16:01:32.987Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom of the image */}
+
+{/* webild-stub @2026-06-02T15:58:48.008Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom */}
+
 {/* webild-stub @2026-06-02T15:47:34.838Z: make the hero section with a big image */}
 
 export default function HomePage(): React.JSX.Element {

src/pages/HomePage/sections/About.tsx

@@ -2,17 +2,90 @@
 // file as the canonical source for the "about" section.
 
 import React from 'react';
-import AboutText from '@/components/sections/about/AboutText';
 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">
-        <SectionErrorBoundary name="about">
-              <AboutText
-          title="About The Grand Hotel"
-        />
-        </SectionErrorBoundary>
-      </div>
+    <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>
   );
 }

src/pages/HomePage/sections/Hero.tsx

@@ -2,46 +2,41 @@
 // file as the canonical source for the "hero" section.
 
 import React from 'react';
-import HeroBillboardCreator from '@/components/sections/hero/HeroBillboardCreator';
+import Button from '@/components/ui/Button';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import ScrollReveal from '@/components/ui/ScrollReveal';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
 export default function HeroSection(): React.JSX.Element {
   return (
-    <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-              <HeroBillboardCreator
-          tag="Your Ultimate Escape"
-          title="Experience Unrivaled Luxury at The Grand Hotel"
-          titleHighlight="Unrivaled Luxury"
-          description="Discover a world of refined elegance, impeccable service, and breathtaking amenities designed for an unforgettable stay. Your perfect getaway begins here."
-          primaryButton={{
-            text: "Book Your Stay",
-            href: "#contact",
-          }}
-          note="Voted #1 Luxury Hotel 5 Years in a Row by Global Travel Magazine"
-          videos={[
-            {
-              videoSrc: "asset://hero-video-1",
-              name: "Luxury Stays",
-              followers: "5000+ Guest Reviews",
-              imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-huge-bouquet-made-hydrangeas-standing-table-large-luxurious-room_627829-8201.jpg",
-            },
-            {
-              videoSrc: "asset://hero-video-2",
-              name: "Gourmet Dining",
-              followers: "Michelin Star Rated",
-              imageSrc: "http://img.b2bpic.net/free-photo/luxurious-modern-bedroom-with-comfortable-bedding-elegant-decor-generated-by-ai_188544-29870.jpg",
-            },
-            {
-              videoSrc: "asset://hero-video-3",
-              name: "Spa & Wellness",
-              followers: "Award-Winning Services",
-              imageSrc: "http://img.b2bpic.net/free-photo/towels-interior-spa-complex_169016-22506.jpg",
-            },
-          ]}
-          badgeText="5-Star Excellence"
-        />
-        </SectionErrorBoundary>
-      </div>
+    <div id="hero" data-webild-section="hero" className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
+      <SectionErrorBoundary name="hero">
+        <div className="absolute inset-0 z-0">
+          <ImageOrVideo 
+            imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80" 
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/60" />
+        </div>
+        
+        <div className="relative z-10 container mx-auto px-4 text-center">
+          <ScrollReveal variant="slide-up">
+            <Tag text="Your Ultimate Escape" className="mb-6 mx-auto bg-black/50 text-white border-white/20" />
+            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
+              Experience Unrivaled Luxury<br />
+              <span className="text-primary-cta">at The Grand Hotel</span>
+            </h1>
+            <p className="text-lg md:text-xl text-white/90 max-w-content-width mx-auto">
+              Discover a world of refined elegance, impeccable service, and breathtaking amenities designed for an unforgettable stay. Your perfect getaway begins here.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button text="Book Your Stay" variant="primary" href="#contact" className="px-8 py-4 text-lg" />
+              <Button text="Explore Rooms" variant="secondary" href="#rooms" className="px-8 py-4 text-lg text-white border-white/20" />
+            </div>
+          </ScrollReveal>
+        </div>
+      </SectionErrorBoundary>
+    </div>
   );
-}
+}