Update src/app/booking/page.tsx

Merge version_9 into main

src/app/booking/page.tsx

@@ -2,9 +2,9 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactText from "@/components/sections/contact/ContactText";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import TextBox from '@/components/Textbox';
 
 export default function BookingPage() {
     const navItems = [
@@ -36,19 +36,24 @@ export default function BookingPage() {
                     logoClassName="!w-64"
                 />
                 <div id="booking" data-section="booking" className="py-20 lg:py-32">
-                    <ContactText
-                        text="Schedule your consultation with RVNCO. Let's discuss your luxury design and build project."
-                        background={{ variant: "plain" }}
-                        useInvertedBackground={false}
+                    <TextBox
+                        title="Schedule Your Consultation"
+                        description="Choose a convenient date and time to discuss your luxury design and build project with RVNCO."
+                        textboxLayout="default"
+                        center={true}
                         buttons={[
-                            { text: "Proceed to Booking System", href: "https://example.com/booking" },
                             { text: "Back to Home", href: "/" }
                         ]}
-                        className="text-center"
-                        containerClassName="max-w-4xl mx-auto px-4"
-                        textClassName="text-3xl lg:text-5xl font-bold mb-8"
+                        className="text-center max-w-4xl mx-auto px-4"
+                        titleClassName="text-3xl lg:text-5xl font-bold mb-4"
+                        descriptionClassName="text-lg mb-8"
                         buttonContainerClassName="flex justify-center flex-wrap gap-4"
-                    />
+                    >
+                        {/* Placeholder for calendar and time slot picker */}
+                        <div className="mt-8 p-6 bg-card border border-accent rounded-lg shadow-inner flex items-center justify-center h-64 text-foreground/70 text-center">
+                            Calendar & Time Slot Picker Here (Integration Placeholder)
+                        </div>
+                    </TextBox>
                 </div>
                 <FooterLogoEmphasis
                     logoText="RVNCO"