diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0042ce2..5cd1c11 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,15 +14,15 @@ import { Shield, Users, Zap, CheckCircle } from "lucide-react";
 
 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">
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}]} logoText="Brand" />
+        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}]} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard logoText="Hero" description="Billboard hero content" buttons={[{text: "Get Started"}]} />
+        <HeroLogoBillboard logoText="Hero" description="Billboard hero content" buttons={[{text: "Get Started"}]} background={{ variant: "animated-grid" }} />
       </div>
       <div id="about" data-section="about">
-        <TestimonialAboutCard tag="About" title="About Us" description="Desc" subdescription="Sub" icon={Users} imageSrc="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&q=80&w=800" />
+        <TestimonialAboutCard tag="About" title="About Us" description="Desc" subdescription="Sub" icon={Users} imageSrc="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&q=80&w=800" useInvertedBackground={false} />
       </div>
       <div id="products" data-section="products">
         <ProductCatalog layout="section" products={[{id: "1", name: "Prod 1", price: "$10", rating: 5, imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=400"}, {id: "2", name: "Prod 2", price: "$20", rating: 4, imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=400"}, {id: "3", name: "Prod 3", price: "$30", rating: 5, imageSrc: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?auto=format&fit=crop&q=80&w=400"}]} />
@@ -31,16 +31,16 @@ export default function Page() {
         <FeatureCardTwentySix title="Features" description="Our key features" textboxLayout="default" useInvertedBackground={false} features={[{title: "F1", description: "Desc 1", buttonIcon: Shield}, {title: "F2", description: "Desc 2", buttonIcon: Users}, {title: "F3", description: "Desc 3", buttonIcon: Zap}, {title: "F4", description: "Desc 4", buttonIcon: CheckCircle}]} />
       </div>
       <div id="social" data-section="social">
-        <SocialProofOne names={["Partner 1", "Partner 2"]} />
+        <SocialProofOne names={["Partner 1", "Partner 2"]} title="Partners" description="Our partners" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTen title="Testimonials" textboxLayout="default" testimonials={[{id: "1", title: "T1", quote: "Great!", name: "John", role: "CEO"}, {id: "2", title: "T2", quote: "Awesome!", name: "Jane", role: "CTO"}]} />
+        <TestimonialCardTen title="Testimonials" textboxLayout="default" testimonials={[{id: "1", title: "T1", quote: "Great!", name: "John", role: "CEO"}, {id: "2", title: "T2", quote: "Awesome!", name: "Jane", role: "CTO"}]} description="Customer feedback" useInvertedBackground={false} />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitText sideTitle="FAQ" faqsAnimation="slide-up" faqs={[{id: "1", title: "Q1", content: "A1"}, {id: "2", title: "Q2", content: "A2"}]} />
+        <FaqSplitText sideTitle="FAQ" faqsAnimation="slide-up" faqs={[{id: "1", title: "Q1", content: "A1"}, {id: "2", title: "Q2", content: "A2"}]} useInvertedBackground={false} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplitForm title="Contact" description="Get in touch" inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]} />
+        <ContactSplitForm title="Contact" description="Get in touch" inputs={[{name: "name", type: "text", placeholder: "Name"}, {name: "email", type: "email", placeholder: "Email"}]} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
         <FooterBaseCard logoText="Brand" columns={[{title: "Links", items: [{label: "Home", href: "/"}]}]} />