Update components/lead-form.tsx

components/lead-form.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { Container } from "@/components/container";
+import { KleapForm } from "@/components/kleap-form";
+import { motion } from "framer-motion";
+
+export function LeadForm() {
+  const fields = [
+    {
+      name: "full_name",
+      label: "Full Name / পূর্ণ নাম",
+      type: "text" as const,
+      required: true,
+      placeholder: "Enter your full name"
+    },
+    {
+      name: "phone",
+      label: "Phone Number / ফোন নম্বর",
+      type: "tel" as const,
+      required: true,
+      placeholder: "+880 1XXX XXXXXX"
+    },
+    {
+      name: "preferred_country",
+      label: "Preferred Country / পছন্দের দেশ",
+      type: "select" as const,
+      required: true,
+      options: [
+        "Saudi Arabia",
+        "UAE",
+        "Qatar",
+        "Kuwait",
+        "Oman",
+        "Malaysia",
+        "Singapore",
+        "Other"
+      ]
+    },
+    {
+      name: "skill_interest",
+      label: "Skill Interest / দক্ষতার আগ্রহ",
+      type: "select" as const,
+      required: true,
+      options: [
+        "Construction",
+        "Hospitality",
+        "Healthcare",
+        "Technical/IT",
+        "Manufacturing",
+        "Agriculture",
+        "Other"
+      ]
+    }
+  ];
+
+  return (
+    <section id="lead-form" className="py-20 bg-gradient-to-b from-neutral-50 to-white">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="max-w-2xl mx-auto"
+        >
+          {/* Section Header */}
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold text-[#7A1F2B] mb-4">
+              আজই শুরু করুন আপনার গ্লোবাল ক্যারিয়ার
+            </h2>
+            <h3 className="text-2xl md:text-3xl font-semibold text-neutral-700 mb-4">
+              Start Your Global Career Today
+            </h3>
+            <p className="text-neutral-600">
+              বিনামূল্যে পরামর্শের জন্য ফর্মটি পূরণ করুন • Fill the form for free consultation
+            </p>
+          </div>
+          
+          {/* Form Card */}
+          <div className="bg-white rounded-2xl shadow-2xl p-8 md:p-10 border-t-4 border-[#7A1F2B]">
+            <KleapForm
+              formId="global-career-lead"
+              title="Start Your Global Career Today"
+              fields={fields}
+              submitButtonText="Get Free Consultation"
+              submitButtonClassName="bg-[#7A1F2B] hover:bg-[#5a1620] text-white font-semibold py-6 text-lg"
+            />
+          </div>
+          
+          {/* Trust Badge */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.3 }}
+            className="text-center mt-8"
+          >
+            <p className="text-neutral-600 text-sm">
+              🔒 আপনার তথ্য সম্পূর্ণ নিরাপদ এবং গোপনীয় থাকবে
+            </p>
+            <p className="text-neutral-500 text-xs mt-1">
+              Your information is completely safe and confidential
+            </p>
+          </motion.div>
+        </motion.div>
+      </Container>
+    </section>
+  );
+}