src/app/page.tsx

@@ -9,12 +9,12 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Zap, Shield, Star, CheckCircle } from 'lucide-react';
+import { Zap, Shield } from 'lucide-react';
 
 export default function Page() {
   const navItems = [{ name: 'Home', id: '/' }];
   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">
         <NavbarStyleCentered navItems={navItems} />
       </div>
@@ -23,6 +23,7 @@ export default function Page() {
             title="Experience True Innovation"
             description="Empowering businesses with seamless, high-performance digital solutions designed for the future."
             mediaAnimation="slide-up"
+            background={{ variant: "plain" }}
             testimonials={[
                 { name: "Alice Johnson", handle: "@alicej", testimonial: "A truly transformative experience for our workflow.", rating: 5 },
                 { name: "Bob Smith", handle: "@bobsmith", testimonial: "Unmatched performance and incredible support.", rating: 5 }
@@ -32,7 +33,9 @@ export default function Page() {
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFive 
             title="Client Success Stories"
+            description="See what our clients have to say about our work."
             textboxLayout="default"
+            useInvertedBackground={false}
             testimonials={[
                 { id: "1", name: "TechCorp", date: "2024-01-01", title: "Reliable Partner", quote: "They delivered exactly what we needed on time.", tag: "Review", avatarSrc: "/avatar1.png" }
             ]}
@@ -41,7 +44,9 @@ export default function Page() {
       <div id="services" data-section="services">
         <FeatureCardTen 
             title="Core Services"
+            description="High-impact services to drive your business."
             textboxLayout="default"
+            useInvertedBackground={false}
             animationType="slide-up"
             features={[{ title: "Strategy", description: "Data-driven consulting", media: { imageSrc: "/service1.png" }, items: [{ icon: Zap, text: "Scalable Growth" }] , reverse: false}]}
         />
@@ -51,6 +56,7 @@ export default function Page() {
             title="Why Choose Us"
             description="Your success is our top priority, backed by years of industry expertise."
             textboxLayout="default"
+            useInvertedBackground={false}
             bulletPoints={[{ title: "Innovation", description: "Always ahead", icon: Shield }]}
         />
       </div>
@@ -58,13 +64,16 @@ export default function Page() {
         <MetricCardFourteen 
             title="Our Impact"
             tag="Proven Results"
+            useInvertedBackground={false}
             metrics={[{ id: "1", value: "100+", description: "Projects Delivered" }]}
         />
       </div>
       <div id="local-focus" data-section="local-focus">
         <FaqDouble 
             title="Frequently Asked Questions"
+            description="Common questions answered."
             textboxLayout="default"
+            useInvertedBackground={false}
             faqsAnimation="slide-up"
             faqs={[{ id: "1", title: "How do we get started?", content: "Simply reach out through our contact page." }]}
         />
@@ -75,6 +84,8 @@ export default function Page() {
             title="Ready to Build?"
             description="Let's collaborate on your next big project."
             buttons={[{ text: "Get in touch" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">