worked on the image and and form and links

components/HeroSection.tsx

@@ -70,7 +70,8 @@ export function HeroSection() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.3 }}
             >
-              Architecting Digital Success for Startups & Enterprises
+              {/* Architecting Digital Success for Startups & Enterprises */}
+              AI mobile application developers for Startups & Enterprises
             </motion.h1>
 
             <motion.p

components/Navigation.tsx

@@ -461,9 +461,9 @@ const navigationData = {
     { text: "Careers", icon: Briefcase, href: "/company/careers" },
   ],
   resources: [
-    { 
+    {
-      text: "Blogs", 
+      text: "Blogs",
-      icon: BookOpen, 
+      icon: BookOpen,
       href: "https://www.wdipl.com/blog",
       target: "_blank",
       rel: "noopener noreferrer"
@@ -621,7 +621,7 @@ const MegaMenu = ({
   timeoutRef,
 }: MegaMenuProps) => {
   const navigate = useNavigate();
-  
+
   if (!isOpen) return null;
 
   const handleNavigate = (path: string, target?: string) => {
@@ -1030,9 +1030,8 @@ export const Navigation = () => {
                   {item}
                   {hasDropdown(item) && (
                     <ChevronDown
-                      className={`w-4 h-4 transition-transform duration-200 ${
+                      className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
-                        activeMenu === item ? "rotate-180" : ""
+                        }`}
-                      }`}
                     />
                   )}
                 </a>
@@ -1045,7 +1044,8 @@ export const Navigation = () => {
               onClick={() => handleNavigation("/start-a-project")}
               className="hidden lg:flex"
             >
-              Get Started
+              {/* Get Started */}
+              Contact Us
             </Button>
 
             {/* Mobile Menu Button */}
@@ -1100,7 +1100,7 @@ export const Navigation = () => {
                     {item}
                   </a>
                 ))}
-                
+
                 {/* Mobile Resources Submenu */}
                 <div className="pl-4 space-y-2 border-l-2 border-[#E5195E]/30">
                   {navigationData.resources.map((resource) => (
@@ -1124,7 +1124,8 @@ export const Navigation = () => {
                   onClick={() => handleNavigation("/start-a-project")}
                   className="w-full mt-4"
                 >
-                  Get Started
+                  {/* Get Started */}
+                  Contact Us
                 </Button>
               </div>
             </div>

components/PackagesSection.tsx

@@ -15,7 +15,8 @@ const packages: Package[] = [
     icon: <Tablet className="w-8 h-8" />,
     title: "The Blueprint",
     timeline: "Product Definition in 1 Week",
-    priceRange: "$1,500 - $2,500",
+    // priceRange: "$1,500 - $2,500",
+    priceRange: "",
     features: [
       "Strategy & roadmap",
       "User flows & wireframes",
@@ -26,7 +27,9 @@ const packages: Package[] = [
     icon: <Rocket className="w-8 h-8" />,
     title: "The Prototype",
     timeline: "Working Demo in 2 Weeks",
-    priceRange: "$6,000 - $8,000",
+    // priceRange: "$6,000 - $8,000",
+    priceRange: "",
+
     features: [
       "Functional web or mobile prototype",
       "Core features implemented",
@@ -37,7 +40,9 @@ const packages: Package[] = [
     icon: <Crown className="w-8 h-8" />,
     title: "The Launchpad",
     timeline: "Market-Ready MVP in 6 Weeks",
-    priceRange: "$20,000 - $30,000",
+    // priceRange: "$20,000 - $30,000",
+    priceRange: "",
+
     features: [
       "Full website or app",
       "SEO-optimized & scalable",
@@ -50,7 +55,7 @@ export const PackagesSection = () => {
   return (
     <section className="relative py-20 bg-background overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
-      
+
       <div className="relative z-10 container mx-auto px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -63,7 +68,7 @@ export const PackagesSection = () => {
             Choose Your Speed. We'll Deliver Your Launch.
           </h2>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
           {packages.map((pkg, index) => (
             <motion.div
@@ -78,22 +83,22 @@ export const PackagesSection = () => {
               <div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
                 {pkg.icon}
               </div>
-              
+
               {/* Title */}
               <h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
                 {pkg.title}
               </h3>
-              
+
               {/* Timeline */}
               <p className="text-muted-foreground mb-4">
                 {pkg.timeline}
               </p>
-              
+
               {/* Price Range */}
               <div className="text-3xl font-semibold text-foreground mb-8">
                 {pkg.priceRange}
               </div>
-              
+
               {/* Features List */}
               <ul className="space-y-4">
                 {pkg.features.map((feature, idx) => (

pages/AutomationReshapingBusiness.tsx

@@ -9,6 +9,7 @@ import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { useNavigate } from "react-router-dom";
+import hospitalAi from "../assets/aihospital.jpg"
 
 const articleData = {
   id: "automation-reshaping-business",
@@ -276,7 +277,8 @@ const articleData = {
       title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
       readTime: "12 min read",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      image: hospitalAi,
       category: "Healthcare AI"
     }
   ]
@@ -286,7 +288,7 @@ export const AutomationReshapingBusiness = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -299,7 +301,7 @@ export const AutomationReshapingBusiness = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       window.open(shareUrl, '_blank', 'width=600,height=400');
     }
@@ -310,7 +312,7 @@ export const AutomationReshapingBusiness = () => {
   return (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
@@ -377,13 +379,13 @@ export const AutomationReshapingBusiness = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -478,15 +480,15 @@ export const AutomationReshapingBusiness = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
+                      <div
-                        key={article.id} 
+                        key={article.id}
                         className="group cursor-pointer"
                         onClick={() => navigate(`/articles/${article.id}`)}
                       >
@@ -508,11 +510,11 @@ export const AutomationReshapingBusiness = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
+
-                  <Button 
+                  <Button
-                    variant="outline" 
+                    variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
                     onClick={() => navigate('/resources/blog')}
                   >
@@ -527,10 +529,10 @@ export const AutomationReshapingBusiness = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                     onClick={() => navigate('/contact')}
                   >
@@ -552,21 +554,21 @@ export const AutomationReshapingBusiness = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to automate your business operations and drive efficiency? Our team of experts is here to help you 
+                Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
                 implement intelligent automation solutions that transform your business processes.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                   onClick={() => navigate('/contact')}
                 >
                   Start Your Automation Journey
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
-                  variant="outline" 
+                  variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
                   onClick={() => navigate('/resources/blog')}
                 >

pages/Blog.tsx

@@ -5,6 +5,7 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Input } from "../components/ui/input";
+import hospitalAi from "../assets/aihospital.jpg"
 import {
   Select,
   SelectContent,
@@ -57,8 +58,9 @@ export const Blog = () => {
         "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt:
         "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
-      image:
+      // image:
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
+      //   "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
+      image: hospitalAi,
       author: "Dr. Sarah Chen",
       date: "January 8, 2025",
       category: "Healthcare AI",

pages/ComplianceReadyFintech.tsx

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
+import hosptialAi from "../assets/aihospital.jpg"
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { useNavigate } from "react-router-dom";
@@ -196,7 +197,8 @@ const articleData = {
       title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
       readTime: "12 min read",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      image: hosptialAi,
       category: "Healthcare AI"
     },
     {

pages/ComplianceReadySystems.tsx

@@ -27,6 +27,7 @@ import {
   X,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import hospitalize from "../assets/hospitalise.jpg"
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
 import {
@@ -227,8 +228,8 @@ const ComplianceReadySystemsHero = () => {
                           animate={{ opacity: 1, scale: 1 }}
                           transition={{ duration: 0.5, delay: item.delay }}
                           className={`p-3 rounded-lg border text-center ${item.status === "compliant"
-                              ? "bg-green-500/10 border-green-500/30"
+                            ? "bg-green-500/10 border-green-500/30"
-                              : "bg-orange-500/10 border-orange-500/30"
+                            : "bg-orange-500/10 border-orange-500/30"
                             }`}
                         >
                           <div className="flex items-center justify-center mb-2">
@@ -240,16 +241,16 @@ const ComplianceReadySystemsHero = () => {
                           </div>
                           <div
                             className={`text-sm font-medium ${item.status === "compliant"
-                                ? "text-green-300"
+                              ? "text-green-300"
-                                : "text-orange-300"
+                              : "text-orange-300"
                               }`}
                           >
                             {item.standard}
                           </div>
                           <div
                             className={`text-xs ${item.status === "compliant"
-                                ? "text-green-400"
+                              ? "text-green-400"
-                                : "text-orange-400"
+                              : "text-orange-400"
                               }`}
                           >
                             {item.status === "compliant"
@@ -1141,8 +1142,9 @@ const ComplianceReadySystemsCaseStudies = () => {
       client: "Healthcare Provider",
       description:
         "Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
-      image:
+      // image:
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      //   "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      image: hospitalize,
       results: "Full HIPAA compliance in 8 months",
       engagement: "Healthcare compliance success",
       gradient: "from-blue-500/20 to-cyan-500/20",

pages/FutureOfAIHealthcare.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
+import hosptialAi from "../assets/aihospital.jpg"
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { useNavigate } from "react-router-dom";
 
@@ -109,7 +110,8 @@ const articleData = {
   readTime: "12 min read",
   category: "Healthcare AI",
   tags: ["Artificial Intelligence", "Healthcare", "Medical Technology", "Digital Health", "Machine Learning"],
-  bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format",
+  // bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format",
+  bannerImage: hosptialAi,
   relatedArticles: [
     {
       id: "compliance-ready-systems-fintech",
@@ -123,7 +125,7 @@ const articleData = {
       id: "automation-reshaping-business",
       title: "5 Ways Automation is Reshaping Business Operations",
       excerpt: "Discover how intelligent automation is transforming modern business processes and operations.",
-      readTime: "10 min read", 
+      readTime: "10 min read",
       image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop&auto=format",
       category: "Automation"
     },
@@ -142,7 +144,7 @@ export const FutureOfAIHealthcare = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -155,7 +157,7 @@ export const FutureOfAIHealthcare = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       window.open(shareUrl, '_blank', 'width=600,height=400');
     }
@@ -166,7 +168,7 @@ export const FutureOfAIHealthcare = () => {
   return (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
@@ -233,13 +235,13 @@ export const FutureOfAIHealthcare = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -334,15 +336,15 @@ export const FutureOfAIHealthcare = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
+                      <div
-                        key={article.id} 
+                        key={article.id}
                         className="group cursor-pointer"
                         onClick={() => navigate(`/articles/${article.id}`)}
                       >
@@ -364,11 +366,11 @@ export const FutureOfAIHealthcare = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
+
-                  <Button 
+                  <Button
-                    variant="outline" 
+                    variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
                     onClick={() => navigate('/resources/blog')}
                   >
@@ -383,10 +385,10 @@ export const FutureOfAIHealthcare = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                     onClick={() => navigate('/contact')}
                   >
@@ -408,21 +410,21 @@ export const FutureOfAIHealthcare = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to transform your healthcare technology with AI? Our team of experts is here to help you build 
+                Ready to transform your healthcare technology with AI? Our team of experts is here to help you build
                 innovative solutions that improve patient outcomes and operational efficiency.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                   onClick={() => navigate('/contact')}
                 >
                   Start Your AI Project
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
-                  variant="outline" 
+                  variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
                   onClick={() => navigate('/resources/blog')}
                 >

pages/HealthTechApplications.tsx

@@ -35,6 +35,7 @@ import {
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
+import hospitalize from "../assets/hospitalise.jpg"
 import {
   Accordion,
   AccordionContent,
@@ -391,18 +392,18 @@ const HealthTechHero = () => {
                       >
                         <div
                           className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
-                              ? "bg-blue-500/20"
+                            ? "bg-blue-500/20"
-                              : activity.color === "green"
+                            : activity.color === "green"
-                                ? "bg-green-500/20"
+                              ? "bg-green-500/20"
-                                : "bg-purple-500/20"
+                              : "bg-purple-500/20"
                             }`}
                         >
                           <activity.icon
                             className={`w-4 h-4 ${activity.color === "blue"
-                                ? "text-blue-400"
+                              ? "text-blue-400"
-                                : activity.color === "green"
+                              : activity.color === "green"
-                                  ? "text-green-400"
+                                ? "text-green-400"
-                                  : "text-purple-400"
+                                : "text-purple-400"
                               }`}
                           />
                         </div>
@@ -983,9 +984,10 @@ const HealthTechCaseStudies = () => {
         "WDI developed an end-to-end telemedicine solution with secure video conferencing, appointment scheduling, e-prescribing, and patient record access, ensuring full HIPAA compliance.",
       results:
         "Enabled 30% more patient consultations and extended reach to underserved areas, significantly improving patient access.",
-      image:
+      // image:
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      //   "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
-      engagement: "Telehealth transformation",
+      // engagement: "Telehealth transformation",
+      image: hospitalize,
       gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {

pages/Homepage.tsx

@@ -185,7 +185,8 @@ export const Homepage = () => {
                         <div className="text-center">
                             <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
                             <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
-                                End-to-end solutions for every stage of your product lifecycle.
+                                {/* End-to-end solutions for every stage of your product lifecycle. */}
+                                We are the ai app development company, End-to-end solutions for every stage of your product lifecycle.
                             </p>
                         </div>
                     </motion.div>

pages/LegacySystemScaling.tsx

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
+import hosptialAi from "../assets/aihospital.jpg"
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { useNavigate } from "react-router-dom";
@@ -218,7 +219,8 @@ const articleData = {
       title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
       excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
       readTime: "12 min read",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
+      image: hosptialAi,
       category: "Healthcare AI"
     },
     {
@@ -236,7 +238,7 @@ export const LegacySystemScaling = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -249,7 +251,7 @@ export const LegacySystemScaling = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       window.open(shareUrl, '_blank', 'width=600,height=400');
     }
@@ -260,7 +262,7 @@ export const LegacySystemScaling = () => {
   return (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
@@ -327,13 +329,13 @@ export const LegacySystemScaling = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -429,15 +431,15 @@ export const LegacySystemScaling = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
+                      <div
-                        key={article.id} 
+                        key={article.id}
                         className="group cursor-pointer"
                         onClick={() => navigate(`/articles/${article.id}`)}
                       >
@@ -459,11 +461,11 @@ export const LegacySystemScaling = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
+
-                  <Button 
+                  <Button
-                    variant="outline" 
+                    variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
                     onClick={() => navigate('/resources/blog')}
                   >
@@ -478,10 +480,10 @@ export const LegacySystemScaling = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                     onClick={() => navigate('/contact')}
                   >
@@ -503,21 +505,21 @@ export const LegacySystemScaling = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you 
+                Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you
                 build scalable, high-performance systems that grow with your business.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                   onClick={() => navigate('/contact')}
                 >
                   Start Your Modernization Project
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
-                <Button 
+                <Button
-                  size="lg" 
+                  size="lg"
-                  variant="outline" 
+                  variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
                   onClick={() => navigate('/resources/blog')}
                 >