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,11 +110,12 @@ export default function LandingPage() {
             }
           ]}
           buttons={[
-            { text: "View All Services", href: "#gallery" }
+            { text: "View All Services", href: "gallery" }
           ]}
           useInvertedBackground={false}
           mediaPosition="left"
           buttonAnimation="blur-reveal"
+          tagAnimation="blur-reveal"
         />
       </div>
 
@@ -129,7 +124,7 @@ export default function LandingPage() {
           title="Engineering the Impossible Beauty Experience"
           description="We combine innovation, precision, and luxury to create transformative beauty moments. Every detail is carefully orchestrated for your satisfaction."
           textboxLayout="default"
-          animationType="slide-up"
+          animationType="scale-rotate"
           useInvertedBackground={false}
           metrics={[
             {
@@ -145,6 +140,8 @@ export default function LandingPage() {
               id: "4",              value: "100%",              title: "Personalized Care Guarantee",              items: ["Individual consultation", "Tailored treatments", "Follow-up support"]
             }
           ]}
+          tagAnimation="blur-reveal"
+          buttonAnimation="blur-reveal"
         />
       </div>
 
@@ -153,7 +150,7 @@ export default function LandingPage() {
           title="Our Transformations"
           description="Explore our portfolio of stunning beauty transformations and premium salon experiences."
           textboxLayout="default"
-          animationType="slide-up"
+          animationType="blur-reveal"
           useInvertedBackground={false}
           carouselMode="buttons"
           blogs={[
@@ -170,6 +167,8 @@ export default function LandingPage() {
               id: "4",              category: "Wellness Retreat",              title: "Ultimate Wellness Experience",              excerpt: "Immersive spa and wellness treatments that nurture body, mind, and spirit.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-getting-massaged-spa_23-2149871246.jpg",              imageAlt: "Luxury spa and wellness retreat",              authorName: "James Robertson",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg",              date: "Holistic Wellness"
             }
           ]}
+          tagAnimation="blur-reveal"
+          buttonAnimation="blur-reveal"
         />
       </div>
 
@@ -178,7 +177,7 @@ export default function LandingPage() {
           title="What Our Clients Say"
           description="Real stories from people whose lives have been transformed by our beauty and wellness services."
           textboxLayout="default"
-          animationType="slide-up"
+          animationType="depth-3d"
           useInvertedBackground={false}
           showRating={true}
           carouselMode="buttons"
@@ -208,6 +207,8 @@ export default function LandingPage() {
               imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-bathrobe-front-view_23-2150100185.jpg"
             }
           ]}
+          tagAnimation="blur-reveal"
+          buttonAnimation="blur-reveal"
         />
       </div>
 
@@ -217,7 +218,7 @@ export default function LandingPage() {
           description="Find answers to frequently asked questions about our services, booking, and beauty philosophy."
           textboxLayout="default"
           useInvertedBackground={false}
-          faqsAnimation="slide-up"
+          faqsAnimation="blur-reveal"
           animationType="smooth"
           faqs={[
             {
@@ -233,6 +234,8 @@ export default function LandingPage() {
               id: "4",              title: "What's your cancellation policy?",              content: "We ask for 48 hours notice for cancellations. Cancellations made within 24 hours may incur a service fee. We understand that life happens—just reach out as soon as possible if your plans change."
             }
           ]}
+          tagAnimation="blur-reveal"
+          buttonAnimation="blur-reveal"
         />
       </div>
 
@@ -262,4 +265,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}