772 lines
30 KiB
TypeScript
772 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 { navigateTo } from "../App";
|
|
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";
|
|
|
|
// Enhanced Hero Section
|
|
const HeroWithCTA = () => {
|
|
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/services" />
|
|
|
|
{/* 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 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={() => navigateTo('/contact/schedule-a-discovery-call')}
|
|
onClick={() => navigateTo("/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={() => navigateTo("/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.
|
|
</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.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>
|
|
);
|
|
})}
|
|
|
|
{/* 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.
|
|
</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.1 }}
|
|
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 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 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.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group cursor-pointer"
|
|
onClick={() => navigateTo(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 = () => {
|
|
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.
|
|
</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={() => navigateTo("/contact/schedule-a-discovery-call")}
|
|
onClick={() => navigateTo("/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 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.1 }}
|
|
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={() => navigateTo(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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
];
|
|
|
|
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."
|
|
faqs={aiServicesFAQs}
|
|
/>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|