src/app/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
@@ -19,7 +20,7 @@ export default function Page() {
   ];
 
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} />
       </div>
@@ -36,6 +37,8 @@ export default function Page() {
           names={["Company A", "Company B", "Company C", "Company D"]}
           title="Trusted By"
           description="Leading industry partners."
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
       <div id="services" data-section="services">
@@ -47,6 +50,8 @@ export default function Page() {
           animationType="slide-up"
           title="Our Services"
           description="Comprehensive solutions."
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
       <div id="work" data-section="work">
@@ -61,6 +66,7 @@ export default function Page() {
             { id: "2", name: "Product 2", price: "$20", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" },
             { id: "3", name: "Product 3", price: "$30", imageSrc: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" }
           ]}
+          useInvertedBackground={false}
         />
       </div>
       <div id="process" data-section="process">
@@ -71,6 +77,8 @@ export default function Page() {
           animationType="slide-up"
           title="Our Process"
           description="Efficiency driven."
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
@@ -82,6 +90,7 @@ export default function Page() {
           textboxLayout="default"
           title="Testimonials"
           description="What they say."
+          useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
@@ -92,12 +101,15 @@ export default function Page() {
           faqsAnimation="slide-up"
           title="FAQs"
           description="Questions answered."
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
       <div id="cta" data-section="cta">
         <ContactText 
           text="Let's collaborate!"
           background={{ variant: "gradient-bars" }}
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">