From 87bea29cda6f583174a662f8f9d2d7a1d457a3e7 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 12:59:11 +0000
Subject: [PATCH] Update app/how-it-works/page.tsx

---
 app/how-it-works/page.tsx | 122 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 app/how-it-works/page.tsx

diff --git a/app/how-it-works/page.tsx b/app/how-it-works/page.tsx
new file mode 100644
index 0000000..111bb31
--- /dev/null
+++ b/app/how-it-works/page.tsx
@@ -0,0 +1,122 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Footer } from "@/components/footer";
+import { Button } from "@/components/ui/button";
+import { MessageCircle, Search, Users, CheckCircle } from "lucide-react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "How It Works - Badnaam Safar",
+  description: "Learn how our simple 4-step process helps you find the perfect travel agency and trip for your budget and preferences.",
+};
+
+export default function HowItWorksPage() {
+  const steps = [
+    {
+      number: "1",
+      icon: <MessageCircle className="h-12 w-12 text-white" />,
+      title: "You Contact Us on WhatsApp",
+      description: "Start by reaching out to us on WhatsApp. Tell us you're planning a trip and need help choosing the right option.",
+      details: [
+        "No need to fill long forms",
+        "Quick and easy conversation",
+        "Available on your schedule"
+      ]
+    },
+    {
+      number: "2",
+      icon: <Search className="h-12 w-12 text-white" />,
+      title: "We Understand Your Budget, Dates & Preferences",
+      description: "We'll ask you a few simple questions to understand what you're looking for.",
+      details: [
+        "What's your budget?",
+        "When do you want to travel?",
+        "What kind of trip are you interested in? (solo, group, adventure, relaxation, etc.)",
+        "Any specific destinations or preferences?"
+      ]
+    },
+    {
+      number: "3",
+      icon: <Users className="h-12 w-12 text-white" />,
+      title: "We Suggest 2–3 Suitable Travel Agencies",
+      description: "Based on your needs, we'll recommend 2-3 trusted travel agencies that match your budget and style.",
+      details: [
+        "We compare their packages and pricing",
+        "We explain the pros and cons of each option",
+        "We give you honest, unbiased advice"
+      ]
+    },
+    {
+      number: "4",
+      icon: <CheckCircle className="h-12 w-12 text-white" />,
+      title: "You Choose and Book Directly with the Agency",
+      description: "You pick the agency and package that feels right for you, then book directly with them.",
+      details: [
+        "You make the final decision",
+        "You handle payment directly with the agency",
+        "We're here if you need any clarification"
+      ]
+    }
+  ];
+
+  const handleWhatsAppClick = () => {
+    window.open("https://wa.me/919999999999?text=Hi, I need help planning my trip", "_blank");
+  };
+
+  return (
+    <main className="min-h-screen">
+      <section className="py-20 md:py-32 bg-gradient-to-b from-neutral-50 to-white">
+        <Container>
+          <div className="max-w-4xl mx-auto text-center mb-16">
+            <Heading className="text-4xl md:text-5xl font-bold text-neutral-900 mb-6">
+              How It Works
+            </Heading>
+            <p className="text-lg text-neutral-600">
+              Getting started is simple. Just four easy steps to find your perfect trip.
+            </p>
+          </div>
+          
+          <div className="max-w-4xl mx-auto space-y-12 mb-16">
+            {steps.map((step, index) => (
+              <div key={index} className="flex flex-col md:flex-row gap-6 items-start">
+                <div className="flex-shrink-0">
+                  <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-green-700">
+                    {step.icon}
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <div className="text-sm font-semibold text-green-700 mb-2">STEP {step.number}</div>
+                  <h3 className="text-2xl font-bold text-neutral-900 mb-3">{step.title}</h3>
+                  <p className="text-neutral-600 mb-4">{step.description}</p>
+                  <ul className="space-y-2">
+                    {step.details.map((detail, idx) => (
+                      <li key={idx} className="flex items-start gap-2 text-neutral-700">
+                        <CheckCircle className="h-5 w-5 text-green-700 flex-shrink-0 mt-0.5" />
+                        <span>{detail}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            ))}
+          </div>
+          
+          <div className="text-center">
+            <Button 
+              size="lg" 
+              className="bg-green-700 hover:bg-green-800 text-white px-8 py-6 text-lg"
+              onClick={handleWhatsAppClick}
+            >
+              <MessageCircle className="mr-2 h-5 w-5" />
+              Get Started Now
+            </Button>
+            <p className="text-sm text-neutral-500 mt-4">
+              Free consultation • No obligations • Honest advice
+            </p>
+          </div>
+        </Container>
+      </section>
+      <Footer />
+    </main>
+  );
+}