Update src/app/page.tsx

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #fffcfc;;
+  --background: #fbfaff;;
-  --card: #fffafa;;
+  --card: #f7f5ff;;
-  --foreground: #220000;;
+  --foreground: #0f0022;;
-  --primary-cta: #c1121f;;
+  --primary-cta: #8b5cf6;;
   --secondary-cta: #ffffff;;
-  --accent: #f0b8bc;;
+  --accent: #d8cef5;;
-  --background-accent: #e07a82;;
+  --background-accent: #c4a8f9;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
 import ProductCardSix from '@/components/sections/product/ProductCardSix';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
@@ -39,14 +39,13 @@ export default function LuxuryHotelsPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
+        <HeroBillboardScroll
           title="Experience Luxury Hospitality"
           description="Discover your perfect getaway at our award-winning hotel. Unwind in elegance with world-class amenities and exceptional service."
           tag="Premium Accommodations"
           tagIcon={Star}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
           imageAlt="Luxury hotel lobby and entrance"
-          imagePosition="right"
           buttons={[
             { text: "Book Your Stay", href: "#contact" },
             { text: "Explore Rooms", href: "#rooms" }