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>
   );

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 (

src/pages/BookNowPage.tsx

@@ -0,0 +1,23 @@
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function BookNowPage() {
+  return (
+    <>
+      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Book Now</p></div><TextAnimation text="Schedule Your Service with Brand Today" variant="fade-blur" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Experience the convenience of booking your next appointment online. Our straightforward process ensures you can secure your preferred time quickly and efficiently, getting you closer to the service you need. Start now and take the first step." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Book Now" href="#booking-form" variant="primary" /><Button text="View Services" href="/services" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/young-woman-using-laptop-booking-online-appointment-clinic-modern-office_236854-47007.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Book Now"
+        title="Schedule Your Service Today"
+        description="Ready to experience our services? Use the form below to book your appointment quickly and conveniently. We look forward to serving you."
+        inputs={[{"name":"fullName","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","required":true},{"name":"service","type":"text","placeholder":"Preferred Service (e.g., Consultation)","required":true}]}
+        textarea={{"name":"message","placeholder":"Any specific requests or questions?","rows":4,"required":false}}
+        buttonText="Confirm Booking"
+        imageSrc="https://img.freepik.com/premium-photo/businesswoman-using-laptop-making-online-appointment-booking-calendar-schedule-management-concept_31965-10336.jpg"
+      /></div>
+    </>
+  );
+}

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' },
 ];