Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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';
@@ -27,25 +27,19 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="Luxe Beauty"
-          navItems={[
-            { name: "Home", id: "hero" },
-            { name: "Services", id: "services" },
-            { name: "Treatments", id: "features" },
-            { name: "Innovation", id: "timeline" },
-            { name: "Gallery", id: "gallery" }
-          ]}
-          button={{ text: "Book Now", href: "#contact" }}
-          animateOnLoad={true}
-          className="fixed top-6 left-0 right-0 z-50 px-6 lg:px-12 flex justify-center"
-          navItemClassName="text-sm font-body tracking-wide hover:text-primary-cta transition-colors"
-          buttonClassName="bg-primary-cta text-primary-cta-text px-6 py-2 rounded-full hover:shadow-lg transition-all"
-        />
-      </div>
+      <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">
+      <div id="hero" data-section="hero" className="pt-32">
         <HeroBillboardTestimonial
           tag="Transformative Beauty"
           title="Redefining Beauty & Wellness Experiences"
@@ -70,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"
@@ -87,7 +81,7 @@ export default function LandingPage() {
           ]}
           useInvertedBackground={false}
           buttons={[
-            { text: "Our Philosophy", href: "#services" }
+            { text: "Our Philosophy", href: "services" }
           ]}
           buttonAnimation="blur-reveal"
         />
@@ -116,7 +110,7 @@ export default function LandingPage() {
             }
           ]}
           buttons={[
-            { text: "View All Services", href: "#gallery" }
+            { text: "View All Services", href: "gallery" }
           ]}
           useInvertedBackground={false}
           mediaPosition="left"
@@ -271,4 +265,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}