Bob AI (stub): in the hero section on top of the big image let's add floati

Merge version_24_1780497537571 into main

src/components/Layout.tsx

@@ -1,11 +1,22 @@
+import React, { useState, useEffect } from 'react';
 import FooterBrand from '@/components/sections/footer/FooterBrand';
-import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import Button from "@/components/ui/Button";
 
 export default function Layout() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const navItems = [
   {
     "name": "Home",    "href": "#hero"
@@ -37,12 +48,21 @@ export default function Layout() {
     <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarFloatingLogo
-      ctaButton={{
-        text: "Book Now",        href: "#contact"}}
-      logo="The Grand Hotel"
-      logoImageSrc="https://storage.googleapis.com/webild/default/no-image.jpg?id=6xbdeo"
-     navItems={navItems} />
+        <nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
+          <div className="mx-auto flex w-content-width items-center justify-between">
+            <a href="#" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
+              The Grand Hotel
+            </a>
+            <div className="hidden lg:flex items-center gap-6">
+              {navItems.map((item) => (
+                <a key={item.name} href={item.href} className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors">
+                  {item.name}
+                </a>
+              ))}
+            </div>
+            <Button text="Book Now" href="#contact" variant="primary" />
+          </div>
+        </nav>
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
@@ -90,4 +110,4 @@ export default function Layout() {
       </SectionErrorBoundary>
     </StyleProvider>
   );
-}
+}

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #ffdf7d;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffff;
-  --accent: #b8860b;
-  --background-accent: #8b6914;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
+  --primary-cta-text: #f6f0e9;
+  --secondary-cta: #efe7dd;
+  --secondary-cta-text: #2b180a;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -13,6 +13,21 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
+
+
+
+
+
+{/* webild-stub @2026-06-03T14:42:44.419Z: in the hero section on top of the big image let's add floating cards with kpi number and description. on mouse move they should have a nice moving animation */}
+
+{/* webild-stub @2026-06-03T14:40:24.768Z: add floating KPI cards in the hero section, they should move with a parallax effect as I move my mouse around in the hero section */}
+
+{/* webild-stub @2026-06-03T14:26:06.808Z: make the hero section use width content width, like w-content-width */}
+
+{/* webild-stub @2026-06-03T14:17:28.384Z: make the hero section the same width as all the other sections */}
+
+{/* webild-stub @2026-06-03T13:49:00.110Z: change the hero section so each image in the carousel has its own progress bar, and all progress bars are visible at the same time */}
+
 export default function HomePage(): React.JSX.Element {
   return (
     <>

src/pages/HomePage/sections/About.tsx

@@ -1,18 +1,11 @@
-// 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 AboutText from '@/components/sections/about/AboutText';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
-export default function AboutSection(): React.JSX.Element {
+export default function AboutSection() {
   return (
-    <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-              <AboutText
-          title="Our Legacy of Hospitality"
-        />
-        </SectionErrorBoundary>
+    <section id="about" className="bg-background">
+      <div className="max-w-content-width mx-auto px-6 text-center">
+        {/* Text 'Our Legacy of Hospitality' removed as requested */}
       </div>
+    </section>
   );
-}
+}

src/pages/HomePage/sections/Hero.tsx

@@ -1,35 +1,88 @@
 // 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) return 100;
+        return prev + step;
+      });
+    }, updateInterval);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (progress >= 100) {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+      setProgress(0);
+    }
+  }, [progress, images.length]);
+
   return (
-    <div id="hero" data-webild-section="hero" className="relative w-full min-h-[80vh] flex items-center justify-center overflow-hidden">
+    <div id="hero" data-webild-section="hero" className="w-full pt-32 pb-16 px-4 md:px-8">
         <SectionErrorBoundary name="hero">
-            <div className="absolute inset-0 z-0">
-                <ImageOrVideo 
-                    imageSrc="http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg"
-                    className="w-full h-full object-cover"
-                />
-                <div className="absolute inset-0 bg-black/50" />
-            </div>
-            <div className="relative z-10 container mx-auto px-4 text-center flex flex-col items-center gap-6 py-24">
-                <Tag text="Welcome to Luxury" className="bg-background/20 text-white border-white/30 backdrop-blur-md" />
-                <h1 className="text-5xl md:text-7xl font-bold text-white max-w-4xl">
-                    Experience Unparalleled Comfort & Elegance
-                </h1>
-                <p className="text-lg md:text-xl text-white/90 max-w-2xl">
-                    Discover a world where impeccable service meets sophisticated design. Your unforgettable journey begins here.
-                </p>
-                <div className="flex flex-wrap items-center justify-center gap-4 mt-4">
-                    <Button text="Book Your Stay" variant="primary" href="#contact" className="text-lg px-8 py-6" />
-                    <Button text="Explore Rooms" variant="secondary" href="#accommodation" className="text-lg px-8 py-6 bg-white/10 text-white border-white/30 hover:bg-white/20" />
+            <div className="container mx-auto max-w-6xl flex flex-col items-center text-center">
+                <div className="flex flex-col items-center text-center gap-4 mb-16 max-w-3xl mx-auto">
+                    <Tag text="Welcome to Luxury" />
+                    <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-balance bg-clip-text text-transparent bg-gradient-to-b from-foreground to-muted-foreground pb-2">
+                        Experience Unparalleled Comfort & Elegance
+                    </h1>
+                    <p className="text-lg text-muted-foreground">
+                        Discover a world where impeccable service meets sophisticated design. Your unforgettable journey begins here.
+                    </p>
+                    <div className="flex flex-wrap items-center justify-center gap-4">
+                        <Button text="Book Your Stay" variant="primary" href="#contact" />
+                        <Button text="Explore Rooms" variant="secondary" href="#accommodation" />
+                    </div>
+                </div>
+                
+                <div className="w-full rounded-3xl overflow-hidden shadow-2xl 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-6 left-1/2 -translate-x-1/2 flex gap-3 w-full px-4 z-20">
+                        {images.map((_, index) => (
+                            <div key={index} className="h-1.5 flex-1 bg-white/30 rounded-full overflow-hidden cursor-pointer" onClick={() => { setCurrentIndex(index); setProgress(0); }}>
+                                <div 
+                                    className="h-full bg-white transition-all duration-75 ease-linear"
+                                    style={{ 
+                                        width: index === currentIndex ? `${progress}%` : (index < currentIndex ? '100%' : '0%') 
+                                    }}
+                                />
+                            </div>
+                        ))}
+                    </div>
                 </div>
             </div>
         </SectionErrorBoundary>