Update theme colors

Merge version_3 into main

src/app/booking/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import Link from "next/link";
+
+export default function BookingPage() {
+  return (
+    <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">
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Booking", id: "/booking" },
+          ]}
+          brandName="Varad Salon"
+          button={{ text: "Home", href: "/" }}
+        />
+      </div>
+      
+      <div id="booking" data-section="booking">
+        <ContactCTA
+          tag="Appointment"
+          title="Book Your Appointment"
+          description="Ready to experience Varad Salon? Secure your preferred time slot directly through our booking portal below."
+          buttons={[{ text: "Confirm Booking", href: "#" }]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Varad Salon"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Booking", href: "/booking" }
+              ]
+            },
+            {
+              items: [
+                { label: "Instagram" },
+                { label: "Facebook" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -38,7 +38,7 @@ export default function LandingPage() {
               { name: "Book", id: "booking" },
             ]}
             brandName="Varad Salon"
-            button={{ text: "Book Appointment", href: "#booking" }}
+            button={{ text: "Book Appointment", href: "/appointment" }}
           />
         </div>
 
@@ -48,8 +48,8 @@ export default function LandingPage() {
             title="Where Every Look Becomes a Statement."
             description="Sambhaji Nagar's most trusted salon for hair, skin, bridal, and wellness — with 5★ results and a team that truly cares."
             buttons={[
-              { text: "Book an Appointment", href: "#booking" },
-              { text: "Explore Services", href: "#services" },
+              { text: "Book an Appointment", href: "/appointment" },
+              { text: "Explore Services", onClick: () => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }) },
             ]}
             mediaItems={[
               { imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-wearing-suit-posing-black-white_23-2149411391.jpg", imageAlt: "Luxurious salon hero" },
@@ -87,7 +87,7 @@ export default function LandingPage() {
               { type: "image", src: "http://img.b2bpic.net/free-photo/woman-pampering-face-client-salon_23-2147736961.jpg", alt: "Salon ritual" },
               { type: "text", content: "A Ritual." },
             ]}
-            buttons={[{ text: "Learn More", href: "#" }]}
+            buttons={[{ text: "Learn More" }]}
           />
         </div>
 
@@ -167,15 +167,15 @@ export default function LandingPage() {
             tag="Book Now"
             title="Your Best Look is One Booking Away."
             description="Walk in as you are. Walk out transformed."
-            buttons={[{ text: "Book Your Appointment Now", href: "#" }]}
+            buttons={[{ text: "Book Your Appointment Now", href: "/appointment" }]}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
             columns={[
-              { items: [{ label: "Services", href: "#services" }, { label: "About", href: "#about" }, { label: "Book Now", href: "#booking" }] },
-              { items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Google Maps", href: "#" }] },
+              { items: [{ label: "Services", onClick: () => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "About", onClick: () => document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "Book Now", href: "/appointment" }] },
+              { items: [{ label: "Instagram" }, { label: "Facebook" }, { label: "Google Maps" }] },
             ]}
             logoText="Varad Salon"
           />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0D0D0D;
-  --card: #1A1A1A;
-  --foreground: #F5F0E8;
-  --primary-cta: #C9A84C;
-  --primary-cta-text: #0D0D0D;
-  --secondary-cta: #1A1A1A;
-  --secondary-cta-text: #F5F0E8;
-  --accent: #C9A84C;
-  --background-accent: #262626;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
+  --primary-cta-text: #f6f0e9;
+  --secondary-cta: #efe7dd;
+  --secondary-cta-text: #2b180a;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);