src/pages/HomePage.tsx

@@ -10,9 +10,9 @@ import AmenitiesSection from './HomePage/sections/Amenities';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
-import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import BookingSection from './HomePage/sections/Booking';export default function HomePage(): React.JSX.Element {
   return (
     <>
       <HeroSection />
@@ -22,7 +22,7 @@ export default function HomePage(): React.JSX.Element {
       <TestimonialsSection />
       <SocialProofSection />
       <FaqSection />
-      <ContactSection />
+      <BookingSection />
     </>
   );
 }

src/pages/HomePage/sections/Booking.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Label from '@/components/ui/Label';
+import Card from '@/components/ui/Card';
+import Tag from '@/components/ui/Tag';
+import TextAnimation from '@/components/ui/TextAnimation';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+
+export default function BookingSection() {
+  const [checkIn, setCheckIn] = useState('');
+  const [checkOut, setCheckOut] = useState('');
+  const [guests, setGuests] = useState('2');
+  const [roomType, setRoomType] = useState('deluxe');
+
+  const handleBook = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert(`Checking availability for ${guests} guests from ${checkIn} to ${checkOut} in a ${roomType} room.`);
+  };
+
+  return (
+    <section data-webild-section="booking" id="booking" className="relative w-full bg-background">
+      <div className="max-w-content-width mx-auto px-6">
+        <ScrollReveal variant="slide-up">
+          <div className="text-center">
+            <Tag text="Reservations" className="mb-4" />
+            <TextAnimation 
+              text="Book Your Stay" 
+              variant="fade-blur" 
+              tag="h2" 
+              className="text-4xl md:text-5xl font-bold text-foreground mb-4"
+              gradientText={false}
+            />
+            <p className="text-lg text-muted-foreground">
+              Check availability and reserve your room instantly.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        <ScrollReveal variant="slide-up" delay={0.2}>
+          <Card className="p-6 md:p-8">
+            <form onSubmit={handleBook} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 items-end">
+              <div className="flex flex-col gap-2 lg:col-span-1">
+                <Label htmlFor="checkIn">Check-in</Label>
+                <Input 
+                  id="checkIn" 
+                  type="date" 
+                  value={checkIn}
+                  onChange={(e) => setCheckIn(e.target.value)}
+                  required
+                  className="w-full"
+                />
+              </div>
+              
+              <div className="flex flex-col gap-2 lg:col-span-1">
+                <Label htmlFor="checkOut">Check-out</Label>
+                <Input 
+                  id="checkOut" 
+                  type="date" 
+                  value={checkOut}
+                  onChange={(e) => setCheckOut(e.target.value)}
+                  required
+                  className="w-full"
+                />
+              </div>
+
+              <div className="flex flex-col gap-2 lg:col-span-1">
+                <Label htmlFor="guests">Guests</Label>
+                <Input 
+                  id="guests" 
+                  type="number" 
+                  min="1" 
+                  max="10" 
+                  value={guests}
+                  onChange={(e) => setGuests(e.target.value)}
+                  required
+                  className="w-full"
+                />
+              </div>
+
+              <div className="flex flex-col gap-2 lg:col-span-1">
+                <Label htmlFor="roomType">Room</Label>
+                <select 
+                  id="roomType"
+                  value={roomType}
+                  onChange={(e) => setRoomType(e.target.value)}
+                  className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  <option value="standard">Standard</option>
+                  <option value="deluxe">Deluxe</option>
+                  <option value="executive">Executive</option>
+                  <option value="penthouse">Penthouse</option>
+                </select>
+              </div>
+
+              <div className="lg:col-span-1 flex justify-center w-full">
+                <Button 
+                  text="Check" 
+                  variant="primary" 
+                  className="w-full h-10"
+                />
+              </div>
+            </form>
+          </Card>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -1,27 +0,0 @@
-// 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="Contact Us"
-          text="Ready to experience luxury? Book your unforgettable stay at Grand Lux Hotel today."
-          primaryButton={{
-            text: "Book Your Stay",
-            href: "#",
-          }}
-          secondaryButton={{
-            text: "Get In Touch",
-            href: "#",
-          }}
-        />
-        </SectionErrorBoundary>
-      </div>
-  );
-}