Update app/how-it-works/page.tsx
This commit is contained in:
parent
a678c450f7
commit
87bea29cda
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue