src/app/about/page.tsx

@@ -8,7 +8,18 @@ import TextAbout from '@/components/sections/about/TextAbout';
 
 export default function AboutPage() {
   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"
+    >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
@@ -19,10 +30,11 @@ export default function AboutPage() {
               { name: "About", id: "/about" },
             ]}
             brandName="Velora Café"
+            button={{ text: "Reserve", href: "/reservations" }}
           />
         </div>
         <div id="about" data-section="about">
-          <TextAbout title="Our History" />
+          <TextAbout title="Our History" useInvertedBackground={false} />
         </div>
         <div id="footer" data-section="footer">
           <FooterBaseReveal

src/app/menu/page.tsx

@@ -8,7 +8,18 @@ import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 
 export default function MenuPage() {
   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"
+    >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
@@ -19,6 +30,7 @@ export default function MenuPage() {
               { name: "About", id: "/about" },
             ]}
             brandName="Velora Café"
+            button={{ text: "Reserve", href: "/reservations" }}
           />
         </div>
         <div id="pricing" data-section="pricing">
@@ -26,6 +38,9 @@ export default function MenuPage() {
             title="Our Menu"
             animationType="slide-up"
             plans={[]}
+            description="Delicious coffee options."
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
         <div id="footer" data-section="footer">

src/app/page.tsx

@@ -16,13 +16,13 @@ export default function LandingPage() {
         defaultButtonVariant="directional-hover"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
-        contentWidth="smallMedium"
-        sizing="mediumSizeLargeTitles"
-        background="aurora"
-        cardStyle="soft-shadow"
-        primaryButtonStyle="flat"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
         secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
@@ -34,6 +34,7 @@ export default function LandingPage() {
               { name: "About", id: "/about" },
             ]}
             brandName="Velora Café"
+            button={{ text: "Order", href: "/menu" }}
           />
         </div>
 
@@ -63,7 +64,13 @@ export default function LandingPage() {
             description="Discover our curated menu of fine roasts."
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
+            textboxLayout="default"
             useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Espresso", price: "$4", variant: "Regular", imageSrc: "" },
+              { id: "2", name: "Latte", price: "$5", variant: "Regular", imageSrc: "" },
+              { id: "3", name: "Cappuccino", price: "$5", variant: "Regular", imageSrc: "" },
+            ]}
           />
         </div>
 
@@ -73,6 +80,8 @@ export default function LandingPage() {
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={true}
+            description="What our customers say."
+            testimonials={[{ id: "1", name: "Alice", handle: "@alice", testimonial: "Best coffee in town!" }, { id: "2", name: "Bob", handle: "@bob", testimonial: "Exceptional service." }]}
           />
         </div>
 
@@ -82,6 +91,8 @@ export default function LandingPage() {
             title="Visit Velora"
             description="Book your table for an exclusive coffee experience."
             buttons={[{ text: "Reserve Now", href: "/reservations" }]}
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
           />
         </div>
 

src/app/reservations/page.tsx

@@ -8,7 +8,18 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function ReservationsPage() {
   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"
+    >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
@@ -19,6 +30,7 @@ export default function ReservationsPage() {
               { name: "About", id: "/about" },
             ]}
             brandName="Velora Café"
+            button={{ text: "Order", href: "/menu" }}
           />
         </div>
         <div id="contact" data-section="contact">
@@ -26,7 +38,9 @@ export default function ReservationsPage() {
             tag="Booking"
             title="Reserve Your Table"
             description="Select your preferred time."
-            buttons={[]}
+            buttons={[{ text: "Confirm", href: "/" }]}
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
           />
         </div>
         <div id="footer" data-section="footer">