src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { ArrowRight, Star, Globe, Zap, CheckCircle, Mail, Phone, MapPin } from 'lucide-react';
+import { Zap, Star, CheckCircle, Globe } from 'lucide-react';
 
 const navItems = [
   { name: "Home", id: "/" }
@@ -18,7 +18,7 @@ const navItems = [
 
 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} />
       </div>
@@ -55,6 +55,7 @@ export default function Page() {
           textboxLayout="default"
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
+          useInvertedBackground={false}
           products={[
             { id: "1", brand: "BrandA", name: "Product A", price: "$10", rating: 5, reviewCount: "10", imageSrc: "https://example.com/a.jpg" },
             { id: "2", brand: "BrandB", name: "Product B", price: "$20", rating: 4, reviewCount: "20", imageSrc: "https://example.com/b.jpg" },
@@ -64,17 +65,22 @@ export default function Page() {
       </div>
       <div id="testimonial" data-section="testimonial">
         <TestimonialCardThirteen 
+          title="Client Feedback"
+          description="What our users say."
+          textboxLayout="default"
           showRating={true}
           animationType="slide-up"
-          textboxLayout="default"
+          useInvertedBackground={false}
           testimonials={[{ id: "1", name: "User A", handle: "@userA", testimonial: "Perfect!", rating: 5 }, { id: "2", name: "User B", handle: "@userB", testimonial: "Great quality.", rating: 5 }]}
         />
       </div>
       <div id="blog" data-section="blog">
         <BlogCardOne 
           title="Latest News"
+          description="Latest articles and updates."
           textboxLayout="default"
           animationType="slide-up"
+          useInvertedBackground={false}
           blogs={[
             { id: "1", category: "Updates", title: "New Features", excerpt: "Read about our latest update.", imageSrc: "https://example.com/blog1.jpg", authorName: "Admin", authorAvatar: "", date: "2025-01-01" },
             { id: "2", category: "Tech", title: "Future Tech", excerpt: "Exploring the future.", imageSrc: "https://example.com/blog2.jpg", authorName: "Admin", authorAvatar: "", date: "2025-01-02" }
@@ -85,6 +91,7 @@ export default function Page() {
         <ContactText 
           text="Get in touch with us."
           background={{ variant: "gradient-bars" }}
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">