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

@@ -1,308 +1,48 @@
-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: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 (
     <>
-  <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,41 @@
+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 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/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>
+  );
+}