src/app/page.tsx

@@ -6,13 +6,15 @@ import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarou
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 const navItems = [
   { name: 'Home', id: '/' },
   { name: 'About', id: '/about' },
-  { name: 'Contact', id: '/contact' }
+  { name: 'Contact', id: '/contact' },
+  { name: 'Booking', id: '/booking' }
 ];
 
 export default function Page() {
@@ -37,7 +39,8 @@ export default function Page() {
           title="Welcome to Our Platform" 
           description="Experience the future of digital solutions with our innovative tools."
           background={{ variant: "gradient-bars" }}
-          mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1600", imageAlt: "Digital innovation" }]}
+          mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1600", imageAlt: "Digital innovation" }]
+}
         />
       </div>
       <div id="services" data-section="services">
@@ -56,7 +59,8 @@ export default function Page() {
       <div id="about" data-section="about">
         <InlineImageSplitTextAbout
           useInvertedBackground={false}
-          heading={[{ type: 'text', content: 'About Us' }, { type: 'image', src: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800', alt: 'Team' }]}
+          heading={[{ type: 'text', content: 'About Us' }, { type: 'image', src: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800', alt: 'Team' }]
+}
         />
       </div>
       <div id="reviews" data-section="reviews">
@@ -72,6 +76,15 @@ export default function Page() {
           ]}
         />
       </div>
+      <div id="booking" data-section="booking">
+        <ContactCTA
+          tag="Appointment"
+          title="Book Your Session"
+          description="Schedule a time that works best for your needs."
+          background={{ variant: "plain" }}
+          buttons={[{ text: "Schedule Now", href: "#" }]}
+        />
+      </div>
       <div id="contact" data-section="contact">
         <ContactText
           text="Get in touch today"
@@ -81,7 +94,7 @@ export default function Page() {
       </div>
       <div id="footer" data-section="footer">
         <FooterBase
-          columns={[{ title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }] }]}
+          columns={[{ title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Contact', href: '/contact' }, { label: 'Booking', href: '/booking' }] }]}
         />
       </div>
     </ThemeProvider>