793 lines
30 KiB
TypeScript
793 lines
30 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Bot,
|
||
Brain,
|
||
Calendar,
|
||
Cpu,
|
||
Eye,
|
||
Layers,
|
||
Lightbulb,
|
||
MessageCircle,
|
||
Rocket,
|
||
Settings,
|
||
Sparkles,
|
||
TrendingUp,
|
||
UserPlus,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import { FAQSection } from "../components/FAQSection";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { ProcessSection } from "../components/ProcessSection";
|
||
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 { Helmet } from "react-helmet-async";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
// Enhanced Hero Section
|
||
const HeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Artificial Intelligence | Custom AI Solutions by WDI</title>
|
||
<meta
|
||
name="description"
|
||
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/artificial-intelligence"
|
||
/>
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="Artificial Intelligence | Custom AI Solutions by WDI"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
|
||
/>
|
||
<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="Artificial Intelligence | Custom AI Solutions by WDI"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
|
||
/>
|
||
<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"
|
||
>
|
||
{/* AI Services 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">
|
||
Artificial Intelligence
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main Heading - Left aligned, reduced font size */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-left">
|
||
<span className="text-white">AI-Powered </span>
|
||
<span className="text-[#E5195E]">Innovation</span>
|
||
<span className="text-white"> for Modern Business</span>
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Transform your business with cutting‑edge AI mobile app
|
||
development and artificial intelligence solutions that drive
|
||
automation, insights, and competitive advantage.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, x: 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('/contact/schedule-a-discovery-call')}
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Calendar className="w-4 h-4 flex-shrink-0" />
|
||
<span>AI Strategy Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="secondary"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto"
|
||
onClick={() => navigate("/case-studies")}
|
||
>
|
||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||
<span>View AI Case Studies</span>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with stats */}
|
||
<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"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="grid grid-cols-2 gap-8 text-center"
|
||
>
|
||
<div className="space-y-2 flex flex-col items-center">
|
||
<div className="text-3xl lg:text-4xl font-bold text-white">
|
||
100+
|
||
</div>
|
||
<div className="text-sm text-gray-400 leading-tight">
|
||
AI Models Deployed
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 flex flex-col items-center">
|
||
<div className="text-3xl lg:text-4xl font-bold text-white">
|
||
85%
|
||
</div>
|
||
<div className="text-sm text-gray-400 leading-tight">
|
||
Process Automation
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 flex flex-col items-center">
|
||
<div className="text-3xl lg:text-4xl font-bold text-white">
|
||
40%
|
||
</div>
|
||
<div className="text-sm text-gray-400 leading-tight">
|
||
Cost Reduction
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2 flex flex-col items-center">
|
||
<div className="text-3xl lg:text-4xl font-bold text-white">
|
||
24/7
|
||
</div>
|
||
<div className="text-sm text-gray-400 leading-tight">
|
||
AI Operations
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Enhanced Horizontal Tag Scroller with AI Technologies
|
||
const HorizontalTagScroller = () => {
|
||
const technologies = [
|
||
{ name: "Machine Learning", icon: Brain, color: "text-blue-400" },
|
||
{
|
||
name: "Natural Language Processing",
|
||
icon: MessageCircle,
|
||
color: "text-green-400",
|
||
},
|
||
{ name: "Computer Vision", icon: Eye, color: "text-purple-400" },
|
||
{ name: "Deep Learning", icon: Layers, color: "text-cyan-400" },
|
||
{
|
||
name: "Predictive Analytics",
|
||
icon: TrendingUp,
|
||
color: "text-orange-400",
|
||
},
|
||
{ name: "AI Automation", icon: Bot, color: "text-yellow-400" },
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-background">
|
||
<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-left mb-20"
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold mb-8">
|
||
<span className="text-white">Advanced </span>
|
||
<span className="text-[#E5195E]">AI Technologies</span>
|
||
<span className="text-white"> We Master</span>
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
|
||
Cutting‑edge artificial intelligence technologies that power
|
||
next‑generation business solutions and AI‑powered features for
|
||
modern mobile and web applications.
|
||
</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="relative overflow-hidden"
|
||
>
|
||
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
|
||
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
|
||
|
||
<div className="flex animate-marquee hover:animate-marquee-paused">
|
||
{/* First set */}
|
||
{technologies.map((tech, index) => {
|
||
const IconComponent = tech.icon;
|
||
return (
|
||
<motion.div
|
||
key={`first-${tech.name}-${index}`}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
className="group flex-shrink-0 mx-3"
|
||
>
|
||
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
||
{tech.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
|
||
{/* Second and third sets for seamless loop */}
|
||
{[...technologies, ...technologies].map((tech, index) => {
|
||
const IconComponent = tech.icon;
|
||
return (
|
||
<motion.div
|
||
key={`loop-${tech.name}-${index}`}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{
|
||
duration: 0.5,
|
||
delay: (index + technologies.length) * 0.1,
|
||
}}
|
||
viewport={{ once: true }}
|
||
className="group flex-shrink-0 mx-3"
|
||
>
|
||
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
||
{tech.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Why Choose WDI Section
|
||
const SideBySideContentWithIcons = () => {
|
||
const advantages = [
|
||
{
|
||
id: "expertise",
|
||
title: "AI Expertise",
|
||
icon: Brain,
|
||
},
|
||
{
|
||
id: "automation",
|
||
title: "Process Automation",
|
||
icon: Bot,
|
||
},
|
||
{
|
||
id: "insights",
|
||
title: "Data-Driven Insights",
|
||
icon: TrendingUp,
|
||
},
|
||
{
|
||
id: "scalable",
|
||
title: "Scalable Solutions",
|
||
icon: Zap,
|
||
},
|
||
{
|
||
id: "innovation",
|
||
title: "Continuous Innovation",
|
||
icon: Lightbulb,
|
||
},
|
||
];
|
||
|
||
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-left mb-16"
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
|
||
<span className="text-white">Why Choose </span>
|
||
<span className="text-[#E5195E]">WDI</span>
|
||
<span className="text-white"> for AI Solutions</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-gray-300 leading-relaxed">
|
||
Leading AI innovation with proven results and expertise in
|
||
AI‑powered mobile and web development for modern businesses.
|
||
</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-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
|
||
>
|
||
{advantages.map((advantage, index) => {
|
||
const IconComponent = advantage.icon;
|
||
|
||
return (
|
||
<motion.div
|
||
key={advantage.id}
|
||
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-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
|
||
<CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
|
||
<div className="mb-6">
|
||
<IconComponent className="w-10 h-10 text-accent mx-auto" />
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-white leading-tight">
|
||
{advantage.title}
|
||
</h3>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Service Categories Grid
|
||
const TabbedServiceDisplay = () => {
|
||
const navigate = useNavigate();
|
||
const services = [
|
||
{
|
||
title: "AI Strategy & Consulting",
|
||
icon: Lightbulb,
|
||
description:
|
||
"Strategic AI roadmaps and implementation guidance for business transformation.",
|
||
link: "/services/ai-strategy-consulting",
|
||
},
|
||
{
|
||
title: "AI-Powered Automation & Workflows",
|
||
icon: Bot,
|
||
description:
|
||
"Intelligent automation solutions that streamline business processes.",
|
||
link: "/services/ai-automation-workflows",
|
||
},
|
||
{
|
||
title: "AI Integration into Digital Products",
|
||
icon: Zap,
|
||
description:
|
||
"Seamlessly integrate AI capabilities into existing digital products.",
|
||
link: "/services/ai-integration-digital-products",
|
||
},
|
||
{
|
||
title: "Gen AI Integration",
|
||
icon: Sparkles,
|
||
description:
|
||
"Leverage generative AI for content creation and enhanced user experiences.",
|
||
link: "/services/gen-ai-integration-digital-products",
|
||
},
|
||
{
|
||
title: "AI Chatbots & Virtual Assistants",
|
||
icon: MessageCircle,
|
||
description:
|
||
"Intelligent conversational AI solutions for customer engagement.",
|
||
link: "/services/ai-chatbots-virtual-assistants",
|
||
},
|
||
{
|
||
title: "AI Model Deployment & MLOps",
|
||
icon: Settings,
|
||
description: "End-to-end ML operations for scalable AI model deployment.",
|
||
link: "/services/ai-model-deployment-mlops",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-background">
|
||
<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-left mb-20"
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
||
AI Services & Solutions
|
||
</h2>
|
||
<p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
|
||
Comprehensive artificial intelligence services, including AI mobile
|
||
app development and AI‑powered features, designed to transform your
|
||
business operations and drive innovation.
|
||
</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"
|
||
>
|
||
{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 cursor-pointer"
|
||
onClick={() => navigate(service.link)}
|
||
>
|
||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||
<div className="flex flex-col items-start space-y-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-white mb-4">
|
||
{service.title}
|
||
</h3>
|
||
<p className="text-gray-400 leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Updated CTA Section with new design
|
||
const InlineCTA = () => {
|
||
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-left 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"
|
||
>
|
||
{/* Ready to Launch Badge */}
|
||
<div className="inline-block">
|
||
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
|
||
<div className="flex items-center gap-2">
|
||
<Rocket className="w-4 h-4 text-[#E5195E]" />
|
||
<span className="text-[#E5195E] text-sm font-medium">
|
||
Ready to Launch?
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Heading */}
|
||
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
|
||
<span className="text-white">Transform Your Business with </span>
|
||
<span className="text-[#E5195E]">AI Innovation</span>
|
||
</h2>
|
||
|
||
{/* Subtitle */}
|
||
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
|
||
Unlock the power of artificial intelligence to automate processes,
|
||
gain insights, and drive competitive advantage with AI‑powered
|
||
mobile and web solutions.
|
||
</p>
|
||
|
||
{/* CTA Button */}
|
||
<div className="flex flex-col items-start gap-4">
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||
// onClick={() => navigate("/contact/schedule-a-discovery-call")}
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Bot className="w-6 h-6 flex-shrink-0" />
|
||
<span>Start Your AI Journey</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
{/* Small benefit text */}
|
||
<p className="text-sm text-gray-400">
|
||
Strategy consultation • AI readiness assessment • Custom
|
||
solution design
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// AI Specialists Section
|
||
const HireDevelopersSection = () => {
|
||
const specialists = [
|
||
{
|
||
title: "AI Engineers",
|
||
icon: Brain,
|
||
skills: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras"],
|
||
iconBg: "bg-blue-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/full-stack-developers",
|
||
},
|
||
{
|
||
title: "ML Engineers",
|
||
icon: Cpu,
|
||
skills: ["Python", "R", "MLOps", "Data Pipeline"],
|
||
iconBg: "bg-green-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/full-stack-developers",
|
||
},
|
||
{
|
||
title: "Data Scientists",
|
||
icon: TrendingUp,
|
||
skills: ["Statistics", "Analytics", "Visualization", "Research"],
|
||
iconBg: "bg-purple-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/full-stack-developers",
|
||
},
|
||
{
|
||
title: "AI Consultants",
|
||
icon: Lightbulb,
|
||
skills: ["Strategy", "Implementation", "Training", "Support"],
|
||
iconBg: "bg-orange-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/full-stack-developers",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-background">
|
||
<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-left mb-20"
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold mb-8">
|
||
<span className="text-white">Hire Our </span>
|
||
<span className="text-[#E5195E]">AI Specialists</span>
|
||
</h2>
|
||
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
|
||
Get access to expert AI professionals and AI mobile application developers who build intelligent solutions that drive business transformation.
|
||
</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 xl:grid-cols-4 gap-8"
|
||
>
|
||
{specialists.map((specialist, index) => {
|
||
const IconComponent = specialist.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: -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">
|
||
{/* Header */}
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div
|
||
className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
|
||
>
|
||
<IconComponent
|
||
className={`w-6 h-6 ${specialist.iconColor}`}
|
||
/>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
||
Artificial Intelligence
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||
{specialist.title}
|
||
</h3>
|
||
</div>
|
||
|
||
{/* Skills */}
|
||
<div className="px-8 pb-6 flex-1">
|
||
<div className="flex flex-wrap gap-2">
|
||
{specialist.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-white/10 text-foreground"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA */}
|
||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||
<ShimmerButton
|
||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||
// onClick={() => navigate(specialist.link)}
|
||
>
|
||
<div className="inline-flex items-center justify-center gap-2">
|
||
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
||
<span className="font-medium">Hire Now</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// FAQ data for AI Services
|
||
const aiServicesFAQs = [
|
||
{
|
||
question: "What types of AI solutions can WDI develop?",
|
||
answer:
|
||
"We develop a wide range of AI solutions, including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs and AI mobile app development requirements.",
|
||
},
|
||
{
|
||
question: "How do you ensure AI models are accurate and reliable?",
|
||
answer:
|
||
"We follow rigorous testing methodologies, use cross‑validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results for your AI‑powered applications.",
|
||
},
|
||
{
|
||
question: "Can you integrate AI into our existing software systems?",
|
||
answer:
|
||
"Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack and support AI‑powered design.",
|
||
},
|
||
{
|
||
question: "What is your approach to data privacy and AI ethics?",
|
||
answer:
|
||
"We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks for responsible AI solutions.",
|
||
},
|
||
{
|
||
question: "How long does it take to develop and deploy an AI solution?",
|
||
answer:
|
||
"Development timelines vary based on complexity, but typically range from 3–6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery of AI‑powered features.",
|
||
},
|
||
];
|
||
|
||
export function ArtificialIntelligenceServices() {
|
||
return (
|
||
<div className="dark min-h-screen bg-background">
|
||
{/* <Navigation /> */}
|
||
<HeroWithCTA />
|
||
<HorizontalTagScroller />
|
||
<SideBySideContentWithIcons />
|
||
<TabbedServiceDisplay />
|
||
<ProcessSection />
|
||
<InlineCTA />
|
||
<HireDevelopersSection />
|
||
<FAQSection
|
||
title="AI Services Questions"
|
||
subtitle="Get answers to common questions about our artificial intelligence services and AI‑powered features."
|
||
faqs={aiServicesFAQs}
|
||
/>
|
||
{/* <Footer /> */}
|
||
</div>
|
||
);
|
||
}
|