Bob AI (stub): change the about section's image to rotate every 5 seconds a

Merge version_4_1780415625629 into main

src/pages/HomePage.tsx

@@ -14,6 +14,9 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
+
+{/* 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,53 @@
 // 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 {
   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">
+        <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">
+                <ImageOrVideo 
+                  imageSrc="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </ScrollReveal>
+          </div>
+        </div>
+      </SectionErrorBoundary>
+    </div>
   );
 }