Update components/contact.tsx

components/contact.tsx

@@ -0,0 +1,92 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { KleapForm } from "@/components/kleap-form";
+import { Phone, Mail, MapPin, Clock } from "lucide-react";
+
+export function Contact() {
+  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: "service", 
+      label: "Service Interested In", 
+      type: "select", 
+      options: [
+        { label: "Interior Detailing", value: "interior" },
+        { label: "Exterior Detailing", value: "exterior" },
+        { label: "Full Detail Package", value: "full" },
+        { label: "Ceramic Coating", value: "ceramic" },
+        { label: "Other", value: "other" }
+      ],
+      required: true 
+    },
+    { name: "message", label: "Vehicle Make/Model & Details", type: "textarea", required: true }
+  ];
+
+  return (
+    <section id="contact" className="py-24 bg-neutral-50 dark:bg-neutral-900">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+          <div>
+            <Heading>Get a Free Quote</Heading>
+            <Subheading className="mt-4 mb-10">
+              Ready to give your car the treatment it deserves? Fill out the form and we'll get back to you with a custom quote.
+            </Subheading>
+
+            <div className="space-y-8">
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+                  <Phone className="w-6 h-6 text-blue-600" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Call or Text</h4>
+                  <p className="text-neutral-600 dark:text-neutral-400">(319) 555-0123</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+                  <Mail className="w-6 h-6 text-blue-600" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Email Us</h4>
+                  <p className="text-neutral-600 dark:text-neutral-400">info@apexdetailingcr.com</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+                  <MapPin className="w-6 h-6 text-blue-600" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Location</h4>
+                  <p className="text-neutral-600 dark:text-neutral-400">Cedar Rapids, IA</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+                  <Clock className="w-6 h-6 text-blue-600" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-lg">Hours</h4>
+                  <p className="text-neutral-600 dark:text-neutral-400">Mon-Sat: 8:00 AM - 6:00 PM</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-neutral-800 p-8 rounded-2xl shadow-xl">
+            <KleapForm 
+              formId="contact-apex" 
+              title="Quote Request" 
+              fields={fields} 
+            />
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}