diff --git a/src/app/page.tsx b/src/app/page.tsx
index b915767..a49f11f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,7 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroSignup from '@/components/sections/hero/HeroSignup';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import { Calendar, FileText, LayoutDashboard, MessageSquare, Zap, Shield, Users, Search } from "lucide-react";
+import { Zap, Shield, Users, Search } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -26,7 +26,7 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav">
+  <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
         { name: "Home", id: "hero" },
@@ -38,7 +38,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="hero">
+  <div id="hero" data-section="hero">
       <HeroSignup
       title="Modern Legal Solutions for Startups"
       description="Streamline your legal operations with AI-powered guidance, expert connectivity, and intuitive case management."
@@ -51,7 +51,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="features">
+  <div id="features" data-section="features">
       <FeatureBento
       title="Built for Speed & Security"
       description="A premium suite of tools designed to keep you compliant and connected."
@@ -75,7 +75,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="dashboard">
+  <div id="dashboard" data-section="dashboard">
       <SplitAbout
       title="How ProConnect Works"
       description="A seamless journey from initial consultation to final resolution."
@@ -86,10 +86,12 @@ export default function LandingPage() {
         { title: "Secure Execution", description: "Manage everything in one portal.", icon: Shield }
       ]}
       textboxLayout="split"
+      useInvertedBackground={false}
+      mediaAnimation="none"
     />
   </div>
 
-  <div id="trust">
+  <div id="trust" data-section="trust">
       <SocialProofOne
       names={["Bar Certified", "ISO-27001", "GDPR Ready", "Secure Pay", "Global Reach"]}
       title="Security First Infrastructure"
@@ -99,17 +101,18 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="contact">
+  <div id="contact" data-section="contact">
       <ContactCTA
       tag="CONNECT"
       title="Ready to scale your legal operations?"
       description="Join the premium ecosystem of modern legal tech."
       buttons={[{ text: "Get Started", href: "#" }]}
       background={{ variant: "radial-gradient" }}
+      useInvertedBackground={false}
     />
   </div>
 
-  <div id="footer">
+  <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="ProConnect"
       columns={[