src/app/contact/page.tsx

@@ -21,31 +21,35 @@ export default function ContactPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "About", id: "/#about" },
-              { name: "Services", id: "/#features" },
-              { name: "Products", id: "/products" },
-              { name: "Contact", id: "/contact" },
-            ]}
-            brandName="Cabro City"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/#about" },
+                { name: "Services", id: "/#features" },
+                { name: "Products", id: "/products" },
+                { name: "Contact", id: "/contact" },
+              ]}
+          />
+        </div>
 
-        <div className="pt-32 pb-16">
+        <div id="contact" data-section="contact" className="pt-32 pb-16">
           <ContactCenter
             tag="Get in Touch"
             title="Contact Our Team"
             description="We're here to help with all your infrastructure and city service needs. Reach out and let's get started."
             background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
           />
         </div>
 
-        <FooterLogoReveal
-          logoText="Cabro City"
-          leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Terms of Service", href: "#" }}
-        />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Cabro City"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );