src/app/feed/page.tsx

@@ -7,17 +7,21 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function FeedPage() {
   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: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Contact", id: "/contact" }]}
-          brandName="Connect"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
         <main className="container mx-auto py-24 min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Feed & Timeline</h1>
           <p className="text-lg">This is your main social feed. Stay connected with the latest updates from your network.</p>
         </main>
-        <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/messaging/page.tsx

@@ -7,17 +7,21 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function MessagingPage() {
   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: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Contact", id: "/contact" }]}
-          brandName="Connect"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
         <main className="container mx-auto py-24 min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Messaging & Chat</h1>
           <p className="text-lg">Securely connect with others through encrypted, high-speed private messaging.</p>
         </main>
-        <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/profile/page.tsx

@@ -7,17 +7,21 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function ProfilePage() {
   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: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Contact", id: "/contact" }]}
-          brandName="Connect"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
         <main className="container mx-auto py-24 min-h-screen">
           <h1 className="text-4xl font-bold mb-8">User Profile</h1>
           <p className="text-lg">Manage your personal identity, settings, and showcase your creative works.</p>
         </main>
-        <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/search/page.tsx

@@ -21,16 +21,19 @@ export default function SearchPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "home" },
-            { name: "About", id: "about" },
-            { name: "Features", id: "features" },
-            { name: "Search", id: "/search" },
-            { name: "Contact", id: "contact" },
-          ]}
-          brandName="Connect"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Feed", id: "/feed" },
+              { name: "Profile", id: "/profile" },
+              { name: "Messages", id: "/messaging" },
+              { name: "Search", id: "/search" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Connect"
+          />
+        </div>
         <div className="min-h-screen pt-32 px-6 flex flex-col items-center justify-center">
           <h1 className="text-5xl font-bold mb-8">Explore & Discover</h1>
           <input 
@@ -49,17 +52,22 @@ export default function SearchPage() {
             </div>
           </div>
         </div>
-        <ContactCenter 
-          tag="Join Now"
-          title="Stay Connected"
-          description="Join our community to see personalized recommendations based on your interests."
-          background={{ variant: "rotated-rays-static" }}
-        />
-        <FooterLogoReveal
-          logoText="Connect"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
-        />
+        <div id="contact" data-section="contact">
+          <ContactCenter 
+            tag="Join Now"
+            title="Stay Connected"
+            description="Join our community to see personalized recommendations based on your interests."
+            background={{ variant: "rotated-rays-static" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Connect"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );