diff --git a/components/UIUXDesignAnimation.tsx b/components/UIUXDesignAnimation.tsx
new file mode 100644
index 0000000..f3f829d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/index.html b/index.html
index ab597e0..1dcb813 100644
--- a/index.html
+++ b/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>
diff --git a/pages/APIBackendDevelopment.tsx b/pages/APIBackendDevelopment.tsx
index 4df8680..8626fd4 100644
--- a/pages/APIBackendDevelopment.tsx
+++ b/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"
diff --git a/pages/AdminPanelsDashboards.tsx b/pages/AdminPanelsDashboards.tsx
index dff9666..b4ebcd9 100644
--- a/pages/AdminPanelsDashboards.tsx
+++ b/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"
diff --git a/pages/CustomWebAppDevelopment.tsx b/pages/CustomWebAppDevelopment.tsx
index 134f5fe..1d55976 100644
--- a/pages/CustomWebAppDevelopment.tsx
+++ b/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"
diff --git a/pages/DesignExperience.tsx b/pages/DesignExperience.tsx
index 41144be..3f35efc 100644
--- a/pages/DesignExperience.tsx
+++ b/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="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
+      <div className="container mx-auto px-6 lg:px-8 max-w-7xl">
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
           <motion.div
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8 }}
-            className="space-y-8"
+            className="space-y-8 z-10"
           >
             {/* Design & Experience Label */}
             <motion.div
@@ -40,7 +41,10 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Design & Experience</span>
+              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
+                <PenTool className="w-4 h-4 text-[#E5195E]" />
+                <span className="text-white/90 text-sm font-medium">Design & Experience</span>
+              </div>
             </motion.div>
 
             {/* Main Heading */}
@@ -52,68 +56,62 @@ const HeroWithCTA = () => {
               </h1>
               
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design.
+                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
               </p>
             </div>
+
+            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
             
-            {/* CTAs */}
+            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.8, delay: 0.3 }}
-              className="flex flex-col sm:flex-row gap-4"
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="flex flex-col sm:flex-row gap-4 pt-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton 
+                className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300" 
+                onClick={() => navigateTo('/start-a-project')}
+              >
                 <div className="inline-flex items-center gap-2">
-                  <Calendar className="w-4 h-4 flex-shrink-0" />
+                  <Calendar className="w-5 h-5 flex-shrink-0" />
                   <span>Design Consultation</span>
                 </div>
               </ShimmerButton>
               <Button
                 variant="secondary"
-                size="lg"
-                className="text-lg px-8 py-4"
+                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"
                 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
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8, delay: 0.6 }}
-              className="grid grid-cols-2 gap-8 text-center"
-            >
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">300+</div>
-                <div className="text-sm text-gray-400 leading-tight">Design Projects</div>
+            {/* Design Animation Container - EXPANDED TO FILL SPACE PREVIOUSLY OCCUPIED BY METRICS */}
+            <div className="w-full h-[500px] md:h-[600px] lg:h-[700px] max-w-full relative overflow-hidden">
+              {/* Animated Background Elements */}
+              <div className="absolute inset-0 overflow-hidden rounded-xl">
+                <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="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>
               
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
-                <div className="text-sm text-gray-400 leading-tight">Conversion Increase</div>
+              {/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-full h-full scale-105 transform-gpu">
+                  <UIUXDesignAnimation />
+                </div>
               </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">4.9/5</div>
-                <div className="text-sm text-gray-400 leading-tight">User Satisfaction</div>
-              </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">70%</div>
-                <div className="text-sm text-gray-400 leading-tight">Faster User Tasks</div>
-              </div>
-            </motion.div>
+            </div>
           </motion.div>
         </div>
       </div>
diff --git a/pages/EcommercePlatforms.tsx b/pages/EcommercePlatforms.tsx
index 98995d3..8321ce1 100644
--- a/pages/EcommercePlatforms.tsx
+++ b/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"
diff --git a/pages/EnterpriseSoftwareSolutions.tsx b/pages/EnterpriseSoftwareSolutions.tsx
index 5824265..d0beb1d 100644
--- a/pages/EnterpriseSoftwareSolutions.tsx
+++ b/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" }
   ];
diff --git a/pages/ProductModernization.tsx b/pages/ProductModernization.tsx
index bfcde72..20134e3 100644
--- a/pages/ProductModernization.tsx
+++ b/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" }
   ];
diff --git a/pages/SystemArchitectureDevOps.tsx b/pages/SystemArchitectureDevOps.tsx
index b4e56db..4ce1764 100644
--- a/pages/SystemArchitectureDevOps.tsx
+++ b/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" }
   ];
diff --git a/pages/WearableDeviceDevelopment.tsx b/pages/WearableDeviceDevelopment.tsx
index 3cef10a..78f6c82 100644
--- a/pages/WearableDeviceDevelopment.tsx
+++ b/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 */}
@@ -61,12 +68,14 @@ const WearableHeroWithCTA = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Wearable & IoT App Development
               </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>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -89,7 +98,7 @@ const WearableHeroWithCTA = () => {
               </a>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with connected devices visualization */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -110,11 +119,11 @@ const WearableHeroWithCTA = () => {
                   <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                     <Cpu className="w-8 h-8 text-white" />
                   </div>
-                  
+
                   {/* Pulse Animation */}
                   <div className="absolute inset-0 rounded-full bg-accent/30 animate-ping"></div>
                 </div>
-                
+
                 {/* Connected Devices - Arranged in circle */}
                 <div className="relative">
                   {/* Smartwatch */}
@@ -126,7 +135,7 @@ const WearableHeroWithCTA = () => {
                   >
                     <Watch className="w-8 h-8 text-white" />
                   </motion.div>
-                  
+
                   {/* VR Headset */}
                   <motion.div
                     initial={{ opacity: 0, scale: 0 }}
@@ -136,7 +145,7 @@ const WearableHeroWithCTA = () => {
                   >
                     <Glasses className="w-8 h-8 text-white" />
                   </motion.div>
-                  
+
                   {/* Fitness Tracker */}
                   <motion.div
                     initial={{ opacity: 0, scale: 0 }}
@@ -146,7 +155,7 @@ const WearableHeroWithCTA = () => {
                   >
                     <HeartPulse className="w-8 h-8 text-white" />
                   </motion.div>
-                  
+
                   {/* Smart Home Device */}
                   <motion.div
                     initial={{ opacity: 0, scale: 0 }}
@@ -156,7 +165,7 @@ const WearableHeroWithCTA = () => {
                   >
                     <Home className="w-8 h-8 text-white" />
                   </motion.div>
-                  
+
                   {/* Audio Device */}
                   <motion.div
                     initial={{ opacity: 0, scale: 0 }}
@@ -166,31 +175,104 @@ const WearableHeroWithCTA = () => {
                   >
                     <Headphones className="w-8 h-8 text-white" />
                   </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">
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2s" repeatCount="indefinite" />
+                      <line
+                        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">
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.5s" repeatCount="indefinite" />
+                      <line
+                        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">
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="3s" repeatCount="indefinite" />
+                      <line
+                        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">
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.2s" repeatCount="indefinite" />
+                      <line
+                        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">
-                        <animate attributeName="stroke-dashoffset" values="0;-4" dur="2.8s" repeatCount="indefinite" />
+                      <line
+                        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>
                 </div>
               </motion.div>
-              
+
               {/* Device Category Badges */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -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 (
@@ -267,7 +362,7 @@ const WearableBenefits = () => {
             Why Invest in Device-Specific App Development?
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -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 (
@@ -402,7 +540,7 @@ const WearableCapabilities = () => {
             Expertise Across Diverse Device Ecosystems
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -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.",
-      icon: Target
+      description:
+        "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.",
-      icon: Palette
+      description:
+        "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.",
-      icon: Code
+      description:
+        "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.",
-      icon: Bug
+      description:
+        "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.",
-      icon: Rocket
-    }
+      description:
+        "Platform deployment with continuous monitoring, updates, and emerging device compatibility.",
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -499,12 +646,12 @@ const WearableProcess = () => {
         <div className="relative">
           {/* Timeline line */}
           <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
-          
+
           <div className="space-y-16">
             {steps.map((step, index) => {
               const IconComponent = step.icon;
               const isEven = index % 2 === 0;
-              
+
               return (
                 <motion.div
                   key={index}
@@ -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}
@@ -530,10 +685,10 @@ const WearableProcess = () => {
                       </p>
                     </div>
                   </div>
-                  
+
                   {/* Timeline dot */}
                   <div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
-                  
+
                   <div className="flex-1 hidden lg:block"></div>
                 </motion.div>
               );
@@ -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 (
@@ -594,7 +774,7 @@ const WearableUseCases = () => {
             Industries & Scenarios Benefiting from Device Apps
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -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: "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" }
+    {
+      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: "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: "Google Fit API", icon: HeartPulse, description: "Health and fitness data integration" },
-    { name: "HealthKit API", icon: Stethoscope, description: "Apple health platform integration" }
+    {
+      name: "Bluetooth LE",
+      icon: Bluetooth,
+      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>
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
+                    {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>
-                    <p className="text-sm text-muted-foreground leading-relaxed">{tech.description}</p>
+                    <h4 className="font-semibold text-foreground mb-2">
+                      {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",
-      image: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format",
+      description:
+        "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",
-      image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop&auto=format",
+      description:
+        "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",
-      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop&auto=format",
+      description:
+        "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 (
@@ -845,7 +1100,7 @@ const WearableCaseStudies = () => {
             Innovative Device Applications by WDI
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -874,19 +1129,24 @@ 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>
                     </div>
-                    
+
                     <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                       {study.title}
                     </h3>
                   </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}
@@ -894,26 +1154,28 @@ const WearableCaseStudies = () => {
                       />
                     </div>
                   </div>
-                  
+
                   <div className="px-8 pb-6">
                     <p className="text-gray-300 text-sm leading-relaxed mb-4">
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
-                      <p className="text-xs text-gray-400">
-                        {study.features}
-                      </p>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
+                        Key Features:
+                      </h4>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
-                  
+
                   <div className="p-8 pt-0 mt-auto">
-                    <Button 
-                      variant="ghost" 
+                    <Button
+                      variant="ghost"
                       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,19 +1211,22 @@ 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>
-            
+
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
               Ready to Innovate on the{" "}
               <span className="text-accent">Edge of Technology?</span>
             </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">
               <div className="inline-flex items-center gap-3">
                 <Lightbulb className="w-6 h-6 flex-shrink-0" />
@@ -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 (
@@ -1010,7 +1279,7 @@ const WearableFAQs = () => {
             Frequently Asked Questions
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -1020,13 +1289,15 @@ const WearableFAQs = () => {
         >
           <Accordion type="single" collapsible className="space-y-8">
             {faqs.map((faq, index) => (
-              <AccordionItem 
-                key={index} 
-                value={`item-${index}`} 
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
                 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>
@@ -1071,7 +1344,7 @@ const WearableFinalCTA = () => {
             Pioneer New Experiences with{" "}
             <span className="text-accent">WDI's Device App Expertise</span>
           </h2>
-          
+
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -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
@@ -1118,61 +1392,61 @@ export const WearableDeviceDevelopment = () => {
   return (
     <div className="dark min-h-screen">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="bg-black">
         <WearableHeroWithCTA />
       </section>
-      
+
       {/* Benefits */}
       <section className="bg-background">
         <WearableBenefits />
       </section>
-      
+
       {/* Capabilities */}
       <section className="bg-card">
         <WearableCapabilities />
       </section>
-      
+
       {/* Development Process */}
       <section className="bg-background">
         <WearableProcess />
       </section>
-      
+
       {/* Use Cases */}
       <section className="bg-card">
         <WearableUseCases />
       </section>
-      
+
       {/* Tech Stack */}
       <section className="bg-background">
         <WearableTechStack />
       </section>
-      
+
       {/* Case Studies */}
       <section className="bg-card">
         <WearableCaseStudies />
       </section>
-      
+
       {/* Mid-Page CTA */}
       <section className="bg-background">
         <WearableInlineCTA />
       </section>
-      
+
       {/* FAQs */}
       <section className="bg-card">
         <WearableFAQs />
       </section>
-      
+
       {/* Final CTA */}
       <section className="bg-background">
         <WearableFinalCTA />
       </section>
-      
+
       {/* Footer */}
       <section className="bg-card">
         <Footer />
       </section>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/pages/WebCloudServices.tsx b/pages/WebCloudServices.tsx
index aadbc59..2ffa7b0 100644
--- a/pages/WebCloudServices.tsx
+++ b/pages/WebCloudServices.tsx
@@ -11,16 +11,63 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { GridPattern } from "../components/GridPattern";
 import { navigateTo } from "../App";
-import { 
-  Globe, Cloud, Server, Database, Shield, Zap, Users, 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
+import {
+  Globe,
+  Cloud,
+  Server,
+  Database,
+  Shield,
+  Zap,
+  Users,
+  Star,
+  ArrowRight,
+  ChevronRight,
+  Clock,
+  TrendingUp,
+  Code,
+  Layers,
+  Target,
+  Layout,
+  Rocket,
+  Monitor,
+  Lock,
+  RefreshCcw,
+  ShieldCheck,
+  MessageSquare,
+  Heart,
+  CheckCircle,
+  Lightbulb,
+  Coffee,
+  Download,
+  Calendar,
+  Camera,
+  Music,
+  Gamepad2,
+  CreditCard,
+  Bell,
+  Mail,
+  Search,
+  Home,
+  MapPin,
+  Github,
+  Slack,
+  Figma,
+  Chrome,
+  Zap as ZapIcon,
+  Video,
+  MessageCircle,
+  Brain,
+  Cog,
+  Settings,
+  Sparkles,
+  Handshake,
+  Eye,
+  Award,
+  UserPlus,
+  Cpu,
+  ShoppingCart,
 } from "lucide-react";
+import heroMockupImage from "../src/images/webandcloud-hero.webp";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -40,7 +87,9 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -50,12 +99,13 @@ const HeroWithCTA = () => {
                 <span className="text-[#E5195E]">Cloud Solutions</span>
                 <span className="text-white"> for Modern Business</span>
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Build high-performance web applications and robust cloud infrastructure that scales with your business growth.
+                Build high-performance web applications and robust cloud
+                infrastructure that scales with your business growth.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -63,7 +113,10 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Schedule Cloud Consultation</span>
@@ -71,49 +124,56 @@ const HeroWithCTA = () => {
               </ShimmerButton>
               <Button
                 variant="secondary"
-                size="lg"
-                className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/case-studies')}
+                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"
+                onClick={() => navigateTo("/case-studies")}
               >
-                <Eye className="w-4 h-4 flex-shrink-0" />
+                <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View Web Projects</span>
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with stats */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className="relative flex flex-col items-center"
+            className="relative flex items-center justify-center order-first lg:order-last"
           >
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8, delay: 0.6 }}
-              className="grid grid-cols-2 gap-8 text-center"
+            {/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
+            <div
+              className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
+              style={{
+                position: "relative",
+                overflow: "hidden",
+              }}
             >
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">200+</div>
-                <div className="text-sm text-gray-400 leading-tight">Web Apps Built</div>
-              </div>
-              
-              <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">99.9%</div>
-                <div className="text-sm text-gray-400 leading-tight">Uptime Achieved</div>
-              </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>
+              {/* Hero Image with comprehensive CSS styling */}
+              <img
+                src={heroMockupImage}
+                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",
+                }}
+              />
+
+              {/* Alternative background method for enhanced browser support */}
+              <div
+                className="absolute inset-0 opacity-0 pointer-events-none"
+                style={{
+                  backgroundImage: `url(${heroMockupImage})`,
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
+              />
+            </div>
           </motion.div>
         </div>
       </div>
@@ -129,7 +189,7 @@ const HorizontalTagScroller = () => {
     { name: "Node.js & Python", icon: Server, color: "text-purple-400" },
     { name: "Docker & Kubernetes", icon: Layers, color: "text-cyan-400" },
     { name: "MongoDB & PostgreSQL", icon: Database, color: "text-orange-400" },
-    { name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" }
+    { name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" },
   ];
 
   return (
@@ -148,10 +208,11 @@ const HorizontalTagScroller = () => {
             <span className="text-foreground"> We Master</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Modern web and cloud technologies that power enterprise-grade solutions.
+            Modern web and cloud technologies that power enterprise-grade
+            solutions.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +222,7 @@ const HorizontalTagScroller = () => {
         >
           <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
           <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
-          
+
           <div className="flex animate-marquee hover:animate-marquee-paused">
             {/* First set */}
             {technologies.map((tech, index) => {
@@ -177,7 +238,9 @@ const HorizontalTagScroller = () => {
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -188,7 +251,7 @@ const HorizontalTagScroller = () => {
                 </motion.div>
               );
             })}
-            
+
             {/* Second and third sets for seamless loop */}
             {[...technologies, ...technologies].map((tech, index) => {
               const IconComponent = tech.icon;
@@ -197,13 +260,18 @@ const HorizontalTagScroller = () => {
                   key={`loop-${tech.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + technologies.length) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + technologies.length) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +295,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "scalable",
       title: "Scalable Architecture",
-      icon: TrendingUp
+      icon: TrendingUp,
     },
     {
-      id: "security", 
+      id: "security",
       title: "Enterprise Security",
-      icon: Shield
+      icon: Shield,
     },
     {
       id: "performance",
       title: "High Performance",
-      icon: Zap
+      icon: Zap,
     },
     {
       id: "monitoring",
       title: "24/7 Monitoring",
-      icon: Eye
+      icon: Eye,
     },
     {
       id: "devops",
       title: "DevOps Excellence",
-      icon: Settings
-    }
+      icon: Settings,
+    },
   ];
 
   return (
@@ -266,7 +334,7 @@ const SideBySideContentWithIcons = () => {
             <span className="text-[#E5195E]">WDI</span>
             <span className="text-white"> for Web & Cloud</span>
           </h2>
-          
+
           <p className="text-2xl text-gray-300 leading-relaxed">
             Enterprise-grade solutions with proven reliability.
           </p>
@@ -297,7 +365,7 @@ const SideBySideContentWithIcons = () => {
                     <div className="mb-6">
                       <IconComponent className="w-10 h-10 text-accent mx-auto" />
                     </div>
-                    
+
                     <h3 className="text-lg font-semibold text-white leading-tight">
                       {advantage.title}
                     </h3>
@@ -318,39 +386,42 @@ const TabbedServiceDisplay = () => {
     {
       title: "Custom Web Application Development",
       icon: Globe,
-      description: "Build scalable, secure web applications with modern frameworks.",
-      link: "/services/custom-web-app-development"
+      description:
+        "Build scalable, secure web applications with modern frameworks.",
+      link: "/services/custom-web-app-development",
     },
     {
-      title: "SaaS Product Engineering", 
+      title: "SaaS Product Engineering",
       icon: Cloud,
-      description: "End-to-end SaaS development with multi-tenant architecture.",
-      link: "/services/saas-product-engineering"
+      description:
+        "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.",
-      link: "/services/ecommerce-platforms"
+      description:
+        "High-converting online stores with seamless payment integration.",
+      link: "/services/ecommerce-platforms",
     },
     {
       title: "Admin Panels & Dashboards",
       icon: Monitor,
       description: "Intuitive admin interfaces with real-time analytics.",
-      link: "/services/admin-panels-dashboards"
+      link: "/services/admin-panels-dashboards",
     },
     {
       title: "API & Backend Development",
       icon: Server,
       description: "Robust APIs and scalable backend infrastructure.",
-      link: "/services/api-backend-development"
+      link: "/services/api-backend-development",
     },
     {
       title: "System Architecture & DevOps",
       icon: Layers,
       description: "Cloud-native architecture with automated deployment.",
-      link: "/services/system-architecture-devops"
-    }
+      link: "/services/system-architecture-devops",
+    },
   ];
 
   return (
@@ -367,10 +438,11 @@ const TabbedServiceDisplay = () => {
             Web & Cloud Service Areas
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
-            Comprehensive web development and cloud solutions designed for scalability and performance.
+            Comprehensive web development and cloud solutions designed for
+            scalability and performance.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +468,7 @@ const TabbedServiceDisplay = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     <div>
                       <h3 className="text-xl font-semibold text-white mb-4">
                         {service.title}
@@ -440,37 +512,43 @@ const InlineCTA = () => {
               <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                 <div className="flex items-center gap-2">
                   <Rocket className="w-4 h-4 text-[#E5195E]" />
-                  <span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
+                  <span className="text-[#E5195E] text-sm font-medium">
+                    Ready to Launch?
+                  </span>
                 </div>
               </div>
             </div>
-            
+
             {/* Main Heading */}
             <h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
-              <span className="text-foreground">Build Scalable Web Solutions with </span>
+              <span className="text-foreground">
+                Build Scalable Web Solutions with{" "}
+              </span>
               <span className="text-[#E5195E]">Cloud-First Architecture</span>
             </h2>
-            
+
             {/* Subtitle */}
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Deploy robust, secure, and high-performance applications that scale with your business growth.
+              Deploy robust, secure, and high-performance applications that
+              scale with your business growth.
             </p>
-            
+
             {/* CTA Button */}
             <div className="flex flex-col items-center gap-4">
-              <ShimmerButton 
+              <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Cloud className="w-6 h-6 flex-shrink-0" />
                   <span>Start Your Cloud Project</span>
                 </div>
               </ShimmerButton>
-              
+
               {/* Small benefit text */}
               <p className="text-sm text-muted-foreground">
-                Free architecture review • Scalability assessment • Performance optimization
+                Free architecture review • Scalability assessment • Performance
+                optimization
               </p>
             </div>
           </motion.div>
@@ -489,15 +567,15 @@ const HireDevelopersSection = () => {
       skills: ["React", "Node.js", "Python", "TypeScript"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
-      title: "Cloud Architects", 
+      title: "Cloud Architects",
       icon: Cloud,
       skills: ["AWS", "Azure", "GCP", "Kubernetes"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "DevOps Engineers",
@@ -505,7 +583,7 @@ const HireDevelopersSection = () => {
       skills: ["Docker", "Jenkins", "Terraform", "CI/CD"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Backend Developers",
@@ -513,8 +591,8 @@ const HireDevelopersSection = () => {
       skills: ["API Design", "Microservices", "Databases"],
       iconBg: "bg-orange-500",
       iconColor: "text-white",
-      link: "/hire-talent/backend-developers"
-    }
+      link: "/hire-talent/backend-developers",
+    },
   ];
 
   return (
@@ -532,10 +610,11 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">Cloud Specialists</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Get access to expert developers who specialize in modern web and cloud technologies.
+            Get access to expert developers who specialize in modern web and
+            cloud technologies.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +639,12 @@ const HireDevelopersSection = () => {
                     {/* Header */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
-                        <div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
-                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
+                        <div
+                          className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
+                        >
+                          <IconComponent
+                            className={`w-6 h-6 ${specialist.iconColor}`}
+                          />
                         </div>
                         <div className="flex-1">
                           <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -569,26 +652,30 @@ const HireDevelopersSection = () => {
                           </div>
                         </div>
                       </div>
-                      
+
                       <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
                         {specialist.title}
                       </h3>
                     </div>
-                    
+
                     {/* Skills */}
                     <div className="px-8 pb-6 flex-1">
                       <div className="flex flex-wrap gap-2">
                         {specialist.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-white/10 text-foreground"
+                          >
                             {skill}
                           </Badge>
                         ))}
                       </div>
                     </div>
-                    
+
                     {/* CTA */}
                     <div className="p-8 pt-0 mt-auto space-y-3">
-                      <ShimmerButton 
+                      <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
                         onClick={() => navigateTo(specialist.link)}
                       >
@@ -613,24 +700,29 @@ const HireDevelopersSection = () => {
 const webCloudFAQs = [
   {
     question: "What web technologies do you specialize in?",
-    answer: "We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices."
+    answer:
+      "We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices.",
   },
   {
     question: "How do you ensure web application security?",
-    answer: "We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA."
+    answer:
+      "We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA.",
   },
   {
     question: "Can you migrate our existing application to the cloud?",
-    answer: "Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity."
+    answer:
+      "Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity.",
   },
   {
     question: "What is your approach to scalable architecture?",
-    answer: "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently."
+    answer:
+      "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently.",
   },
   {
     question: "Do you provide ongoing maintenance and support?",
-    answer: "Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly."
-  }
+    answer:
+      "Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly.",
+  },
 ];
 
 export function WebCloudServices() {
@@ -644,7 +736,7 @@ export function WebCloudServices() {
       <ProcessSection />
       <InlineCTA />
       <HireDevelopersSection />
-      <FAQSection 
+      <FAQSection
         title="Web & Cloud Questions"
         subtitle="Get answers to common questions about our web development and cloud services."
         faqs={webCloudFAQs}
@@ -652,4 +744,4 @@ export function WebCloudServices() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/pages/iOSAppDevelopment.tsx b/pages/iOSAppDevelopment.tsx
index fbd950b..f201edf 100644
--- a/pages/iOSAppDevelopment.tsx
+++ b/pages/iOSAppDevelopment.tsx
@@ -5,7 +5,7 @@ import { Navigation } from "../components/Navigation";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
-import ranoutofImage  from "../src/images/ranoutof.webp";
+import ranoutofImage from "../src/images/ranoutof.webp";
 import seezunImage from "../src/images/seezun.webp";
 import wokaImage from "../src/images/woka.webp";
 
@@ -20,6 +20,7 @@ import {
   ArrowRight,
   Brush,
   Bug,
+  Calendar,
   CheckCircle,
   Code,
   DollarSign,
@@ -65,7 +66,9 @@ const IOSHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">iOS App Development</span>
+              <span className="text-white/70 text-sm font-medium">
+                iOS App Development
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -73,12 +76,13 @@ const IOSHeroWithCTA = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Expert iOS App Development Services
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive engagement.
+                Crafting intuitive, high-performance iPhone and iPad
+                applications that define user experience and drive engagement.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -88,8 +92,18 @@ const IOSHeroWithCTA = () => {
             >
               <ShimmerButton className="text-lg px-8 py-4">
                 <div className="inline-flex items-center gap-2">
-                  <svg className="w-6 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <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
+                    className="w-6 h-4 flex-shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
+                    />
                   </svg>
                   <span>Get a Free Consultation</span>
                 </div>
@@ -103,7 +117,7 @@ const IOSHeroWithCTA = () => {
               </a>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with iOS device mockups */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -131,7 +145,7 @@ const IOSHeroWithCTA = () => {
                       <div className="h-1 bg-gray-600 rounded w-1/2"></div>
                     </div>
                   </div>
-                  
+
                   <div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
                     <div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
                       <div className="w-12 h-1 bg-gray-600 rounded-full"></div>
@@ -151,7 +165,7 @@ const IOSHeroWithCTA = () => {
                   </div>
                 </div>
               </motion.div>
-              
+
               {/* iOS Technology Badges */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -159,13 +173,22 @@ const IOSHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 0.6 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   Swift
                 </Badge>
-                <Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-orange-500/20 text-orange-300 border-orange-500/30"
+                >
                   SwiftUI
                 </Badge>
-                <Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-gray-500/20 text-gray-300 border-gray-500/30"
+                >
                   Xcode
                 </Badge>
               </motion.div>
@@ -742,28 +765,33 @@ const IOSKeyBenefits = () => {
     {
       icon: Zap,
       title: "Unmatched Performance",
-      description: "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness."
+      description:
+        "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness.",
     },
     {
       icon: Shield,
       title: "Superior Security",
-      description: "Leveraging Apple's robust security features for comprehensive data protection and user privacy."
+      description:
+        "Leveraging Apple's robust security features for comprehensive data protection and user privacy.",
     },
     {
       icon: Heart,
       title: "Premium User Experience",
-      description: "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design."
+      description:
+        "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design.",
     },
     {
       icon: Network,
       title: "Apple Ecosystem Integration",
-      description: "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features."
+      description:
+        "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features.",
     },
     {
       icon: DollarSign,
       title: "Strong Monetization Potential",
-      description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
-    }
+      description:
+        "High-value user base with effective in-app purchase mechanisms and premium positioning.",
+    },
   ];
 
   return (
@@ -780,7 +808,8 @@ const IOSKeyBenefits = () => {
             Why Choose Native iOS for Your App?
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            iOS development offers unparalleled advantages for businesses looking to create premium mobile experiences.
+            iOS development offers unparalleled advantages for businesses
+            looking to create premium mobile experiences.
           </p>
         </motion.div>
 
@@ -1021,6 +1050,43 @@ export const IOSAppDevelopment = () => {
         <IOSTechnologies />
       </section>
 
+      {/* CTA Section */}
+      <section className="py-32">
+        <div className="container mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center"
+          >
+            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
+              Ready to Build Your Next iOS App?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
+              Partner with us to create exceptional iOS applications that
+              delight users and drive business success.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-6 justify-center">
+              <ShimmerButton className="text-lg px-8 py-4 h-[56px]">
+                <div className="inline-flex items-center gap-2">
+                  <Apple className="w-5 h-5 flex-shrink-0" />
+                  <span>Start Your iOS Project</span>
+                </div>
+              </ShimmerButton>
+              <Button
+                variant="outline"
+                size="lg"
+                className="text-lg px-8 py-4 h-[56px] border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+              >
+                <Calendar className="w-5 h-5 mr-2" />
+                Schedule Consultation
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
       <section className="bg-background">
         <Footer />
       </section>
diff --git a/src/images/aws-logo.png b/src/images/aws-logo.png
new file mode 100644
index 0000000..95ab08a
Binary files /dev/null and b/src/images/aws-logo.png differ
diff --git a/src/images/healthcare.webp b/src/images/healthcare.webp
new file mode 100644
index 0000000..7dbf91a
Binary files /dev/null and b/src/images/healthcare.webp differ
diff --git a/src/images/iot-device.webp b/src/images/iot-device.webp
new file mode 100644
index 0000000..6fa3186
Binary files /dev/null and b/src/images/iot-device.webp differ
diff --git a/src/images/multifood.webp b/src/images/multifood.webp
new file mode 100644
index 0000000..01117c3
Binary files /dev/null and b/src/images/multifood.webp differ
diff --git a/src/images/patient-management-portal.webp b/src/images/patient-management-portal.webp
new file mode 100644
index 0000000..dd95224
Binary files /dev/null and b/src/images/patient-management-portal.webp differ
diff --git a/src/images/webandcloud-hero.webp b/src/images/webandcloud-hero.webp
new file mode 100644
index 0000000..13ce04d
Binary files /dev/null and b/src/images/webandcloud-hero.webp differ