Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -8,32 +8,39 @@ 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>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Services", id: "/#features" },
-            { name: "Reviews", id: "/reviews" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Prestige Mobile Detailing"
-          button={{ text: "Book Now", href: "/contact" }}
-        />
-        <ContactCenter
-          title="Get in Touch"
-          description="We're here to help you get your car looking its best. Reach out to schedule an appointment."
-          background={{ variant: "gradient-bars" }}
-          useInvertedBackground={false}
-        />
-        <FooterBaseCard
-          logoText="Prestige Mobile Detailing"
-          columns={[
-            { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/#features" }] },
-            { title: "Support", items: [{ label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#features" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Prestige Mobile Detailing"
+            button={{ text: "Book Now", href: "/contact" }}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Contact"
+            title="Get in Touch"
+            description="We're here to help you get your car looking its best. Reach out to schedule an appointment."
+            background={{ variant: "gradient-bars" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Prestige Mobile Detailing"
+            columns={[
+              { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/#features" }] },
+              { title: "Support", items: [{ label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );