Update src/app/about/page.tsx

src/app/about/page.tsx

@@ -8,24 +8,31 @@ import ReactLenis from "lenis/react";
 
 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>
-        <NavbarLayoutFloatingOverlay
-            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/#features" }, { name: "Projects", id: "/portfolio" }, { name: "Quote", id: "/pricing" }, { name: "Contact", id: "/#contact" }]}
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Projects", id: "/portfolio" }, { name: "Quote", id: "/pricing" }, { name: "Contact", id: "/#contact" }]}
             brandName="DC Contracting"
-        />
-        <MetricSplitMediaAbout
+          />
+        </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
             title="About DC Contracting"
             description="We have been building quality homes for over 20 years."
             metrics={[{ value: "20+", title: "Years Exp" }, { value: "500+", title: "Projects" }]}
             useInvertedBackground={false}
             mediaAnimation="slide-up"
             metricsAnimation="slide-up"
-        />
-        <FooterMedia
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
             logoText="DC Contracting"
+            videoSrc="https://videos.pexels.com/video-files/4253133/4253133-sd_506_960_24fps.mp4"
             columns={[{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Portfolio", href: "/portfolio" }] }, { title: "Support", items: [{ label: "Quote", href: "/pricing" }, { label: "Contact", href: "/#contact" }] }]}
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );