Update components/contact-form.tsx

components/contact-form.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { KleapForm, KleapFormField } from "@/components/kleap-form";
+import { Card } from "@/components/ui/card";
+import { Phone, Mail, MapPin } from "lucide-react";
+
+export function ContactForm() {
+  const fields: KleapFormField[] = [
+    { name: "name", label: "Full Name", type: "text", required: true },
+    { name: "email", label: "Work Email", type: "email", required: true },
+    { name: "company", label: "Company Name", type: "text", required: true },
+    { name: "phone", label: "Phone Number", type: "tel", required: false },
+    { 
+      name: "service", 
+      label: "Interested In", 
+      type: "select", 
+      options: ["Cold Email", "LinkedIn Outreach", "Appointment Setting", "Full Service"],
+      required: true 
+    },
+    { name: "message", label: "How can we help?", type: "textarea", required: true },
+  ];
+
+  return (
+    <section id="contact" className="py-24">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+          <div>
+            <Heading>Ready to grow?</Heading>
+            <Subheading className="mt-4">
+              Schedule a free strategy session with our lead generation experts. We'll analyze your current process and show you how to scale.
+            </Subheading>
+            
+            <div className="mt-12 space-y-8">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                  <Phone className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Call us</p>
+                  <p className="text-lg font-semibold">0721 307 788</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                  <Mail className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Email us</p>
+                  <p className="text-lg font-semibold">hello@astraleads.com</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                  <MapPin className="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Visit us</p>
+                  <p className="text-lg font-semibold">London, United Kingdom</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <Card className="p-8 shadow-xl border-primary/10">
+            <KleapForm 
+              formId="contact-astra" 
+              title="Get a Free Audit" 
+              fields={fields} 
+            />
+          </Card>
+        </div>
+      </Container>
+    </section>
+  );
+}