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

@@ -1,308 +1,45 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
-import FeaturesRevealCardsBentoSharp from '@/components/sections/features/FeaturesRevealCardsBentoSharp';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly; this shell only fixes render order.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import AccommodationSection from './HomePage/sections/Accommodation';
+import ExperiencesSection from './HomePage/sections/Experiences';
+import OffersSection from './HomePage/sections/Offers';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+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 (
     <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="Welcome to Luxury"
-      title="Experience Unparalleled Comfort & Elegance"
-      description="Discover a world where impeccable service meets sophisticated design. Your unforgettable journey begins here."
-      primaryButton={{
-        text: "Book Your Stay",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Explore Rooms",
-        href: "#accommodation",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-design-interior_23-2151929575.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hotel-receptionist-work_23-2149661548.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="Our Legacy of Hospitality"
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="accommodation" data-section="accommodation">
-    <SectionErrorBoundary name="accommodation">
-          <FeaturesDetailedSteps
-      tag="Accommodation"
-      title="Indulge in Our Luxurious Rooms & Suites"
-      description="Each space at The Grand Hotel is meticulously designed for ultimate comfort and sophistication, offering elegant decor, modern amenities, and breathtaking views to ensure a serene retreat."
-      steps={[
-        {
-          tag: "Cozy Comfort",
-          title: "Standard Room",
-          subtitle: "Your Elegant Retreat",
-          description: "Perfect for a relaxing stay, our Standard Rooms offer essential amenities and a comfortable ambiance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/white-bed-lamp-hotel-business_1203-4933.jpg",
-        },
-        {
-          tag: "Spacious Luxury",
-          title: "Deluxe Suite",
-          subtitle: "The Premium Experience",
-          description: "Enjoy expansive living areas, enhanced amenities, and picturesque city views from our Deluxe Suites.",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-atelier-with-sketches-tools_482257-85311.jpg",
-        },
-        {
-          tag: "Unmatched Grandeur",
-          title: "Presidential Suite",
-          subtitle: "An Opulent Haven",
-          description: "The pinnacle of luxury, our Presidential Suite offers personalized service, private dining, and panoramic vistas.",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-worker-business-trip_482257-80852.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="experiences" data-section="experiences">
-    <SectionErrorBoundary name="experiences">
-          <FeaturesRevealCardsBentoSharp
-      tag="Experiences"
-      title="Beyond Your Stay: Our Signature Services"
-      description="From gourmet dining to rejuvenating spa treatments, The Grand Hotel offers an array of services designed to enrich every moment of your visit."
-      items={[
-        {
-          title: "Fine Dining",
-          description: "Savor exquisite dishes prepared by award-winning chefs in an elegant atmosphere.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-mushrooms-tomato_140725-3752.jpg",
-        },
-        {
-          title: "Spa & Wellness",
-          description: "Indulge in a range of treatments designed for ultimate relaxation and rejuvenation.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fair-skinned-women-use-moisturizing-day-cream-sensitive-skin-light-room-self-care-health-day-concept_197531-31471.jpg",
-        },
-        {
-          title: "Fitness Center",
-          description: "Maintain your routine with our state-of-the-art facilities and professional trainers.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-looking-mirror_23-2149832697.jpg",
-        },
-        {
-          title: "Event Spaces",
-          description: "Host your perfect occasion in our versatile venues, ideal for weddings and conferences.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautifully-decorated-venue-interior-wedding_181624-58530.jpg",
-        },
-        {
-          title: "Concierge Service",
-          description: "Our dedicated team provides personalized assistance to cater to your every need.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/guests-with-suitcases-hotel-reception_482257-80053.jpg",
-        },
-        {
-          title: "Rooftop Bar",
-          description: "Enjoy crafted beverages and stunning panoramic cityscapes from our exclusive bar.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-inside-night-club-black-hat_627829-5507.jpg",
-        },
-        {
-          title: "Business Center",
-          description: "Fully equipped facilities for your professional needs, ensuring productivity on the go.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-empty-waiting-room_1170-1960.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="offers" data-section="offers">
-    <SectionErrorBoundary name="offers">
-          <PricingMediaCards
-      tag="Offers"
-      title="Exclusive Packages & Seasonal Deals"
-      description="Discover special rates and bundled experiences tailored to enhance your stay at The Grand Hotel."
-      plans={[
-        {
-          tag: "Weekend Escape",
-          price: "$450",
-          period: "/night",
-          features: [
-            "Complimentary breakfast for two",
-            "Late checkout (subject to availability)",
-            "Access to all hotel amenities",
-            "Welcome drink upon arrival",
-          ],
-          primaryButton: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/gentle-couple-celebrating-anniversary-shoreline_23-2147738211.jpg",
-        },
-        {
-          tag: "Couple's Delight",
-          price: "$600",
-          period: "/night",
-          features: [
-            "Romantic dinner for two at our fine dining restaurant",
-            "Champagne and chocolates upon arrival",
-            "Spa credit for two",
-            "Exclusive turndown service",
-          ],
-          primaryButton: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/man-woman-hug-smile-sitting-old-bus_1304-5367.jpg",
-        },
-        {
-          tag: "Family Fun",
-          price: "$750",
-          period: "/night",
-          features: [
-            "Interconnecting rooms available",
-            "Kids' activity pack and welcome treats",
-            "Complimentary tickets to local attractions",
-            "Special children's menu options",
-          ],
-          primaryButton: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/young-adults-with-social-media-addiction_23-2149324694.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Guest Reviews"
-      title="Hear From Our Valued Guests"
-      description="Read what discerning travelers have to say about their unforgettable experiences and exceptional service at The Grand Hotel."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Business Executive",
-          quote: "The Grand Hotel exceeded all my expectations. The rooms are luxurious, the service is impeccable, and the dining experience was truly world-class. A perfect blend of comfort and sophistication.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-pregnant-woman-work_23-2149292809.jpg",
-        },
-        {
-          name: "Michael C.",
-          role: "Travel Blogger",
-          quote: "An absolute gem in the city! Every detail is thoughtfully curated, making for a truly memorable stay. The staff anticipate your every need. Highly recommended for luxury travelers.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-happy-man-woman-sunglasses-sitting-sand-beach-taking-selfie-photo-phone-camera_285396-737.jpg",
-        },
-        {
-          name: "Emily R.",
-          role: "Retired Educator",
-          quote: "My husband and I celebrated our anniversary here, and it was magical. The ambiance, the views, and the warm hospitality made it an experience we'll cherish forever.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-man-date-outdoors_23-2148214567.jpg",
-        },
-        {
-          name: "David K.",
-          role: "Architect",
-          quote: "The architecture and interior design are stunning. The Grand Hotel manages to be both grand and incredibly comfortable. A truly inspiring place to stay and unwind.",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-taking-selfie-home_23-2148925874.jpg",
-        },
-        {
-          name: "Jessica L.",
-          role: "Artist",
-          quote: "From the moment I arrived, I felt completely at home. The serene atmosphere of the spa and the exquisite culinary delights were highlights of my perfect getaway.",
-          imageSrc: "http://img.b2bpic.net/free-photo/relaxed-man-white-bathrobe-slippers-sitting-chair-balcony_259150-59747.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Recognition"
-      title="Trusted by Industry Leaders & Partners"
-      description="Our unwavering commitment to excellence has earned us prestigious accolades and collaborations with esteemed organizations worldwide."
-      names={[
-        "Luxury Travel Magazine",
-        "Michelin Guide",
-        "Forbes Travel Guide",
-        "AAA Diamond Rated",
-        "Conde Nast Traveler",
-        "World Hotel Awards",
-        "Travel + Leisure",
-        "Relais & Châteaux",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Help Center"
-      title="Frequently Asked Questions"
-      description="Find quick answers to common inquiries about your stay, booking process, and the services offered at The Grand Hotel."
-      items={[
-        {
-          question: "What are the check-in and check-out times?",
-          answer: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request and subject to availability, additional charges may apply.",
-        },
-        {
-          question: "Does the hotel offer pet-friendly accommodations?",
-          answer: "Yes, The Grand Hotel offers a limited number of pet-friendly rooms. Please notify us in advance if you plan to bring a pet, as certain restrictions and fees apply.",
-        },
-        {
-          question: "What is your cancellation policy?",
-          answer: "Our standard cancellation policy requires notification 48 hours prior to arrival to avoid a charge. Specific rates and packages may have different cancellation terms, so please refer to your booking confirmation.",
-        },
-        {
-          question: "Are there dining options available within the hotel?",
-          answer: "Absolutely! The Grand Hotel boasts several dining options, including a gourmet restaurant, a casual bistro, and a sophisticated rooftop bar, catering to all tastes and preferences.",
-        },
-        {
-          question: "Is parking available at the hotel?",
-          answer: "Valet parking is available for guests at a daily rate. Self-parking options may also be available nearby. Please inquire with our concierge for details and directions.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Connect With Us"
-      text="Ready to plan your perfect getaway? Contact us today for reservations or inquiries about your luxurious stay."
-      primaryButton={{
-        text: "Book Now",
-        href: "tel:+1234567890",
-      }}
-      secondaryButton={{
-        text: "Email Us",
-        href: "mailto:reservations@grandhotel.com",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <HeroSection />
+      <AboutSection />
+      <AccommodationSection />
+      <ExperiencesSection />
+      <OffersSection />
+      <TestimonialsSection />
+      <SocialProofSection />
+      <FaqSection />
+      <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+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 */}
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Accommodation.tsx

@@ -0,0 +1,43 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "accommodation" section.
+
+import React from 'react';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AccommodationSection(): React.JSX.Element {
+  return (
+    <div id="accommodation" data-section="accommodation">
+        <SectionErrorBoundary name="accommodation">
+              <FeaturesDetailedSteps
+          tag="Accommodation"
+          title="Indulge in Our Luxurious Rooms & Suites"
+          description="Each space at The Grand Hotel is meticulously designed for ultimate comfort and sophistication, offering elegant decor, modern amenities, and breathtaking views to ensure a serene retreat."
+          steps={[
+            {
+              tag: "Cozy Comfort",
+              title: "Standard Room",
+              subtitle: "Your Elegant Retreat",
+              description: "Perfect for a relaxing stay, our Standard Rooms offer essential amenities and a comfortable ambiance.",
+              imageSrc: "http://img.b2bpic.net/free-photo/white-bed-lamp-hotel-business_1203-4933.jpg",
+            },
+            {
+              tag: "Spacious Luxury",
+              title: "Deluxe Suite",
+              subtitle: "The Premium Experience",
+              description: "Enjoy expansive living areas, enhanced amenities, and picturesque city views from our Deluxe Suites.",
+              imageSrc: "http://img.b2bpic.net/free-photo/empty-atelier-with-sketches-tools_482257-85311.jpg",
+            },
+            {
+              tag: "Unmatched Grandeur",
+              title: "Presidential Suite",
+              subtitle: "An Opulent Haven",
+              description: "The pinnacle of luxury, our Presidential Suite offers personalized service, private dining, and panoramic vistas.",
+              imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-worker-business-trip_482257-80852.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Connect With Us"
+          text="Ready to plan your perfect getaway? Contact us today for reservations or inquiries about your luxurious stay."
+          primaryButton={{
+            text: "Book Now",
+            href: "tel:+1234567890",
+          }}
+          secondaryButton={{
+            text: "Email Us",
+            href: "mailto:reservations@grandhotel.com",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Experiences.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "experiences" section.
+
+import React from 'react';
+import FeaturesRevealCardsBentoSharp from '@/components/sections/features/FeaturesRevealCardsBentoSharp';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ExperiencesSection(): React.JSX.Element {
+  return (
+    <div id="experiences" data-section="experiences">
+        <SectionErrorBoundary name="experiences">
+              <FeaturesRevealCardsBentoSharp
+          tag="Experiences"
+          title="Beyond Your Stay: Our Signature Services"
+          description="From gourmet dining to rejuvenating spa treatments, The Grand Hotel offers an array of services designed to enrich every moment of your visit."
+          items={[
+            {
+              title: "Fine Dining",
+              description: "Savor exquisite dishes prepared by award-winning chefs in an elegant atmosphere.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-mushrooms-tomato_140725-3752.jpg",
+            },
+            {
+              title: "Spa & Wellness",
+              description: "Indulge in a range of treatments designed for ultimate relaxation and rejuvenation.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fair-skinned-women-use-moisturizing-day-cream-sensitive-skin-light-room-self-care-health-day-concept_197531-31471.jpg",
+            },
+            {
+              title: "Fitness Center",
+              description: "Maintain your routine with our state-of-the-art facilities and professional trainers.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-looking-mirror_23-2149832697.jpg",
+            },
+            {
+              title: "Event Spaces",
+              description: "Host your perfect occasion in our versatile venues, ideal for weddings and conferences.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautifully-decorated-venue-interior-wedding_181624-58530.jpg",
+            },
+            {
+              title: "Concierge Service",
+              description: "Our dedicated team provides personalized assistance to cater to your every need.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/guests-with-suitcases-hotel-reception_482257-80053.jpg",
+            },
+            {
+              title: "Rooftop Bar",
+              description: "Enjoy crafted beverages and stunning panoramic cityscapes from our exclusive bar.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-inside-night-club-black-hat_627829-5507.jpg",
+            },
+            {
+              title: "Business Center",
+              description: "Fully equipped facilities for your professional needs, ensuring productivity on the go.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/view-empty-waiting-room_1170-1960.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="Help Center"
+          title="Frequently Asked Questions"
+          description="Find quick answers to common inquiries about your stay, booking process, and the services offered at The Grand Hotel."
+          items={[
+            {
+              question: "What are the check-in and check-out times?",
+              answer: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request and subject to availability, additional charges may apply.",
+            },
+            {
+              question: "Does the hotel offer pet-friendly accommodations?",
+              answer: "Yes, The Grand Hotel offers a limited number of pet-friendly rooms. Please notify us in advance if you plan to bring a pet, as certain restrictions and fees apply.",
+            },
+            {
+              question: "What is your cancellation policy?",
+              answer: "Our standard cancellation policy requires notification 48 hours prior to arrival to avoid a charge. Specific rates and packages may have different cancellation terms, so please refer to your booking confirmation.",
+            },
+            {
+              question: "Are there dining options available within the hotel?",
+              answer: "Absolutely! The Grand Hotel boasts several dining options, including a gourmet restaurant, a casual bistro, and a sophisticated rooftop bar, catering to all tastes and preferences.",
+            },
+            {
+              question: "Is parking available at the hotel?",
+              answer: "Valet parking is available for guests at a daily rate. Self-parking options may also be available nearby. Please inquire with our concierge for details and directions.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,91 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+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="w-full pt-32 pb-16 px-4 md:px-8">
+        <SectionErrorBoundary name="hero">
+            <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>
+    </div>
+  );
+}

src/pages/HomePage/sections/Offers.tsx

@@ -0,0 +1,70 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "offers" section.
+
+import React from 'react';
+import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function OffersSection(): React.JSX.Element {
+  return (
+    <div id="offers" data-section="offers">
+        <SectionErrorBoundary name="offers">
+              <PricingMediaCards
+          tag="Offers"
+          title="Exclusive Packages & Seasonal Deals"
+          description="Discover special rates and bundled experiences tailored to enhance your stay at The Grand Hotel."
+          plans={[
+            {
+              tag: "Weekend Escape",
+              price: "$450",
+              period: "/night",
+              features: [
+                "Complimentary breakfast for two",
+                "Late checkout (subject to availability)",
+                "Access to all hotel amenities",
+                "Welcome drink upon arrival",
+              ],
+              primaryButton: {
+                text: "Book Now",
+                href: "#contact",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/gentle-couple-celebrating-anniversary-shoreline_23-2147738211.jpg",
+            },
+            {
+              tag: "Couple's Delight",
+              price: "$600",
+              period: "/night",
+              features: [
+                "Romantic dinner for two at our fine dining restaurant",
+                "Champagne and chocolates upon arrival",
+                "Spa credit for two",
+                "Exclusive turndown service",
+              ],
+              primaryButton: {
+                text: "Book Now",
+                href: "#contact",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/man-woman-hug-smile-sitting-old-bus_1304-5367.jpg",
+            },
+            {
+              tag: "Family Fun",
+              price: "$750",
+              period: "/night",
+              features: [
+                "Interconnecting rooms available",
+                "Kids' activity pack and welcome treats",
+                "Complimentary tickets to local attractions",
+                "Special children's menu options",
+              ],
+              primaryButton: {
+                text: "Book Now",
+                href: "#contact",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/young-adults-with-social-media-addiction_23-2149324694.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/SocialProof.tsx

@@ -0,0 +1,30 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Recognition"
+          title="Trusted by Industry Leaders & Partners"
+          description="Our unwavering commitment to excellence has earned us prestigious accolades and collaborations with esteemed organizations worldwide."
+          names={[
+            "Luxury Travel Magazine",
+            "Michelin Guide",
+            "Forbes Travel Guide",
+            "AAA Diamond Rated",
+            "Conde Nast Traveler",
+            "World Hotel Awards",
+            "Travel + Leisure",
+            "Relais & Châteaux",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialQuoteCards
+          tag="Guest Reviews"
+          title="Hear From Our Valued Guests"
+          description="Read what discerning travelers have to say about their unforgettable experiences and exceptional service at The Grand Hotel."
+          testimonials={[
+            {
+              name: "Sarah J.",
+              role: "Business Executive",
+              quote: "The Grand Hotel exceeded all my expectations. The rooms are luxurious, the service is impeccable, and the dining experience was truly world-class. A perfect blend of comfort and sophistication.",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-pregnant-woman-work_23-2149292809.jpg",
+            },
+            {
+              name: "Michael C.",
+              role: "Travel Blogger",
+              quote: "An absolute gem in the city! Every detail is thoughtfully curated, making for a truly memorable stay. The staff anticipate your every need. Highly recommended for luxury travelers.",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-happy-man-woman-sunglasses-sitting-sand-beach-taking-selfie-photo-phone-camera_285396-737.jpg",
+            },
+            {
+              name: "Emily R.",
+              role: "Retired Educator",
+              quote: "My husband and I celebrated our anniversary here, and it was magical. The ambiance, the views, and the warm hospitality made it an experience we'll cherish forever.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-old-man-date-outdoors_23-2148214567.jpg",
+            },
+            {
+              name: "David K.",
+              role: "Architect",
+              quote: "The architecture and interior design are stunning. The Grand Hotel manages to be both grand and incredibly comfortable. A truly inspiring place to stay and unwind.",
+              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-taking-selfie-home_23-2148925874.jpg",
+            },
+            {
+              name: "Jessica L.",
+              role: "Artist",
+              quote: "From the moment I arrived, I felt completely at home. The serene atmosphere of the spa and the exquisite culinary delights were highlights of my perfect getaway.",
+              imageSrc: "http://img.b2bpic.net/free-photo/relaxed-man-white-bathrobe-slippers-sitting-chair-balcony_259150-59747.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}