diff --git a/src/app/page.tsx b/src/app/page.tsx
index 076bdff..3a65ddc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,7 +16,7 @@ const navItems = [{ name: "Home", id: "/" }];
 
 export default function Page() {
   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">
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} />
       </div>
@@ -29,25 +29,25 @@ export default function Page() {
         />
       </div>
       <div id="trust" data-section="trust">
-        <SocialProofOne names={["Company 1", "Company 2"]} title="Trusted By" />
+        <SocialProofOne names={["Company 1", "Company 2"]} title="Trusted By" description="Our partners" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardMedia features={[{ id: "1", title: "Service", description: "Desc", tag: "Tag" }]} animationType="none" title="Services" />
+        <FeatureCardMedia features={[{ id: "1", title: "Service", description: "Desc", tag: "Tag" }]} animationType="none" title="Services" description="Our services" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="work" data-section="work">
-        <ProductCardOne gridVariant="bento-grid" animationType="none" textboxLayout="default" title="Our Work" />
+        <ProductCardOne gridVariant="bento-grid" animationType="none" textboxLayout="default" title="Our Work" description="Our portfolio" useInvertedBackground={false} />
       </div>
       <div id="process" data-section="process">
-        <MetricCardEleven metrics={[{ id: "1", value: "100", title: "Metric", description: "Desc", imageSrc: "/placeholder.jpg" }]} animationType="none" title="Process" />
+        <MetricCardEleven metrics={[{ id: "1", value: "100", title: "Metric", description: "Desc", imageSrc: "/placeholder.jpg" }]} animationType="none" title="Process" description="Our process" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo testimonials={[{ id: "1", name: "Name", role: "Role", testimonial: "Testimonial" }]} animationType="none" title="Testimonials" textboxLayout="default" />
+        <TestimonialCardTwo testimonials={[{ id: "1", name: "Name", role: "Role", testimonial: "Testimonial" }]} animationType="none" title="Testimonials" description="What they say" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitMedia faqs={[{ id: "1", title: "Q", content: "A" }]} mediaAnimation="none" faqsAnimation="none" textboxLayout="default" title="FAQ" />
+        <FaqSplitMedia faqs={[{ id: "1", title: "Q", content: "A" }]} faqsAnimation="none" title="FAQ" description="Answers to your questions" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="cta" data-section="cta">
-        <ContactText text="Contact Us" background={{ variant: "plain" }} />
+        <ContactText text="Contact Us" background={{ variant: "plain" }} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
         <FooterSimple columns={[]} bottomLeftText="© 2024" bottomRightText="All Rights Reserved" />