Bob AI: Add booking page

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

@@ -41,7 +41,9 @@ export default function Layout() {
   },
   {
     "name": "Contact",    "href": "#contact"
-  }
+  },
+  { name: "Booking", href: "/booking" },
+
 ];
 
   return (

src/pages/BookingPage.tsx

@@ -0,0 +1,46 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterMinimal from "@/components/sections/footer/FooterMinimal";
+
+export default function BookingPage() {
+  const handleSubmit = (data: Record<string, string>) => {
+    console.log("Booking form submitted:", data);
+    alert("Booking submitted! We will contact you shortly.");
+    // In a real application, you would send this data to a backend.
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="BookingApp"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <main>
+        <ContactSplitForm
+          tag="Book Your Spot"
+          title="Schedule a Consultation"
+          description="Fill out the form below to book a personalized consultation with our experts. We'll get back to you within 24 hours."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: false },
+            { name: "date", type: "date", placeholder: "Preferred Date", required: true },
+            { name: "time", type: "time", placeholder: "Preferred Time", required: true },
+          ]}
+          textarea={{ name: "message", placeholder: "Any specific requests or questions?", rows: 4, required: false }}
+          buttonText="Book Now"
+          onSubmit={handleSubmit}
+          imageSrc="https://img.b2bpic.net/img/consultation-meeting-room.jpg"
+        />
+      </main>
+
+      <FooterMinimal
+        brand="BookingApp"
+        copyright="© 2024 BookingApp. All rights reserved."
+      />
+    </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' },
 ];