src/app/booking/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function BookingPage() {
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "About", id: "/#about" },
+          { name: "Services", id: "/#services" },
+          { name: "Booking", id: "/booking" },
+        ]}
+        brandName="Varad Salon"
+        button={{ text: "Home", href: "/" }}
+      />
+      
+      <main className="pt-24">
+        <section className="container mx-auto py-16">
+          <h1 className="text-4xl font-bold mb-8 text-center">Book an Appointment</h1>
+          <form className="max-w-lg mx-auto p-8 rounded-2xl bg-secondary/10">
+            <div className="flex flex-col gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Full Name</label>
+                <input type="text" className="w-full p-3 rounded-lg border" placeholder="John Doe" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Phone Number</label>
+                <input type="tel" className="w-full p-3 rounded-lg border" placeholder="(555) 000-0000" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Desired Service</label>
+                <select className="w-full p-3 rounded-lg border">
+                  <option>Haircut & Styling</option>
+                  <option>Hair Coloring</option>
+                  <option>Facials & Skin</option>
+                  <option>Bridal Packages</option>
+                  <option>Wellness Massage</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Additional Details</label>
+                <textarea className="w-full p-3 rounded-lg border h-32" placeholder="Any special requests or preferred timing?" />
+              </div>
+              <button type="submit" className="w-full p-4 bg-primary text-white rounded-lg font-bold">Confirm Booking</button>
+            </div>
+          </form>
+        </section>
+      </main>
+
+      <FooterLogoEmphasis
+        columns={[
+          { items: [{ label: "Services", href: "/#services" }, { label: "About", href: "/#about" }, { label: "Book Now", href: "/booking" }] },
+          { items: [{ label: "Instagram" }, { label: "Facebook" }, { label: "Google Maps" }] },
+        ]}
+        logoText="Varad Salon"
+      />
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -38,7 +38,7 @@ export default function LandingPage() {
               { name: "Book", id: "booking" },
             ]}
             brandName="Varad Salon"
-            button={{ text: "Book Appointment", onClick: () => document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' }) }}
+            button={{ text: "Book Appointment", href: "/appointment" }}
           />
         </div>
 
@@ -48,7 +48,7 @@ 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", onClick: () => document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' }) },
+              { text: "Book an Appointment", href: "/appointment" },
               { text: "Explore Services", onClick: () => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }) },
             ]}
             mediaItems={[
@@ -167,14 +167,14 @@ 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", onClick: () => alert('Booking system initialized') }]}
+            buttons={[{ text: "Book Your Appointment Now", href: "/appointment" }]}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
             columns={[
-              { items: [{ label: "Services", onClick: () => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "About", onClick: () => document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "Book Now", onClick: () => document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' }) }] },
+              { 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"
@@ -183,4 +183,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}