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

@@ -14,6 +14,21 @@ 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 {

src/pages/HomePage/sections/About.tsx

@@ -1,10 +1,40 @@
 import React from 'react';
+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() {
   return (
-    <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 */}
+    <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

@@ -71,7 +71,7 @@ export default function HeroSection(): React.JSX.Element {
                             </div>
                         ))}
                     </div>
-                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 w-full max-w-md px-4 z-20">
+                    <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