From 7883b326600f092e7264bac767541dbd28e2a6be Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 3 Jun 2026 12:54:08 +0000
Subject: [PATCH] Bob AI: Add book-now page

---
 src/App.tsx               |  2 +
 src/components/Layout.tsx |  4 +-
 src/pages/BookNowPage.tsx | 79 +++++++++++++++++++++++++++++++++++++++
 src/routes.ts             |  1 +
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/BookNowPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..c086d1d 100644
--- a/src/App.tsx
+++ b/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 BookNowPage from "@/pages/BookNowPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/book-now" element={<BookNowPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 67687a2..1b04987 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Social Proof",
     "href": "#social-proof"
-  }
+  },
+  { name: "Book Now", href: "/book-now" },
+
 ];
 
   return (
diff --git a/src/pages/BookNowPage.tsx b/src/pages/BookNowPage.tsx
new file mode 100644
index 0000000..4fa1bc9
--- /dev/null
+++ b/src/pages/BookNowPage.tsx
@@ -0,0 +1,79 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function BookNowPage() {
+  return (
+    <>
+      <NavbarCentered
+        logo="Bookify"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+
+      <HeroBillboard
+        tag="Book Your Experience"
+        title="Seamless Booking, Unforgettable Moments"
+        description="Discover and reserve your next adventure with ease. From cozy stays to thrilling activities, we've got you covered."
+        primaryButton={{ text: "Book Now", href: "/book-now" }}
+        secondaryButton={{ text: "Learn More", href: "/about" }}
+        imageSrc="https://img.b2bpic.net/s/placeholder-image-wide.jpg"
+      />
+
+      <FeaturesDetailedSteps
+        tag="How It Works"
+        title="Your Journey in 3 Simple Steps"
+        description="Booking your perfect experience is quick and easy. Follow these steps to get started."
+        steps={[
+          {
+            tag: "Step 1",
+            title: "Search & Discover",
+            subtitle: "Find your ideal experience",
+            description: "Browse through our curated selection of activities, accommodations, and events.",
+            imageSrc: "https://img.b2bpic.net/s/step1.jpg",
+          },
+          {
+            tag: "Step 2",
+            title: "Customize & Confirm",
+            subtitle: "Tailor your booking",
+            description: "Select dates, add extras, and confirm your reservation with secure payment.",
+            imageSrc: "https://img.b2bpic.net/s/step2.jpg",
+          },
+          {
+            tag: "Step 3",
+            title: "Enjoy Your Experience",
+            subtitle: "Create lasting memories",
+            description: "Receive instant confirmation and prepare for your unforgettable adventure.",
+            imageSrc: "https://img.b2bpic.net/s/step3.jpg",
+          },
+        ]}
+      />
+
+      <ContactCta
+        tag="Ready to Book?"
+        text="Don't wait, secure your spot today and start making memories."
+        primaryButton={{ text: "Start Booking", href: "/book-now" }}
+        secondaryButton={{ text: "Contact Us", href: "/contact" }}
+      />
+
+      <FooterSimple
+        brand="Bookify"
+        columns={[
+          {
+            title: "Product",
+            items: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }],
+          },
+          {
+            title: "Company",
+            items: [{ label: "About Us", href: "/about" }, { label: "Contact", href: "/contact" }],
+          },
+        ]}
+        copyright="2024 Bookify. All rights reserved."
+        links={[{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }]}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..f3e21fe 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/book-now', label: 'Book Now', pageFile: 'BookNowPage' },
 ];