Update src/app/page.tsx

src/app/page.tsx

@@ -12,9 +12,13 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function Page() {
-  const navItems = [{ name: "Home", id: "/" }];
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" }
+  ];
   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} brandName="Liora Cleaning" />
       </div>
@@ -40,7 +44,7 @@ export default function Page() {
         <MetricCardTwo title="Hours of Operation" description="We are available when you need us." textboxLayout="default" useInvertedBackground={false} animationType="slide-up" gridVariant="uniform-all-items-equal" metrics={[{ id: "h1", value: "Mon-Fri", description: "8:00 AM - 6:00 PM" }, { id: "h2", value: "Sat", description: "9:00 AM - 4:00 PM" }, { id: "h3", value: "Sun", description: "Closed" }]} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCTA tag="Ready to Start?" title="Ready for a Cleaner, Calmer Space?" description="Experience premium service tailored to your home." useInvertedBackground={true} buttons={[{ text: "Get Your Free Quote", href: "#" }, { text: "Book Your First Cleaning", href: "#" }]} />
+        <ContactCTA tag="Ready to Start?" title="Ready for a Cleaner, Calmer Space?" description="Experience premium service tailored to your home." useInvertedBackground={true} buttons={[{ text: "Get Your Free Quote", href: "#" }, { text: "Book Your First Cleaning", href: "#" }]} background={{ variant: "plain" }} />
       </div>
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis logoText="Liora Cleaning" columns={[{ items: [{ label: "Services", href: "#services" }, { label: "Process", href: "#process" }, { label: "Contact", href: "#contact" }] }, { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }]} />