1535 lines
63 KiB
TypeScript
1535 lines
63 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import {
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
BarChart3,
|
|
Building,
|
|
Building2,
|
|
Calendar,
|
|
CheckCircle,
|
|
Code,
|
|
Cog,
|
|
DollarSign,
|
|
Gauge,
|
|
Globe,
|
|
Handshake,
|
|
Headphones,
|
|
Lightbulb,
|
|
MessageSquare,
|
|
PersonStanding,
|
|
Rocket,
|
|
Search,
|
|
Settings,
|
|
Shield,
|
|
Target,
|
|
TrendingUp,
|
|
UserPlus,
|
|
Users,
|
|
Users2,
|
|
Wand2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
import { Footer } from "../components/Footer";
|
|
import { Navigation } from "../components/Navigation";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "../components/ui/accordion";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Button } from "../components/ui/button";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Helmet } from "react-helmet-async";
|
|
|
|
// Dedicated Offshore Development Centers Hero Section
|
|
const DedicatedOffshoreODCHero = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Offshore Development Centers (ODC) Services | WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/solutions/dedicated-offshore-odc" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Offshore Development Centers (ODC) Services | WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
|
|
/>
|
|
<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="Offshore Development Centers (ODC) Services | WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
|
|
/>
|
|
<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">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Solutions Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">
|
|
Solutions
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
|
Dedicated Offshore Development Centers (ODC)
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Scale your development capabilities rapidly and cost-effectively
|
|
with your own dedicated team of expert offshore developers.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
|
<span>Get a Free Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Lightbulb className="w-5 h-5 flex-shrink-0" />
|
|
<span>Learn About Our ODC Model</span>
|
|
</div>
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with Global Team Collaboration Visualization */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex flex-col items-center"
|
|
>
|
|
{/* Global Team Collaboration Scene */}
|
|
<div className="relative w-full max-w-2xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="relative"
|
|
>
|
|
{/* Main ODC Global Dashboard */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
|
|
>
|
|
{/* Global Team Network */}
|
|
<div className="relative mb-8">
|
|
{/* Network Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.0 }}
|
|
className="text-center mb-6"
|
|
>
|
|
<h3 className="text-xl font-semibold text-white mb-2">
|
|
Global ODC Network
|
|
</h3>
|
|
<div className="flex items-center justify-center gap-4">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
|
|
>
|
|
<Globe className="w-3 h-3 mr-1" />
|
|
24/7 Coverage
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
|
>
|
|
<Users className="w-3 h-3 mr-1" />
|
|
Dedicated Teams
|
|
</Badge>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Global Network Visualization */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="relative"
|
|
>
|
|
{/* Central Hub */}
|
|
<div className="flex justify-center mb-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 1.4 }}
|
|
className="relative"
|
|
>
|
|
<div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center border-2 border-accent/30">
|
|
<Building2 className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-center">
|
|
<span className="text-white text-xs font-medium">
|
|
Your ODC
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Global Connections */}
|
|
<div className="grid grid-cols-3 gap-4 mb-4">
|
|
{[
|
|
{
|
|
location: "US",
|
|
role: "PM",
|
|
active: true,
|
|
delay: 1.6,
|
|
},
|
|
{
|
|
location: "UK",
|
|
role: "Design",
|
|
active: true,
|
|
delay: 1.8,
|
|
},
|
|
{
|
|
location: "AU",
|
|
role: "QA",
|
|
active: false,
|
|
delay: 2.0,
|
|
},
|
|
{
|
|
location: "IN",
|
|
role: "Dev",
|
|
active: true,
|
|
delay: 2.2,
|
|
},
|
|
{
|
|
location: "PH",
|
|
role: "Dev",
|
|
active: true,
|
|
delay: 2.4,
|
|
},
|
|
{
|
|
location: "UA",
|
|
role: "Dev",
|
|
active: false,
|
|
delay: 2.6,
|
|
},
|
|
].map((team, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: team.delay }}
|
|
className="text-center"
|
|
>
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center border mb-2 mx-auto relative ${
|
|
team.active
|
|
? "bg-green-500/20 border-green-500/30"
|
|
: "bg-gray-500/20 border-gray-500/30"
|
|
}`}
|
|
>
|
|
<PersonStanding
|
|
className={`w-5 h-5 ${
|
|
team.active
|
|
? "text-green-400"
|
|
: "text-gray-400"
|
|
}`}
|
|
/>
|
|
{team.active && (
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
opacity: [0.5, 1, 0.5],
|
|
}}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="absolute -inset-1 bg-green-400/20 rounded-full"
|
|
></motion.div>
|
|
)}
|
|
</div>
|
|
<div className="text-xs">
|
|
<div
|
|
className={`font-medium ${
|
|
team.active ? "text-white" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{team.location}
|
|
</div>
|
|
<div
|
|
className={`text-xs ${
|
|
team.active
|
|
? "text-green-300"
|
|
: "text-gray-500"
|
|
}`}
|
|
>
|
|
{team.role}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* ODC Performance Metrics */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 2.8 }}
|
|
className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className="w-4 h-4 text-blue-400" />
|
|
<span className="text-blue-400 text-xs font-mono">
|
|
Team Performance
|
|
</span>
|
|
</div>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
|
>
|
|
Optimal
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Performance Metrics */}
|
|
<div className="space-y-2">
|
|
<motion.div
|
|
initial={{ opacity: 0, width: 0 }}
|
|
animate={{ opacity: 1, width: "95%" }}
|
|
transition={{ duration: 1, delay: 3.0 }}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
|
<span className="text-green-300 text-xs">
|
|
Productivity
|
|
</span>
|
|
</div>
|
|
<span className="text-green-300 text-xs font-mono">
|
|
95%
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, width: 0 }}
|
|
animate={{ opacity: 1, width: "88%" }}
|
|
transition={{ duration: 1, delay: 3.2 }}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
|
<span className="text-blue-300 text-xs">
|
|
Code Quality
|
|
</span>
|
|
</div>
|
|
<span className="text-blue-300 text-xs font-mono">
|
|
88%
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, width: 0 }}
|
|
animate={{ opacity: 1, width: "92%" }}
|
|
transition={{ duration: 1, delay: 3.4 }}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-purple-400 rounded-full"></div>
|
|
<span className="text-purple-300 text-xs">
|
|
Team Retention
|
|
</span>
|
|
</div>
|
|
<span className="text-purple-300 text-xs font-mono">
|
|
92%
|
|
</span>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Cost & Scale Benefits */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 3.6 }}
|
|
className="grid grid-cols-2 gap-3"
|
|
>
|
|
<div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
|
|
<div className="text-green-400 text-lg font-bold">
|
|
60%
|
|
</div>
|
|
<div className="text-white text-xs">Cost Savings</div>
|
|
</div>
|
|
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
|
|
<div className="text-blue-400 text-lg font-bold">
|
|
200%
|
|
</div>
|
|
<div className="text-white text-xs">Faster Scale</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Floating ODC Elements */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 3.8 }}
|
|
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
|
|
<Users2 className="w-6 h-6 text-purple-400" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Global Coverage Indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 4.0 }}
|
|
className="absolute -top-8 -right-8 space-y-2"
|
|
>
|
|
<div className="flex items-center gap-2 text-blue-400 text-sm">
|
|
<Globe className="w-4 h-4" />
|
|
<span>Global</span>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="w-2 h-2 bg-blue-400 rounded-full"
|
|
></motion.div>
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
|
className="w-2 h-2 bg-green-400 rounded-full"
|
|
></motion.div>
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
|
className="w-2 h-2 bg-purple-400 rounded-full"
|
|
></motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* ODC Status Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 4.2 }}
|
|
className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
|
|
<div className="text-center">
|
|
<div className="text-accent text-sm font-bold">ODC</div>
|
|
<div className="text-white text-xs">Ready</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* ODC Features */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 4.4 }}
|
|
className="flex justify-center gap-4 flex-wrap mt-8"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
<Building2 className="w-3 h-3 mr-1" />
|
|
Dedicated Center
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30"
|
|
>
|
|
<DollarSign className="w-3 h-3 mr-1" />
|
|
Cost Effective
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
<TrendingUp className="w-3 h-3 mr-1" />
|
|
Rapid Scale
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// The Challenge We Solve
|
|
const DedicatedOffshoreODCChallenge = () => {
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<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-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
|
Scaling Your Team: The Talent & Cost Challenge
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
{/* Problem */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
|
|
<CardContent className="p-0">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
|
|
<AlertTriangle className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground">
|
|
The Problem
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
Businesses often struggle to quickly scale their
|
|
development teams with high-quality talent, facing
|
|
challenges like talent shortages, high recruitment costs,
|
|
and managing international teams.
|
|
</p>
|
|
<ul className="space-y-2">
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Local talent scarcity and high costs</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>
|
|
Long recruitment cycles and onboarding delays
|
|
</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Complex international team management</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Difficulty scaling teams up or down quickly</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Solution */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
|
|
<CardContent className="p-0">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
|
<CheckCircle className="w-6 h-6 text-green-400" />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground">
|
|
Our Solution
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
WDI provides a seamless solution for establishing your
|
|
Dedicated Offshore Development Center (ODC). We help you
|
|
build and manage a skilled, stable, and cost-efficient
|
|
team that integrates fully with your in-house operations.
|
|
</p>
|
|
<ul className="space-y-2">
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>
|
|
Access to global talent pool with proven expertise
|
|
</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Rapid team setup and seamless integration</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>End-to-end management and support</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>
|
|
Flexible scaling with significant cost savings
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// What's Included in This Solution
|
|
const DedicatedOffshoreODCIncludes = () => {
|
|
const includes = [
|
|
{
|
|
icon: UserPlus,
|
|
title: "Talent Acquisition & Vetting",
|
|
description:
|
|
"Sourcing and recruiting top-tier developers, QA, and project managers tailored to your needs.",
|
|
},
|
|
{
|
|
icon: Building,
|
|
title: "Infrastructure & Facilities",
|
|
description:
|
|
"Providing modern office space, IT infrastructure, and secure environments.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "HR & Administration",
|
|
description:
|
|
"Handling payroll, benefits, compliance, and all HR functions.",
|
|
},
|
|
{
|
|
icon: Handshake,
|
|
title: "Team Integration & Onboarding",
|
|
description:
|
|
"Facilitating smooth integration with your existing workflows and culture.",
|
|
},
|
|
{
|
|
icon: Headphones,
|
|
title: "Ongoing Management & Support",
|
|
description:
|
|
"Dedicated account management, performance monitoring, and team retention strategies.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Security & IP Protection",
|
|
description:
|
|
"Implementing robust security measures and strict intellectual property protocols.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Components of Your Dedicated ODC with WDI
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{includes.map((item, index) => {
|
|
const IconComponent = item.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 }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{item.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Key Benefits & Outcomes
|
|
const DedicatedOffshoreODCBenefits = () => {
|
|
const benefits = [
|
|
{
|
|
icon: DollarSign,
|
|
title: "Significant Cost Savings",
|
|
description: "Reduce operational overheads compared to in-house teams.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Access to Global Talent",
|
|
description:
|
|
"Tap into a vast pool of highly skilled and specialized developers.",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "Rapid Scalability",
|
|
description:
|
|
"Quickly expand or contract your team based on project demands.",
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Enhanced Focus",
|
|
description:
|
|
"Free up your internal resources to focus on core business activities.",
|
|
},
|
|
{
|
|
icon: Gauge,
|
|
title: "Increased Efficiency",
|
|
description:
|
|
"Dedicated teams mean consistent output and deep project knowledge.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
The Strategic Advantages of a WDI ODC
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{benefits.slice(0, 3).map((benefit, index) => {
|
|
const IconComponent = benefit.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 }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with remaining benefits */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
|
>
|
|
{benefits.slice(3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Our Process for Establishing Your ODC
|
|
const DedicatedOffshoreODCProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Requirements Analysis",
|
|
description:
|
|
"Define your project needs, required skill sets, and team size.",
|
|
icon: Search,
|
|
},
|
|
{
|
|
title: "Talent Sourcing & Selection",
|
|
description:
|
|
"Identify, vet, and interview top candidates matched to your criteria.",
|
|
icon: UserPlus,
|
|
},
|
|
{
|
|
title: "Setup & Onboarding",
|
|
description:
|
|
"Establish infrastructure, integrate tools, and onboard your dedicated team.",
|
|
icon: Settings,
|
|
},
|
|
{
|
|
title: "Operational Management",
|
|
description:
|
|
"Continuous HR, IT, and administrative support for your ODC.",
|
|
icon: Cog,
|
|
},
|
|
{
|
|
title: "Performance Monitoring",
|
|
description:
|
|
"Regular reviews and optimization to ensure team productivity and alignment.",
|
|
icon: BarChart3,
|
|
},
|
|
{
|
|
title: "Continuous Improvement",
|
|
description:
|
|
"Proactive measures for team growth, training, and retention.",
|
|
icon: TrendingUp,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Building Your Seamless Offshore Team
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
|
|
|
<div className="space-y-16">
|
|
{steps.map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
const isEven = index % 2 === 0;
|
|
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
className={`flex items-center ${
|
|
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
} flex-col lg:gap-16 gap-8`}
|
|
>
|
|
<div
|
|
className={`flex-1 ${
|
|
isEven ? "lg:text-right" : "lg:text-left"
|
|
} text-center lg:text-left`}
|
|
>
|
|
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-accent">
|
|
0{index + 1}
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
|
|
|
<div className="flex-1 hidden lg:block"></div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Who Benefits from This Solution
|
|
const DedicatedOffshoreODCAudience = () => {
|
|
const audiences = [
|
|
{
|
|
icon: Code,
|
|
title: "Software Companies",
|
|
description: "Needing to quickly scale development capacity.",
|
|
},
|
|
{
|
|
icon: Rocket,
|
|
title: "Startups",
|
|
description: "Seeking cost-effective access to skilled technical talent.",
|
|
},
|
|
{
|
|
icon: Building,
|
|
title: "Enterprises",
|
|
description:
|
|
"Looking to optimize their IT spending without compromising quality.",
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Specialized Expertise Seekers",
|
|
description:
|
|
"Requiring specialized expertise that is hard to find locally.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Project Managers",
|
|
description:
|
|
"Aiming for a stable, long-term outsourced development partnership.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Ideal For...
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{audiences.slice(0, 3).map((audience, index) => {
|
|
const IconComponent = audience.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 }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{audience.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{audience.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with remaining audiences */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
|
>
|
|
{audiences.slice(3).map((audience, index) => {
|
|
const IconComponent = audience.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{audience.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{audience.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Case Studies
|
|
const DedicatedOffshoreODCCaseStudies = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "Scaling a SaaS Product Team",
|
|
client: "Software Company",
|
|
description:
|
|
"Built a dedicated ODC that increased development capacity by 200% within 6 months, enabling faster feature delivery and improved product quality while maintaining seamless collaboration across time zones.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=300&fit=crop&auto=format",
|
|
results: "200% increased capacity in 6 months",
|
|
engagement: "SaaS scaling success",
|
|
gradient: "from-blue-500/20 to-cyan-500/20",
|
|
},
|
|
{
|
|
title: "Cost Reduction for E-commerce Giant",
|
|
client: "E-commerce Platform",
|
|
description:
|
|
"Established an ODC that reduced annual development costs by 35% while maintaining quality standards, allowing the client to invest savings into product innovation and market expansion initiatives.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
|
|
results: "35% cost reduction annually",
|
|
engagement: "E-commerce optimization",
|
|
gradient: "from-green-500/20 to-emerald-500/20",
|
|
},
|
|
{
|
|
title: "FinTech Platform Acceleration",
|
|
client: "Financial Technology Startup",
|
|
description:
|
|
"Deployed a specialized ODC with fintech expertise, accelerating time-to-market by 40% and ensuring regulatory compliance while building a scalable, secure platform for financial services.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
|
|
results: "40% faster time-to-market",
|
|
engagement: "FinTech development acceleration",
|
|
gradient: "from-purple-500/20 to-pink-500/20",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
|
Client Success Through Dedicated Offshore Teams
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 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.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<Building2 className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
|
|
{study.client}
|
|
</div>
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-xs bg-accent/20 text-accent border-accent/30"
|
|
>
|
|
{study.results}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
|
|
{study.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6 flex-1">
|
|
<div
|
|
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
|
>
|
|
<ImageWithFallback
|
|
src={study.image}
|
|
alt={study.title}
|
|
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6">
|
|
<p className="text-gray-300 text-sm leading-relaxed mb-4">
|
|
{study.description}
|
|
</p>
|
|
<div className="flex gap-4 text-xs text-gray-400">
|
|
<div className="flex items-center gap-1">
|
|
<CheckCircle className="w-3 h-3" />
|
|
{study.engagement}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 pt-0 mt-auto">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
|
|
>
|
|
<span className="text-sm font-medium">
|
|
VIEW FULL CASE STUDY
|
|
</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Mid-Page Lead Capture CTA
|
|
const DedicatedOffshoreODCInlineCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Building2 className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
ODC Solutions
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
|
Ready to Scale Your Development Team{" "}
|
|
<span className="text-accent">Effortlessly?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Build a high-performing, cost-effective team tailored to your
|
|
needs.
|
|
</p>
|
|
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Wand2 className="w-6 h-6 flex-shrink-0" />
|
|
<span>Design Your Custom ODC</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQs
|
|
const DedicatedOffshoreODCFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question: "How does an ODC differ from traditional outsourcing?",
|
|
answer:
|
|
"An ODC (Offshore Development Center) is fundamentally different from traditional outsourcing: ODCs provide dedicated teams that work exclusively for your company, operate as an extension of your internal team, follow your processes and culture, and offer long-term partnership focused on your business goals. Traditional outsourcing typically involves project-based engagements, shared resources across multiple clients, limited control over team composition, and short-term transactional relationships. With an ODC, you get the benefits of an in-house team - dedicated focus, deep product knowledge, cultural alignment - combined with the cost advantages and scalability of offshore development.",
|
|
},
|
|
{
|
|
question: "How do you ensure data security and IP protection?",
|
|
answer:
|
|
"We implement comprehensive security measures: Multi-layered physical security at our facilities with biometric access controls, secure IT infrastructure with encrypted data transmission and storage, strict confidentiality agreements and IP protection protocols for all team members, regular security audits and compliance assessments, and segregated work environments ensuring your data remains isolated. We maintain certifications like ISO 27001 and follow industry best practices for data protection. Additionally, we provide detailed security reports, conduct background checks on all personnel, and can accommodate specific security requirements or compliance standards your organization requires.",
|
|
},
|
|
{
|
|
question: "What level of control do we have over the ODC team?",
|
|
answer:
|
|
"You maintain full operational control over your ODC team: Direct management of daily tasks, priorities, and deliverables, participation in hiring decisions and team composition, implementation of your development processes, tools, and methodologies, access to real-time performance metrics and project tracking, and direct communication channels with team members. While we handle administrative functions like payroll, benefits, and HR compliance, you retain complete control over the technical direction, project management, and day-to-day operations. The team reports directly to you and operates as a seamless extension of your internal development organization.",
|
|
},
|
|
{
|
|
question: "How long does it take to set up an ODC?",
|
|
answer:
|
|
"The ODC setup timeline typically ranges from 4-8 weeks depending on your requirements: Week 1-2: Requirements gathering, team planning, and candidate sourcing, Week 2-4: Candidate interviews, selection, and offer processes, Week 3-5: Infrastructure setup, security clearances, and legal documentation, Week 4-6: Team onboarding, tool integration, and process alignment, Week 5-8: Full operational readiness and project kickoff. For specialized skills or larger teams, the timeline may extend to 10-12 weeks. We can expedite the process with our pre-vetted talent pool for standard technology stacks. Throughout the setup, we provide regular updates and ensure smooth coordination between your team and the new ODC members.",
|
|
},
|
|
{
|
|
question: "What are the typical cost savings compared to in-house teams?",
|
|
answer:
|
|
"ODC cost savings typically range from 40-70% compared to equivalent in-house teams: Direct salary savings of 50-60% for similar skill levels, elimination of recruitment costs, training expenses, and employee benefits overhead, reduced infrastructure and facilities costs, and no long-term employment commitments or severance obligations. Additional indirect savings include faster scaling capabilities, reduced management overhead, and access to specialized skills without premium local market rates. For example, a senior developer costing $120,000 annually in the US might cost $40,000-50,000 through an ODC, while maintaining equivalent quality and productivity. The exact savings depend on your location, required skill sets, team size, and engagement model.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 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-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto"
|
|
>
|
|
<Accordion type="single" collapsible className="space-y-8">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem
|
|
key={index}
|
|
value={`item-${index}`}
|
|
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
|
>
|
|
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
|
<span className="font-semibold text-white">
|
|
{faq.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Final CTA Section
|
|
const DedicatedOffshoreODCFinalCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="py-20 relative overflow-hidden">
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="mb-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Building2 className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Global Tech Powerhouse
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Build Your Global Tech Powerhouse{" "}
|
|
<span className="text-accent">with WDI</span>
|
|
</h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
Leverage WDI's expertise to establish and manage your dedicated
|
|
offshore development center, ensuring seamless integration and
|
|
superior results.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<ShimmerButton
|
|
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Calendar className="w-6 h-6 flex-shrink-0" />
|
|
<span>Schedule a Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Talent Acquisition • Infrastructure • Management • Security •
|
|
Support • Scale
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Dedicated Offshore Development Centers Page
|
|
export const DedicatedOffshoreODC = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
{/* <Navigation /> */}
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<DedicatedOffshoreODCHero />
|
|
</section>
|
|
|
|
{/* Challenge */}
|
|
<section className="bg-background">
|
|
<DedicatedOffshoreODCChallenge />
|
|
</section>
|
|
|
|
{/* What's Included */}
|
|
<section className="bg-card">
|
|
<DedicatedOffshoreODCIncludes />
|
|
</section>
|
|
|
|
{/* Benefits */}
|
|
<section className="bg-background">
|
|
<DedicatedOffshoreODCBenefits />
|
|
</section>
|
|
|
|
{/* Process */}
|
|
<section className="bg-card">
|
|
<DedicatedOffshoreODCProcess />
|
|
</section>
|
|
|
|
{/* Target Audience */}
|
|
<section className="bg-background">
|
|
<DedicatedOffshoreODCAudience />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
<section className="bg-card">
|
|
<DedicatedOffshoreODCCaseStudies />
|
|
</section>
|
|
|
|
{/* Mid-Page CTA */}
|
|
<section className="bg-background">
|
|
<DedicatedOffshoreODCInlineCTA />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
<section className="bg-card">
|
|
<DedicatedOffshoreODCFAQs />
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-background">
|
|
<DedicatedOffshoreODCFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section className="bg-card">
|
|
{/* <Footer /> */}
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|