Update src/app/page.tsx

src/app/page.tsx

@@ -9,13 +9,12 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Globe } from "lucide-react";
 
 const navItems = [{ name: "Home", id: "/" }];
 
 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={navItems} brandName="Webild" />
       </div>
@@ -29,6 +28,7 @@ export default function Page() {
             { value: "99%", label: "Uptime" },
             { value: "24/7", label: "Support" },
           ]}
+          enableKpiAnimation={true}
           mediaAnimation="slide-up"
         />
       </div>
@@ -37,6 +37,9 @@ export default function Page() {
           title="About Us"
           description="We focus on quality and innovation."
           metrics={[{ value: "10 Years", title: "Experience" }]}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
         />
       </div>
       <div id="features" data-section="features">
@@ -44,9 +47,11 @@ export default function Page() {
           title="Core Features"
           description="Designed to scale."
           textboxLayout="default"
+          useInvertedBackground={false}
           features={[
             {
-              tag: "Fast",              title: "Speed",              subtitle: "Optimization",              description: "Lightning fast performance."},
+              tag: "Fast",              title: "Speed",              subtitle: "Optimization",              description: "Lightning fast performance."
+            },
           ]}
         />
       </div>
@@ -56,6 +61,7 @@ export default function Page() {
           description="Data-driven results."
           textboxLayout="default"
           animationType="slide-up"
+          useInvertedBackground={false}
           metrics={[
             { id: "m1", value: "50%", title: "Growth", items: ["Faster", "Better"] },
           ]}
@@ -69,6 +75,7 @@ export default function Page() {
           avatars={[]}
           ratingAnimation="slide-up"
           avatarsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
@@ -77,6 +84,7 @@ export default function Page() {
           description="Common questions."
           textboxLayout="default"
           faqsAnimation="slide-up"
+          useInvertedBackground={false}
           faqs={[{ id: "f1", title: "How?", content: "Easy." }]}
         />
       </div>
@@ -84,6 +92,7 @@ export default function Page() {
         <ContactText
           text="Let's Connect"
           background={{ variant: "gradient-bars" }}
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">