Update app/book/page.tsx

app/book/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Footer } from "@/components/footer";
+import { KleapForm } from "@/components/kleap-form";
+
+const bookingFields = [
+  {
+    name: "name",
+    label: "Full Name",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "email",
+    label: "Email Address",
+    type: "email",
+    required: true,
+  },
+  {
+    name: "phone",
+    label: "Phone Number",
+    type: "tel",
+    required: true,
+  },
+  {
+    name: "service",
+    label: "Service Type",
+    type: "select",
+    required: true,
+    options: [
+      { label: "Custom Shoe Order", value: "custom" },
+      { label: "Professional Fitting", value: "fitting" },
+      { label: "Style Consultation", value: "consultation" },
+    ],
+  },
+  {
+    name: "date",
+    label: "Preferred Date",
+    type: "text", // Using text for simplicity in this template, usually a date picker
+    required: true,
+  },
+  {
+    name: "time",
+    label: "Preferred Time",
+    type: "select",
+    required: true,
+    options: [
+      { label: "Morning (9AM - 12PM)", value: "morning" },
+      { label: "Afternoon (12PM - 4PM)", value: "afternoon" },
+      { label: "Evening (4PM - 7PM)", value: "evening" },
+    ],
+  },
+  {
+    name: "notes",
+    label: "Additional Notes",
+    type: "textarea",
+    required: false,
+  },
+];
+
+export default function BookingPage() {
+  return (
+    <main className="min-h-screen pt-32">
+      <Container className="max-w-4xl pb-24">
+        <div className="text-center mb-16">
+          <Heading>Book a Fitting</Heading>
+          <Subheading className="mt-4">
+            Schedule a personalized session with our footwear experts.
+          </Subheading>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+          <div className="lg:col-span-2 bg-white p-8 rounded-3xl shadow-sm border">
+            <KleapForm 
+              formId="booking" 
+              title="Book Your Session" 
+              fields={bookingFields} 
+            />
+          </div>
+          
+          <div className="space-y-8">
+            <div className="bg-neutral-50 p-6 rounded-2xl border">
+              <h3 className="font-bold text-lg mb-4">Why book a fitting?</h3>
+              <ul className="space-y-4 text-sm text-neutral-600">
+                <li className="flex gap-3">
+                  <span className="text-primary font-bold">01</span>
+                  Precise measurements for ultimate comfort.
+                </li>
+                <li className="flex gap-3">
+                  <span className="text-primary font-bold">02</span>
+                  Expert advice on styles that suit your gait.
+                </li>
+                <li className="flex gap-3">
+                  <span className="text-primary font-bold">03</span>
+                  Early access to new collections.
+                </li>
+              </ul>
+            </div>
+            
+            <div className="bg-neutral-900 text-white p-6 rounded-2xl">
+              <h3 className="font-bold text-lg mb-4">Need help?</h3>
+              <p className="text-sm text-neutral-400 mb-4">
+                If you have any questions about our custom services, feel free to reach out.
+              </p>
+              <p className="font-bold">+1 (555) 123-4567</p>
+              <p className="text-sm text-neutral-400">support@solevibe.com</p>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}