diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 75ee206..7f5500b 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,29 +8,36 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ContactPage() {
   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>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Features", id: "/features" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Testimonials", id: "/testimonials" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Webild"
-        />
-        <ContactSplit
-          tag="Get in Touch"
-          title="Let's work together"
-          description="Have questions or want to discuss a project? Drop us a message."
-          background={{ variant: "animated-grid" }}
-        />
-        <FooterBaseReveal
-          logoText="Webild"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Testimonials", href: "/testimonials" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Features", id: "/features" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Get in Touch"
+            title="Let's work together"
+            description="Have questions or want to discuss a project? Drop us a message."
+            background={{ variant: "animated-grid" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Webild"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Testimonials", href: "/testimonials" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 348398e..16c02b0 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -8,38 +8,44 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function PricingPage() {
   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>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Features", id: "/#features" },
-            { name: "Products", id: "/products" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          brandName="Webild"
-        />
-        <PricingCardThree
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          title="Pricing Plans"
-          description="Flexible options designed for your growth."
-          plans={[
-            { id: "plan-basic", name: "Basic", price: "$29", buttons: [{ text: "Select Plan" }], features: ["1 User", "Basic Analytics", "Email Support"] },
-            { id: "plan-pro", name: "Pro", price: "$89", buttons: [{ text: "Select Plan" }], features: ["5 Users", "Full Analytics", "Priority Support"] },
-            { id: "plan-enterprise", name: "Enterprise", price: "$299", buttons: [{ text: "Contact Us" }], features: ["Unlimited Users", "Custom Integration", "Dedicated Manager"] },
-          ]}
-        />
-        <FooterBaseReveal
-          logoText="Webild"
-          columns={[
-            { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Pricing", href: "/pricing" }] },
-            { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Features", id: "/features" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Pricing Plans"
+            description="Flexible options designed for your growth."
+            plans={[
+              { id: "plan-basic", name: "Basic", price: "$29", buttons: [{ text: "Select Plan" }], features: ["1 User", "Basic Analytics", "Email Support"] },
+              { id: "plan-pro", name: "Pro", price: "$89", buttons: [{ text: "Select Plan" }], features: ["5 Users", "Full Analytics", "Priority Support"] },
+              { id: "plan-enterprise", name: "Enterprise", price: "$299", buttons: [{ text: "Contact Us" }], features: ["Unlimited Users", "Custom Integration", "Dedicated Manager"] },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Webild"
+            columns={[
+              { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Pricing", href: "/pricing" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 47dfb73..c7c7a96 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -8,39 +8,45 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ProductsPage() {
   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>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Features", id: "/#features" },
-            { name: "Products", id: "/products" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          brandName="Webild"
-        />
-        <ProductCardThree
-          animationType="slide-up"
-          textboxLayout="default"
-          gridVariant="three-columns-all-equal-width"
-          useInvertedBackground={true}
-          title="Our Products"
-          description="Explore our range of powerful tools to scale your business."
-          products={[
-            { id: "p1", name: "SaaS Platform", price: "$49/mo", imageSrc: "http://img.b2bpic.net/free-photo/male-entrepreneur-conducting-financial-planning-goal-setting_482257-122658.jpg" },
-            { id: "p2", name: "Analytics Pro", price: "$99/mo", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg" },
-            { id: "p3", name: "Mobile Suite", price: "$29/mo", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169864.jpg" },
-          ]}
-        />
-        <FooterBaseReveal
-          logoText="Webild"
-          columns={[
-            { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Pricing", href: "/pricing" }] },
-            { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Features", id: "/features" },
+              { name: "Products", id: "/products" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
+            title="Our Products"
+            description="Explore our range of powerful tools to scale your business."
+            products={[
+              { id: "p1", name: "SaaS Platform", price: "$49/mo", imageSrc: "http://img.b2bpic.net/free-photo/male-entrepreneur-conducting-financial-planning-goal-setting_482257-122658.jpg" },
+              { id: "p2", name: "Analytics Pro", price: "$99/mo", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg" },
+              { id: "p3", name: "Mobile Suite", price: "$29/mo", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169864.jpg" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Webild"
+            columns={[
+              { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "Pricing", href: "/pricing" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/testimonials/page.tsx b/src/app/testimonials/page.tsx
index 1da7ea8..a2f24ab 100644
--- a/src/app/testimonials/page.tsx
+++ b/src/app/testimonials/page.tsx
@@ -8,32 +8,40 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function TestimonialsPage() {
   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>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Features", id: "/features" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Testimonials", id: "/testimonials" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Webild"
-        />
-        <TestimonialCardTwo
-          title="Client Success Stories"
-          description="See how organizations are growing with our platform."
-          testimonials={[
-            { id: "t1", name: "Sarah Johnson", role: "CEO", testimonial: "Webild transformed our workflow and efficiency significantly." },
-            { id: "t2", name: "Michael Chen", role: "CTO", testimonial: "Incredible platform with features that actually matter." },
-          ]}
-          animationType="slide-up"
-        />
-        <FooterBaseReveal
-          logoText="Webild"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Features", id: "/features" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            title="Client Success Stories"
+            description="See how organizations are growing with our platform."
+            testimonials={[
+              { id: "t1", name: "Sarah Johnson", role: "CEO", testimonial: "Webild transformed our workflow and efficiency significantly." },
+              { id: "t2", name: "Michael Chen", role: "CTO", testimonial: "Incredible platform with features that actually matter." },
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Webild"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );