Update src/app/page.tsx

src/app/page.tsx

@@ -9,7 +9,7 @@ import { Dribbble, Footprints, Target, Award } from "lucide-react";
 
 export default function HomePage() {
   return (
-    <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="background-highlight" borderRadius="pill">
+    <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="background-highlight" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen brandName="Divya Jyot" navItems={[{ name: "Home", id: "/" }, { name: "Book Now", id: "/booking" }]} />
       </div>
@@ -20,7 +20,7 @@ export default function HomePage() {
         <FeatureBorderGlow title="Our Sports" description="Choose your arena and play your favorite game." animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ icon: Dribbble, title: "Box Cricket", description: "High-intensity indoor cricket matches." }, { icon: Footprints, title: "Football", description: "Dynamic turf for football enthusiasts." }, { icon: Target, title: "Basketball", description: "Full-court play for competitive games." }, { icon: Award, title: "Pickleball", description: "Popular court sport for all ages." }]} />
       </div>
       <div id="cta" data-section="cta">
-        <TextAbout title="Ready to Play?" buttons={[{ text: "Book Your Slot", href: "/booking" }]} />
+        <TextAbout title="Ready to Play?" useInvertedBackground={false} buttons={[{ text: "Book Your Slot", href: "/booking" }]} />
       </div>
       <div id="footer" data-section="footer">
         <FooterBase logoText="Divya Jyot" columns={[{ title: "Academy", items: [{ label: "About Us", href: "#" }, { label: "Pricing", href: "#" }] }, { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "FAQ", href: "#" }] }]} />