Update app/contact/page.tsx

app/contact/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { KleapForm } from "@/components/kleap-form";
+import { Footer } from "@/components/footer";
+
+export default function ContactPage() {
+  const fields = [
+    { 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: "vehicle", label: "Vehicle Make & Model", type: "text", required: true },
+    { 
+      name: "service", 
+      label: "Service Interested In", 
+      type: "select", 
+      options: [
+        { label: "Express Detail", value: "express" },
+        { label: "Apex Signature", value: "signature" },
+        { label: "Ceramic Coating", value: "ceramic" },
+        { label: "Paint Correction", value: "correction" },
+        { label: "Other", value: "other" }
+      ],
+      required: true 
+    },
+    { name: "message", label: "Additional Details", type: "textarea", required: false },
+  ];
+
+  return (
+    <main className="pt-20">
+      <section className="py-24">
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+            <div>
+              <Heading>Book Your Appointment</Heading>
+              <Subheading className="mt-4">
+                Fill out the form below and we'll get back to you within 24 hours with a quote and availability.
+              </Subheading>
+              
+              <div className="mt-12 space-y-8">
+                <div>
+                  <h4 className="font-bold text-lg">Location</h4>
+                  <p className="text-neutral-600">Serving Cedar Rapids, Marion, Hiawatha, and surrounding areas.</p>
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Hours</h4>
+                  <p className="text-neutral-600">Monday - Friday: 8:00 AM - 6:00 PM</p>
+                  <p className="text-neutral-600">Saturday: 9:00 AM - 4:00 PM</p>
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Contact Info</h4>
+                  <p className="text-neutral-600">(319) 555-0123</p>
+                  <p className="text-neutral-600">hello@apexdetailing.com</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="bg-white p-8 rounded-2xl shadow-xl border border-neutral-100">
+              <KleapForm 
+                formId="contact-apex" 
+                title="Booking Request" 
+                fields={fields} 
+              />
+            </div>
+          </div>
+        </Container>
+      </section>
+      <Footer />
+    </main>
+  );
+}