Bob AI (stub): fix the layout in the rooms section because there is a lot o

Merge version_13_1780417301194 into main

src/index.css

@@ -4,6 +4,46 @@
 @import "./styles/animations.css";
 
 :root {
+  --background: 222 47% 11%;
+  --foreground: 210 40% 98%;
+  --card: 222 47% 11%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222 47% 11%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217 33% 17%;
+  --input: 217 33% 17%;
+  --ring: 221 83% 53%;
+  --radius: 0.5rem;
+}
+  --background: 222 47% 11%;
+  --foreground: 210 40% 98%;
+  --card: 223 47% 14%;
+  --card-foreground: 210 40% 98%;
+  --popover: 223 47% 14%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217 33% 17%;
+  --input: 217 33% 17%;
+  --ring: 224 76% 48%;
   /* @colorThemes/lightTheme/grayNavyBlue */
   --background: #0a0a0a;
   --card: #1a1a1a;

src/pages/HomePage.tsx

@@ -16,6 +16,13 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+
+
+{/* webild-stub @2026-06-02T16:39:38.244Z: fix the layout in the rooms section because there is a lot of empty space on the right, specifically from the fourth row, 1/3 from the right side */}
+
+import BookingCtaSection from './HomePage/sections/BookingCta';{/* webild-stub @2026-06-02T16:12:07.363Z: I want a premium blue color theme */}
+
 {/* webild-stub @2026-06-02T16:01:32.987Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom of the image */}
 
 {/* webild-stub @2026-06-02T15:58:48.008Z: change the about section's image to rotate every 5 seconds and add a progress bar at the bottom */}
@@ -25,11 +32,12 @@ import ContactSection from './HomePage/sections/Contact';
 export default function HomePage(): React.JSX.Element {
   return (
     <>
-      <HeroSection />
+      <HeroSection headline="Discover Unrivaled Luxury: Your Perfect Getaway Awaits" />
       <AboutSection />
       <RoomsSection />
       <AmenitiesSection />
       <RatesSection />
+      <BookingCtaSection />
       <ReviewsSection />
       <PartnersSection />
       <FaqSection />

src/pages/HomePage/sections/About.tsx

@@ -9,9 +9,29 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 import { CheckCircle2 } from "lucide-react";
 
 export default function AboutSection(): React.JSX.Element {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const IMAGES = [
+    "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80",
+    "https://images.unsplash.com/photo-1582719478250-c894e4dc24a5?auto=format&fit=crop&q=80",
+    "https://images.unsplash.com/photo-1542314831-c6a4d14d8c85?auto=format&fit=crop&q=80"
+  ];
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % IMAGES.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
   return (
     <div id="about" data-section="about" className="py-24 bg-background">
       <SectionErrorBoundary name="about">
+        <style>{`
+          @keyframes progress-bar {
+            0% { width: 0%; }
+            100% { width: 100%; }
+          }
+        `}</style>
         <div className="container mx-auto px-4">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             <ScrollReveal variant="slide-up">
@@ -40,10 +60,27 @@ export default function AboutSection(): React.JSX.Element {
             </ScrollReveal>
             <ScrollReveal variant="fade-blur">
               <div className="relative h-[500px] rounded-2xl overflow-hidden">
-                <ImageOrVideo 
-                  imageSrc="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80"
-                  className="w-full h-full object-cover"
-                />
+                {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 className="absolute bottom-0 left-0 right-0 h-1.5 bg-black/40 z-20">
+                  <div 
+                    key={currentIndex}
+                    className="h-full bg-primary"
+                    style={{ animation: 'progress-bar 5s linear' }}
+                  />
+                </div>
               </div>
             </ScrollReveal>
           </div>

src/pages/HomePage/sections/BookingCta.tsx

@@ -0,0 +1,28 @@
+// Created by create_section tool.
+
+import React from 'react';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import Tag from '@/components/ui/Tag';
+import Button from '@/components/ui/Button';
+
+export default function BookingCtaSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="booking-cta" className="bg-card">
+      <div className="container mx-auto px-4 text-center">
+        <ScrollReveal variant="slide-up">
+          <Tag text="Ready to Relax?"className="mb-6 mx-auto" />
+          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
+            Book Your Stay Today
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
+            Experience unrivaled luxury and impeccable service. Check our availability and secure your perfect getaway now.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Button text="Check Availability" variant="primary" />
+            <Button text="View Special Offers" variant="secondary" />
+          </div>
+        </ScrollReveal>
+      </div>
+    </div>
+  );
+}

src/pages/HomePage/sections/Rooms.tsx

@@ -1,50 +1,110 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "rooms" section.
-
 import React from 'react';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
 export default function RoomsSection(): React.JSX.Element {
+  const items = [
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/pillow-bed_1203-9643.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-luxury-dark-wood-european-classic-bedroom-suite-hotel_105762-2164.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/steel-faucet-bathtub-bathroom-interior-with-window_169016-26296.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/men-looking-out-window-cafe_23-2147775903.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/spa-complements_23-2147645728.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/side-view-women-gym_23-2148503087.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/wide-view-dining-hall-classic-design_114579-2224.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/luxury-bedroom-suite-resort-high-rise-hotel-with-working-table_105762-1783.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/relaxing-area-with-two-chairs-small-table_1203-3222.jpg",
+      href: "#",
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/modern-studio-apartment-design-with-bedroom-living-space_1262-12375.jpg",
+      href: "#",
+    },
+  ];
+
+  const spans = [
+    "md:col-span-2",
+    "md:col-span-1",
+    "md:col-span-1",
+    "md:col-span-1",
+    "md:col-span-2",
+    "md:col-span-1",
+    "md:col-span-1",
+    "md:col-span-1",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
   return (
-    <div id="rooms" data-section="rooms">
-        <SectionErrorBoundary name="rooms">
-              <FeaturesImageBento
-          tag="Our Accommodations"
-          title="Rooms & Suites Gallery"
-          description="Explore our lavish rooms and opulent suites, each meticulously designed for comfort and elegance. From breathtaking city views to serene garden vistas, find your perfect sanctuary."
-          items={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/pillow-bed_1203-9643.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-luxury-dark-wood-european-classic-bedroom-suite-hotel_105762-2164.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/steel-faucet-bathtub-bathroom-interior-with-window_169016-26296.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/men-looking-out-window-cafe_23-2147775903.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/spa-complements_23-2147645728.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/side-view-women-gym_23-2148503087.jpg",
-              href: "#",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/wide-view-dining-hall-classic-design_114579-2224.jpg",
-              href: "#",
-            },
-          ]}
-        />
-        </SectionErrorBoundary>
-      </div>
+    <div id="rooms" data-section="rooms" className="">
+      <SectionErrorBoundary name="rooms">
+        <div className="flex flex-col gap-8 mx-auto w-content-width">
+          <div className="flex flex-col items-center gap-2">
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>Our Accommodations</p>
+            </div>
+
+            <TextAnimation
+              text="Rooms & Suites Gallery"
+              variant="fade"
+              gradientText={true}
+              tag="h2"
+              className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+            />
+
+            <TextAnimation
+              text="Explore our lavish rooms and opulent suites, each meticulously designed for comfort and elegance. From breathtaking city views to serene garden vistas, find your perfect sanctuary."
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+            />
+          </div>
+
+          <ScrollReveal variant="fade-blur">
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 xl:gap-5 2xl:gap-6">
+              {items.map((item, index) => (
+                <a
+                  key={index}
+                  href={item.href}
+                  className={`block relative h-64 md:h-80 card rounded overflow-hidden group ${spans[index] ||"md:col-span-1"}`}
+                >
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                  />
+                </a>
+              ))}
+            </div>
+          </ScrollReveal>
+        </div>
+      </SectionErrorBoundary>
+    </div>
   );
-}
+}