Bob AI: fix build errors (attempt 1)

Merge version_26_1780497803548 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,24 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
+
+
+
+
+
+
+{/* webild-stub @2026-06-03T14:44:17.404Z: in the hero section on top of the big image let's add floating cards with kpi number and description. */}
+
+{/* 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,41 @@
-// 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";
+import Tag from "@/components/ui/Tag";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Button from "@/components/ui/Button";
 
-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 data-webild-section="about" id="about" className="bg-background">
+      <div className="max-w-content-width mx-auto px-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 items-center">
+          <ScrollReveal variant="slide-up">
+            <div className="space-y-8">
+              <Tag text="About Us" />
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
+                A Legacy of Unparalleled Hospitality
+              </h2>
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
+              </p>
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                We believe that true luxury lies in the experience. Our dedicated staff is here to ensure that your stay is nothing short of extraordinary, anticipating your every need and exceeding your expectations.
+              </p>
+              <Button text="Discover Our Story" variant="primary" />
+            </div>
+          </ScrollReveal>
+          
+          <ScrollReveal variant="fade">
+            <div className="relative h-[600px] rounded-theme overflow-hidden">
+              <ImageOrVideo 
+                imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-black/10"></div>
+            </div>
+          </ScrollReveal>
+        </div>
       </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>