diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index ed661b9..baa80ac 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,32 +8,38 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function AboutPage() {
   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: "Solutions", id: "/solutions" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Next Horizon"
-        />
-        <div className="pt-32">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Solutions", id: "/solutions" },
+              { name: "Contact", id: "/contact" },
+              { name: "Impact", id: "/impact" },
+            ]}
+            brandName="Next Horizon"
+          />
+        </div>
+        <div id="about" data-section="about">
           <InlineImageSplitTextAbout
             heading={[
               { type: "text", content: "About Our Mission" },
               { type: "image", src: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252423.jpg" },
             ]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Next Horizon"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }] },
+              { title: "Solutions", items: [{ label: "Solutions", href: "/solutions" }] },
+            ]}
           />
         </div>
-        <FooterBaseCard
-          logoText="Next Horizon"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }] },
-            { title: "Solutions", items: [{ label: "Solutions", href: "/solutions" }] },
-          ]}
-        />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index a25fe8b..152a76d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,27 +8,36 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 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: "Impact", id: "/impact" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Next Horizon"
-        />
-        <ContactCTA
-          tag="Contact Us"
-          title="Get in Touch"
-          description="Ready to transform your business strategy? We are here to help."
-          buttons={[{ text: "Email Us", href: "mailto:hello@nexthorizon.com" }]}
-          background={{ variant: "radial-gradient" }}
-        />
-        <FooterBaseCard
-          logoText="Next Horizon"
-          columns={[{ title: "Company", items: [{ label: "Back to Home", href: "/" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Solutions", id: "/solutions" },
+              { name: "Contact", id: "/contact" },
+              { name: "Impact", id: "/impact" },
+            ]}
+            brandName="Next Horizon"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Contact Us"
+            title="Get in Touch"
+            description="Ready to transform your business strategy? We are here to help."
+            buttons={[{ text: "Email Us", href: "mailto:hello@nexthorizon.com" }]}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Next Horizon"
+            columns={[{ title: "Company", items: [{ label: "Back to Home", href: "/" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/impact/page.tsx b/src/app/impact/page.tsx
index 087d0a9..e5b7cab 100644
--- a/src/app/impact/page.tsx
+++ b/src/app/impact/page.tsx
@@ -9,32 +9,41 @@ import { TrendingUp, CheckCircle, Award } from "lucide-react";
 
 export default function ImpactPage() {
   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: "Impact", id: "/impact" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Next Horizon"
-        />
-        <MetricCardOne
-          animationType="slide-up"
-          textboxLayout="split"
-          gridVariant="uniform-all-items-equal"
-          metrics={[
-            { id: "m1", value: "40%", title: "Efficiency Gain", description: "Through AI process optimization.", icon: TrendingUp },
-            { id: "m2", value: "100%", title: "ESG Compliance", description: "Audit-ready reporting standards.", icon: CheckCircle },
-            { id: "m3", value: "2x", title: "Resource ROI", description: "Enhanced sustainable asset utilization.", icon: Award },
-          ]}
-          title="Our Measurable Impact"
-          description="We drive quantifiable progress for businesses globally."
-        />
-        <FooterBaseCard
-          logoText="Next Horizon"
-          columns={[{ title: "Company", items: [{ label: "Back to Home", href: "/" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Solutions", id: "/solutions" },
+              { name: "Contact", id: "/contact" },
+              { name: "Impact", id: "/impact" },
+            ]}
+            brandName="Next Horizon"
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="uniform-all-items-equal"
+            metrics={[
+              { id: "m1", value: "40%", title: "Efficiency Gain", description: "Through AI process optimization.", icon: TrendingUp },
+              { id: "m2", value: "100%", title: "ESG Compliance", description: "Audit-ready reporting standards.", icon: CheckCircle },
+              { id: "m3", value: "2x", title: "Resource ROI", description: "Enhanced sustainable asset utilization.", icon: Award },
+            ]}
+            title="Our Measurable Impact"
+            description="We drive quantifiable progress for businesses globally."
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Next Horizon"
+            columns={[{ title: "Company", items: [{ label: "Back to Home", href: "/" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/solutions/page.tsx b/src/app/solutions/page.tsx
index 0eb33a6..a98f082 100644
--- a/src/app/solutions/page.tsx
+++ b/src/app/solutions/page.tsx
@@ -9,18 +9,21 @@ import { Zap, Shield, Globe } from "lucide-react";
 
 export default function SolutionsPage() {
   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: "Solutions", id: "/solutions" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Next Horizon"
-        />
-        <div className="pt-32">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Solutions", id: "/solutions" },
+              { name: "Contact", id: "/contact" },
+              { name: "Impact", id: "/impact" },
+            ]}
+            brandName="Next Horizon"
+          />
+        </div>
+        <div id="features" data-section="features">
           <FeatureHoverPattern
             animationType="slide-up"
             textboxLayout="split"
@@ -34,13 +37,15 @@ export default function SolutionsPage() {
             description="Comprehensive suite of AI and ESG strategy tools."
           />
         </div>
-        <FooterBaseCard
-          logoText="Next Horizon"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }] },
-            { title: "Solutions", items: [{ label: "Solutions", href: "/solutions" }] },
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Next Horizon"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }] },
+              { title: "Solutions", items: [{ label: "Solutions", href: "/solutions" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );