Update src/app/page.tsx

src/app/page.tsx

@@ -9,13 +9,13 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Zap, Shield, Star, CheckCircle } from 'lucide-react';
+import { Zap, Shield } from 'lucide-react';
 
 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} brandName="Webild" />
       </div>
@@ -30,6 +30,7 @@ export default function Page() {
           title="Our Impact"
           metrics={[{ icon: Zap, label: "Projects", value: "500+" }, { icon: Shield, label: "Security", value: "100%" }]}
           metricsAnimation="blur-reveal"
+          useInvertedBackground={false}
         />
       </div>
       <div id="message" data-section="message">
@@ -37,7 +38,8 @@ export default function Page() {
           title="Core Philosophy" 
           description="Efficiency driven by design."
           textboxLayout="default"
-          features={[{ title: "Modern Tech", description: "Leveraging latest frameworks." }]}
+          useInvertedBackground={false}
+          features={[{ title: "Modern Tech", description: "Leveraging latest frameworks.", imageSrc: "" }]}
         />
       </div>
       <div id="reasons" data-section="reasons">
@@ -46,6 +48,8 @@ export default function Page() {
           textboxLayout="default"
           gridVariant="bento-grid"
           animationType="blur-reveal"
+          useInvertedBackground={false}
+          description="Top-tier solutions for growth."
           products={[{ id: "1", name: "Basic", price: "$99", imageSrc: "" }, { id: "2", name: "Pro", price: "$199", imageSrc: "" }, { id: "3", name: "Elite", price: "$299", imageSrc: "" }]}
         />
       </div>
@@ -54,15 +58,19 @@ export default function Page() {
           testimonial="The best service I've ever used!"
           rating={5}
           author="Jane Doe"
+          avatars={[]}
           ratingAnimation="blur-reveal"
           avatarsAnimation="blur-reveal"
+          useInvertedBackground={false}
         />
       </div>
       <div id="faq" data-section="faq">
         <FaqDouble 
           title="Frequently Asked Questions" 
+          description="Answers to your common queries."
           faqsAnimation="blur-reveal"
           textboxLayout="default"
+          useInvertedBackground={false}
           faqs={[{ id: "1", title: "How do I start?", content: "Contact us today!" }]}
         />
       </div>
@@ -71,7 +79,6 @@ export default function Page() {
           tag="Support" 
           title="Get in Touch" 
           description="Have questions? Let's talk."
-          buttons={[{ text: "Submit" }]}
         />
       </div>
       <div id="footer" data-section="footer">