fix all execpt iosapp

components/UIUXDesignAnimation.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import { 
+  PenTool,
+  Users, 
+  Figma,
+  MousePointer,
+  Palette,
+  Layers,
+  Eye,
+  Heart,
+  Lightbulb,
+  Target,
+  Monitor,
+  Smartphone,
+  Tablet,
+  RefreshCcw,
+  CheckCircle2,
+  Star,
+  TrendingUp,
+  Zap
+} from 'lucide-react';
+
+// UI/UX Design Animation Component
+export const UIUXDesignAnimation = () => {
+  return (
+    <div className="w-full h-full relative rounded-xl overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-800/30 backdrop-blur-sm">
+      <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 to-purple-500/5 rounded-xl"></div>
+      
+      {/* Main Design Hub Visualization */}
+      <div className="relative z-10 w-full h-full flex items-center justify-center p-8">
+        
+        {/* Central Design Hub - Similar to Cloud Hub */}
+        <div className="relative">
+          {/* Main Design Container */}
+          <div className="w-32 h-32 relative">
+            {/* Primary Design Shape */}
+            <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/30 to-purple-500/30 rounded-2xl animate-pulse">
+              <div className="absolute inset-4 bg-gradient-to-br from-pink-500/40 to-violet-500/40 rounded-2xl animate-[float_3s_ease-in-out_infinite]">
+                <div className="absolute inset-4 bg-gradient-to-br from-white/20 to-white/10 rounded-xl flex items-center justify-center">
+                  <PenTool className="w-8 h-8 text-white animate-pulse" />
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Orbiting Design Elements */}
+          <div className="absolute inset-0">
+            {/* User Research Node */}
+            <div className="absolute -top-6 -right-6 w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center animate-[orbit_8s_linear_infinite] shadow-lg">
+              <Users className="w-6 h-6 text-white" />
+            </div>
+            
+            {/* Prototyping Node */}
+            <div className="absolute -bottom-4 -left-6 w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-400 rounded-lg flex items-center justify-center animate-[orbit_6s_linear_infinite_reverse] shadow-lg">
+              <MousePointer className="w-5 h-5 text-white" />
+            </div>
+            
+            {/* Design Systems Node */}
+            <div className="absolute top-1/2 -left-12 w-9 h-9 bg-gradient-to-r from-purple-500 to-violet-400 rounded-full flex items-center justify-center animate-[orbit_10s_linear_infinite] shadow-lg">
+              <Layers className="w-4 h-4 text-white" />
+            </div>
+            
+            {/* User Testing Node */}
+            <div className="absolute top-1/4 -right-10 w-11 h-11 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-2xl flex items-center justify-center animate-[orbit_7s_linear_infinite_reverse] shadow-lg">
+              <Eye className="w-5 h-5 text-white" />
+            </div>
+          </div>
+        </div>
+        
+        {/* Design Process Flow Lines */}
+        <div className="absolute inset-0 pointer-events-none">
+          {/* Animated Connection Lines for Design Flow */}
+          <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="designFlowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
+                <stop offset="50%" stopColor="#EC4899" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
+              </linearGradient>
+              <filter id="designGlow">
+                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feMerge> 
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+            </defs>
+            
+            {/* Dynamic user journey flow lines */}
+            <path
+              d="M 100 200 Q 200 100 300 200 T 500 200"
+              stroke="url(#designFlowGradient)"
+              strokeWidth="2"
+              fill="none"
+              filter="url(#designGlow)"
+              className="animate-pulse"
+            />
+            <path
+              d="M 150 300 Q 250 200 350 300 T 550 300"
+              stroke="url(#designFlowGradient)"
+              strokeWidth="1.5"
+              fill="none"
+              filter="url(#designGlow)"
+              className="animate-pulse"
+              style={{ animationDelay: '1s' }}
+            />
+            
+            {/* Additional design process flow lines */}
+            <path
+              d="M 50 150 Q 150 50 250 150 T 450 150"
+              stroke="url(#designFlowGradient)"
+              strokeWidth="1"
+              fill="none"
+              filter="url(#designGlow)"
+              className="animate-pulse"
+              style={{ animationDelay: '2s' }}
+            />
+          </svg>
+        </div>
+        
+        {/* Floating Design Elements & Wireframe Components */}
+        <div className="absolute inset-0 pointer-events-none">
+          {/* Design element particles */}
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className={`absolute w-2 h-2 bg-gradient-to-r from-[#E5195E]/80 to-pink-400/80 rounded-full animate-[float_${3 + (i % 3)}s_ease-in-out_infinite] shadow-sm`}
+              style={{
+                top: `${20 + (i * 12)}%`,
+                left: `${15 + (i * 9)}%`,
+                animationDelay: `${i * 0.4}s`
+              }}
+            />
+          ))}
+          
+          {/* Additional floating UI elements */}
+          <div className="absolute top-1/6 right-1/4 w-1 h-1 bg-violet-400/60 rounded-full animate-[float_2s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '0.5s' }} />
+          <div className="absolute bottom-1/4 left-1/5 w-1.5 h-1.5 bg-pink-400/70 rounded-full animate-[float_4s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '1.5s' }} />
+          <div className="absolute top-2/3 right-1/6 w-1 h-1 bg-blue-400/60 rounded-full animate-[float_3s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '2.5s' }} />
+        </div>
+        
+        {/* Design Performance Metrics */}
+        <div className="absolute bottom-8 left-8 flex items-center gap-4">
+          <div className="flex items-center gap-2 px-3 py-1 bg-pink-500/20 backdrop-blur-sm rounded-full border border-pink-500/30">
+            <TrendingUp className="w-3 h-3 text-pink-400" />
+            <span className="text-xs text-pink-400 font-medium">85% Conversion</span>
+          </div>
+          <div className="flex items-center gap-2 px-3 py-1 bg-green-500/20 backdrop-blur-sm rounded-full border border-green-500/30">
+            <Star className="w-3 h-3 text-green-400" />
+            <span className="text-xs text-green-400 font-medium">4.9/5 Rating</span>
+          </div>
+        </div>
+        
+        {/* Accessibility & User Experience Badge */}
+        <div className="absolute top-8 right-8 flex items-center gap-2 px-3 py-1 bg-purple-500/20 backdrop-blur-sm rounded-full border border-purple-500/30">
+          <Heart className="w-3 h-3 text-purple-400" />
+          <span className="text-xs text-purple-400 font-medium">Accessible Design</span>
+        </div>
+        
+        {/* UI/UX Design Badge */}
+        <div className="absolute top-8 left-8 flex items-center gap-2 px-3 py-1 bg-[#E5195E]/20 backdrop-blur-sm rounded-full border border-[#E5195E]/30">
+          <Figma className="w-3 h-3 text-[#E5195E]" />
+          <span className="text-xs text-[#E5195E] font-medium">UI/UX Design</span>
+        </div>
+        
+        {/* User Satisfaction Indicator */}
+        <div className="absolute bottom-8 right-8 flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+          <span className="text-xs text-white/70 font-medium">Users Engaged</span>
+        </div>
+        
+        {/* Additional Design Elements */}
+        <div className="absolute top-1/3 left-1/6">
+          <div className="flex items-center gap-1 px-2 py-1 bg-blue-500/20 backdrop-blur-sm rounded-lg border border-blue-500/30">
+            <Monitor className="w-2 h-2 text-blue-400" />
+            <span className="text-xs text-blue-400 font-medium">Web</span>
+          </div>
+        </div>
+        
+        <div className="absolute bottom-1/3 right-1/6">
+          <div className="flex items-center gap-1 px-2 py-1 bg-green-500/20 backdrop-blur-sm rounded-lg border border-green-500/30">
+            <Smartphone className="w-2 h-2 text-green-400" />
+            <span className="text-xs text-green-400 font-medium">Mobile</span>
+          </div>
+        </div>
+        
+        {/* Design System Component */}
+        <div className="absolute top-2/3 left-1/4">
+          <div className="flex items-center gap-1 px-2 py-1 bg-purple-500/20 backdrop-blur-sm rounded-lg border border-purple-500/30">
+            <Palette className="w-2 h-2 text-purple-400" />
+            <span className="text-xs text-purple-400 font-medium">Branding</span>
+          </div>
+        </div>
+        
+        {/* User Research Insight */}
+        <div className="absolute top-1/4 right-1/3">
+          <div className="flex items-center gap-1 px-2 py-1 bg-cyan-500/20 backdrop-blur-sm rounded-lg border border-cyan-500/30">
+            <Lightbulb className="w-2 h-2 text-cyan-400" />
+            <span className="text-xs text-cyan-400 font-medium">Insights</span>
+          </div>
+        </div>
+        
+        {/* A/B Testing Component */}
+        <div className="absolute bottom-1/2 left-1/8">
+          <div className="flex items-center gap-1 px-2 py-1 bg-orange-500/20 backdrop-blur-sm rounded-lg border border-orange-500/30">
+            <RefreshCcw className="w-2 h-2 text-orange-400" />
+            <span className="text-xs text-orange-400 font-medium">A/B Test</span>
+          </div>
+        </div>
+        
+        {/* Device Responsive Indicators */}
+        <div className="absolute top-1/2 right-1/8">
+          <div className="flex items-center gap-1 px-2 py-1 bg-indigo-500/20 backdrop-blur-sm rounded-lg border border-indigo-500/30">
+            <Tablet className="w-2 h-2 text-indigo-400" />
+            <span className="text-xs text-indigo-400 font-medium">Tablet</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UIUXDesignAnimation;

index.html

@@ -24,6 +24,119 @@
   <meta name="twitter:description"
     content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
 
+  <!-- Google tag (gtag.js) -->
+
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-L6SV4HF6QY"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', 'G-L6SV4HF6QY');
+  </script>
+
+  <meta name="google-site-verification" content="NBkTjRlBo47a6DUYMSqQNM47BLgz0fEH-8FRqo1HANg" />
+
+  <!-- Microsoft Clarity -->
+
+  <script type="text/javascript">
+    (function (c, l, a, r, i, t, y) {
+      c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
+      t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
+      y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
+    })(window, document, "clarity", "script", "b533cay3zu");
+  </script>
+
+  <!-- Start of HubSpot Embed Code -->
+  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/44044909.js"></script>
+  <!-- End of HubSpot Embed Code -->
+
+  <!-- Hotjar -->
+
+  <script type="text/javascript">
+    (function (c, l, a, r, i, t, y) {
+      c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
+      t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
+      y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
+    })(window, document, "clarity", "script", "b533cay3zu");
+  </script>
+
+  <!-- Mixpanel -->
+
+  <script type="text/javascript">
+    (function (f, b) {
+      if (!b.__SV) {
+        var e, g, i, h;
+        window.mixpanel = b;
+        b._i = [];
+        b.init = function (e, f, c) {
+          function g(a, d) {
+            var b = d.split(".");
+            2 == b.length && ((a = a[b[0]]), (d = b[1]));
+            a[d] = function () {
+              a.push([d].concat(Array.prototype.slice.call(arguments, 0)));
+            };
+          }
+          var a = b;
+          "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel");
+          a.people = a.people || [];
+          a.toString = function (a) {
+            var d = "mixpanel";
+            "mixpanel" !== c && (d += "." + c);
+            a || (d += " (stub)");
+            return d;
+          };
+          a.people.toString = function () {
+            return a.toString(1) + ".people (stub)";
+          };
+          i =
+            "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(
+              " "
+            );
+          for (h = 0; h < i.length; h++) g(a, i[h]);
+          var j = "set set_once union unset remove delete".split(" ");
+          a.get_group = function () {
+            function b(c) {
+              d[c] = function () {
+                call2_args = arguments;
+                call2 = [c].concat(Array.prototype.slice.call(call2_args, 0));
+                a.push([e, call2]);
+              };
+            }
+            for (
+              var d = {},
+              e = ["get_group"].concat(
+                Array.prototype.slice.call(arguments, 0)
+              ),
+              c = 0;
+              c < j.length;
+              c++
+            )
+              b(j[c]);
+            return d;
+          };
+          b._i.push([e, f, c]);
+        };
+        b.__SV = 1.2;
+        e = f.createElement("script");
+        e.type = "text/javascript";
+        e.async = !0;
+        e.src =
+          "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL
+            ? MIXPANEL_CUSTOM_LIB_URL
+            : "file:" === f.location.protocol &&
+              "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)
+              ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"
+              : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
+        g = f.getElementsByTagName("script")[0];
+        g.parentNode.insertBefore(e, g);
+      }
+    })(document, window.mixpanel || []);
+  </script>
+
+
+
+
+
   <!-- Favicon -->
   <link rel="shortcut icon" href="https://www.wdipl.com/public/img/favIcon.webp" type="image/x-icon" />
 </head>

pages/APIBackendDevelopment.tsx

@@ -39,6 +39,7 @@ 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 iotDeviceImage from "../src/images/iot-device.webp";
 
 // API & Backend Development Hero Section
 const APIHeroWithCTA = () => {
@@ -941,7 +942,7 @@ const APICaseStudies = () => {
       title: "IoT Device Management Platform",
       client: "SmartTech Solutions",
       description: "Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
-      image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop&auto=format",
+      image: iotDeviceImage,
       results: "500K+ devices managed seamlessly",
       gradient: "from-purple-500/20 to-pink-500/20",
       features: "IoT Integration, Real-time Data, Device Management"

pages/AdminPanelsDashboards.tsx

@@ -39,6 +39,7 @@ 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 healthcareImage from "../src/images/healthcare.webp";
 
 // Admin Panels & Dashboards Hero Section
 const AdminHeroWithCTA = () => {
@@ -803,7 +804,7 @@ const AdminCaseStudies = () => {
       title: "Healthcare Practice Management Dashboard",
       client: "MedCare Solutions",
       description: "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      image: healthcareImage,
       results: "75% reduction in admin time",
       gradient: "from-blue-500/20 to-cyan-500/20",
       features: "Patient Management, Appointment Scheduling, Billing Integration"

pages/CustomWebAppDevelopment.tsx

@@ -38,6 +38,8 @@ 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 patientManagementPortal from "../src/images/patient-management-portal.webp";
+import awsLogo from "../src/images/aws-logo.png";
 
 // Custom Web App Development Hero Section
 const CustomWebAppHeroWithCTA = () => {
@@ -559,7 +561,7 @@ const WebAppTechStack = () => {
     { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
     { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
     { name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
-    { name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud" },
+    { name: "AWS", logo: awsLogo, category: "Cloud" },
     { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
     { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
     { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
@@ -675,7 +677,7 @@ const WebAppCaseStudies = () => {
       title: "Patient Management Portal",
       client: "HealthFirst Clinics",
       description: "Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      image: patientManagementPortal,
       results: "60% reduction in admin tasks",
       gradient: "from-green-500/20 to-emerald-500/20",
       features: "HIPAA compliance, Telemedicine, Automated scheduling"

pages/DesignExperience.tsx

@@ -21,18 +21,19 @@ import {
   Github, Slack, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
   Cog, Settings, Sparkles, Handshake, Award, UserPlus, MousePointer, Smile
 } from "lucide-react";
+import UIUXDesignAnimation from "@/components/UIUXDesignAnimation";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
   return (
     <section className="relative py-20 overflow-hidden bg-black">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container mx-auto px-6 lg:px-8 max-w-7xl">
-        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
+        <div className="grid lg:grid-cols-2 gap-8 lg: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"
+            className="space-y-8 z-10"
           >
             {/* Design & Experience Label */}
             <motion.div
@@ -40,7 +41,10 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Design & Experience</span>
+              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
+                <PenTool className="w-4 h-4 text-[#E5195E]" />
+                <span className="text-white/90 text-sm font-medium">Design & Experience</span>
+              </div>
             </motion.div>
 
             {/* Main Heading */}
@@ -52,68 +56,62 @@ const HeroWithCTA = () => {
               </h1>
               
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design.
+                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
               </p>
             </div>
+
+            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
             
-            {/* CTAs */}
+            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.8, delay: 0.3 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
-              className="flex flex-col sm:flex-row gap-4"
+              className="flex flex-col sm:flex-row gap-4 pt-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton 
+                className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300" 
+                onClick={() => navigateTo('/start-a-project')}
+              >
                 <div className="inline-flex items-center gap-2">
-                  <Calendar className="w-4 h-4 flex-shrink-0" />
+                  <Calendar className="w-5 h-5 flex-shrink-0" />
                   <span>Design Consultation</span>
                 </div>
               </ShimmerButton>
               <Button
                 variant="secondary"
-                size="lg"
+                className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
-                className="text-lg px-8 py-4"
                 onClick={() => navigateTo('/case-studies')}
               >
-                <Eye className="w-4 h-4 flex-shrink-0" />
+                <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View Design Portfolio</span>
               </Button>
             </motion.div>
           </motion.div>
           
-          {/* Right side with stats */}
+          {/* Right side with Custom UI/UX Design Animation - METRICS REMOVED, EXPANDED CONTAINER */}
           <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"
+            className="relative flex items-center justify-center order-first lg:order-last"
           >
-            <motion.div
+            {/* Design Animation Container - EXPANDED TO FILL SPACE PREVIOUSLY OCCUPIED BY METRICS */}
-              initial={{ opacity: 0, y: 30 }}
+            <div className="w-full h-[500px] md:h-[600px] lg:h-[700px] max-w-full relative overflow-hidden">
-              animate={{ opacity: 1, y: 0 }}
+              {/* Animated Background Elements */}
-              transition={{ duration: 0.8, delay: 0.6 }}
+              <div className="absolute inset-0 overflow-hidden rounded-xl">
-              className="grid grid-cols-2 gap-8 text-center"
+                <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
-            >
+                <div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-pink-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
-              <div className="space-y-2 flex flex-col items-center">
+                <div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
-                <div className="text-3xl lg:text-4xl font-bold text-white">300+</div>
-                <div className="text-sm text-gray-400 leading-tight">Design Projects</div>
               </div>
               
-              <div className="space-y-2 flex flex-col items-center">
+              {/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
-                <div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
+              <div className="absolute inset-0 flex items-center justify-center">
-                <div className="text-sm text-gray-400 leading-tight">Conversion Increase</div>
+                <div className="w-full h-full scale-105 transform-gpu">
+                  <UIUXDesignAnimation />
+                </div>
               </div>
-              
+            </div>
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">4.9/5</div>
-                <div className="text-sm text-gray-400 leading-tight">User Satisfaction</div>
-              </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">70%</div>
-                <div className="text-sm text-gray-400 leading-tight">Faster User Tasks</div>
-              </div>
-            </motion.div>
           </motion.div>
         </div>
       </div>

pages/EcommercePlatforms.tsx

@@ -41,6 +41,7 @@ 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 multiVendorImage from "../src/images/multifood.webp";
 
 // eCommerce Platforms Hero Section
 const EcommerceHeroWithCTA = () => {
@@ -827,7 +828,7 @@ const EcommerceCaseStudies = () => {
       title: "Multi-Vendor Food Marketplace",
       client: "LocalEats",
       description: "Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
-      image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400&h=300&fit=crop&auto=format",
+      image: multiVendorImage,
       results: "500+ vendors onboarded",
       gradient: "from-green-500/20 to-emerald-500/20",
       features: "Real-time Tracking, Multi-vendor, Vendor Management"

pages/EnterpriseSoftwareSolutions.tsx

@@ -40,6 +40,7 @@ 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 awsLogo from "../src/images/aws-logo.png";
 
 // Enterprise Software Solutions Hero Section
 const EnterpriseHeroWithCTA = () => {
@@ -713,7 +714,7 @@ const EnterpriseTechStack = () => {
   ];
 
   const cloudPlatforms = [
-    { name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud" },
+    { name: "AWS", logo: awsLogo, category: "Cloud" },
     { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
     { name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud" }
   ];

pages/ProductModernization.tsx

@@ -37,6 +37,8 @@ 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 awsLogo from "../src/images/aws-logo.png";
+
 
 // Product Modernization Hero Section
 const ModernizationHeroWithCTA = () => {
@@ -671,7 +673,7 @@ const ModernizationTechStack = () => {
   ];
 
   const cloudPlatforms = [
-    { name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
+    { name: "AWS", logo: awsLogo, category: "Cloud Platform" },
     { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
     { name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
   ];

pages/SystemArchitectureDevOps.tsx

@@ -39,6 +39,8 @@ 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 awsLogo from "../src/images/aws-logo.png";
+
 
 // System Architecture & DevOps Hero Section
 const DevOpsHeroWithCTA = () => {
@@ -702,7 +704,7 @@ const DevOpsServices = () => {
 // DevOps Tech Stack
 const DevOpsTechStack = () => {
   const cloudPlatforms = [
-    { name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
+    { name: "AWS", logo: awsLogo, category: "Cloud Platform" },
     { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
     { name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
   ];

pages/WebCloudServices.tsx

@@ -11,16 +11,63 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { GridPattern } from "../components/GridPattern";
 import { navigateTo } from "../App";
-import { 
+import {
-  Globe, Cloud, Server, Database, Shield, Zap, Users, Star, 
+  Globe,
-  ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers, 
+  Cloud,
-  Target, Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
+  Server,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
+  Database,
-  Download, Calendar, Camera, Music, Gamepad2,
+  Shield,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
+  Zap,
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
+  Users,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Cpu, ShoppingCart
+  Star,
+  ArrowRight,
+  ChevronRight,
+  Clock,
+  TrendingUp,
+  Code,
+  Layers,
+  Target,
+  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,
+  Brain,
+  Cog,
+  Settings,
+  Sparkles,
+  Handshake,
+  Eye,
+  Award,
+  UserPlus,
+  Cpu,
+  ShoppingCart,
 } from "lucide-react";
+import heroMockupImage from "../src/images/webandcloud-hero.webp";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -40,7 +87,9 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -50,12 +99,13 @@ const HeroWithCTA = () => {
                 <span className="text-[#E5195E]">Cloud Solutions</span>
                 <span className="text-white"> for Modern Business</span>
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Build high-performance web applications and robust cloud infrastructure that scales with your business growth.
+                Build high-performance web applications and robust cloud
+                infrastructure that scales with your business growth.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -63,7 +113,10 @@ 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")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Schedule Cloud Consultation</span>
@@ -71,49 +124,56 @@ const HeroWithCTA = () => {
               </ShimmerButton>
               <Button
                 variant="secondary"
-                size="lg"
+                className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
-                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/case-studies")}
-                onClick={() => navigateTo('/case-studies')}
               >
-                <Eye className="w-4 h-4 flex-shrink-0" />
+                <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View Web Projects</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"
+            className="relative flex items-center justify-center order-first lg:order-last"
           >
-            <motion.div
+            {/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
-              initial={{ opacity: 0, y: 30 }}
+            <div
-              animate={{ opacity: 1, y: 0 }}
+              className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
-              transition={{ duration: 0.8, delay: 0.6 }}
+              style={{
-              className="grid grid-cols-2 gap-8 text-center"
+                position: "relative",
+                overflow: "hidden",
+              }}
             >
-              <div className="space-y-2 flex flex-col items-center">
+              {/* Hero Image with comprehensive CSS styling */}
-                <div className="text-3xl lg:text-4xl font-bold text-white">200+</div>
+              <img
-                <div className="text-sm text-gray-400 leading-tight">Web Apps Built</div>
+                src={heroMockupImage}
-              </div>
+                alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
-              
+                className="block transition-all duration-300 hover:scale-101"
-              <div className="space-y-2 flex flex-col items-center">
+                style={{
-                <div className="text-3xl lg:text-4xl font-bold text-white">99.9%</div>
+                  width: "100%",
-                <div className="text-sm text-gray-400 leading-tight">Uptime Achieved</div>
+                  height: "100%",
-              </div>
+                  objectFit: "contain",
-              
+                  objectPosition: "center",
-              <div className="space-y-2 flex flex-col items-center">
+                  maxWidth: "100%",
-                <div className="text-3xl lg:text-4xl font-bold text-white">15+</div>
+                  display: "block",
-                <div className="text-sm text-gray-400 leading-tight">Cloud Platforms</div>
+                }}
-              </div>
+              />
-              
+
-              <div className="space-y-2 flex flex-col items-center">
+              {/* Alternative background method for enhanced browser support */}
-                <div className="text-3xl lg:text-4xl font-bold text-white">50%</div>
+              <div
-                <div className="text-sm text-gray-400 leading-tight">Cost Reduction</div>
+                className="absolute inset-0 opacity-0 pointer-events-none"
-              </div>
+                style={{
-            </motion.div>
+                  backgroundImage: `url(${heroMockupImage})`,
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
+              />
+            </div>
           </motion.div>
         </div>
       </div>
@@ -129,7 +189,7 @@ const HorizontalTagScroller = () => {
     { name: "Node.js & Python", icon: Server, color: "text-purple-400" },
     { name: "Docker & Kubernetes", icon: Layers, color: "text-cyan-400" },
     { name: "MongoDB & PostgreSQL", icon: Database, color: "text-orange-400" },
-    { name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" }
+    { name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" },
   ];
 
   return (
@@ -148,10 +208,11 @@ const HorizontalTagScroller = () => {
             <span className="text-foreground"> We Master</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Modern web and cloud technologies that power enterprise-grade solutions.
+            Modern web and cloud technologies that power enterprise-grade
+            solutions.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +222,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 +238,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 +251,7 @@ const HorizontalTagScroller = () => {
                 </motion.div>
               );
             })}
-            
+
             {/* Second and third sets for seamless loop */}
             {[...technologies, ...technologies].map((tech, index) => {
               const IconComponent = tech.icon;
@@ -197,13 +260,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 +295,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "scalable",
       title: "Scalable Architecture",
-      icon: TrendingUp
+      icon: TrendingUp,
     },
     {
-      id: "security", 
+      id: "security",
       title: "Enterprise Security",
-      icon: Shield
+      icon: Shield,
     },
     {
       id: "performance",
       title: "High Performance",
-      icon: Zap
+      icon: Zap,
     },
     {
       id: "monitoring",
       title: "24/7 Monitoring",
-      icon: Eye
+      icon: Eye,
     },
     {
       id: "devops",
       title: "DevOps Excellence",
-      icon: Settings
+      icon: Settings,
-    }
+    },
   ];
 
   return (
@@ -266,7 +334,7 @@ const SideBySideContentWithIcons = () => {
             <span className="text-[#E5195E]">WDI</span>
             <span className="text-white"> for Web & Cloud</span>
           </h2>
-          
+
           <p className="text-2xl text-gray-300 leading-relaxed">
             Enterprise-grade solutions with proven reliability.
           </p>
@@ -297,7 +365,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 +386,42 @@ const TabbedServiceDisplay = () => {
     {
       title: "Custom Web Application Development",
       icon: Globe,
-      description: "Build scalable, secure web applications with modern frameworks.",
+      description:
-      link: "/services/custom-web-app-development"
+        "Build scalable, secure web applications with modern frameworks.",
+      link: "/services/custom-web-app-development",
     },
     {
-      title: "SaaS Product Engineering", 
+      title: "SaaS Product Engineering",
       icon: Cloud,
-      description: "End-to-end SaaS development with multi-tenant architecture.",
+      description:
-      link: "/services/saas-product-engineering"
+        "End-to-end SaaS development with multi-tenant architecture.",
+      link: "/services/saas-product-engineering",
     },
     {
       title: "E-commerce Platforms",
       icon: ShoppingCart,
-      description: "High-converting online stores with seamless payment integration.",
+      description:
-      link: "/services/ecommerce-platforms"
+        "High-converting online stores with seamless payment integration.",
+      link: "/services/ecommerce-platforms",
     },
     {
       title: "Admin Panels & Dashboards",
       icon: Monitor,
       description: "Intuitive admin interfaces with real-time analytics.",
-      link: "/services/admin-panels-dashboards"
+      link: "/services/admin-panels-dashboards",
     },
     {
       title: "API & Backend Development",
       icon: Server,
       description: "Robust APIs and scalable backend infrastructure.",
-      link: "/services/api-backend-development"
+      link: "/services/api-backend-development",
     },
     {
       title: "System Architecture & DevOps",
       icon: Layers,
       description: "Cloud-native architecture with automated deployment.",
-      link: "/services/system-architecture-devops"
+      link: "/services/system-architecture-devops",
-    }
+    },
   ];
 
   return (
@@ -367,10 +438,11 @@ const TabbedServiceDisplay = () => {
             Web & Cloud Service Areas
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
-            Comprehensive web development and cloud solutions designed for scalability and performance.
+            Comprehensive web development and cloud solutions designed for
+            scalability and performance.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +468,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 +512,43 @@ 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-4xl lg:text-5xl font-semibold leading-tight">
-              <span className="text-foreground">Build Scalable Web Solutions with </span>
+              <span className="text-foreground">
+                Build Scalable Web Solutions with{" "}
+              </span>
               <span className="text-[#E5195E]">Cloud-First Architecture</span>
             </h2>
-            
+
             {/* Subtitle */}
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Deploy robust, secure, and high-performance applications that scale with your business growth.
+              Deploy robust, secure, and high-performance applications that
+              scale with your business growth.
             </p>
-            
+
             {/* CTA Button */}
             <div className="flex flex-col items-center 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")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Cloud className="w-6 h-6 flex-shrink-0" />
                   <span>Start Your Cloud Project</span>
                 </div>
               </ShimmerButton>
-              
+
               {/* Small benefit text */}
               <p className="text-sm text-muted-foreground">
-                Free architecture review • Scalability assessment • Performance optimization
+                Free architecture review • Scalability assessment • Performance
+                optimization
               </p>
             </div>
           </motion.div>
@@ -489,15 +567,15 @@ const HireDevelopersSection = () => {
       skills: ["React", "Node.js", "Python", "TypeScript"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
-      title: "Cloud Architects", 
+      title: "Cloud Architects",
       icon: Cloud,
       skills: ["AWS", "Azure", "GCP", "Kubernetes"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "DevOps Engineers",
@@ -505,7 +583,7 @@ const HireDevelopersSection = () => {
       skills: ["Docker", "Jenkins", "Terraform", "CI/CD"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Backend Developers",
@@ -513,8 +591,8 @@ const HireDevelopersSection = () => {
       skills: ["API Design", "Microservices", "Databases"],
       iconBg: "bg-orange-500",
       iconColor: "text-white",
-      link: "/hire-talent/backend-developers"
+      link: "/hire-talent/backend-developers",
-    }
+    },
   ];
 
   return (
@@ -532,10 +610,11 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">Cloud Specialists</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Get access to expert developers who specialize in modern web and cloud technologies.
+            Get access to expert developers who specialize in modern web and
+            cloud technologies.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +639,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`}>
+                        <div
-                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
+                          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 +652,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 +700,29 @@ const HireDevelopersSection = () => {
 const webCloudFAQs = [
   {
     question: "What web technologies do you specialize in?",
-    answer: "We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices."
+    answer:
+      "We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices.",
   },
   {
     question: "How do you ensure web application security?",
-    answer: "We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA."
+    answer:
+      "We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA.",
   },
   {
     question: "Can you migrate our existing application to the cloud?",
-    answer: "Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity."
+    answer:
+      "Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity.",
   },
   {
     question: "What is your approach to scalable architecture?",
-    answer: "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently."
+    answer:
+      "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently.",
   },
   {
     question: "Do you provide ongoing maintenance and support?",
-    answer: "Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly."
+    answer:
-  }
+      "Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly.",
+  },
 ];
 
 export function WebCloudServices() {
@@ -644,7 +736,7 @@ export function WebCloudServices() {
       <ProcessSection />
       <InlineCTA />
       <HireDevelopersSection />
-      <FAQSection 
+      <FAQSection
         title="Web & Cloud Questions"
         subtitle="Get answers to common questions about our web development and cloud services."
         faqs={webCloudFAQs}
@@ -652,4 +744,4 @@ export function WebCloudServices() {
       <Footer />
     </div>
   );
-}
+}

pages/iOSAppDevelopment.tsx

@@ -5,7 +5,7 @@ import { Navigation } from "../components/Navigation";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
-import ranoutofImage  from "../src/images/ranoutof.webp";
+import ranoutofImage from "../src/images/ranoutof.webp";
 import seezunImage from "../src/images/seezun.webp";
 import wokaImage from "../src/images/woka.webp";
 
@@ -20,6 +20,7 @@ import {
   ArrowRight,
   Brush,
   Bug,
+  Calendar,
   CheckCircle,
   Code,
   DollarSign,
@@ -65,7 +66,9 @@ const IOSHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">iOS App Development</span>
+              <span className="text-white/70 text-sm font-medium">
+                iOS App Development
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -73,12 +76,13 @@ const IOSHeroWithCTA = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Expert iOS App Development Services
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive engagement.
+                Crafting intuitive, high-performance iPhone and iPad
+                applications that define user experience and drive engagement.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -88,8 +92,18 @@ const IOSHeroWithCTA = () => {
             >
               <ShimmerButton className="text-lg px-8 py-4">
                 <div className="inline-flex items-center gap-2">
-                  <svg className="w-6 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z" />
+                    className="w-6 h-4 flex-shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
+                    />
                   </svg>
                   <span>Get a Free Consultation</span>
                 </div>
@@ -103,7 +117,7 @@ const IOSHeroWithCTA = () => {
               </a>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with iOS device mockups */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -131,7 +145,7 @@ const IOSHeroWithCTA = () => {
                       <div className="h-1 bg-gray-600 rounded w-1/2"></div>
                     </div>
                   </div>
-                  
+
                   <div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
                     <div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
                       <div className="w-12 h-1 bg-gray-600 rounded-full"></div>
@@ -151,7 +165,7 @@ const IOSHeroWithCTA = () => {
                   </div>
                 </div>
               </motion.div>
-              
+
               {/* iOS Technology Badges */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -159,13 +173,22 @@ const IOSHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 0.6 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   Swift
                 </Badge>
-                <Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-orange-500/20 text-orange-300 border-orange-500/30"
+                >
                   SwiftUI
                 </Badge>
-                <Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-gray-500/20 text-gray-300 border-gray-500/30"
+                >
                   Xcode
                 </Badge>
               </motion.div>
@@ -742,28 +765,33 @@ const IOSKeyBenefits = () => {
     {
       icon: Zap,
       title: "Unmatched Performance",
-      description: "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness."
+      description:
+        "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness.",
     },
     {
       icon: Shield,
       title: "Superior Security",
-      description: "Leveraging Apple's robust security features for comprehensive data protection and user privacy."
+      description:
+        "Leveraging Apple's robust security features for comprehensive data protection and user privacy.",
     },
     {
       icon: Heart,
       title: "Premium User Experience",
-      description: "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design."
+      description:
+        "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design.",
     },
     {
       icon: Network,
       title: "Apple Ecosystem Integration",
-      description: "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features."
+      description:
+        "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features.",
     },
     {
       icon: DollarSign,
       title: "Strong Monetization Potential",
-      description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
+      description:
-    }
+        "High-value user base with effective in-app purchase mechanisms and premium positioning.",
+    },
   ];
 
   return (
@@ -780,7 +808,8 @@ const IOSKeyBenefits = () => {
             Why Choose Native iOS for Your App?
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            iOS development offers unparalleled advantages for businesses looking to create premium mobile experiences.
+            iOS development offers unparalleled advantages for businesses
+            looking to create premium mobile experiences.
           </p>
         </motion.div>
 
@@ -1021,6 +1050,43 @@ export const IOSAppDevelopment = () => {
         <IOSTechnologies />
       </section>
 
+      {/* CTA Section */}
+      <section className="py-32">
+        <div className="container mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center"
+          >
+            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
+              Ready to Build Your Next iOS App?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
+              Partner with us to create exceptional iOS applications that
+              delight users and drive business success.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-6 justify-center">
+              <ShimmerButton className="text-lg px-8 py-4 h-[56px]">
+                <div className="inline-flex items-center gap-2">
+                  <Apple className="w-5 h-5 flex-shrink-0" />
+                  <span>Start Your iOS Project</span>
+                </div>
+              </ShimmerButton>
+              <Button
+                variant="outline"
+                size="lg"
+                className="text-lg px-8 py-4 h-[56px] border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+              >
+                <Calendar className="w-5 h-5 mr-2" />
+                Schedule Consultation
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
       <section className="bg-background">
         <Footer />
       </section>