WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

almost all linking done exept underdevelopment pages or not developed

Browse Source
This commit is contained in:
priyanshuvish
2025-07-22 16:14:11 +05:30
parent 5a3ef848f7
commit 07c8fe0b72
80 changed files with 13140 additions and 5842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
pages/ArtificialIntelligenceServices.tsx
View File

@@ -1,26 +1,29 @@
import React from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { ProcessSection } from "../components/ProcessSection";
import { FAQSection } from "../components/FAQSection";
import { AnimatedGradientText } from "../components/AnimatedGradientText";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import {
Bot, Brain, Zap, Target, Settings, Users, Star,
ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers,
Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
MessageSquare, Heart, CheckCircle, Lightbulb, Coffee,
Download, Calendar, Camera, Music, Gamepad2,
CreditCard, Bell, Mail, Search, Home, MapPin,
Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
Cog, Sparkles, Handshake, Eye, Award, UserPlus, Cpu, Database, Server
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";
// Enhanced Hero Section
const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Artificial Intelligence</span>
<span className="text-white/70 text-sm font-medium">
Artificial Intelligence
</span>
</motion.div>
{/* Main Heading - Left aligned, reduced font size */}
@@ -50,12 +55,14 @@ const HeroWithCTA = () => {
<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.
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 }}
@@ -63,7 +70,11 @@ const HeroWithCTA = () => {
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')}>
<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>
@@ -72,15 +83,15 @@ const HeroWithCTA = () => {
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
onClick={() => navigateTo('/case-studies')}
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 }}
@@ -95,23 +106,39 @@ const HeroWithCTA = () => {
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 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 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 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 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>
@@ -125,11 +152,19 @@ const HeroWithCTA = () => {
const HorizontalTagScroller = () => {
const technologies = [
{ name: "Machine Learning", icon: Brain, color: "text-blue-400" },
{ name: "Natural Language Processing", icon: MessageCircle, color: "text-green-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" }
{
name: "Predictive Analytics",
icon: TrendingUp,
color: "text-orange-400",
},
{ name: "AI Automation", icon: Bot, color: "text-yellow-400" },
];
return (
@@ -148,10 +183,11 @@ const HorizontalTagScroller = () => {
<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.
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 }}
@@ -161,7 +197,7 @@ const HorizontalTagScroller = () => {
>
<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) => {
@@ -177,7 +213,9 @@ const HorizontalTagScroller = () => {
>
<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}`}>
<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">
@@ -188,7 +226,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...technologies, ...technologies].map((tech, index) => {
const IconComponent = tech.icon;
@@ -197,13 +235,18 @@ const HorizontalTagScroller = () => {
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 }}
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}`}>
<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">
@@ -227,28 +270,28 @@ const SideBySideContentWithIcons = () => {
{
id: "expertise",
title: "AI Expertise",
icon: Brain
icon: Brain,
},
{
id: "automation",
id: "automation",
title: "Process Automation",
icon: Bot
icon: Bot,
},
{
id: "insights",
title: "Data-Driven Insights",
icon: TrendingUp
icon: TrendingUp,
},
{
id: "scalable",
title: "Scalable Solutions",
icon: Zap
icon: Zap,
},
{
id: "innovation",
title: "Continuous Innovation",
icon: Lightbulb
}
icon: Lightbulb,
},
];
return (
@@ -266,7 +309,7 @@ const SideBySideContentWithIcons = () => {
<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>
@@ -297,7 +340,7 @@ const SideBySideContentWithIcons = () => {
<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>
@@ -318,39 +361,44 @@ const TabbedServiceDisplay = () => {
{
title: "AI Strategy & Consulting",
icon: Lightbulb,
description: "Strategic AI roadmaps and implementation guidance for business transformation.",
link: "/services/ai-strategy-consulting"
description:
"Strategic AI roadmaps and implementation guidance for business transformation.",
link: "/services/ai-strategy-consulting",
},
{
title: "AI-Powered Automation & Workflows",
title: "AI-Powered Automation & Workflows",
icon: Bot,
description: "Intelligent automation solutions that streamline business processes.",
link: "/services/ai-automation-workflows"
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"
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"
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"
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"
}
link: "/services/ai-model-deployment-mlops",
},
];
return (
@@ -367,10 +415,11 @@ const TabbedServiceDisplay = () => {
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.
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 }}
@@ -396,7 +445,7 @@ const TabbedServiceDisplay = () => {
<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}
@@ -440,37 +489,42 @@ const InlineCTA = () => {
<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>
<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.
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
<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("/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
Strategy consultation • AI readiness assessment • Custom
solution design
</p>
</div>
</motion.div>
@@ -489,15 +543,15 @@ const HireDevelopersSection = () => {
skills: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras"],
iconBg: "bg-blue-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "ML Engineers",
title: "ML Engineers",
icon: Cpu,
skills: ["Python", "R", "MLOps", "Data Pipeline"],
iconBg: "bg-green-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Data Scientists",
@@ -505,7 +559,7 @@ const HireDevelopersSection = () => {
skills: ["Statistics", "Analytics", "Visualization", "Research"],
iconBg: "bg-purple-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "AI Consultants",
@@ -513,8 +567,8 @@ const HireDevelopersSection = () => {
skills: ["Strategy", "Implementation", "Training", "Support"],
iconBg: "bg-orange-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
}
link: "/hire-talent/full-stack-developers",
},
];
return (
@@ -532,10 +586,11 @@ const HireDevelopersSection = () => {
<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.
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 }}
@@ -560,8 +615,12 @@ const HireDevelopersSection = () => {
{/* 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
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">
@@ -569,26 +628,30 @@ const HireDevelopersSection = () => {
</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">
<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
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)}
>
@@ -613,24 +676,29 @@ const HireDevelopersSection = () => {
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."
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."
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."
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."
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."
}
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() {
@@ -644,7 +712,7 @@ export function ArtificialIntelligenceServices() {
<ProcessSection />
<InlineCTA />
<HireDevelopersSection />
<FAQSection
<FAQSection
title="AI Services Questions"
subtitle="Get answers to common questions about our artificial intelligence services."
faqs={aiServicesFAQs}
@@ -652,4 +720,4 @@ export function ArtificialIntelligenceServices() {
<Footer />
</div>
);
}
}