Update src/app/page.tsx

src/app/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
@@ -8,11 +8,24 @@ export default function Home() {
   const navItems = [
     { name: 'Home', id: '/' },
     { name: 'About', id: '/about' },
-    { name: 'Services', id: '/services' }
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
   ];
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
       <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
       <main className="flex min-h-screen flex-col items-center justify-between">
         <div id="hero" data-section="hero">
@@ -33,7 +46,12 @@ export default function Home() {
           columns={[
             {
               title: 'Company',
-              items: [{ label: 'About Us', href: '/about' }, { label: 'Services', href: '/services' }]
+              items: [
+                { label: 'About Us', href: '/about' },
+                { label: 'Services', href: '/services' },
+                { label: 'Booking', href: '/booking' },
+                { label: 'Contact', href: '/contact' }
+              ]
             },
             {
               title: 'Legal',