src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
@@ -26,6 +27,18 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'About', id: 'mission' },
+          { name: 'Services', id: 'services' },
+          { name: 'Gallery', id: 'gallery' },
+          { name: 'Contact', id: 'contact' }
+        ]}
+        button={{ text: 'Book Now', href: 'contact' }}
+        brandName="Luxe Beauty"
+      />
+
       <div id="hero" data-section="hero" className="pt-32">
         <HeroBillboardTestimonial
           tag="Transformative Beauty"
@@ -51,8 +64,8 @@ export default function LandingPage() {
           ]}
           testimonialRotationInterval={5000}
           buttons={[
-            { text: "Book Your Experience", href: "#contact" },
-            { text: "Explore Services", href: "#services" }
+            { text: "Book Your Experience", href: "contact" },
+            { text: "Explore Services", href: "services" }
           ]}
           useInvertedBackground={false}
           tagAnimation="blur-reveal"
@@ -68,7 +81,7 @@ export default function LandingPage() {
           ]}
           useInvertedBackground={false}
           buttons={[
-            { text: "Our Philosophy", href: "#services" }
+            { text: "Our Philosophy", href: "services" }
           ]}
           buttonAnimation="blur-reveal"
         />
@@ -97,7 +110,7 @@ export default function LandingPage() {
             }
           ]}
           buttons={[
-            { text: "View All Services", href: "#gallery" }
+            { text: "View All Services", href: "gallery" }
           ]}
           useInvertedBackground={false}
           mediaPosition="left"
@@ -252,4 +265,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}