1626 lines
62 KiB
TypeScript
1626 lines
62 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Activity,
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
BarChart3,
|
||
Brain,
|
||
Calculator,
|
||
Clock,
|
||
Cloud,
|
||
CloudCog,
|
||
Code,
|
||
Cog,
|
||
Cpu,
|
||
Database,
|
||
Eye,
|
||
FileText,
|
||
Layers,
|
||
LineChart,
|
||
MessageSquare,
|
||
Rocket,
|
||
Scale,
|
||
Search,
|
||
Settings,
|
||
Table,
|
||
Target,
|
||
TrendingUp,
|
||
UserPlus,
|
||
Wrench,
|
||
Zap,
|
||
} 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";
|
||
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
|
||
|
||
// Custom ML Model Development Hero Section
|
||
const CustomMLHeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Custom ML Model Development | Machine Learning by WDI</title>
|
||
<meta
|
||
name="description"
|
||
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/services/custom-ml-model-development"
|
||
/>
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="Custom ML Model Development | Machine Learning by WDI"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
|
||
/>
|
||
<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="Custom ML Model Development | Machine Learning by WDI"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
|
||
/>
|
||
<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"
|
||
>
|
||
{/* Custom ML 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">AI & ML</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">
|
||
Custom Machine Learning Model Development
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Building bespoke machine learning models tailored to your unique
|
||
data and business challenges, extracting actionable insights and
|
||
automating complex, data‑driven decisions.
|
||
</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">
|
||
<Brain className="w-5 h-5 flex-shrink-0" />
|
||
<span>Develop Your Custom ML Model</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">
|
||
<Search className="w-5 h-5 flex-shrink-0" />
|
||
<span>Explore ML Use Cases</span>
|
||
</div>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with ML Data Visualization Scene */}
|
||
<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"
|
||
>
|
||
{/* ML Data Visualization 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 ML Brain Visualization */}
|
||
<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"
|
||
>
|
||
{/* Central Brain Icon with Data Streams */}
|
||
<div className="relative flex items-center justify-center">
|
||
{/* Central Brain */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 1.0 }}
|
||
className="relative z-10"
|
||
>
|
||
<div className="w-24 h-24 bg-gradient-to-br from-accent to-blue-500 rounded-full flex items-center justify-center shadow-2xl">
|
||
<Brain className="w-12 h-12 text-white" />
|
||
</div>
|
||
|
||
{/* Pulsing Ring */}
|
||
<motion.div
|
||
animate={{
|
||
scale: [1, 1.2, 1],
|
||
opacity: [0.5, 0.2, 0.5],
|
||
}}
|
||
transition={{ duration: 3, repeat: Infinity }}
|
||
className="absolute inset-0 rounded-full bg-accent/20 border-2 border-accent/30"
|
||
></motion.div>
|
||
</motion.div>
|
||
|
||
{/* Data Streams */}
|
||
<div className="absolute inset-0">
|
||
{/* Data Stream 1 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, pathLength: 0 }}
|
||
animate={{ opacity: 1, pathLength: 1 }}
|
||
transition={{ duration: 2, delay: 1.2 }}
|
||
className="absolute top-2 left-2"
|
||
>
|
||
<svg
|
||
width="100"
|
||
height="100"
|
||
viewBox="0 0 100 100"
|
||
className="overflow-visible"
|
||
>
|
||
<motion.path
|
||
d="M10,10 Q30,30 50,10 T90,30"
|
||
stroke="#3B82F6"
|
||
strokeWidth="2"
|
||
fill="none"
|
||
strokeDasharray="5,5"
|
||
animate={{ strokeDashoffset: [0, -10] }}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
ease: "linear",
|
||
}}
|
||
/>
|
||
</svg>
|
||
</motion.div>
|
||
|
||
{/* Data Stream 2 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, pathLength: 0 }}
|
||
animate={{ opacity: 1, pathLength: 1 }}
|
||
transition={{ duration: 2, delay: 1.4 }}
|
||
className="absolute bottom-2 right-2"
|
||
>
|
||
<svg
|
||
width="100"
|
||
height="100"
|
||
viewBox="0 0 100 100"
|
||
className="overflow-visible"
|
||
>
|
||
<motion.path
|
||
d="M90,90 Q70,70 50,90 T10,70"
|
||
stroke="#10B981"
|
||
strokeWidth="2"
|
||
fill="none"
|
||
strokeDasharray="5,5"
|
||
animate={{ strokeDashoffset: [0, -10] }}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
ease: "linear",
|
||
delay: 0.5,
|
||
}}
|
||
/>
|
||
</svg>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Floating Data Points */}
|
||
<div className="absolute inset-0">
|
||
{[...Array(12)].map((_, i) => {
|
||
const positions = [
|
||
{ top: "10%", left: "20%" },
|
||
{ top: "15%", right: "25%" },
|
||
{ top: "30%", left: "10%" },
|
||
{ top: "35%", right: "15%" },
|
||
{ top: "60%", left: "15%" },
|
||
{ top: "65%", right: "20%" },
|
||
{ top: "80%", left: "25%" },
|
||
{ top: "85%", right: "30%" },
|
||
{ top: "20%", left: "70%" },
|
||
{ top: "40%", right: "70%" },
|
||
{ top: "70%", left: "75%" },
|
||
{ top: "90%", right: "75%" },
|
||
];
|
||
|
||
const colors = [
|
||
"bg-blue-400",
|
||
"bg-green-400",
|
||
"bg-purple-400",
|
||
"bg-orange-400",
|
||
"bg-cyan-400",
|
||
];
|
||
const randomColor = colors[i % colors.length];
|
||
|
||
return (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: 1.6 + i * 0.1 }}
|
||
className="absolute"
|
||
style={positions[i]}
|
||
>
|
||
<motion.div
|
||
animate={{
|
||
y: [0, -10, 0],
|
||
opacity: [0.3, 1, 0.3],
|
||
}}
|
||
transition={{
|
||
duration: 3,
|
||
repeat: Infinity,
|
||
delay: i * 0.3,
|
||
}}
|
||
className={`w-2 h-2 ${randomColor} rounded-full shadow-lg`}
|
||
></motion.div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Code Snippets */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 2.8 }}
|
||
className="mt-8 bg-black/50 rounded-lg p-4 border border-gray-700"
|
||
>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Code className="w-4 h-4 text-green-400" />
|
||
<span className="text-green-400 text-xs font-mono">
|
||
ML Model Training
|
||
</span>
|
||
</div>
|
||
<div className="space-y-1 text-xs font-mono">
|
||
<div className="text-blue-400">
|
||
<span className="text-purple-400">from</span>{" "}
|
||
sklearn.ensemble{" "}
|
||
<span className="text-purple-400">import</span>{" "}
|
||
RandomForestClassifier
|
||
</div>
|
||
<div className="text-gray-300">
|
||
model = RandomForestClassifier()
|
||
</div>
|
||
<div className="text-yellow-400">
|
||
model.fit(X_train, y_train)
|
||
</div>
|
||
<div className="text-green-400">
|
||
accuracy = model.score(X_test, y_test)
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Floating ML Elements */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 3.0 }}
|
||
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-green-500/20 to-blue-500/20 rounded-full flex items-center justify-center border border-green-500/30">
|
||
<BarChart3 className="w-6 h-6 text-green-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Algorithm Indicators */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 3.2 }}
|
||
className="absolute -top-8 -right-8 space-y-2"
|
||
>
|
||
<div className="flex items-center gap-2 text-purple-400 text-sm">
|
||
<Cpu className="w-4 h-4" />
|
||
<span>Neural Networks</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-purple-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-blue-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-green-400 rounded-full"
|
||
></motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Accuracy Indicator */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 3.4 }}
|
||
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div className="w-20 h-20 bg-blue-500/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
|
||
<div className="text-center">
|
||
<div className="text-blue-400 text-lg font-bold">
|
||
94.2%
|
||
</div>
|
||
<div className="text-blue-300 text-xs">Accuracy</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* ML Features */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 3.6 }}
|
||
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"
|
||
>
|
||
<Brain className="w-3 h-3 mr-1" />
|
||
Custom ML
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30"
|
||
>
|
||
<TrendingUp className="w-3 h-3 mr-1" />
|
||
Predictive
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
||
>
|
||
<Target className="w-3 h-3 mr-1" />
|
||
Tailored
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Key Benefits of Custom ML Models
|
||
const CustomMLBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: Target,
|
||
title: "Tailored Accuracy",
|
||
description:
|
||
"Optimized for your specific dataset and problem, delivering superior results.",
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: "Competitive Edge",
|
||
description:
|
||
"Unique models provide proprietary insights and capabilities.",
|
||
},
|
||
{
|
||
icon: Cog,
|
||
title: "Automation of Complex Tasks",
|
||
description:
|
||
"Solving problems that are difficult for traditional programming.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Predictive Power",
|
||
description: "Anticipate trends, behaviors, and outcomes.",
|
||
},
|
||
{
|
||
icon: Scale,
|
||
title: "Scalability",
|
||
description:
|
||
"Models designed to handle growing data volumes and prediction demands.",
|
||
},
|
||
];
|
||
|
||
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">
|
||
Why Invest in a Custom ML Solution?
|
||
</h2>
|
||
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Because a custom machine learning solution is built to your unique
|
||
data, workflows, and business goals, delivering higher accuracy,
|
||
automation, and a durable competitive advantage over generic tools.
|
||
</p>
|
||
</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>
|
||
);
|
||
};
|
||
|
||
// Custom ML Development Process
|
||
const CustomMLDevelopmentProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Problem Definition & Data Assessment",
|
||
description:
|
||
"Analyzing your business problem and evaluating data quality, quantity, and relevance for ML model development.",
|
||
icon: Search,
|
||
},
|
||
{
|
||
title: "Feature Engineering & Data Preprocessing",
|
||
description:
|
||
"Cleaning, transforming, and engineering features from raw data to optimize model performance and accuracy.",
|
||
icon: Wrench,
|
||
},
|
||
{
|
||
title: "Model Selection & Training",
|
||
description:
|
||
"Selecting appropriate algorithms and training multiple models to find the best fit for your specific problem.",
|
||
icon: Brain,
|
||
},
|
||
{
|
||
title: "Evaluation & Hyperparameter Tuning",
|
||
description:
|
||
"Rigorously testing model performance and fine-tuning parameters to achieve optimal accuracy and reliability.",
|
||
icon: Settings,
|
||
},
|
||
{
|
||
title: "Model Deployment & Integration",
|
||
description:
|
||
"Deploying trained models into production environments and integrating with existing systems and workflows.",
|
||
icon: Rocket,
|
||
},
|
||
{
|
||
title: "Monitoring & Retraining",
|
||
description:
|
||
"Continuously monitoring model performance and implementing retraining procedures to maintain accuracy over time.",
|
||
icon: Activity,
|
||
},
|
||
];
|
||
|
||
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">
|
||
Our Strategic Process for Building Your ML Model
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
A structured, end‑to‑end machine learning model development process
|
||
that aligns with your business goals, from problem definition and
|
||
data preparation through training, validation, deployment, and
|
||
ongoing optimization.
|
||
</p>
|
||
</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>
|
||
);
|
||
};
|
||
|
||
// Custom ML Services
|
||
const CustomMLServices = () => {
|
||
const services = [
|
||
{
|
||
title: "Predictive Analytics Models",
|
||
description: "Forecasting sales, churn, demand, fraud.",
|
||
icon: TrendingUp,
|
||
features: [
|
||
"Sales Forecasting",
|
||
"Churn Prediction",
|
||
"Demand Planning",
|
||
"Fraud Detection",
|
||
],
|
||
},
|
||
{
|
||
title: "Natural Language Processing (NLP) Models",
|
||
description:
|
||
"Sentiment analysis, text classification, entity recognition.",
|
||
icon: FileText,
|
||
features: [
|
||
"Sentiment Analysis",
|
||
"Text Classification",
|
||
"Entity Recognition",
|
||
"Language Understanding",
|
||
],
|
||
},
|
||
{
|
||
title: "Computer Vision Models",
|
||
description:
|
||
"Object detection, image classification, facial recognition.",
|
||
icon: Eye,
|
||
features: [
|
||
"Object Detection",
|
||
"Image Classification",
|
||
"Facial Recognition",
|
||
"Image Segmentation",
|
||
],
|
||
},
|
||
{
|
||
title: "Recommendation Engines",
|
||
description: "Personalizing product or content suggestions.",
|
||
icon: Target,
|
||
features: [
|
||
"Product Recommendations",
|
||
"Content Personalization",
|
||
"Collaborative Filtering",
|
||
"Hybrid Systems",
|
||
],
|
||
},
|
||
{
|
||
title: "Anomaly Detection Models",
|
||
description: "Identifying unusual patterns in data.",
|
||
icon: AlertTriangle,
|
||
features: [
|
||
"Fraud Detection",
|
||
"System Monitoring",
|
||
"Quality Control",
|
||
"Security Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "Reinforcement Learning",
|
||
description: "Developing intelligent agents for decision-making.",
|
||
icon: Brain,
|
||
features: [
|
||
"Decision Optimization",
|
||
"Game AI",
|
||
"Resource Allocation",
|
||
"Process Automation",
|
||
],
|
||
},
|
||
{
|
||
title: "Time Series Forecasting",
|
||
description: "Predicting future values based on historical data.",
|
||
icon: LineChart,
|
||
features: [
|
||
"Trend Analysis",
|
||
"Seasonal Forecasting",
|
||
"Stock Prediction",
|
||
"Demand Planning",
|
||
],
|
||
},
|
||
{
|
||
title: "Model Optimization & Fine-tuning",
|
||
description: "Improving performance of existing models.",
|
||
icon: Settings,
|
||
features: [
|
||
"Hyperparameter Tuning",
|
||
"Performance Optimization",
|
||
"Model Compression",
|
||
"Transfer Learning",
|
||
],
|
||
},
|
||
];
|
||
|
||
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">
|
||
Our Specialized Custom ML Model Capabilities
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Specialized custom ML model capabilities that solve complex,
|
||
domain‑specific challenges with high‑accuracy, scalable machine
|
||
learning models built for your unique data and workflows.
|
||
</p>
|
||
</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-4 gap-8"
|
||
>
|
||
{services.map((service, index) => {
|
||
const IconComponent = service.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-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-foreground mb-4">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6 text-sm">
|
||
{service.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-xs font-medium text-foreground">
|
||
Key Applications:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-1">
|
||
{service.features.map((feature) => (
|
||
<Badge
|
||
key={feature}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Custom ML Tech Stack
|
||
const CustomMLTechStack = () => {
|
||
const technologies = [
|
||
{ name: "Python", icon: Code, category: "Programming", color: "blue" },
|
||
{
|
||
name: "R",
|
||
icon: BarChart3,
|
||
category: "Statistical Computing",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "TensorFlow",
|
||
icon: Brain,
|
||
category: "Deep Learning",
|
||
color: "orange",
|
||
},
|
||
{
|
||
name: "PyTorch",
|
||
icon: Brain,
|
||
category: "Deep Learning",
|
||
color: "orange",
|
||
},
|
||
{ name: "Keras", icon: Layers, category: "Neural Networks", color: "red" },
|
||
{
|
||
name: "Scikit-learn",
|
||
icon: Cog,
|
||
category: "Machine Learning",
|
||
color: "orange",
|
||
},
|
||
{
|
||
name: "Pandas",
|
||
icon: Table,
|
||
category: "Data Manipulation",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "NumPy",
|
||
icon: Calculator,
|
||
category: "Numerical Computing",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "AWS SageMaker",
|
||
icon: CloudCog,
|
||
category: "ML Platform",
|
||
color: "orange",
|
||
},
|
||
{
|
||
name: "Azure Machine Learning",
|
||
icon: Cloud,
|
||
category: "ML Platform",
|
||
color: "blue",
|
||
},
|
||
{
|
||
name: "Google AI Platform",
|
||
icon: Brain,
|
||
category: "ML Platform",
|
||
color: "green",
|
||
},
|
||
{ name: "SQL", icon: Database, category: "Databases", color: "blue" },
|
||
{ name: "NoSQL", icon: Database, category: "Databases", color: "green" },
|
||
];
|
||
|
||
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">
|
||
Custom ML Tech Stack
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||
Leveraging a powerful, modern machine learning tech stack of leading
|
||
libraries and platforms to build cutting‑edge, production‑ready ML
|
||
solutions.
|
||
</p>
|
||
</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 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
|
||
>
|
||
{technologies.map((tech, index) => {
|
||
const IconComponent = tech.icon;
|
||
const colorClasses = {
|
||
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
||
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
||
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
||
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
||
};
|
||
|
||
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, scale: 1.05 }}
|
||
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 p-4 text-center">
|
||
<div
|
||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
|
||
colorClasses[tech.color as keyof typeof colorClasses] ||
|
||
"bg-accent/20 text-accent border-accent/30"
|
||
}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="font-semibold text-white text-sm mb-1">
|
||
{tech.name}
|
||
</h4>
|
||
<p className="text-xs text-gray-400">{tech.category}</p>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Custom ML Case Studies
|
||
const CustomMLCaseStudies = () => {
|
||
const caseStudies = [
|
||
{
|
||
title: "Predictive Sales Forecasting Model",
|
||
client: "E-commerce Retail Chain",
|
||
description:
|
||
"Developed custom ML model for sales forecasting, improving prediction accuracy by 85% and reducing inventory costs by 30% while optimizing stock levels across 200+ locations.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
|
||
results: "85% prediction accuracy, 30% cost reduction",
|
||
engagement: "3-month ML project",
|
||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||
},
|
||
{
|
||
title: "Medical Image Classification System",
|
||
client: "Healthcare Technology Company",
|
||
description:
|
||
"Built computer vision ML model for medical imaging diagnosis, achieving 96% accuracy in disease detection and reducing analysis time by 75% for radiologists.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
|
||
results: "96% diagnostic accuracy, 75% time reduction",
|
||
engagement: "5-month computer vision project",
|
||
gradient: "from-green-500/20 to-emerald-500/20",
|
||
},
|
||
{
|
||
title: "Customer Churn Prediction Engine",
|
||
client: "SaaS Technology Platform",
|
||
description:
|
||
"Implemented advanced ML model for customer churn prediction, identifying at-risk customers with 92% accuracy and enabling proactive retention strategies that reduced churn by 40%.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
|
||
results: "92% churn prediction, 40% retention improvement",
|
||
engagement: "4-month predictive analytics project",
|
||
gradient: "from-purple-500/20 to-pink-500/20",
|
||
},
|
||
];
|
||
|
||
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-8">
|
||
Custom ML Models Driving Real Business Value
|
||
</h2>
|
||
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
Custom ML models that turn your data into predictive intelligence,
|
||
automate decisions, and deliver measurable business value,
|
||
efficiency gains, and competitive advantage.
|
||
</p>
|
||
</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-card/20 backdrop-blur-md border-white/10 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">
|
||
<Brain className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-muted-foreground 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-foreground 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-muted-foreground text-sm leading-relaxed mb-4">
|
||
{study.description}
|
||
</p>
|
||
<div className="flex gap-4 text-xs text-muted-foreground">
|
||
<div className="flex items-center gap-1">
|
||
<Clock 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 CTA
|
||
const CustomMLInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 bg-black">
|
||
<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-black rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Brain className="w-5 h-5 text-white" />
|
||
<span className="text-white text-base font-medium">
|
||
Custom ML Models
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
|
||
Have a Unique Problem Only{" "}
|
||
<span className="text-accent">ML Can Solve?</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
|
||
Let’s explore how a custom machine learning model can analyze your
|
||
data, automate decisions, and give you a decisive, data‑driven
|
||
edge.
|
||
</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">
|
||
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
||
<span>Get a Free ML Model Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Hire ML Model Developers
|
||
const HireMLDevelopers = () => {
|
||
const specialistTypes = [
|
||
{
|
||
title: "Machine Learning Engineers",
|
||
description:
|
||
"Specialists in developing, training, and deploying custom ML models",
|
||
icon: Brain,
|
||
skills: [
|
||
"Model Development",
|
||
"Algorithm Design",
|
||
"Feature Engineering",
|
||
"Performance Optimization",
|
||
],
|
||
},
|
||
{
|
||
title: "Data Scientists",
|
||
description:
|
||
"Experts in extracting insights and building predictive models from complex datasets",
|
||
icon: BarChart3,
|
||
skills: [
|
||
"Statistical Analysis",
|
||
"Predictive Modeling",
|
||
"Data Mining",
|
||
"Hypothesis Testing",
|
||
],
|
||
},
|
||
{
|
||
title: "Deep Learning Specialists",
|
||
description:
|
||
"Specialists in neural networks and advanced deep learning architectures",
|
||
icon: Layers,
|
||
skills: [
|
||
"Neural Networks",
|
||
"Deep Learning",
|
||
"Computer Vision",
|
||
"NLP Models",
|
||
],
|
||
},
|
||
{
|
||
title: "MLOps Engineers",
|
||
description:
|
||
"Experts in deploying and managing ML models in production environments",
|
||
icon: Settings,
|
||
skills: [
|
||
"Model Deployment",
|
||
"Pipeline Automation",
|
||
"Performance Monitoring",
|
||
"Version Control",
|
||
],
|
||
},
|
||
{
|
||
title: "Computer Vision Engineers",
|
||
description:
|
||
"Specialists in developing image and video analysis ML models",
|
||
icon: Eye,
|
||
skills: [
|
||
"Image Processing",
|
||
"Object Detection",
|
||
"Facial Recognition",
|
||
"Video Analysis",
|
||
],
|
||
},
|
||
{
|
||
title: "NLP Engineers",
|
||
description:
|
||
"Experts in natural language processing and text analysis models",
|
||
icon: FileText,
|
||
skills: [
|
||
"Text Processing",
|
||
"Sentiment Analysis",
|
||
"Language Models",
|
||
"Speech Recognition",
|
||
],
|
||
},
|
||
];
|
||
|
||
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">
|
||
Access Expert Machine Learning Scientists & Engineers
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||
Hire our specialized data scientists and ML engineers proficient in
|
||
developing, training, and deploying custom ML models that solve
|
||
complex business problems and drive measurable AI‑driven outcomes.
|
||
</p>
|
||
</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 mb-12"
|
||
>
|
||
{specialistTypes.map((type, index) => {
|
||
const IconComponent = type.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">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{type.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||
{type.description}
|
||
</p>
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-medium text-foreground">
|
||
Core Skills:
|
||
</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{type.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground border-muted"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="text-center space-y-6"
|
||
>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<ShimmerButton className="text-lg px-8 py-4">
|
||
<div className="inline-flex items-center gap-2">
|
||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||
<span>Hire ML Developers</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<FileText className="w-5 h-5 flex-shrink-0" />
|
||
<span>Request Profiles</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Custom ML FAQs
|
||
const CustomMLFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question: "What kind of data do I need for ML model development?",
|
||
answer:
|
||
"The data requirements depend on your specific problem, but generally you need sufficient quantity (often thousands to millions of records), relevant features that correlate with your target outcome, clean and consistent formatting, and historical examples of the outcomes you want to predict. For supervised learning, you need labeled data that shows correct answers.\n\nWe can work with structured data (databases, spreadsheets), unstructured data (text, images, audio), or time-series data. During our initial assessment, we’ll evaluate your data quality, identify gaps, and recommend data collection or preprocessing strategies to ensure optimal machine learning model performance.",
|
||
},
|
||
{
|
||
question: "How long does it take to build a custom ML model?",
|
||
answer:
|
||
"Timelines vary based on complexity and scope. Simple models (like basic classification or regression) usually take 4–8 weeks, while complex models such as deep learning, computer vision, or NLP often require 3–6 months.\n\nKey factors affecting the timeline include data complexity and volume, model sophistication, integration requirements, performance targets, and regulatory needs. Our typical process includes 1–2 weeks for data assessment, 2–4 weeks for preprocessing and feature engineering, 2–6 weeks for model development and training, 1–2 weeks for testing and validation, and 1–2 weeks for deployment preparation. We provide a detailed timeline for every custom ML model project during planning.",
|
||
},
|
||
{
|
||
question: "What is “model bias” and how do you address it?",
|
||
answer:
|
||
"Model bias occurs when machine learning models make systematically unfair or inaccurate predictions for certain groups or scenarios, often reflecting biases in training data or model design. Common types include historical bias (past discrimination in data), representation bias (underrepresented groups), and measurement bias (inconsistent data collection).\n\nWe address bias through comprehensive bias audits and fairness metrics, diverse and representative training datasets, bias-detection algorithms and statistical tests, fair-ML techniques like adversarial debiasing, regular monitoring for bias drift, and transparent documentation of model limitations. This helps ensure more equitable and reliable machine learning model behavior.",
|
||
},
|
||
{
|
||
question: "Do you provide ongoing support for the deployed model?",
|
||
answer:
|
||
"Yes. We offer comprehensive post-deployment support and maintenance for your ML model. This includes performance monitoring and alerting systems to track accuracy and detect drift, regular retraining with new data, technical support for integration and troubleshooting, model updates and improvements, documentation and knowledge transfer, compliance monitoring, and emergency response for critical failures.\n\nWe provide multiple support tiers from basic monitoring to full-service managed ML so you can choose the level of ongoing support that fits your internal capabilities and ML model operational needs.",
|
||
},
|
||
];
|
||
|
||
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 CustomMLFinalCTA = () => {
|
||
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">
|
||
<Brain className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
Custom ML Excellence
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
||
Unlock Unprecedented Insights with{" "}
|
||
<span className="text-accent">WDI's Custom ML Expertise</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"
|
||
>
|
||
Transform your data into a strategic asset with bespoke machine
|
||
learning models designed for your unique business challenges and
|
||
built to deliver measurable, data‑driven outcomes.
|
||
</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">
|
||
<Brain className="w-6 h-6 flex-shrink-0" />
|
||
<span>Start Your ML Project</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-muted-foreground text-sm">
|
||
Predictive Analytics • Computer Vision • NLP • Recommendation
|
||
Systems
|
||
</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 Custom ML Model Development Page
|
||
export const CustomMLModelDevelopment = () => {
|
||
return (
|
||
<div className="dark min-h-screen">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<CustomMLHeroWithCTA />
|
||
</section>
|
||
|
||
{/* Benefits */}
|
||
<section className="bg-background">
|
||
<CustomMLBenefits />
|
||
</section>
|
||
|
||
{/* Tech Stack */}
|
||
<section className="bg-card">
|
||
<CustomMLTechStack />
|
||
</section>
|
||
|
||
{/* Development Process */}
|
||
<section className="bg-card">
|
||
<CustomMLDevelopmentProcess />
|
||
</section>
|
||
|
||
{/* Services */}
|
||
<section className="bg-background">
|
||
<CustomMLServices />
|
||
</section>
|
||
|
||
{/* Target Audience */}
|
||
<section className="bg-card">
|
||
<AIStrategyTargetAudience />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-background">
|
||
<CustomMLCaseStudies />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
<section className="bg-card">
|
||
<CustomMLInlineCTA />
|
||
</section>
|
||
|
||
{/* Hire Developers */}
|
||
<section className="bg-background">
|
||
<HireMLDevelopers />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
<section className="bg-card">
|
||
<CustomMLFAQs />
|
||
</section>
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-background">
|
||
<CustomMLFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-card">{/* <Footer /> */}</section>
|
||
</div>
|
||
);
|
||
};
|