diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 1ee012b..178c0b7 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,25 +1,28 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Facebook, Linkedin } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "Contact", id: "/contact" }]} 
-        brandName="Luxuria"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "Contact", id: "/contact" }]} 
+          brandName="Luxuria"
+        />
+      </div>
       <div className="min-h-screen pt-32 pb-20 container">
         <h1 className="text-4xl font-bold mb-8">About Luxuria</h1>
         <p className="text-lg">Crafting extraordinary travel experiences since 2010.</p>
       </div>
-      <FooterCard
+      <FooterBaseReveal
         logoText="Luxuria"
+        columns={[
+          { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }
+        ]}
         copyrightText="© 2025 Luxuria Travel"
-        socialLinks={[{ icon: Instagram, href: "#" }, { icon: Facebook, href: "#" }, { icon: Linkedin, href: "#" }]}
       />
     </ThemeProvider>
   );
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index b497a20..82a55c5 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -1,25 +1,28 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Facebook, Linkedin } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function AccountPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Contact", id: "/contact" }]} 
-        brandName="Luxuria"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Contact", id: "/contact" }]} 
+          brandName="Luxuria"
+        />
+      </div>
       <div className="min-h-screen pt-32 pb-20 container">
         <h1 className="text-4xl font-bold mb-8">My Account</h1>
         <p className="text-lg">Welcome to your private travel dashboard.</p>
       </div>
-      <FooterCard
+      <FooterBaseReveal
         logoText="Luxuria"
+        columns={[
+          { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }
+        ]}
         copyrightText="© 2025 Luxuria Travel"
-        socialLinks={[{ icon: Instagram, href: "#" }, { icon: Facebook, href: "#" }, { icon: Linkedin, href: "#" }]}
       />
     </ThemeProvider>
   );
diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
index b0fc546..90eb313 100644
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -2,42 +2,30 @@
 
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import { Instagram, Facebook, Linkedin } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactText from "@/components/sections/contact/ContactText";
 
 export default function BookingPage() {
-  const [price, setPrice] = useState(1500);
+  const [price] = useState(1500);
 
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/about" },
-          { name: "Booking", id: "/booking" },
-        ]}
-        brandName="Luxuria"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Booking", id: "/booking" }]} 
+          brandName="Luxuria"
+        />
+      </div>
       <div className="pt-32 pb-20">
-        <ContactSplitForm
-          title="Book Your Experience"
-          description="Select your dates, vehicle, and confirm your luxury journey."
-          tag="Booking"
-          inputs={[
-            { name: "date", type: "date", placeholder: "Select Date", required: true },
-            { name: "vehicle", type: "text", placeholder: "Vehicle Preference (e.g. Private Jet, Luxury Sedan)", required: true },
-            { name: "passengers", type: "number", placeholder: "Number of Passengers", required: true }
-          ]}
-          onSubmit={(email) => console.log("Booking submitted for", email)}
-          buttonText="Confirm Booking"
+        <ContactText 
+          text="Book Your Luxury Journey"
+          background={{ variant: "plain" }}
         />
         <div className="max-w-4xl mx-auto p-8 mt-10 border rounded-lg bg-card">
           <h3 className="text-2xl font-bold mb-4">Estimated Quote</h3>
           <p className="text-4xl font-extrabold">${price.toLocaleString()} USD</p>
-          <p className="text-sm opacity-70 mt-2">*Final price will be confirmed after consultation.</p>
         </div>
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 352814d..5e4ccf3 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -1,25 +1,28 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Facebook, Linkedin } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "Contact", id: "/contact" }]} 
-        brandName="Luxuria"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "Contact", id: "/contact" }]} 
+          brandName="Luxuria"
+        />
+      </div>
       <div className="min-h-screen pt-32 pb-20 container">
         <h1 className="text-4xl font-bold mb-8">Secure Checkout</h1>
         <p className="text-lg">Complete your luxury travel booking.</p>
       </div>
-      <FooterCard
+      <FooterBaseReveal
         logoText="Luxuria"
+        columns={[
+          { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }
+        ]}
         copyrightText="© 2025 Luxuria Travel"
-        socialLinks={[{ icon: Instagram, href: "#" }, { icon: Facebook, href: "#" }, { icon: Linkedin, href: "#" }]}
       />
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6b59bd8..1616981 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,25 +1,28 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Facebook, Linkedin } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "About", id: "/about" }]} 
-        brandName="Luxuria"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{ name: "Home", id: "/" }, { name: "Account", id: "/account" }, { name: "About", id: "/about" }]} 
+          brandName="Luxuria"
+        />
+      </div>
       <div className="min-h-screen pt-32 pb-20 container">
         <h1 className="text-4xl font-bold mb-8">Contact Us</h1>
         <p className="text-lg">Let's start planning your dream journey.</p>
       </div>
-      <FooterCard
+      <FooterBaseReveal
         logoText="Luxuria"
+        columns={[
+          { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }
+        ]}
         copyrightText="© 2025 Luxuria Travel"
-        socialLinks={[{ icon: Instagram, href: "#" }, { icon: Facebook, href: "#" }, { icon: Linkedin, href: "#" }]}
       />
     </ThemeProvider>
   );