449 lines
19 KiB
TypeScript
449 lines
19 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 {
|
|
Smartphone, Users, MapPin, CreditCard, Clock,
|
|
Star, BarChart3, Target, CheckCircle, Zap,
|
|
Shield, Globe, Award, Settings, Bell
|
|
} from "lucide-react";
|
|
import { Helmet } from "react-helmet-async";
|
|
|
|
// Problem Solution Block Component
|
|
const ProblemSolutionBlock = () => {
|
|
return (
|
|
<section className="py-20 bg-[#0E0E0E]">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>On-Demand Services by WDI | Custom Mobility Solutions</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/industries/mobility/on-demand-services" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="On-Demand Services by WDI | Custom Mobility Solutions" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="On-Demand Services by WDI | Custom Mobility Solutions" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<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]">On-Demand Services</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">
|
|
On-demand services require instant matching between customers and service providers, real-time tracking, flexible pricing models, and quality assurance. Challenges include managing supply and demand imbalances, ensuring service quality, coordinating logistics, and building trust between strangers in digital marketplaces.
|
|
</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 On-Demand Services Solution
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
WDI specializes in developing comprehensive on-demand service platforms. We create solutions for home services, healthcare, beauty, tutoring, and professional services, focusing on instant matching algorithms, real-time tracking, secure payments, and quality management to ensure exceptional customer and service provider experiences.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Features Grid Component
|
|
const IconWithDescriptionGrid = () => {
|
|
const features = [
|
|
{
|
|
icon: Users,
|
|
title: "Service Provider & Customer Matching",
|
|
description: "Intelligent algorithms that match customers with qualified service providers based on location, availability, and requirements."
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: "Real-time Location Services",
|
|
description: "GPS tracking for service providers, location-based search, and real-time service tracking and updates."
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Flexible Scheduling & Booking",
|
|
description: "Instant bookings, advance scheduling, recurring services, and automated availability management."
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Secure Payment Processing",
|
|
description: "Multiple payment options, automatic billing, tip handling, and secure escrow systems for service completion."
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Rating & Review Systems",
|
|
description: "Comprehensive feedback mechanisms, quality scoring, and reputation management for service providers."
|
|
},
|
|
{
|
|
icon: Settings,
|
|
title: "Service Management Tools",
|
|
description: "Provider onboarding, background verification, service catalog management, and performance analytics."
|
|
},
|
|
{
|
|
icon: Bell,
|
|
title: "Real-time Communication & Notifications",
|
|
description: "In-app messaging, push notifications, status updates, and automated communication workflows."
|
|
}
|
|
];
|
|
|
|
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 On-Demand Services
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Comprehensive tools to create seamless on-demand experiences that connect customers with service providers efficiently.
|
|
</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: Zap,
|
|
title: "Instant Matching Algorithms",
|
|
description: "Advanced algorithms that instantly connect customers with the best available service providers."
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Trust & Safety Systems",
|
|
description: "Comprehensive verification, background checks, insurance integration, and dispute resolution mechanisms."
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Marketplace Analytics & Optimization",
|
|
description: "Data-driven insights for supply-demand balancing, pricing optimization, and marketplace growth."
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Multi-Service Platform Expertise",
|
|
description: "Experience across diverse on-demand verticals from home services to professional consultations."
|
|
}
|
|
];
|
|
|
|
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 On-Demand Service Development?
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Leverage our expertise to create on-demand platforms that truly serve modern consumer 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: "Home Services Marketplace Platform",
|
|
problem: "A startup needed a comprehensive platform connecting homeowners with local service professionals for repairs and maintenance.",
|
|
solution: "WDI built a full-featured marketplace with professional verification, service catalogs, instant booking, and quality management.",
|
|
results: "Facilitated 50,000+ service bookings in the first year with 90% customer satisfaction and successful provider onboarding.",
|
|
metrics: ["50K+ Bookings", "90% Satisfaction", "Home Services"]
|
|
},
|
|
{
|
|
title: "On-Demand Healthcare Services Platform",
|
|
problem: "A healthcare company wanted to provide on-demand medical consultations and home healthcare services.",
|
|
solution: "Developed a HIPAA-compliant platform with provider matching, secure consultations, appointment management, and patient records.",
|
|
results: "Served 10,000+ patients with reduced wait times by 70% and improved healthcare accessibility in underserved areas.",
|
|
metrics: ["10K+ Patients", "70% ↓ Wait Times", "Healthcare"]
|
|
}
|
|
];
|
|
|
|
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">
|
|
On-Demand Services Success Stories
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Real results from our on-demand platform implementations that transformed service delivery.
|
|
</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 onDemandServicesFAQs = [
|
|
{
|
|
question: "How do you handle service provider verification and background checks?",
|
|
answer: "We implement comprehensive verification systems including identity verification, background checks, license validation, insurance verification, and skills assessment. Our platforms integrate with third-party verification services and maintain detailed provider profiles."
|
|
},
|
|
{
|
|
question: "What matching algorithms do you use to connect customers with service providers?",
|
|
answer: "We use sophisticated algorithms considering factors like location proximity, provider availability, skills match, customer preferences, ratings history, and service urgency. Our AI-powered systems continuously optimize matching for better outcomes."
|
|
},
|
|
{
|
|
question: "How do you ensure quality control and customer satisfaction?",
|
|
answer: "We implement multi-layered quality systems including pre-service verification, real-time monitoring, post-service reviews, quality scoring, dispute resolution, and continuous feedback loops. Poor performers are automatically flagged for review."
|
|
},
|
|
{
|
|
question: "Can you integrate with existing business systems and payment processors?",
|
|
answer: "Yes, we have extensive experience integrating with CRM systems, accounting software, calendar applications, and payment processors. We ensure seamless data flow and can work with your existing business workflows."
|
|
},
|
|
{
|
|
question: "What pricing models and commission structures do you support?",
|
|
answer: "We support various pricing models including fixed pricing, hourly rates, dynamic pricing, subscription models, and auction-based pricing. Commission structures can be percentage-based, flat fees, or tiered systems with automated calculation and distribution."
|
|
}
|
|
];
|
|
|
|
export const OnDemandServices = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#0E0E0E]">
|
|
<Navigation />
|
|
|
|
<HeroBanner
|
|
category="Mobility & Logistics"
|
|
title="On-Demand Services"
|
|
description="Connect customers with service providers instantly through intelligent, scalable, and user-friendly on-demand service platforms that transform how services are delivered."
|
|
primaryCTA={{
|
|
text: "Get a Free Consultation",
|
|
// href: "/contact/schedule-a-discovery-call"
|
|
href: "/start-a-project"
|
|
}}
|
|
secondaryCTA={{
|
|
text: "View On-Demand Case Studies",
|
|
href: "/case-studies"
|
|
}}
|
|
/>
|
|
|
|
<ProblemSolutionBlock />
|
|
|
|
<IconWithDescriptionGrid />
|
|
|
|
<ThreeColumnFeatureBlock />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<ProcessSection />
|
|
</div>
|
|
|
|
<CaseStudyHighlightGrid />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<FAQSection
|
|
title="On-Demand Services FAQs"
|
|
subtitle="Get answers to common questions about our on-demand platform development services."
|
|
faqs={onDemandServicesFAQs}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-black">
|
|
<SplitCallToAction />
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}; |