src/app/about/page.tsx

@@ -7,24 +7,28 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Rooms", id: "/#rooms" },
-            { name: "Booking", id: "/booking" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Green Valley Hotel"
-        />
-        <div className="pt-32">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Booking", id: "/booking" },
+              { name: "Contact", id: "/contact" },
+              { name: "Garden", id: "/garden" },
+              { name: "Restaurant", id: "/restaurant" },
+            ]}
+            brandName="Green Valley Hotel"
+          />
+        </div>
+        <div id="about" data-section="about" className="pt-32">
           <InlineImageSplitTextAbout
             heading={[{ type: "text", content: "About Green Valley Hotel" }]}
+            useInvertedBackground={false}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/booking/page.tsx

@@ -7,28 +7,32 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function BookingPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Rooms", id: "/#rooms" },
-            { name: "Booking", id: "/booking" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Green Valley Hotel"
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Booking", id: "/booking" },
+              { name: "Contact", id: "/contact" },
+              { name: "Garden", id: "/garden" },
+              { name: "Restaurant", id: "/restaurant" },
+            ]}
+            brandName="Green Valley Hotel"
+          />
+        </div>
+        <div id="contact" data-section="contact" className="pt-32 pb-20">
           <ContactCTA
             tag="Reservations"
             title="Book Your Stay"
             description="Fill in your details below to request a booking at our hotel."
             buttons={[{ text: "Submit Request" }]}
             background={{ variant: "plain" }}
+            useInvertedBackground={false}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -7,28 +7,32 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Rooms", id: "/#rooms" },
-            { name: "Booking", id: "/booking" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Green Valley Hotel"
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Booking", id: "/booking" },
+              { name: "Contact", id: "/contact" },
+              { name: "Garden", id: "/garden" },
+              { name: "Restaurant", id: "/restaurant" },
+            ]}
+            brandName="Green Valley Hotel"
+          />
+        </div>
+        <div id="contact" data-section="contact" className="pt-32 pb-20">
           <ContactCTA
             tag="Contact"
             title="Get In Touch"
             description="Reach out to our team for any inquiries, assistance, or feedback regarding your experience."
             buttons={[{ text: "Email Us", href: "mailto:info@greenvalleyhotel.com" }]}
             background={{ variant: "plain" }}
+            useInvertedBackground={false}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/garden/page.tsx

@@ -7,17 +7,22 @@ import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 
 export default function GardenPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
             navItems={[
               { name: "Home", id: "/" },
-              { name: "Restaurant", id: "/restaurant" },
+              { name: "About", id: "/about" },
+              { name: "Booking", id: "/booking" },
+              { name: "Contact", id: "/contact" },
               { name: "Garden", id: "/garden" },
+              { name: "Restaurant", id: "/restaurant" },
             ]}
             brandName="Green Valley Hotel"
-        />
-        <div className="pt-32">
+          />
+        </div>
+        <div id="restaurant" data-section="restaurant" className="pt-32">
             <FeatureCardOne
                 animationType="blur-reveal"
                 textboxLayout="split"

src/app/restaurant/page.tsx

@@ -7,17 +7,22 @@ import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 
 export default function RestaurantPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
             navItems={[
               { name: "Home", id: "/" },
-              { name: "Restaurant", id: "/restaurant" },
+              { name: "About", id: "/about" },
+              { name: "Booking", id: "/booking" },
+              { name: "Contact", id: "/contact" },
               { name: "Garden", id: "/garden" },
+              { name: "Restaurant", id: "/restaurant" },
             ]}
             brandName="Green Valley Hotel"
-        />
-        <div className="pt-32">
+          />
+        </div>
+        <div id="restaurant" data-section="restaurant" className="pt-32">
             <FeatureCardOne
                 animationType="slide-up"
                 textboxLayout="inline-image"