Bob AI: Update navbar links to point to home page

Merge version_32_1780498705920 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import BookingPage from "@/pages/BookingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/booking" element={<BookingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -19,7 +19,7 @@ export default function Layout() {
 
   const navItems = [
   {
-    "name": "Home",    "href": "#hero"
+    "name": "Home",    "href": "/"
   },
   {
     "name": "About",    "href": "#about"
@@ -41,7 +41,9 @@ export default function Layout() {
   },
   {
     "name": "Contact",    "href": "#contact"
-  }
+  },
+  { name: "Booking", href: "/booking" },
+
 ];
 
   return (
@@ -50,7 +52,7 @@ export default function Layout() {
       <SectionErrorBoundary name="navbar">
         <nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
           <div className="mx-auto flex w-content-width items-center justify-between">
-            <a href="#" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
+            <a href="/" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
               The Grand Hotel
             </a>
             <div className="hidden lg:flex items-center gap-6">
@@ -60,7 +62,7 @@ export default function Layout() {
                 </a>
               ))}
             </div>
-            <Button text="Book Now" href="#contact" variant="primary" />
+            <Button text="Book Now" href="/booking" variant="primary" />
           </div>
         </nav>
       </SectionErrorBoundary>

src/pages/BookingPage.tsx

@@ -0,0 +1,17 @@
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function BookingPage() {
+  return (
+    <>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book Your Session"
+        title="Schedule Your Appointment"
+        description="Easily book your preferred service or consultation with us. Fill out the form below, and we'll confirm your slot shortly."
+        inputs={[{"name":"name","type":"text","placeholder":"Your Full Name","required":true},{"name":"email","type":"email","placeholder":"Your Email Address","required":true},{"name":"phone","type":"tel","placeholder":"Your Phone Number (Optional)"},{"name":"service","type":"text","placeholder":"Desired Service (e.g., Consultation)"},{"name":"date","type":"date","placeholder":"Preferred Date"}]}
+        textarea={{"name":"message","placeholder":"Tell us more about your needs or questions...","rows":4}}
+        buttonText="Confirm Booking"
+        imageSrc="https://img.freepik.com/free-photo/young-woman-making-appointment-online_23-2149154371.jpg"
+      /></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/booking', label: 'Booking', pageFile: 'BookingPage' },
 ];