Update src/app/page.tsx

src/app/page.tsx

@@ -14,9 +14,9 @@ import { Zap, Shield, Star, CheckCircle } from 'lucide-react';
 export default function Page() {
   const navItems = [{ name: "Home", id: "/" }];
   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">
-        <NavbarLayoutFloatingInline navItems={navItems} brandName="Webild" />
+        <NavbarLayoutFloatingInline navItems={navItems} brandName="Webild" button={{ text: "Get Started" }} />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel 
@@ -34,7 +34,7 @@ export default function Page() {
         />
       </div>
       <div id="about" data-section="about">
-        <InlineImageSplitTextAbout heading={[{ type: 'text', content: "About Our Mission" }]} />
+        <InlineImageSplitTextAbout heading={[{ type: 'text', content: "About Our Mission" }]} useInvertedBackground={false} />
       </div>
       <div id="products" data-section="products">
         <ProductCardThree 
@@ -43,6 +43,7 @@ export default function Page() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[
             { id: "p1", name: "Product A", price: "$99", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e" },
             { id: "p2", name: "Product B", price: "$149", imageSrc: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f" },
@@ -55,6 +56,8 @@ export default function Page() {
           title="Our Impact"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
+          description="Key performance indicators for our growth."
           metrics={[
             { id: "m1", icon: Zap, title: "Growth", value: "500%" },
             { id: "m2", icon: Shield, title: "Security", value: "99.9%" }
@@ -67,6 +70,7 @@ export default function Page() {
           description="Innovating for the future"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           features={[
             { title: "Scale", description: "High scalability for any size", imageSrc: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" },
             { title: "Speed", description: "Lightning fast performance", imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b" }
@@ -76,8 +80,10 @@ export default function Page() {
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardTwo 
           title="Client Voices"
+          description="What our partners say about us."
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           testimonials={[
             { id: "t1", name: "Alice", role: "CEO", testimonial: "Amazing experience!", icon: Star },
             { id: "t2", name: "Bob", role: "CTO", testimonial: "Best service ever.", icon: CheckCircle }
@@ -85,7 +91,7 @@ export default function Page() {
         />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCTA tag="Get in touch" title="Contact Us" description="We are here to help." buttons={[{ text: "Contact" }]} />
+        <ContactCTA tag="Get in touch" title="Contact Us" description="We are here to help." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
         <FooterMedia imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c" logoText="Webild" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />