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,69 +56,63 @@ 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>
 
-            {/* CTAs */}
+            {/* BULLET POINTS REMOVED - Content flows directly to 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="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300" 
+                onClick={() => navigateTo('/start-a-project')}
               >
-              <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" />
+                  <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 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>
     </section>

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/WearableDeviceDevelopment.tsx

@@ -24,12 +24,17 @@ import {
   Target,
   TrendingUp,
   Watch,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
@@ -53,7 +58,9 @@ const WearableHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Wearable & IoT Development</span>
+              <span className="text-white/70 text-sm font-medium">
+                Wearable & IoT Development
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -63,7 +70,9 @@ const WearableHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Extending your digital presence to smartwatches, fitness trackers, IoT devices, and emerging platforms for unique user experiences.
+                Extending your digital presence to smartwatches, fitness
+                trackers, IoT devices, and emerging platforms for unique user
+                experiences.
               </p>
             </div>
 
@@ -168,23 +177,96 @@ const WearableHeroWithCTA = () => {
                   </motion.div>
 
                   {/* Connection Lines */}
-                  <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-80px', left: '-80px', width: '300px', height: '200px'}}>
+                  <svg
+                    className="absolute inset-0 w-full h-full pointer-events-none"
+                    style={{
+                      top: "-80px",
+                      left: "-80px",
+                      width: "300px",
+                      height: "200px",
+                    }}
+                  >
                     {/* Animated connection lines */}
                     <g className="opacity-30">
-                      <line x1="150" y1="100" x2="150" y2="20" stroke="#E5195E" strokeWidth="1" strokeDasharray="2,2">
+                      <line
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2s" repeatCount="indefinite" />
+                        x1="150"
+                        y1="100"
+                        x2="150"
+                        y2="20"
+                        stroke="#E5195E"
+                        strokeWidth="1"
+                        strokeDasharray="2,2"
+                      >
+                        <animate
+                          attributeName="stroke-dashoffset"
+                          values="0;-4"
+                          dur="2s"
+                          repeatCount="indefinite"
+                        />
                       </line>
-                      <line x1="150" y1="100" x2="220" y2="50" stroke="#E5195E" strokeWidth="1" strokeDasharray="2,2">
+                      <line
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.5s" repeatCount="indefinite" />
+                        x1="150"
+                        y1="100"
+                        x2="220"
+                        y2="50"
+                        stroke="#E5195E"
+                        strokeWidth="1"
+                        strokeDasharray="2,2"
+                      >
+                        <animate
+                          attributeName="stroke-dashoffset"
+                          values="0;-4"
+                          dur="2.5s"
+                          repeatCount="indefinite"
+                        />
                       </line>
-                      <line x1="150" y1="100" x2="240" y2="140" stroke="#E5195E" strokeWidth="1" strokeDasharray="2,2">
+                      <line
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="3s" repeatCount="indefinite" />
+                        x1="150"
+                        y1="100"
+                        x2="240"
+                        y2="140"
+                        stroke="#E5195E"
+                        strokeWidth="1"
+                        strokeDasharray="2,2"
+                      >
+                        <animate
+                          attributeName="stroke-dashoffset"
+                          values="0;-4"
+                          dur="3s"
+                          repeatCount="indefinite"
+                        />
                       </line>
-                      <line x1="150" y1="100" x2="60" y2="140" stroke="#E5195E" strokeWidth="1" strokeDasharray="2,2">
+                      <line
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.2s" repeatCount="indefinite" />
+                        x1="150"
+                        y1="100"
+                        x2="60"
+                        y2="140"
+                        stroke="#E5195E"
+                        strokeWidth="1"
+                        strokeDasharray="2,2"
+                      >
+                        <animate
+                          attributeName="stroke-dashoffset"
+                          values="0;-4"
+                          dur="2.2s"
+                          repeatCount="indefinite"
+                        />
                       </line>
-                      <line x1="150" y1="100" x2="80" y2="50" stroke="#E5195E" strokeWidth="1" strokeDasharray="2,2">
+                      <line
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.8s" repeatCount="indefinite" />
+                        x1="150"
+                        y1="100"
+                        x2="80"
+                        y2="50"
+                        stroke="#E5195E"
+                        strokeWidth="1"
+                        strokeDasharray="2,2"
+                      >
+                        <animate
+                          attributeName="stroke-dashoffset"
+                          values="0;-4"
+                          dur="2.8s"
+                          repeatCount="indefinite"
+                        />
                       </line>
                     </g>
                   </svg>
@@ -198,19 +280,31 @@ const WearableHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.2 }}
                 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"
+                >
                   <Watch className="w-3 h-3 mr-1" />
                   Smartwatches
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <HeartPulse className="w-3 h-3 mr-1" />
                   Fitness Bands
                 </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"
+                >
                   <Home className="w-3 h-3 mr-1" />
                   Connected Home
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Glasses className="w-3 h-3 mr-1" />
                   VR Headsets
                 </Badge>
@@ -229,28 +323,29 @@ const WearableBenefits = () => {
     {
       icon: Zap,
       title: "Enhanced User Convenience",
-      description: "Instant access to information and controls."
+      description: "Instant access to information and controls.",
     },
     {
       icon: Activity,
       title: "Unique Data Collection",
-      description: "Leveraging device sensors for health, environment data."
+      description: "Leveraging device sensors for health, environment data.",
     },
     {
       icon: Glasses,
       title: "Immersive Experiences",
-      description: "Expanding possibilities with AR/VR, smart home integration."
+      description:
+        "Expanding possibilities with AR/VR, smart home integration.",
     },
     {
       icon: TrendingUp,
       title: "New Revenue Streams",
-      description: "Tapping into emerging device ecosystems."
+      description: "Tapping into emerging device ecosystems.",
     },
     {
       icon: Award,
       title: "Competitive Edge",
-      description: "Differentiating your brand with innovative solutions."
+      description: "Differentiating your brand with innovative solutions.",
-    }
+    },
   ];
 
   return (
@@ -354,38 +449,81 @@ const WearableCapabilities = () => {
       title: "Smartwatch App Development",
       description: "Wear OS (Android Wear), watchOS (Apple Watch).",
       icon: Watch,
-      technologies: ["watchOS", "Wear OS", "SwiftUI", "WatchKit", "Compose for Wear OS", "Health APIs"]
+      technologies: [
+        "watchOS",
+        "Wear OS",
+        "SwiftUI",
+        "WatchKit",
+        "Compose for Wear OS",
+        "Health APIs",
+      ],
     },
     {
       title: "Fitness & Health Wearables",
       description: "Integration with health platforms, custom fitness apps.",
       icon: HeartPulse,
-      technologies: ["HealthKit", "Google Fit", "Heart Rate Sensors", "Step Tracking", "Sleep Monitoring", "Workout APIs"]
+      technologies: [
+        "HealthKit",
+        "Google Fit",
+        "Heart Rate Sensors",
+        "Step Tracking",
+        "Sleep Monitoring",
+        "Workout APIs",
+      ],
     },
     {
       title: "IoT Device Integration",
       description: "Building apps to control and monitor smart devices.",
       icon: Network,
-      technologies: ["MQTT", "CoAP", "Zigbee", "Matter", "AWS IoT", "Azure IoT Hub"]
+      technologies: [
+        "MQTT",
+        "CoAP",
+        "Zigbee",
+        "Matter",
+        "AWS IoT",
+        "Azure IoT Hub",
+      ],
     },
     {
       title: "AR/VR Application Development",
-      description: "Immersive experiences for augmented and virtual reality devices.",
+      description:
+        "Immersive experiences for augmented and virtual reality devices.",
       icon: Glasses,
-      technologies: ["ARKit", "ARCore", "Unity", "Unreal Engine", "WebXR", "OpenXR"]
+      technologies: [
+        "ARKit",
+        "ARCore",
+        "Unity",
+        "Unreal Engine",
+        "WebXR",
+        "OpenXR",
+      ],
     },
     {
       title: "Custom Device Connectivity",
       description: "Bluetooth, NFC, Wi-Fi Direct integration.",
       icon: Bluetooth,
-      technologies: ["Bluetooth LE", "NFC", "Wi-Fi Direct", "Zigbee", "Thread", "Ultra Wideband"]
+      technologies: [
+        "Bluetooth LE",
+        "NFC",
+        "Wi-Fi Direct",
+        "Zigbee",
+        "Thread",
+        "Ultra Wideband",
+      ],
     },
     {
       title: "Data Synchronization & Security",
       description: "Ensuring seamless and secure data flow.",
       icon: Shield,
-      technologies: ["End-to-End Encryption", "Secure Boot", "Device Authentication", "Cloud Sync", "Edge Computing", "Privacy by Design"]
+      technologies: [
-    }
+        "End-to-End Encryption",
+        "Secure Boot",
+        "Device Authentication",
+        "Cloud Sync",
+        "Edge Computing",
+        "Privacy by Design",
+      ],
+    },
   ];
 
   return (
@@ -435,7 +573,11 @@ const WearableCapabilities = () => {
                     </p>
                     <div className="flex flex-wrap gap-2">
                       {capability.technologies.map((tech) => (
-                        <Badge key={tech} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                        <Badge
+                          key={tech}
+                          variant="secondary"
+                          className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                        >
                           {tech}
                         </Badge>
                       ))}
@@ -456,29 +598,34 @@ const WearableProcess = () => {
   const steps = [
     {
       title: "Concept & Device Strategy",
-      description: "Comprehensive analysis of target devices and user contexts to define optimal interaction paradigms.",
+      description:
-      icon: Target
+        "Comprehensive analysis of target devices and user contexts to define optimal interaction paradigms.",
+      icon: Target,
     },
     {
       title: "UI/UX Design (Context-specific)",
-      description: "Creating interfaces optimized for small screens, voice commands, gestures, and ambient interactions.",
+      description:
-      icon: Palette
+        "Creating interfaces optimized for small screens, voice commands, gestures, and ambient interactions.",
+      icon: Palette,
     },
     {
       title: "Development & Hardware Integration",
-      description: "Building applications with deep hardware integration and platform-specific optimizations.",
+      description:
-      icon: Code
+        "Building applications with deep hardware integration and platform-specific optimizations.",
+      icon: Code,
     },
     {
       title: "Rigorous Device Testing",
-      description: "Comprehensive testing across device variations, sensor accuracy, and real-world usage scenarios.",
+      description:
-      icon: Bug
+        "Comprehensive testing across device variations, sensor accuracy, and real-world usage scenarios.",
+      icon: Bug,
     },
     {
       title: "Deployment & Ongoing Support",
-      description: "Platform deployment with continuous monitoring, updates, and emerging device compatibility.",
+      description:
-      icon: Rocket
+        "Platform deployment with continuous monitoring, updates, and emerging device compatibility.",
-    }
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -512,15 +659,23 @@ const WearableProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
+                >
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -552,32 +707,57 @@ const WearableUseCases = () => {
       title: "HealthTech & Wellness",
       description: "Remote patient monitoring, fitness tracking.",
       icon: Stethoscope,
-      examples: ["Patient Monitoring", "Fitness Tracking", "Medication Reminders", "Health Analytics"]
+      examples: [
+        "Patient Monitoring",
+        "Fitness Tracking",
+        "Medication Reminders",
+        "Health Analytics",
+      ],
     },
     {
       title: "Smart Home Automation",
       description: "Controlling lighting, security, appliances.",
       icon: Home,
-      examples: ["Lighting Control", "Security Systems", "Climate Control", "Appliance Management"]
+      examples: [
+        "Lighting Control",
+        "Security Systems",
+        "Climate Control",
+        "Appliance Management",
+      ],
     },
     {
       title: "Industrial IoT",
       description: "Monitoring equipment, predictive maintenance.",
       icon: Building,
-      examples: ["Equipment Monitoring", "Predictive Maintenance", "Safety Systems", "Asset Tracking"]
+      examples: [
+        "Equipment Monitoring",
+        "Predictive Maintenance",
+        "Safety Systems",
+        "Asset Tracking",
+      ],
     },
     {
       title: "Gaming & Entertainment",
       description: "Immersive VR/AR games, interactive experiences.",
       icon: Gamepad2,
-      examples: ["VR Gaming", "AR Experiences", "Interactive Media", "Spatial Computing"]
+      examples: [
+        "VR Gaming",
+        "AR Experiences",
+        "Interactive Media",
+        "Spatial Computing",
+      ],
     },
     {
       title: "Retail & Payments",
       description: "Contactless payments, smart shopping assistants.",
       icon: CreditCard,
-      examples: ["Contactless Pay", "Shopping Assistance", "Loyalty Programs", "Inventory Tracking"]
+      examples: [
-    }
+        "Contactless Pay",
+        "Shopping Assistance",
+        "Loyalty Programs",
+        "Inventory Tracking",
+      ],
+    },
   ];
 
   return (
@@ -626,10 +806,16 @@ const WearableUseCases = () => {
                       {useCase.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Examples:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Examples:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {useCase.examples.map((example) => (
-                          <Badge key={example} variant="secondary" className="text-xs bg-accent/10 text-accent border-accent/20">
+                          <Badge
+                            key={example}
+                            variant="secondary"
+                            className="text-xs bg-accent/10 text-accent border-accent/20"
+                          >
                             {example}
                           </Badge>
                         ))}
@@ -674,10 +860,16 @@ const WearableUseCases = () => {
                       {useCase.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Examples:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Examples:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {useCase.examples.map((example) => (
-                          <Badge key={example} variant="secondary" className="text-xs bg-accent/10 text-accent border-accent/20">
+                          <Badge
+                            key={example}
+                            variant="secondary"
+                            className="text-xs bg-accent/10 text-accent border-accent/20"
+                          >
                             {example}
                           </Badge>
                         ))}
@@ -697,19 +889,59 @@ const WearableUseCases = () => {
 // Wearable/Device Tech Stack
 const WearableTechStack = () => {
   const technologies = [
-    { name: "Wear OS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg", category: "Wearable Platform" },
+    {
-    { name: "watchOS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg", category: "Wearable Platform" },
+      name: "Wear OS",
-    { name: "Swift", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg", category: "iOS Development" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
-    { name: "Kotlin", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg", category: "Android Development" },
+      category: "Wearable Platform",
-    { name: "Unity", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/unity/unity-original.svg", category: "AR/VR Development" },
+    },
-    { name: "AWS IoT", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "IoT Platform" }
+    {
+      name: "watchOS",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg",
+      category: "Wearable Platform",
+    },
+    {
+      name: "Swift",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
+      category: "iOS Development",
+    },
+    {
+      name: "Kotlin",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
+      category: "Android Development",
+    },
+    {
+      name: "Unity",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/unity/unity-original.svg",
+      category: "AR/VR Development",
+    },
+    {
+      name: "AWS IoT",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg",
+      category: "IoT Platform",
+    },
   ];
 
   const specializedTech = [
-    { name: "Bluetooth LE", icon: Bluetooth, description: "Low-energy device connectivity" },
+    {
-    { name: "MQTT", icon: MessageSquare, description: "Lightweight messaging protocol for IoT" },
+      name: "Bluetooth LE",
-    { name: "Google Fit API", icon: HeartPulse, description: "Health and fitness data integration" },
+      icon: Bluetooth,
-    { name: "HealthKit API", icon: Stethoscope, description: "Apple health platform integration" }
+      description: "Low-energy device connectivity",
+    },
+    {
+      name: "MQTT",
+      icon: MessageSquare,
+      description: "Lightweight messaging protocol for IoT",
+    },
+    {
+      name: "Google Fit API",
+      icon: HeartPulse,
+      description: "Health and fitness data integration",
+    },
+    {
+      name: "HealthKit API",
+      icon: Stethoscope,
+      description: "Apple health platform integration",
+    },
   ];
 
   return (
@@ -743,19 +975,32 @@ const WearableTechStack = () => {
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 viewport={{ once: true }}
-                whileHover={{ y: -5, scale: 1.05 }}
+                whileHover={{
+                  y: -5,
+                  scale: 1.05,
+                  transition: {
+                    type: "spring",
+                    damping: 10,
+                    stiffness: 300,
+                    mass: 0.5,
+                  },
+                }}
                 className="group"
               >
-                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
+                <Card className="bg-card/20 backdrop-blur-md border-accent/30 transition-all duration-300 shadow-xl rounded-2xl p-6 text-center">
                   <div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
                     <ImageWithFallback
                       src={tech.logo}
                       alt={tech.name}
-                      className="w-10 h-10 object-contain filter brightness-0 invert group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
+                      className="w-10 h-10 object-contain filter brightness-100 invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {tech.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -786,8 +1031,12 @@ const WearableTechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{tech.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{tech.description}</p>
+                      {tech.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {tech.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -805,30 +1054,36 @@ const WearableCaseStudies = () => {
     {
       title: "HealthTech Wearable Platform",
       client: "VitalCare",
-      description: "Comprehensive health monitoring system with smartwatch integration for real-time patient data collection and emergency alerts",
+      description:
-      image: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format",
+        "Comprehensive health monitoring system with smartwatch integration for real-time patient data collection and emergency alerts",
+      image:
+        "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format",
       results: "50% improved patient compliance",
       gradient: "from-green-500/20 to-teal-500/20",
-      features: "Real-time monitoring, Emergency alerts, Health analytics"
+      features: "Real-time monitoring, Emergency alerts, Health analytics",
     },
     {
       title: "Smart Home Control Hub",
       client: "HomeConnect",
-      description: "IoT platform controlling lighting, security, and climate systems through voice and wearable interfaces for seamless automation",
+      description:
-      image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop&auto=format",
+        "IoT platform controlling lighting, security, and climate systems through voice and wearable interfaces for seamless automation",
+      image:
+        "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop&auto=format",
       results: "30% energy savings",
       gradient: "from-blue-500/20 to-purple-500/20",
-      features: "Voice control, Automated scheduling, Energy optimization"
+      features: "Voice control, Automated scheduling, Energy optimization",
     },
     {
       title: "Industrial AR Maintenance",
       client: "ManufactureTech",
-      description: "AR application for equipment maintenance and training with hands-free operation and real-time guidance for technical staff",
+      description:
-      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop&auto=format",
+        "AR application for equipment maintenance and training with hands-free operation and real-time guidance for technical staff",
+      image:
+        "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop&auto=format",
       results: "40% faster repairs",
       gradient: "from-orange-500/20 to-red-500/20",
-      features: "AR overlays, Step-by-step guidance, Remote assistance"
+      features: "AR overlays, Step-by-step guidance, Remote assistance",
-    }
+    },
   ];
 
   return (
@@ -874,7 +1129,10 @@ const WearableCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -886,7 +1144,9 @@ const WearableCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -900,10 +1160,10 @@ const WearableCaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -913,7 +1173,9 @@ const WearableCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -949,7 +1211,9 @@ const WearableInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Watch className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Innovation Edge</span>
+                <span className="text-foreground text-base font-medium">
+                  Innovation Edge
+                </span>
               </div>
             </div>
 
@@ -959,7 +1223,8 @@ const WearableInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Explore the possibilities of extending your brand to new device ecosystems.
+              Explore the possibilities of extending your brand to new device
+              ecosystems.
             </p>
 
             <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
@@ -980,20 +1245,24 @@ const WearableFAQs = () => {
   const faqs = [
     {
       question: "What types of wearable devices do you develop for?",
-      answer: "We develop for a wide range of wearable devices including smartwatches (Apple Watch, Wear OS), fitness trackers, smart glasses, AR/VR headsets, health monitoring devices, and emerging wearable technologies. Our expertise covers both consumer and enterprise-grade wearable platforms."
+      answer:
+        "We develop for a wide range of wearable devices including smartwatches (Apple Watch, Wear OS), fitness trackers, smart glasses, AR/VR headsets, health monitoring devices, and emerging wearable technologies. Our expertise covers both consumer and enterprise-grade wearable platforms.",
     },
     {
       question: "How do you ensure data security on IoT devices?",
-      answer: "We implement multi-layered security including end-to-end encryption, secure device authentication, regular security updates, and privacy-by-design principles. We follow industry standards like OAuth 2.0, TLS encryption, and implement secure boot processes for IoT devices to prevent unauthorized access."
+      answer:
+        "We implement multi-layered security including end-to-end encryption, secure device authentication, regular security updates, and privacy-by-design principles. We follow industry standards like OAuth 2.0, TLS encryption, and implement secure boot processes for IoT devices to prevent unauthorized access.",
     },
     {
       question: "Can you integrate with existing mobile or web apps?",
-      answer: "Absolutely! We specialize in creating seamless integrations between wearable/IoT apps and existing mobile or web applications. This includes data synchronization, shared user accounts, consistent UI/UX across platforms, and unified notification systems to provide a cohesive user experience."
+      answer:
+        "Absolutely! We specialize in creating seamless integrations between wearable/IoT apps and existing mobile or web applications. This includes data synchronization, shared user accounts, consistent UI/UX across platforms, and unified notification systems to provide a cohesive user experience.",
     },
     {
       question: "What is the typical development timeline for a wearable app?",
-      answer: "Development timelines vary based on complexity: Simple wearable apps (8-12 weeks), Medium complexity with sensor integration (12-20 weeks), Complex IoT ecosystems (20+ weeks). Factors affecting timeline include device compatibility requirements, custom hardware integration, and testing across multiple device types."
+      answer:
-    }
+        "Development timelines vary based on complexity: Simple wearable apps (8-12 weeks), Medium complexity with sensor integration (12-20 weeks), Complex IoT ecosystems (20+ weeks). Factors affecting timeline include device compatibility requirements, custom hardware integration, and testing across multiple device types.",
+    },
   ];
 
   return (
@@ -1026,7 +1295,9 @@ const WearableFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1062,7 +1333,9 @@ const WearableFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Watch className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Connected Future</span>
+                <span className="text-foreground text-base font-medium">
+                  Connected Future
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1079,7 +1352,8 @@ const WearableFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            From smartwatches to complex IoT systems, we build connected applications that push the boundaries of digital interaction.
+            From smartwatches to complex IoT systems, we build connected
+            applications that push the boundaries of digital interaction.
           </motion.p>
 
           <motion.div

pages/WebCloudServices.tsx

@@ -12,15 +12,62 @@ import { Card, CardContent } from "../components/ui/card";
 import { GridPattern } from "../components/GridPattern";
 import { navigateTo } from "../App";
 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 */}
@@ -52,7 +101,8 @@ const HeroWithCTA = () => {
               </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>
 
@@ -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,11 +124,10 @@ 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>
@@ -86,34 +138,42 @@ const HeroWithCTA = () => {
             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"
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain",
+                  objectPosition: "center",
+                  maxWidth: "100%",
+                  display: "block",
+                }}
+              />
 
-              <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">99.9%</div>
+              <div
-                <div className="text-sm text-gray-400 leading-tight">Uptime Achieved</div>
+                className="absolute inset-0 opacity-0 pointer-events-none"
+                style={{
+                  backgroundImage: `url(${heroMockupImage})`,
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
+              />
             </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">15+</div>
-                <div className="text-sm text-gray-400 leading-tight">Cloud Platforms</div>
-              </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">50%</div>
-                <div className="text-sm text-gray-400 leading-tight">Cost Reduction</div>
-              </div>
-            </motion.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,7 +208,8 @@ 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>
 
@@ -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">
@@ -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",
       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 (
@@ -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",
       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,7 +438,8 @@ 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>
 
@@ -440,27 +512,32 @@ 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
                 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" />
@@ -470,7 +547,8 @@ const InlineCTA = () => {
 
               {/* 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,7 +567,7 @@ 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",
@@ -497,7 +575,7 @@ const HireDevelopersSection = () => {
       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,7 +610,8 @@ 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>
 
@@ -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">
@@ -579,7 +662,11 @@ const HireDevelopersSection = () => {
                     <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>
                         ))}
@@ -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() {

pages/iOSAppDevelopment.tsx

@@ -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 */}
@@ -75,7 +78,8 @@ const IOSHeroWithCTA = () => {
               </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>
 
@@ -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>
@@ -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>