Update components/why-choose.tsx

components/why-choose.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { CheckCircle2 } from "lucide-react";
+
+export function WhyChoose() {
+  const reasons = [
+    {
+      title: "Honest Advice",
+      description: "No hidden agendas. We don't sell packages or earn commissions from agencies."
+    },
+    {
+      title: "Multiple Options",
+      description: "We give you 2-3 agency options so you can choose what works best for you."
+    },
+    {
+      title: "No Hidden Agenda",
+      description: "We're independent consultants. Your satisfaction is our only goal."
+    },
+    {
+      title: "Budget-Friendly",
+      description: "Our consultation is completely free. You only pay the agency you choose."
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-neutral-50">
+      <Container>
+        <div className="text-center mb-12">
+          <Heading className="text-3xl md:text-4xl font-bold text-neutral-900">
+            Why Choose Badnaam Safar?
+          </Heading>
+          <p className="mt-4 text-lg text-neutral-600 max-w-2xl mx-auto">
+            We're different because we put your needs first, not our profits.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+          {reasons.map((reason, index) => (
+            <div key={index} className="flex gap-4">
+              <div className="flex-shrink-0">
+                <CheckCircle2 className="h-6 w-6 text-green-700" />
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold text-neutral-900 mb-2">{reason.title}</h3>
+                <p className="text-neutral-600">{reason.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}