Update components/reservation.tsx

components/reservation.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { KleapForm } from "@/components/kleap-form";
+
+export function Reservation() {
+  const fields = [
+    { name: "name", label: "Full Name", type: "text", required: true, placeholder: "John Doe" },
+    { name: "email", label: "Email Address", type: "email", required: true, placeholder: "john@example.com" },
+    { name: "phone", label: "Phone Number", type: "tel", required: true, placeholder: "+33 1 23 45 67 89" },
+    { name: "date", label: "Date", type: "date", required: true },
+    { name: "time", label: "Time", type: "time", required: true },
+    { name: "guests", label: "Number of Guests", type: "number", required: true, placeholder: "2" },
+    { name: "requests", label: "Special Requests", type: "textarea", required: false, placeholder: "Allergies, special occasion..." },
+  ];
+
+  return (
+    <section id="reservation" className="py-20 bg-amber-50">
+      <Container>
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          <div>
+            <Heading className="text-4xl font-serif text-stone-900 mb-6">Reserve Your Table</Heading>
+            <Subheading className="text-stone-600 mb-8">
+              Join us for an unforgettable dining experience. For parties larger than 8, please contact us directly.
+            </Subheading>
+            <div className="space-y-4 text-stone-700">
+              <p><strong>Dress Code:</strong> Smart Casual</p>
+              <p><strong>Cancellation Policy:</strong> Please cancel at least 24 hours in advance.</p>
+            </div>
+          </div>
+          
+          <div className="bg-white p-8 rounded-xl shadow-lg border border-amber-100">
+            <KleapForm 
+              formId="reservation" 
+              title="Table Reservation" 
+              fields={fields} 
+              submitText="Book Now"
+              className="space-y-4"
+            />
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}