466 lines
18 KiB
TypeScript
466 lines
18 KiB
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { HeroBanner } from "../components/HeroBanner";
|
|
import { ProcessSection } from "../components/ProcessSection";
|
|
import { WhyChooseWDI } from "../components/WhyChooseWDI";
|
|
import { FAQSection } from "../components/FAQSection";
|
|
import { SplitCallToAction } from "../components/SplitCallToAction";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Button } from "../components/ui/button";
|
|
import {
|
|
Search,
|
|
MapPin,
|
|
CreditCard,
|
|
Users,
|
|
Calendar,
|
|
Globe,
|
|
Shield,
|
|
Target,
|
|
CheckCircle,
|
|
Star,
|
|
Zap,
|
|
Database,
|
|
Clock,
|
|
Award,
|
|
} from "lucide-react";
|
|
|
|
// Problem Solution Block Component
|
|
const ProblemSolutionBlock = () => {
|
|
return (
|
|
<section className="py-20 bg-[#0E0E0E]">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-6xl mx-auto"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
|
|
<span className="text-white">
|
|
Addressing the Core Challenges of{" "}
|
|
</span>
|
|
<span className="text-[#E5195E]">Travel & Booking Systems</span>
|
|
</h2>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-8">
|
|
<h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-red-500/20 rounded-lg flex items-center justify-center">
|
|
<Target className="w-4 h-4 text-red-400" />
|
|
</div>
|
|
The Challenge
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
The travel industry demands complex systems that can manage
|
|
vast inventories (flights, hotels, activities), offer
|
|
real-time availability, handle secure payments, and provide a
|
|
seamless, personalized booking experience. Challenges include
|
|
integrating with diverse global distribution systems (GDS),
|
|
ensuring data accuracy, and managing fluctuating demand.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8">
|
|
<h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
<CheckCircle className="w-4 h-4 text-green-400" />
|
|
</div>
|
|
Our Travel & Booking System Solution
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
WDI specializes in developing robust and user-centric travel
|
|
and booking platforms. We create solutions for flight, hotel,
|
|
and tour reservations, car rentals, and package holiday
|
|
bookings, focusing on powerful search capabilities, secure
|
|
payment processing, seamless integrations, and intuitive user
|
|
experiences to maximize conversions and operational
|
|
efficiency.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Features Grid Component
|
|
const IconWithDescriptionGrid = () => {
|
|
const features = [
|
|
{
|
|
icon: Search,
|
|
title: "Comprehensive Search & Filtering",
|
|
description:
|
|
"Advanced search engines for flights, hotels, tours, and more, with granular filtering options.",
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Real-time Availability & Pricing",
|
|
description:
|
|
"Live updates on inventory and dynamic pricing from various suppliers and GDSs.",
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Secure Booking & Payment Gateway",
|
|
description:
|
|
"Seamless and secure checkout processes with integration of diverse payment methods (credit cards, digital wallets).",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "User Accounts & Booking Management",
|
|
description:
|
|
"Personalized dashboards for users to view, manage, and modify their bookings.",
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Personalized Recommendations",
|
|
description:
|
|
"AI-driven suggestions for destinations, hotels, and activities based on user preferences and past travel.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Multi-Currency & Multi-Language Support",
|
|
description:
|
|
"Global readiness with support for various currencies and languages to cater to diverse users.",
|
|
},
|
|
{
|
|
icon: Database,
|
|
title: "Integrations with GDS/APIs",
|
|
description:
|
|
"Seamless connectivity with Global Distribution Systems (Amadeus, Sabre), hotel APIs, and other travel service providers.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Powerful Features for Your Travel & Booking Systems
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Comprehensive tools to create seamless travel booking experiences
|
|
that maximize conversions and customer satisfaction.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-[#E5195E]/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Three Column Feature Block Component
|
|
const ThreeColumnFeatureBlock = () => {
|
|
const advantages = [
|
|
{
|
|
icon: Globe,
|
|
title: "Deep TravelTech Expertise",
|
|
description:
|
|
"Years of experience navigating the complexities of GDS, APIs, and the unique demands of the travel sector.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Performance & Scalability",
|
|
description:
|
|
"Building highly optimized systems that can handle millions of searches and bookings without compromising speed.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Robust Security for Payments",
|
|
description:
|
|
"Ensuring PCI DSS compliance and advanced fraud detection for all financial transactions.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Intuitive User Experience",
|
|
description:
|
|
"Designing user-friendly interfaces that simplify complex booking processes, enhancing customer satisfaction and loyalty.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-[#0E0E0E]">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Why Partner with WDI for Travel & Booking System Development?
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Leverage our expertise to create travel platforms that truly serve
|
|
modern travelers' needs.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-[#E5195E]/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{advantage.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{advantage.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Case Study Component
|
|
const CaseStudyHighlightGrid = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "Flight & Hotel Booking Aggregator Platform",
|
|
problem:
|
|
"A travel startup aimed to create a comprehensive platform aggregating flights and hotels from multiple providers with competitive pricing.",
|
|
solution:
|
|
"WDI developed a robust booking engine with advanced search, real-time comparison, and seamless GDS integrations.",
|
|
results:
|
|
"Processed over 1 million bookings in its first year, establishing the client as a competitive online travel agency.",
|
|
metrics: ["1M+ Bookings", "GDS Integration", "Multi-Provider"],
|
|
},
|
|
{
|
|
title: "Custom Tour & Activity Booking System",
|
|
problem:
|
|
"A tour operator needed an intuitive online system for customers to browse, book, and manage adventure tours and activities.",
|
|
solution:
|
|
"Built a custom booking platform with interactive itinerary builders, dynamic pricing, and secure payment processing.",
|
|
results:
|
|
"Increased direct bookings by 30% and reduced manual booking effort by 25%.",
|
|
metrics: ["30% ↑ Bookings", "25% ↓ Manual Work", "Tour Operator"],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Travel & Booking System Success Stories
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Real results from our travel booking platform implementations that
|
|
transformed travel businesses.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-8">
|
|
{caseStudies.map((study, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
|
|
<CardContent className="p-8">
|
|
<div className="flex gap-2 mb-4">
|
|
{study.metrics.map((metric, i) => (
|
|
<Badge
|
|
key={i}
|
|
variant="secondary"
|
|
className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
|
|
>
|
|
{metric}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{study.title}
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Problem:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.problem}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Solution:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.solution}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-300 mb-2">
|
|
Results:
|
|
</h4>
|
|
<p className="text-gray-400 text-sm">{study.results}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQ Data
|
|
const travelBookingFAQs = [
|
|
{
|
|
question:
|
|
"What are your capabilities for integrating with GDS (Global Distribution Systems) like Amadeus or Sabre?",
|
|
answer:
|
|
"We have extensive experience integrating with major GDS platforms including Amadeus, Sabre, and Travelport. Our team handles complex API integrations, real-time inventory management, and seamless data synchronization to ensure accurate availability and pricing information.",
|
|
},
|
|
{
|
|
question:
|
|
"How do you ensure real-time availability and dynamic pricing for bookings?",
|
|
answer:
|
|
"We implement robust caching strategies, real-time API connections with suppliers, and intelligent data management systems. Our platforms handle millions of price and availability checks while maintaining sub-second response times through optimized database queries and CDN integration.",
|
|
},
|
|
{
|
|
question:
|
|
"What security measures do you implement for online payments and sensitive customer data?",
|
|
answer:
|
|
"We ensure full PCI DSS compliance with end-to-end encryption, tokenization, secure API communications, and regular security audits. All customer data is protected with industry-standard security protocols and compliance frameworks.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you develop solutions for specific travel niches (e.g., corporate travel, adventure tours, cruises)?",
|
|
answer:
|
|
"Absolutely! We specialize in creating tailored solutions for various travel verticals including corporate travel management, adventure tourism, cruise bookings, luxury travel, and group travel. Each solution is customized to meet specific industry requirements and user behaviors.",
|
|
},
|
|
{
|
|
question:
|
|
"Do you offer post-booking management features like itinerary changes and cancellations?",
|
|
answer:
|
|
"Yes, our platforms include comprehensive post-booking management with features for itinerary modifications, cancellations, refund processing, travel insurance integration, and automated customer communications. We also provide mobile-friendly booking management interfaces.",
|
|
},
|
|
];
|
|
|
|
export const TravelBookingSystems = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#0E0E0E]">
|
|
<Navigation />
|
|
|
|
<HeroBanner
|
|
category="Commerce & Consumer"
|
|
title="Travel & Booking Systems"
|
|
description="Revolutionize travel experiences and streamline reservations with intuitive, secure, and highly efficient booking platforms for flights, hotels, tours, and more."
|
|
primaryCTA={{
|
|
text: "Get a Free Consultation",
|
|
// href: "/contact/schedule-a-discovery-call"
|
|
href: "/start-a-project",
|
|
}}
|
|
secondaryCTA={{
|
|
text: "View TravelTech Case Studies",
|
|
href: "/case-studies",
|
|
}}
|
|
/>
|
|
|
|
<ProblemSolutionBlock />
|
|
|
|
<IconWithDescriptionGrid />
|
|
|
|
<ThreeColumnFeatureBlock />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<ProcessSection />
|
|
</div>
|
|
|
|
<CaseStudyHighlightGrid />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<FAQSection
|
|
title="Travel & Booking System FAQs"
|
|
subtitle="Get answers to common questions about our travel booking platform development services."
|
|
faqs={travelBookingFAQs}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-black">
|
|
<SplitCallToAction />
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|