replace the hero image in MobileAppDevelopment component

package-lock.json

@@ -142,6 +142,7 @@
       "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -3171,6 +3172,7 @@
       "integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.8.0"
       }
@@ -3188,6 +3190,7 @@
       "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3199,6 +3202,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3291,6 +3295,7 @@
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -3481,6 +3486,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3684,6 +3690,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -4370,7 +4377,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -4481,6 +4489,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -5754,7 +5763,6 @@
       "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
       "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       },
@@ -5913,6 +5921,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5992,6 +6001,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6057,6 +6067,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -6122,6 +6133,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -6363,7 +6375,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -6513,8 +6526,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
       "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/set-cookie-parser": {
       "version": "2.7.1",
@@ -6648,7 +6660,8 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
       "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -6833,6 +6846,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6988,6 +7002,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
       "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

pages/MobileAppDevelopment.tsx

@@ -32,7 +32,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 heroMockupImage from '../src/images/mobile-app-banner.webp';
+import heroMockupImage from '../src/images/mobile-app-banner.png';
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 
@@ -88,13 +88,13 @@ const HeroWithCTA = () => {
                 `}
         </script>
       </Helmet>
-      <div className="container mx-auto px-6 lg:px-8 max-w-7xl">
+      <div className="container px-6 mx-auto 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 z-10"
+            className="z-10 space-y-8"
           >
             {/* Mobile App Development Label */}
             <motion.div
@@ -104,7 +104,7 @@ const HeroWithCTA = () => {
             >
               <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">
                 <Smartphone className="w-4 h-4 text-[#E5195E]" />
-                <span className="text-white/90 text-sm font-medium">Mobile App Development</span>
+                <span className="text-sm font-medium text-white/90">Mobile App Development</span>
               </div>
             </motion.div>
 
@@ -115,13 +115,13 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.6, delay: 0.1 }}
               className="space-y-6"
             >
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
+              <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
                 <span className="text-white">From concept to </span>
                 <span className="text-[#E5195E]">App Store</span>
                 <span className="text-white"> in just 6 weeks.</span>
               </h1>
 
-              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
                 Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — fast.
               </p>
             </motion.div>
@@ -133,23 +133,23 @@ const HeroWithCTA = () => {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.2 }}
-              className="flex flex-col sm:flex-row gap-4 pt-4"
+              className="flex flex-col gap-4 pt-4 sm:flex-row"
             >
               <ShimmerButton
-                className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
+                className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl"
                 onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-2">
-                  <Calendar className="w-5 h-5 flex-shrink-0" />
+                  <Calendar className="flex-shrink-0 w-5 h-5" />
                   <span>Book a Discovery Call</span>
                 </div>
               </ShimmerButton>
               <Button
                 variant="secondary"
-                className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
+                className="px-8 text-lg font-medium text-white transition-all duration-300 rounded-lg shadow-lg h-14 bg-white/10 hover:bg-white/20 border-white/20 hover:border-white/30 hover:shadow-xl"
                 onClick={() => navigate('/case-studies')}
               >
-                <Eye className="w-5 h-5 flex-shrink-0" />
+                <Eye className="flex-shrink-0 w-5 h-5" />
                 <span>View our work</span>
               </Button>
             </motion.div>
@@ -216,24 +216,24 @@ const HorizontalTagScroller = () => {
   ];
 
   return (
-    <section className="py-32 bg-background relative overflow-hidden">
+    <section className="relative py-32 overflow-hidden bg-background">
       {/* Add subtle decorative elements */}
       <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
-        <div className="absolute top-20 left-10 w-32 h-32 bg-accent/5 rounded-full blur-2xl"></div>
+        <div className="absolute w-32 h-32 rounded-full top-20 left-10 bg-accent/5 blur-2xl"></div>
-        <div className="absolute bottom-20 right-10 w-40 h-40 bg-blue-500/5 rounded-full blur-2xl"></div>
+        <div className="absolute w-40 h-40 rounded-full bottom-20 right-10 bg-blue-500/5 blur-2xl"></div>
       </div>
-      <div className="container mx-auto px-6 lg:px-8 relative z-10">
+      <div className="container relative z-10 px-6 mx-auto 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 mb-20"
+          className="mb-20 text-center"
         >
-          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
             Apps Built for High-Impact Industries
           </h2>
-          <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
+          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
             Our mobile apps power industries where user trust, speed, and uptime are critical.
           </p>
         </motion.div>
@@ -246,8 +246,8 @@ const HorizontalTagScroller = () => {
           className="relative overflow-hidden"
         >
           {/* Gradient overlays for smooth fade effect */}
-          <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 top-0 bottom-0 left-0 z-10 w-20 pointer-events-none bg-gradient-to-r from-card to-transparent"></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="absolute top-0 bottom-0 right-0 z-10 w-20 pointer-events-none bg-gradient-to-l from-card to-transparent"></div>
 
           {/* Marquee container */}
           <div className="flex animate-marquee hover:animate-marquee-paused">
@@ -261,9 +261,9 @@ const HorizontalTagScroller = () => {
                   whileInView={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.5, delay: index * 0.01 }}
                   viewport={{ once: true }}
-                  className="group flex-shrink-0 mx-3"
+                  className="flex-shrink-0 mx-3 group"
                 >
-                  <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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
                         <IconComponent className="w-6 h-6" />
@@ -287,9 +287,9 @@ const HorizontalTagScroller = () => {
                   whileInView={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.5, delay: (index + industries.length) * 0.1 }}
                   viewport={{ once: true }}
-                  className="group flex-shrink-0 mx-3"
+                  className="flex-shrink-0 mx-3 group"
                 >
-                  <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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
                         <IconComponent className="w-6 h-6" />
@@ -313,9 +313,9 @@ const HorizontalTagScroller = () => {
                   whileInView={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.5, delay: (index + industries.length * 2) * 0.1 }}
                   viewport={{ once: true }}
-                  className="group flex-shrink-0 mx-3"
+                  className="flex-shrink-0 mx-3 group"
                 >
-                  <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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
                         <IconComponent className="w-6 h-6" />
@@ -367,21 +367,21 @@ const SideBySideContentWithIcons = () => {
 
   return (
     <section className="py-32 bg-black">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container px-6 mx-auto 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 mb-16"
+          className="mb-16 text-center"
         >
           {/* Main Heading */}
-          <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight mb-6">
+          <h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
             Why Founders and CTOs Trust WDI
           </h2>
 
           {/* Subtext */}
-          <p className="text-2xl text-gray-300 leading-relaxed">
+          <p className="text-2xl leading-relaxed text-gray-300">
             Not just a dev agency. A product partner.
           </p>
         </motion.div>
@@ -392,7 +392,7 @@ const SideBySideContentWithIcons = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
           viewport={{ once: true }}
-          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
+          className="grid grid-cols-1 gap-6 mx-auto md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 max-w-7xl"
         >
           {trustFactors.map((factor, index) => {
             const IconComponent = factor.icon;
@@ -405,17 +405,17 @@ const SideBySideContentWithIcons = () => {
                 transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
-                className="group cursor-pointer"
+                className="cursor-pointer group"
               >
-                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
+                <Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                   <CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
                     {/* Icon - Clean without background */}
                     <div className="mb-6">
-                      <IconComponent className="w-10 h-10 text-accent mx-auto" />
+                      <IconComponent className="w-10 h-10 mx-auto text-accent" />
                     </div>
 
                     {/* Title */}
-                    <h3 className="text-lg font-semibold text-white leading-tight">
+                    <h3 className="text-lg font-semibold leading-tight text-white">
                       {factor.title}
                     </h3>
                   </CardContent>
@@ -473,18 +473,18 @@ const TabbedServiceDisplay = () => {
 
   return (
     <section className="py-32 bg-background">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container px-6 mx-auto 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 mb-20"
+          className="mb-20 text-center"
         >
-          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
             Mobile App Development Services
           </h2>
-          <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
+          <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
             Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
           </p>
         </motion.div>
@@ -494,7 +494,7 @@ const TabbedServiceDisplay = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
           viewport={{ once: true }}
-          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
         >
           {services.map((service, index) => {
             const IconComponent = service.icon;
@@ -506,20 +506,20 @@ const TabbedServiceDisplay = () => {
                 transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
-                className="group cursor-pointer"
+                className="cursor-pointer group"
                 onClick={() => navigate(service.link)}
               >
-                <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
+                <div className="h-full p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-sm rounded-2xl hover:border-accent/30 hover:shadow-xl">
                   <div className="flex flex-col items-start space-y-6">
-                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                    <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
 
                     <div>
-                      <h3 className="text-xl font-semibold text-white mb-4">
+                      <h3 className="mb-4 text-xl font-semibold text-white">
                         {service.title}
                       </h3>
-                      <p className="text-gray-400 leading-relaxed">
+                      <p className="leading-relaxed text-gray-400">
                         {service.description}
                       </p>
                     </div>
@@ -539,13 +539,13 @@ const InlineCTA = () => {
   const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container px-6 mx-auto lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center max-w-4xl mx-auto"
+          className="max-w-4xl mx-auto text-center"
         >
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -565,14 +565,14 @@ const InlineCTA = () => {
             </div>
 
             {/* Main Heading */}
-            <h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
+            <h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
               <span className="text-foreground">Let's Architect </span>
               <span className="text-[#E5195E]">Intelligence</span>
               <span className="text-foreground"> Into Your App</span>
             </h2>
 
             {/* Subtitle */}
-            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
+            <p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
               Schedule a discovery call to explore how AI can give you a strategic edge.
             </p>
 
@@ -583,7 +583,7 @@ const InlineCTA = () => {
                 onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-3">
-                  <Brain className="w-6 h-6 flex-shrink-0" />
+                  <Brain className="flex-shrink-0 w-6 h-6" />
                   <span>Book an AI Discovery Call</span>
                 </div>
               </ShimmerButton>
@@ -640,19 +640,19 @@ const HireDevelopersSection = () => {
 
   return (
     <section className="py-32 bg-background">
-      <div className="container mx-auto px-6 lg:px-8">
+      <div className="container px-6 mx-auto 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 mb-20"
+          className="mb-20 text-center"
         >
-          <h2 className="text-4xl lg:text-5xl font-semibold mb-8">
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
             <span className="text-foreground">Hire Our </span>
             <span className="text-[#E5195E]">Mobile App Experts</span>
           </h2>
-          <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
+          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
             Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise.
           </p>
         </motion.div>
@@ -662,7 +662,7 @@ const HireDevelopersSection = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
           viewport={{ once: true }}
-          className="grid md:grid-cols-2 xl:grid-cols-4 gap-8"
+          className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"
         >
           {developers.map((developer, index) => {
             const IconComponent = developer.icon;
@@ -674,10 +674,10 @@ const HireDevelopersSection = () => {
                 transition={{ duration: 0.5, delay: index * 0.01 }}
                 viewport={{ once: true }}
                 whileHover={{ y: -8, scale: 1.02 }}
-                className="group cursor-pointer"
+                className="cursor-pointer 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 overflow-hidden h-full">
+                <Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
-                  <CardContent className="p-0 flex flex-col h-full">
+                  <CardContent className="flex flex-col h-full p-0">
                     {/* Header with icon and title */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
@@ -685,19 +685,19 @@ const HireDevelopersSection = () => {
                           <IconComponent className={`w-6 h-6 ${developer.iconColor}`} />
                         </div>
                         <div className="flex-1">
-                          <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
+                          <div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
                             Mobile Development
                           </div>
                         </div>
                       </div>
 
-                      <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
+                      <h3 className="mb-4 text-xl font-semibold leading-tight text-foreground">
                         {developer.title}
                       </h3>
                     </div>
 
                     {/* Skills section */}
-                    <div className="px-8 pb-6 flex-1">
+                    <div className="flex-1 px-8 pb-6">
                       <div className="flex flex-wrap gap-2">
                         {developer.skills.map((skill) => (
                           <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
@@ -710,11 +710,11 @@ const HireDevelopersSection = () => {
                     {/* CTA Buttons - Updated with ShimmerButton */}
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
-                        className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
+                        className="w-full py-3 text-sm shadow-lg rounded-xl hover:shadow-xl"
                         onClick={() => navigate(developer.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
-                          <UserPlus className="w-4 h-4 flex-shrink-0" />
+                          <UserPlus className="flex-shrink-0 w-4 h-4" />
                           <span className="font-medium">Hire Now</span>
                         </div>
                       </ShimmerButton>
@@ -780,7 +780,7 @@ export const MobileAppDevelopment = () => {
   }, []);
 
   return (
-    <div className="dark min-h-screen bg-background">
+    <div className="min-h-screen dark bg-background">
       {/* <Navigation /> */}
 
       {/* Hero Section */}