Bob AI: Refine the main headline in the hero section to clearly state the primary value

Merge version_11_1780416966007 into main

src/index.css

@@ -4,6 +4,27 @@
 @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%;

src/pages/HomePage.tsx

@@ -17,7 +17,8 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
-{/* webild-stub @2026-06-02T16:12:07.363Z: I want a premium blue color theme */}
+
+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 */}
 
@@ -28,11 +29,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/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>
+  );
+}