Update src/app/page.tsx

src/app/page.tsx

@@ -12,7 +12,7 @@ import { Info, Mail, Star } 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">
         <NavbarStyleApple navItems={navItems} />
       </div>
@@ -26,6 +26,7 @@ export default function Page() {
             { imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 2" },
             { imageSrc: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b", imageAlt: "Hero Image 3" }
           ]}
+          mediaAnimation="slide-up"
         />
       </div>
       <div id="profile" data-section="profile">
@@ -36,13 +37,17 @@ export default function Page() {
           subdescription="Driven by passion and technology."
           icon={Info}
           imageSrc="https://images.unsplash.com/photo-1522202176988-66273c2fd55f"
+          useInvertedBackground={false}
         />
       </div>
       <div id="listings" data-section="listings">
         <ProductCardOne
+          title="Our Plans"
+          description="Choose the plan that suits you best."
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[
             { id: "1", name: "Basic Plan", price: "$10", imageSrc: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0" },
             { id: "2", name: "Pro Plan", price: "$20", imageSrc: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0" },
@@ -58,6 +63,7 @@ export default function Page() {
           avatars={[{ src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb", alt: "Author" }]}
           ratingAnimation="slide-up"
           avatarsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
@@ -66,6 +72,7 @@ export default function Page() {
           title="Get in Touch"
           description="We'd love to hear from you."
           background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">