515 lines
20 KiB
TypeScript
515 lines
20 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 {
|
|
ShoppingCart,
|
|
CreditCard,
|
|
Package,
|
|
Search,
|
|
Heart,
|
|
Users,
|
|
BarChart3,
|
|
Target,
|
|
CheckCircle,
|
|
Star,
|
|
Zap,
|
|
Shield,
|
|
Globe,
|
|
Award,
|
|
Clock,
|
|
} 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>eCommerce & Marketplace Development Services | WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/industries/commerce/ecommerce-marketplaces" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="eCommerce & Marketplace Development Services | WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
|
|
/>
|
|
<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="eCommerce & Marketplace Development Services | WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
|
|
/>
|
|
<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]">eCommerce & Marketplaces</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">
|
|
In a highly competitive digital retail landscape, businesses
|
|
need more than just an online store; they require platforms
|
|
that offer seamless user experiences, handle high traffic
|
|
volumes, integrate complex logistics, and provide robust
|
|
security for transactions (PCI DSS). Building and scaling
|
|
multi-vendor marketplaces adds further complexity in managing
|
|
diverse sellers and customer expectations.
|
|
</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 eCommerce & Marketplace Solution
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
WDI specializes in developing custom eCommerce platforms and
|
|
dynamic online marketplaces. We create solutions that
|
|
prioritize user experience, robust backend operations, secure
|
|
payment processing, and scalable architecture, designed to
|
|
maximize sales, enhance customer loyalty, and efficiently
|
|
manage diverse product catalogs and vendors.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Features Grid Component
|
|
const IconWithDescriptionGrid = () => {
|
|
const features = [
|
|
{
|
|
icon: ShoppingCart,
|
|
title: "Custom Online Storefronts",
|
|
description:
|
|
"Tailored design and functionality for unique brand experiences, optimizing product discovery and conversion.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Multi-Vendor Marketplace Functionality",
|
|
description:
|
|
"Comprehensive features for vendor onboarding, individual storefronts, commission management, and order splitting.",
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
title: "Secure Payment Gateways",
|
|
description:
|
|
"Integration with leading payment providers (e.g., Stripe, PayPal, Razorpay) ensuring PCI DSS compliance and diverse payment options.",
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: "Inventory & Order Management",
|
|
description:
|
|
"Real-time stock tracking, automated order processing, fulfillment, and returns management.",
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Customer Personalization & Recommendations",
|
|
description:
|
|
"AI-driven product recommendations, personalized content, and dynamic pricing based on user behavior.",
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: "Search & Filtering Capabilities",
|
|
description:
|
|
"Advanced search, faceted navigation, and intelligent filtering to help users find products quickly.",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "CRM & Loyalty Program Integration",
|
|
description:
|
|
"Seamless connectivity with customer relationship management systems and tools for loyalty programs to boost retention.",
|
|
},
|
|
];
|
|
|
|
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 eCommerce & Marketplaces
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Comprehensive tools to create compelling online shopping experiences
|
|
that drive sales and customer loyalty.
|
|
</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.01 }}
|
|
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: Target,
|
|
title: "Conversion-Driven Design",
|
|
description:
|
|
"Our focus is on optimizing user journeys to maximize sales and minimize abandoned carts.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Scalable Architecture",
|
|
description:
|
|
"Building platforms ready for massive traffic spikes (e.g., festive sales) and limitless product catalogs.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "PCI DSS & Security Expertise",
|
|
description:
|
|
"Ensuring all payment processing and customer data handling adhere to the highest security standards.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Complex Integrations",
|
|
description:
|
|
"Seamlessly connecting with ERP, CRM, inventory, shipping, and marketing automation systems.",
|
|
},
|
|
];
|
|
|
|
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 eCommerce & Marketplace Development?
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Leverage our expertise to create online commerce platforms that
|
|
truly drive business success.
|
|
</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.01 }}
|
|
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: "Custom Fashion eCommerce Platform with Virtual Try-On",
|
|
problem:
|
|
"A fashion brand needed a unique online store that offered advanced product visualization and personalization.",
|
|
solution:
|
|
"WDI built a bespoke eCommerce platform integrated with AR virtual try-on features and an AI-powered styling assistant.",
|
|
results:
|
|
"Increased online sales by 50% within six months and reduced product returns by 15%.",
|
|
metrics: ["50% ↑ Sales", "15% ↓ Returns", "AR Integration"],
|
|
},
|
|
{
|
|
title: "B2B Construction Materials Marketplace",
|
|
problem:
|
|
"A client sought to create a specialized online marketplace connecting construction material suppliers with contractors.",
|
|
solution:
|
|
"Developed a multi-vendor B2B marketplace with advanced search, bulk ordering, quoting features, and integrated logistics.",
|
|
results:
|
|
"Facilitated transactions totaling $5M+ in its first year, significantly streamlining procurement for contractors.",
|
|
metrics: ["$5M+ Volume", "B2B Focused", "Multi-Vendor"],
|
|
},
|
|
];
|
|
|
|
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">
|
|
eCommerce & Marketplace Success Stories
|
|
</h2>
|
|
<p className="text-lg text-gray-400 max-w-3xl mx-auto">
|
|
Real results from our eCommerce platform implementations that
|
|
transformed 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 ecommerceFAQs = [
|
|
{
|
|
question:
|
|
"What eCommerce platforms (e.g., Shopify, Magento, custom builds) do you specialize in?",
|
|
answer:
|
|
"We work with all major platforms including Shopify, Magento, WooCommerce, and BigCommerce, but we specialize in custom-built solutions using modern technologies like React, Node.js, and cloud-native architectures for maximum flexibility and performance.",
|
|
},
|
|
{
|
|
question:
|
|
"How do you ensure scalability for high traffic volumes and large product catalogs?",
|
|
answer:
|
|
"We implement cloud-native architectures with auto-scaling, CDN integration, database optimization, caching strategies, and microservices architecture. Our platforms are designed to handle millions of products and thousands of concurrent users without performance degradation.",
|
|
},
|
|
{
|
|
question:
|
|
"What security measures do you implement for payment processing (PCI DSS) and customer data?",
|
|
answer:
|
|
"We ensure full PCI DSS compliance with tokenization, encryption at rest and in transit, secure payment gateway integrations, regular security audits, and implementation of security best practices throughout the development lifecycle.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you integrate with third-party logistics (3PL) providers and ERP systems?",
|
|
answer:
|
|
"Yes, we have extensive experience integrating with major 3PL providers (FedEx, UPS, DHL), warehouse management systems, and ERP platforms (SAP, Oracle, NetSuite) to create seamless order fulfillment workflows.",
|
|
},
|
|
{
|
|
question:
|
|
"Do you offer solutions for customer personalization and loyalty programs?",
|
|
answer:
|
|
"Absolutely! We implement AI-driven recommendation engines, personalized shopping experiences, dynamic pricing, and comprehensive loyalty program features including points systems, tier-based rewards, and targeted promotions.",
|
|
},
|
|
];
|
|
|
|
export const EcommerceMarketplaces = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#0E0E0E]">
|
|
{/* <Navigation /> */}
|
|
|
|
<HeroBanner
|
|
category="Commerce & Consumer"
|
|
title="eCommerce & Marketplaces"
|
|
description="Build high-performing, scalable, and conversion-optimized eCommerce websites and multi-vendor marketplaces that drive sales and foster growth."
|
|
primaryCTA={{
|
|
text: "Get a Free Consultation",
|
|
// href: "/contact/schedule-a-discovery-call"
|
|
href: "/start-a-project",
|
|
}}
|
|
secondaryCTA={{
|
|
text: "View eCommerce Case Studies",
|
|
href: "/case-studies",
|
|
}}
|
|
/>
|
|
|
|
<ProblemSolutionBlock />
|
|
|
|
<IconWithDescriptionGrid />
|
|
|
|
<ThreeColumnFeatureBlock />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<ProcessSection />
|
|
</div>
|
|
|
|
<CaseStudyHighlightGrid />
|
|
|
|
<div className="bg-[#0E0E0E]">
|
|
<FAQSection
|
|
title="eCommerce & Marketplace FAQs"
|
|
subtitle="Get answers to common questions about our eCommerce and marketplace development services."
|
|
faqs={ecommerceFAQs}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-black">
|
|
<SplitCallToAction />
|
|
</div>
|
|
|
|
{/* <Footer /> */}
|
|
</div>
|
|
);
|
|
};
|