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,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import FooterBrand from '@/components/sections/footer/FooterBrand';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
@@ -6,6 +7,16 @@ 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,7 +48,7 @@ export default function Layout() {
     <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <nav className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm border-b border-foreground/10 py-4">
+        <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

src/pages/HomePage.tsx

@@ -16,6 +16,12 @@ 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 */}