Update components/contact-section.tsx

components/contact-section.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { KleapForm, KleapFormField } from "@/components/kleap-form";
+
+export function ContactSection() {
+  const fields: KleapFormField[] = [
+    { name: "name", label: "Full Name", type: "text", required: true },
+    { name: "email", label: "Email Address", type: "email", required: true },
+    { name: "service", label: "Interested Service", type: "select", options: [
+      "AI Solutions", "Digital Transformation", "Security Services", "Web Design", "App Development", "Cloud Services", "Tax Filing", "Event Security"
+    ], required: true },
+    { name: "message", label: "How can we help?", type: "textarea", required: true },
+  ];
+
+  return (
+    <section id="contact" className="py-20">
+      <Container>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <Heading>Get in Touch</Heading>
+            <Subheading className="mt-4">
+              Ready to transform your operations? Contact us today for a consultation.
+            </Subheading>
+          </div>
+          <div className="bg-white p-8 rounded-2xl shadow-xl border border-neutral-100">
+            <KleapForm 
+              formId="contact-us" 
+              title="Contact Predator AI" 
+              fields={fields} 
+            />
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}