src/app/exercises/page.tsx

@@ -8,25 +8,36 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function ExercisesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+        defaultButtonVariant="text-stagger" 
+        defaultTextAnimation="entrance-slide" 
+        borderRadius="rounded" 
+        contentWidth="medium" 
+        sizing="medium" 
+        background="circleGradient" 
+        cardStyle="glass-elevated" 
+        primaryButtonStyle="gradient" 
+        secondaryButtonStyle="glass" 
+        headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "About", id: "/#about" },
-                { name: "Services", id: "/#services" },
-                { name: "Exercises", id: "/exercises" },
-                { name: "Testimonials", id: "/#testimonials" },
-                { name: "Contact", id: "/#contact" },
-            ]}
-            brandName="Vitality"
-        />
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Log Workout", id: "/workout-log" },
+                    { name: "History", id: "/workout-history" },
+                    { name: "Exercises", id: "/exercises" }
+                ]}
+            />
+        </div>
         <div className="pt-32 pb-20">
             <FeatureCardMedia
                 animationType="blur-reveal"
                 title="Exercise Library"
                 description="Master your form with our curated collection of effective exercises."
                 textboxLayout="default"
+                useInvertedBackground={false}
                 features={[
                     {
                         id: "e1",                        title: "Squats",                        tag: "Legs & Glutes",                        description: "Focus: Quadriceps, Hamstrings, Glutes. Keep your back straight, chest up, and lower your hips until thighs are parallel to the floor.",                        videoSrc: "https://www.w3schools.com/howto/movie.mp4"
@@ -40,11 +51,13 @@ export default function ExercisesPage() {
                 ]}
             />
         </div>
-        <FooterBase
-            columns={[
-                { title: "Vitality", items: [{ label: "Home", href: "/" }] }
-            ]}
-        />
+        <div id="footer" data-section="footer">
+            <FooterBase
+                columns={[
+                    { title: "Vitality", items: [{ label: "Home", href: "/" }] }
+                ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/workout-history/page.tsx

@@ -3,23 +3,36 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { CardStack } from '@/components/cardStack/CardStack';
+import CardStack from '@/components/cardStack/CardStack';
 
 export default function WorkoutHistoryPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+        defaultButtonVariant="text-stagger" 
+        defaultTextAnimation="entrance-slide" 
+        borderRadius="rounded" 
+        contentWidth="medium" 
+        sizing="medium" 
+        background="circleGradient" 
+        cardStyle="glass-elevated" 
+        primaryButtonStyle="gradient" 
+        secondaryButtonStyle="glass" 
+        headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Log Workout", id: "/workout-log" },
-                { name: "History", id: "/workout-history" },
-            ]}
-            brandName="Vitality"
-        />
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Log Workout", id: "/workout-log" },
+                    { name: "History", id: "/workout-history" },
+                    { name: "Exercises", id: "/exercises" }
+                ]}
+            />
+        </div>
         <div className="pt-32 pb-20 px-6">
             <h1 className="text-4xl font-bold mb-12 text-center">Your Workout History</h1>
-            <CardStack animationType="slide-up" textboxLayout="default">
+            <CardStack animationType="blur-reveal" textboxLayout="default">
                 <div className="p-8 bg-card rounded-xl shadow-lg border">
                     <h3 className="text-2xl font-semibold">Bench Press - 2023-10-15</h3>
                     <p>Sets: 4 | Reps: 10 | Weight: 80kg</p>

src/app/workout-log/page.tsx

@@ -7,29 +7,45 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function WorkoutLogPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider 
+        defaultButtonVariant="text-stagger" 
+        defaultTextAnimation="entrance-slide" 
+        borderRadius="rounded" 
+        contentWidth="medium" 
+        sizing="medium" 
+        background="circleGradient" 
+        cardStyle="glass-elevated" 
+        primaryButtonStyle="gradient" 
+        secondaryButtonStyle="glass" 
+        headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Log Workout", id: "/workout-log" },
-                { name: "History", id: "/workout-history" },
-            ]}
-            brandName="Vitality"
-        />
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Log Workout", id: "/workout-log" },
+                    { name: "History", id: "/workout-history" },
+                    { name: "Exercises", id: "/exercises" }
+                ]}
+            />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
             <h1 className="text-4xl font-bold mb-8">Log New Workout</h1>
-            <ContactSplitForm 
-                title="Record Your Session"
-                description="Log your daily exercise progress including weight and reps."
-                inputs={[
-                    { name: "exercise", type: "text", placeholder: "Exercise Name", required: true },
-                    { name: "sets", type: "number", placeholder: "Sets", required: true },
-                    { name: "reps", type: "number", placeholder: "Reps", required: true },
-                    { name: "weight", type: "number", placeholder: "Weight (kg)", required: true }
-                ]}
-                buttonText="Save Workout"
-            />
+            <div id="contact" data-section="contact">
+                <ContactSplitForm 
+                    title="Record Your Session"
+                    description="Log your daily exercise progress including weight and reps."
+                    inputs={[
+                        { name: "exercise", type: "text", placeholder: "Exercise Name", required: true },
+                        { name: "sets", type: "number", placeholder: "Sets", required: true },
+                        { name: "reps", type: "number", placeholder: "Reps", required: true },
+                        { name: "weight", type: "number", placeholder: "Weight (kg)", required: true }
+                    ]}
+                    buttonText="Save Workout"
+                    useInvertedBackground={false}
+                />
+            </div>
         </div>
       </ReactLenis>
     </ThemeProvider>