From a874e1d5f74716e89d985fe1179c3d02554ef800 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Fri, 19 Jun 2026 13:05:28 +0000
Subject: [PATCH] Bob AI: Populate src/pages/RoomReservationPage.tsx (snippet
 builder, 3 sections)

---
 src/pages/RoomReservationPage.tsx | 141 +++++++-----------------------
 1 file changed, 34 insertions(+), 107 deletions(-)

diff --git a/src/pages/RoomReservationPage.tsx b/src/pages/RoomReservationPage.tsx
index 65b835e..fbe5309 100644
--- a/src/pages/RoomReservationPage.tsx
+++ b/src/pages/RoomReservationPage.tsx
@@ -1,111 +1,38 @@
-import React from "react";
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
-import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+import { Check } from "lucide-react";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 
 export default function RoomReservationPage() {
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <NavbarCentered
-        logo="LuxeStay"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Book Now", href: "/room-reservation" }}
-      />
-
-      <main>
-        <HeroBillboard
-          tag="Direct Booking"
-          title="Reserve Your Perfect Stay Online"
-          description="Skip the middleman and book directly with us for the best rates, exclusive perks, and instant confirmation."
-          primaryButton={{ text: "Check Availability", href: "#rooms" }}
-          secondaryButton={{ text: "Manage Booking", href: "#manage" }}
-          imageSrc="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80"
-        />
-
-        <FeaturesDetailedSteps
-          tag="How It Works"
-          title="Simple Online Reservation"
-          description="Booking your getaway has never been easier. Follow these simple steps to secure your room."
-          steps={[
-            {
-              tag: "Step 1",
-              title: "Select Dates",
-              subtitle: "Check availability",
-              description: "Use our interactive calendar to find the perfect dates for your upcoming stay."
-            },
-            {
-              tag: "Step 2",
-              title: "Choose Room",
-              subtitle: "Pick your suite",
-              description: "Browse our selection of luxury rooms and suites, complete with detailed photos and amenities."
-            },
-            {
-              tag: "Step 3",
-              title: "Confirm & Pay",
-              subtitle: "Secure booking",
-              description: "Complete your reservation securely online and receive instant confirmation via email."
-            }
-          ]}
-        />
-
-        <div id="rooms">
-          <ProductMediaCards
-            tag="Available Accommodations"
-            title="Find Your Perfect Space"
-            description="Explore our range of beautifully appointed rooms designed for your ultimate comfort."
-            products={[
-              {
-                name: "Deluxe King Room",
-                price: "$250 / night",
-                imageSrc: "https://images.unsplash.com/photo-1611892440504-42a792e24d32?auto=format&fit=crop&q=80",
-                onClick: () => console.log("Book Deluxe King")
-              },
-              {
-                name: "Ocean View Suite",
-                price: "$450 / night",
-                imageSrc: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&q=80",
-                onClick: () => console.log("Book Ocean View")
-              },
-              {
-                name: "Standard Double",
-                price: "$180 / night",
-                imageSrc: "https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&q=80",
-                onClick: () => console.log("Book Standard Double")
-              }
-            ]}
-          />
-        </div>
-      </main>
-
-      <FooterSimple
-        brand="LuxeStay"
-        copyright="© 2024 LuxeStay Hotels. All rights reserved."
-        columns={[
-          {
-            title: "Reservations",
-            items: [
-              { label: "Book a Room", href: "/room-reservation" },
-              { label: "Manage Booking", href: "#" },
-              { label: "Offers", href: "#" }
-            ]
-          },
-          {
-            title: "Hotel",
-            items: [
-              { label: "About Us", href: "/about" },
-              { label: "Dining", href: "#" },
-              { label: "Spa", href: "#" }
-            ]
-          }
-        ]}
-        links={[
-          { label: "Privacy Policy", href: "#" },
-          { label: "Terms of Service", href: "#" }
-        ]}
-      />
-    </div>
+    <>
+      <div data-webild-section="HeroOverlay"><section aria-label="Hero section" className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"><HeroBackgroundSlot /><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg" className="absolute inset-0 w-full h-full object-cover rounded-none" /><div className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]" aria-hidden="true" /><div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25"><div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10"><div className="w-fit px-3 py-1 mb-1 text-sm card rounded"><p>Book Your Stay</p></div><TextAnimation text="Secure Your Stay in Batna" variant="fade" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance" /><TextAnimation text="Experience comfort and hospitality. Book your room directly online for the best rates and a seamless arrival at Hôtel El Hayat." variant="fade" gradientText={false} tag="p" className="text-lg md:text-xl text-white leading-snug text-balance" /><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Check Availability" href="#booking-form" variant="primary" /><Button text="View Rooms" href="/rooms" variant="secondary" animationDelay={0.1} /></div><div className="mt-3 md:mt-4"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/portrait-smiling-young-man-looking-camera_23-2148155634.jpg","https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg","https://img.freepik.com/free-photo/handsome-corporate-man-real-estate-agent-assistant-smiling-holding-hands-together-how-can-i-help-smiling-camera-standing-white-background_176420-45257.jpg"]} size="lg" label="Join Sarah J., Fatima A., and our happy guests" labelClassName="text-primary-cta-text" /></div></div></div></section></div>
+      <div data-webild-section="PricingSimpleCards"><section aria-label="Pricing section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Room Rates</p></div><TextAnimation text="Choose Your Perfect Stay" variant="fade-blur" 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="Select from our range of comfortable and elegant rooms, designed for both business and leisure travelers in Batna." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Book Now" href="#booking-form" variant="primary" /><Button text="Contact Us" href="/contact" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Standard Room" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Standard Room</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">6,000 DZD/nt</span><span className="text-base font-medium">A cozy and comfortable room perfect for solo travelers or short business trips.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="1 Queen Bed" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">1 Queen Bed</span></div>
+<div key="Free Wi-Fi" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Free Wi-Fi</span></div>
+<div key="Air Conditioning" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Air Conditioning</span></div>
+<div key="En-suite Bathroom" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">En-suite Bathroom</span></div></div></div>
+<div key="Deluxe Room" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Deluxe Room</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">9,000 DZD/nt</span><span className="text-base font-medium">Spacious and elegantly furnished, ideal for couples or extended stays.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="1 King Bed" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">1 King Bed</span></div>
+<div key="City View" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">City View</span></div>
+<div key="Mini-bar" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Mini-bar</span></div>
+<div key="Free Breakfast" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Free Breakfast</span></div></div></div>
+<div key="Executive Suite" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Executive Suite</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">15,000 DZD/nt</span><span className="text-base font-medium">Our premium offering with a separate living area for ultimate comfort and luxury.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Separate Living Area" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Separate Living Area</span></div>
+<div key="Premium Amenities" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Premium Amenities</span></div>
+<div key="Room Service" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Room Service</span></div>
+<div key="Late Check-out" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Late Check-out</span></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book Your Stay"
+        title="Reserve Your Room at Hôtel El Hayat"
+        description="Plan your visit to Batna. Fill out the form below to request a room reservation, and our team will confirm your booking shortly."
+        inputs={[{"name":"fullName","type":"text","placeholder":"Full Name","required":true},{"name":"email","type":"email","placeholder":"Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Phone Number","required":true},{"name":"checkIn","type":"date","placeholder":"Check-in Date","required":true},{"name":"checkOut","type":"date","placeholder":"Check-out Date","required":true},{"name":"guests","type":"number","placeholder":"Number of Guests","required":true}]}
+        textarea={{"name":"specialRequests","placeholder":"Special requests or preferences?","rows":4,"required":false}}
+        buttonText="Request Reservation"
+        imageSrc="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg"
+      /></div>
+    </>
   );
-}
\ No newline at end of file
+}