chore: optimize images via CI

.gitea/workflows/build.yml

@@ -0,0 +1,34 @@
+name: Build-Check
+
+on:
+  pull_request:
+    branches:
+      - main
+      - beta
+      - testing
+      - client
+      - staging
+      - production
+
+jobs:
+  build-test:
+    name: Build and Test PR
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Check
+        run: npm run build
+
+      - name: Audit Dependencies
+        run: npm audit --audit-level=critical

.gitea/workflows/compressimage.yml

@@ -0,0 +1,67 @@
+name: Enforce Image Standards
+
+on:
+  pull_request:
+    branches:
+      - main
+      - beta
+      - testing
+      - client
+      - staging
+      - production
+    types: [opened, synchronize, reopened]
+    paths:
+      - '**/*.jpg'
+      - '**/*.jpeg'
+      - '**/*.png'
+  workflow_dispatch:
+
+jobs:
+  optimize:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ gitea.head_ref }}   # IMPORTANT
+
+      - name: Install Image Tools
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y imagemagick jpegoptim pngquant
+
+      - name: Resize Oversized Images
+        run: |
+          find . -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) \
+          -exec mogrify -resize 1920x1920\> {} \;
+
+      - name: Optimize JPEG
+        run: |
+          find . -type f \( -iname "*.jpg" -o -iname "*.jpeg" \) \
+          -exec jpegoptim --strip-all --max=85 {} \;
+
+      - name: Optimize PNG
+        run: |
+          find . -type f -iname "*.png" \
+          -exec pngquant --force --ext .png --quality=75-90 {} \;
+
+      # Commit changes if any
+      - name: Commit changes
+        run: |
+          git config --global user.name "CI Bot"
+          git config --global user.email "ci@local"
+
+          if [ -n "$(git status --porcelain)" ]; then
+            git add .
+            git commit -m "chore: optimize images via CI"
+          else
+            echo "No changes to commit"
+          fi
+
+      # Push back to PR branch
+      - name: Push changes
+        if: success()
+        run: |
+          git push origin HEAD:${{ gitea.head_ref }}

.gitea/workflows/deploy.yml

@@ -0,0 +1,140 @@
+name: Deployment
+
+on:
+    push:
+        branches:
+            - beta
+            - testing
+            - staging
+            - production
+
+jobs:
+    deploy:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout Code in Runner
+              uses: actions/checkout@v3
+
+            - name: Branch and Folder Selection for Deployment
+              run: |
+                    BRANCH_NAME=${{ gitea.ref_name }}
+
+                    case $BRANCH_NAME in
+                        beta)
+                        echo "PROJECT_FOLDER=/home/user/app-beta" >> $GITHUB_ENV
+                        echo "AUTH_TYPE=passwd" >> $GITHUB_ENV
+                        echo "PM2_ID=app-beta[3000]" >> $GITHUB_ENV
+                        echo "HOST=${{ secrets.BETA_SERVER_HOST }}" >> $GITHUB_ENV
+                        echo "USERNAME=${{ secrets.BETA_SERVER_USERNAME }}" >> $GITHUB_ENV 
+                        echo "PASSWORD=${{ secrets.BETA_SERVER_PASSWORD }}" >> $GITHUB_ENV
+                        echo "PORT=${{ secrets.BETA_SERVER_PORT }}" >> $GITHUB_ENV
+                        ;;
+
+                        testing)
+                        echo "PROJECT_FOLDER=/home/user/app-testing" >> $GITHUB_ENV
+                        echo "AUTH_TYPE=passwd" >> $GITHUB_ENV
+                        echo "PM2_ID=app-testing[3001]" >> $GITHUB_ENV
+                        echo "HOST=${{ secrets.BETA_SERVER_HOST }}" >> $GITHUB_ENV
+                        echo "USERNAME=${{ secrets.BETA_SERVER_USERNAME }}" >> $GITHUB_ENV 
+                        echo "PASSWORD=${{ secrets.BETA_SERVER_PASSWORD }}" >> $GITHUB_ENV
+                        echo "PORT=${{ secrets.BETA_SERVER_PORT }}" >> $GITHUB_ENV                        
+                        ;;
+
+                        staging)
+                        echo "PROJECT_FOLDER=/var/www/app-staging" >> $GITHUB_ENV
+                        echo "AUTH_TYPE=key" >> $GITHUB_ENV
+                        echo "PM2_ID=app-staging[4000]" >> $GITHUB_ENV
+                        echo "HOST=${{ secrets.STAGING_SERVER_HOST }}" >> $GITHUB_ENV
+                        echo "USERNAME=${{ secrets.STAGING_SERVER_USERNAME }}" >> $GITHUB_ENV
+                        echo "PORT=${{ secrets.STAGING_SERVER_PORT }}" >> $GITHUB_ENV                          
+                        ;;
+
+                        production)
+                        echo "PROJECT_FOLDER=/home/reactjs/Wdipl-react" >> $GITHUB_ENV
+                        echo "AUTH_TYPE=passwd" >> $GITHUB_ENV
+                        #echo "PM2_ID=wdipl_frontend[3001]" >> $GITHUB_ENV           
+                        echo "HOST=${{ secrets.PRODUCTION_SERVER_HOST }}" >> $GITHUB_ENV
+                        echo "USERNAME=${{ secrets.PRODUCTION_SERVER_USERNAME }}" >> $GITHUB_ENV
+                        echo "PASSWORD=${{ secrets.PRODUCTION_SERVER_PASSWORD }}" >> $GITHUB_ENV 
+                        echo "PORT=${{ secrets.PRODUCTION_SERVER_PORT }}" >> $GITHUB_ENV
+                        ;;
+
+                        *)
+                        echo "Unknown Branch"
+                        exit 1 
+                        ;;
+                    esac
+
+                    echo "BRANCH_NAME=${{ gitea.ref_name }}" >> $GITHUB_ENV
+                    echo "SELECTED BRANCH : $BRANCH_NAME"
+                    echo "SELECTED FOLDER : $PROJECT_FOLDER"
+
+            - name: Deployment via SSH (Password)
+              if: env.AUTH_TYPE == 'passwd'
+              uses: appleboy/ssh-action@v1
+              with:
+                host: ${{ env.HOST }}
+                username: ${{ env.USERNAME }}
+                password: ${{ env.PASSWORD }}
+                port: ${{ env.PORT }}
+                envs: BRANCH_NAME,PROJECT_FOLDER,PM2_ID
+                script: |
+                        set -xe
+
+                        # PM2_ID supports names like: app-name[port]
+                        # Always wrap in quotes to avoid shell issues
+
+                        echo $BRANCH_NAME
+                        echo $PROJECT_FOLDER
+
+                        cd $PROJECT_FOLDER
+
+                        git fetch
+                        git reset --hard origin/$BRANCH_NAME
+                        git pull origin $BRANCH_NAME
+
+                        echo "Latest commits:"
+                        git log --oneline -5
+
+                        echo "Installing dependencies..."
+                        npm i && npm run build
+
+                        #echo "Reloading PM2..."
+                        #pm2 reload "$PM2_ID"
+
+                        echo "Recent Logs:"
+                        pm2 logs "$PM2_ID" --lines 50 --nostream
+
+            - name: Deployment via SSH (Key)
+              if: env.AUTH_TYPE == 'key'
+              uses: appleboy/ssh-action@v1
+              with:
+                host: ${{ env.HOST }}
+                username: ${{ env.USERNAME }}
+                key: ${{ gitea.ref_name == 'production' && secrets.PRODUCTION_SERVER_KEY || secrets.STAGING_SERVER_KEY }}
+                port: ${{ env.PORT }}
+                envs: BRANCH_NAME,PROJECT_FOLDER,PM2_ID
+                script: |
+                        set -xe
+
+                        echo $BRANCH_NAME
+                        echo $PROJECT_FOLDER
+
+                        cd $PROJECT_FOLDER
+
+                        git fetch
+                        git reset --hard origin/$BRANCH_NAME
+                        git pull origin $BRANCH_NAME
+
+                        echo "Latest commits:"
+                        git log --oneline -5
+
+                        echo "Installing dependencies..."
+                        npm i && npm run build
+
+                        echo "Reloading PM2..."
+                        pm2 reload "$PM2_ID"
+
+                        echo "Recent Logs:"
+                        pm2 logs "$PM2_ID" --lines 50 --nostream

.gitea/workflows/sonar.yml

@@ -0,0 +1,39 @@
+name: Sonar Check
+
+on:
+  pull_request:
+    branches:
+      - main
+      - beta
+      - testing
+      - client
+      - staging
+      - production
+
+jobs:
+  sonarqube:
+    name: SonarQube Scan
+    runs-on: ubuntu-latest
+
+    container:
+      image: sonarsource/sonar-scanner-cli:12.0.0.3214_8.0.1
+      options: --user root
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Run Sonar Scan
+        run: |
+          REPO_NAME=${{ gitea.event.repository.name }}
+
+          sonar-scanner \
+            -Dsonar.projectKey=$REPO_NAME \
+            -Dsonar.projectName=$REPO_NAME \
+            -Dsonar.sources=. \
+            -Dsonar.host.url=${{ secrets.SONARQUBE_HOST }} \
+            -Dsonar.token=${{ secrets.SONARQUBE_TOKEN }} \
+            -Dsonar.exclusions=node_modules/**,dist/**,coverage/** \
+            -Dsonar.qualitygate.wait=true

components/ProcessSection.tsx

@@ -75,11 +75,13 @@ const ChatSimulation = ({
           whileInView={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: index * 0.3 }}
           viewport={{ once: true }}
-          className={`flex ${message.from === "You" ? "justify-start" : "justify-end"
+          className={`flex ${
+            message.from === "You" ? "justify-start" : "justify-end"
           }`}
         >
           <div
-            className={`max-w-[80%] px-3 py-1.5 rounded-lg ${message.from === "You"
+            className={`max-w-[80%] px-3 py-1.5 rounded-lg ${
+              message.from === "You"
                 ? "bg-muted border border-border text-foreground"
                 : "bg-accent text-accent-foreground"
             }`}
@@ -248,7 +250,11 @@ const ProcessCard = ({
   );
 };
 
-export const ProcessSection = () => {
+interface ProcessSectionProps {
+  country?: string;
+}
+
+export const ProcessSection = ({ country = "USA" }: ProcessSectionProps) => {
   const titleRef = useRef(null);
   const navigate = useNavigate();
 
@@ -265,7 +271,9 @@ export const ProcessSection = () => {
             className="text-4xl lg:text-5xl font-semibold text-foreground mb-4"
           >
             From Ideation to Implementation:{" "}
-            <span className="text-accent">How We Convert Ideas Into Market-Ready Products</span>
+            <span className="text-accent">
+              How We Convert Ideas Into Market-Ready Products
+            </span>
           </motion.h2>
           <motion.p
             initial={{ opacity: 0, y: 20 }}
@@ -274,9 +282,9 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            As a mobile app development company in the USA, we turn the vision you have for your app into reality through expert planning, innovative design, and intuitive engineering.
-
-
+            As a mobile app development company in the {country}, we turn the
+            vision you have for your app into reality through expert planning,
+            innovative design, and intuitive engineering.
           </motion.p>
         </div>
 

pages/MobileAppDevelopment.tsx

@@ -33,7 +33,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.png";
+import heroMockupImage from "../src/images/mobile-app-banner.jpg";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 

pages/MobileAppDevelopmentIndia.tsx

@@ -9,7 +9,8 @@ import {
   Calendar,
   DollarSign,
   Eye,
-  Globe, Layers,
+  Globe,
+  Layers,
   Play,
   Rocket,
   Settings,
@@ -21,7 +22,7 @@ import {
   Truck,
   UserPlus,
   Watch,
-  Zap
+  Zap,
 } from "lucide-react";
 import React from "react";
 import { FAQSection } from "../components/FAQSection";
@@ -32,11 +33,10 @@ 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.png';
+import heroMockupImage from "../src/images/mobile-app-banner.jpg";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 
-
 // Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
 const HeroWithCTA = () => {
   const navigate = useNavigate();
@@ -44,32 +44,50 @@ const HeroWithCTA = () => {
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>Mobile Application Development Company India | Mobile App Development Services</title>
+        <title>
+          Mobile Application Development Company India | Mobile App Development
+          Services
+        </title>
         <meta
           name="description"
           content="WDIPL is a leading mobile application development company in India providing custom mobile app development services for Android and iOS with scalable offshore solutions."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/mobile-app-development-india" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/mobile-app-development-india"
+        />
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Mobile App Development Services by WDI Experts" />
+        <meta
+          property="og:title"
+          content="Mobile App Development Services by WDI Experts"
+        />
         <meta
           property="og:description"
           content="WDIPL is a leading mobile application development company in India providing custom mobile app development services for Android and iOS with scalable offshore solutions."
         />
         <meta property="og:url" content="https://www.wdipl.com/services" />
         <meta property="og:type" content="website" />
-        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+        <meta
+          property="og:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
 
         {/* Twitter Card Tags */}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Mobile App Development Services by WDI Experts" />
+        <meta
+          name="twitter:title"
+          content="Mobile App Development Services by WDI Experts"
+        />
         <meta
           name="twitter:description"
           content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
         />
-        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
 
         {/* Social Profiles (using JSON-LD Schema) */}
         <script type="application/ld+json">
@@ -104,7 +122,9 @@ 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-sm font-medium text-white/90">Mobile App Development</span>
+                <span className="text-sm font-medium text-white/90">
+                  Mobile App Development
+                </span>
               </div>
             </motion.div>
 
@@ -116,15 +136,14 @@ const HeroWithCTA = () => {
               className="space-y-6"
             >
               <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
-                <span className="text-white">
-                  From Ideas
-                </span>
+                <span className="text-white">From Ideas</span>
                 <span className="text-[#E5195E]"> Straight to App</span>
                 <span className="text-white"> Store within 6 Weeks</span>
               </h1>
 
               <p className="max-w-lg text-lg leading-relaxed text-gray-300">
-                Design secure, scalable, high-performance apps for Android, iOS, or cross-platform - for the Indian audience - fast.
+                Design secure, scalable, high-performance apps for Android, iOS,
+                or cross-platform - for the Indian audience - fast.
               </p>
             </motion.div>
 
@@ -139,7 +158,7 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 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')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="flex-shrink-0 w-5 h-5" />
@@ -149,7 +168,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 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')}
+                onClick={() => navigate("/case-studies")}
               >
                 <Eye className="flex-shrink-0 w-5 h-5" />
                 <span>View our work</span>
@@ -168,8 +187,8 @@ const HeroWithCTA = () => {
             <div
               className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
               style={{
-                position: 'relative',
-                overflow: 'hidden'
+                position: "relative",
+                overflow: "hidden",
               }}
             >
               {/* Hero Image with comprehensive CSS styling */}
@@ -178,12 +197,12 @@ const HeroWithCTA = () => {
                 alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
                 className="block transition-all duration-300 scale-120 hover:scale-125"
                 style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
-                  objectPosition: 'center',
-                  maxWidth: '100%',
-                  display: 'block'
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain",
+                  objectPosition: "center",
+                  maxWidth: "100%",
+                  display: "block",
                 }}
               />
 
@@ -192,9 +211,9 @@ const HeroWithCTA = () => {
                 className="absolute inset-0 opacity-0 pointer-events-none"
                 style={{
                   backgroundImage: `url(${heroMockupImage})`,
-                  backgroundSize: 'contain',
-                  backgroundPosition: 'center',
-                  backgroundRepeat: 'no-repeat'
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
                 }}
               />
             </div>
@@ -214,7 +233,7 @@ const HorizontalTagScroller = () => {
     { name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" },
     { name: "OTT & Streaming", icon: Play, color: "text-purple-400" },
     { name: "Logistics", icon: Truck, color: "text-yellow-400" },
-    { name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" }
+    { name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" },
   ];
 
   return (
@@ -236,7 +255,10 @@ const HorizontalTagScroller = () => {
             Efficient Apps for High-Impact Indian Industries
           </h2>
           <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
-            As a mobile app development company in India, we are focused on delivering mobile apps for industries where speed, trust, and uptime play a key role.          </p>
+            As a mobile app development company in India, we are focused on
+            delivering mobile apps for industries where speed, trust, and uptime
+            play a key role.{" "}
+          </p>
         </motion.div>
 
         <motion.div
@@ -266,7 +288,9 @@ const HorizontalTagScroller = () => {
                 >
                   <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}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -286,13 +310,18 @@ const HorizontalTagScroller = () => {
                   key={`second-${industry.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + industries.length) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + industries.length) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="flex-shrink-0 mx-3 group"
                 >
                   <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}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -312,13 +341,18 @@ const HorizontalTagScroller = () => {
                   key={`third-${industry.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + industries.length * 2) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + industries.length * 2) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="flex-shrink-0 mx-3 group"
                 >
                   <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}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -342,28 +376,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "engineering",
       title: "24+ Years in App Engineering",
-      icon: Award
+      icon: Award,
     },
     {
       id: "ownership",
       title: "100% Ownership, No Lock-ins",
-      icon: Shield
+      icon: Shield,
     },
     {
       id: "agile",
       title: "Agile Sprints with Rapid Iteration",
-      icon: Zap
+      icon: Zap,
     },
     {
       id: "security",
       title: "Secure, Compliance-Ready Apps",
-      icon: ShieldCheck
+      icon: ShieldCheck,
     },
     {
       id: "devices",
       title: "Seamless Experience Across Devices",
-      icon: Settings
-    }
+      icon: Settings,
+    },
   ];
 
   return (
@@ -378,11 +412,13 @@ const SideBySideContentWithIcons = () => {
         >
           {/* Main Heading */}
           <h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
-            What Helps Founders and CTOs Trust WDI          </h2>
+            What Helps Founders and CTOs Trust WDI{" "}
+          </h2>
 
           {/* Subtext */}
           <p className="text-2xl leading-relaxed text-gray-300">
-            We do more than just offer mobile application development services in India; we are your most trusted product partner!
+            We do more than just offer mobile application development services
+            in India; we are your most trusted product partner!
           </p>
         </motion.div>
 
@@ -436,13 +472,14 @@ const TabbedServiceDisplay = () => {
     {
       title: "iOS App Development",
       icon: Smartphone,
-      description: "High-performing native iOS applications created with Swift and optimized for the App Store.",
-      link: "/services/ios-app-development"
+      description:
+        "High-performing native iOS applications created with Swift and optimized for the App Store.",
+      link: "/services/ios-app-development",
     },
     {
       title: "Android App Development",
       icon: Smartphone,
-      description:
+      description: (
         <>
           Innovative{" "}
           <a
@@ -450,36 +487,41 @@ const TabbedServiceDisplay = () => {
             className="text-[#E5195E] underline"
           >
             Android apps
-          </a>
-
-          {" "} built with the help of Kotlin and optimized through Google Play.</>,
+          </a>{" "}
+          built with the help of Kotlin and optimized through Google Play.
+        </>
+      ),
       // "High-performance Android apps using Kotlin with Google Play optimization.",
-      link: "/services/android-app-development"
+      link: "/services/android-app-development",
     },
     {
       title: "Cross-Platform Development",
       icon: Layers,
-      description: "Efficient cross-platform solutions using React Native and Flutter.",
-      link: "/services/cross-platform-app-development"
+      description:
+        "Efficient cross-platform solutions using React Native and Flutter.",
+      link: "/services/cross-platform-app-development",
     },
     {
       title: "Wearable App Development",
       icon: Watch,
-      description: "Smart watch and wearable device applications for health and fitness.",
-      link: "/services/wearable-device-development"
+      description:
+        "Smart watch and wearable device applications for health and fitness.",
+      link: "/services/wearable-device-development",
     },
     {
       title: "Progressive Web Apps",
       icon: Globe,
-      description: "Web applications that work like native mobile apps across all devices.",
-      link: "/services/pwa-development"
+      description:
+        "Web applications that work like native mobile apps across all devices.",
+      link: "/services/pwa-development",
     },
     {
       title: "Enterprise Mobile Solutions",
       icon: Building,
-      description: "Secure, scalable mobile solutions for enterprise business needs.",
-      link: "/services/enterprise-software-solutions"
-    }
+      description:
+        "Secure, scalable mobile solutions for enterprise business needs.",
+      link: "/services/enterprise-software-solutions",
+    },
   ];
 
   return (
@@ -493,9 +535,12 @@ const TabbedServiceDisplay = () => {
           className="mb-20 text-center"
         >
           <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
-            Mobile App Development Services in India          </h2>
+            Mobile App Development Services in India{" "}
+          </h2>
           <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
-            Transform the application with a comprehensive offshore mobile app development in India. Reshape your ideas into efficient, user-friendly apps that run smoothly across all platforms.
+            Transform the application with a comprehensive offshore mobile app
+            development in India. Reshape your ideas into efficient,
+            user-friendly apps that run smoothly across all platforms.
           </p>
         </motion.div>
 
@@ -569,7 +614,9 @@ 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">AI-Driven Innovation</span>
+                  <span className="text-[#E5195E] text-sm font-medium">
+                    AI-Driven Innovation
+                  </span>
                 </div>
               </div>
             </div>
@@ -583,14 +630,15 @@ const InlineCTA = () => {
 
             {/* Subtitle */}
             <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.
+              Schedule a discovery call to explore how AI can give you a
+              strategic edge.
             </p>
 
             {/* CTA Button */}
             <div className="flex flex-col items-center gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigate('/start-a-project')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Brain className="flex-shrink-0 w-6 h-6" />
@@ -620,7 +668,7 @@ const HireDevelopersSection = () => {
       skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
       iconBg: "bg-gray-800",
       iconColor: "text-white",
-      link: "/hire-talent/mobile-app-developers"
+      link: "/hire-talent/mobile-app-developers",
     },
     {
       title: "Android Developers",
@@ -628,7 +676,7 @@ const HireDevelopersSection = () => {
       skills: ["Kotlin", "Java", "Jetpack Compose"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/mobile-app-developers"
+      link: "/hire-talent/mobile-app-developers",
     },
     {
       title: "Cross-Platform Developers",
@@ -636,7 +684,7 @@ const HireDevelopersSection = () => {
       skills: ["React Native", "Flutter", "Xamarin"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/mobile-app-developers"
+      link: "/hire-talent/mobile-app-developers",
     },
     {
       title: "Mobile QA Engineers",
@@ -644,8 +692,8 @@ const HireDevelopersSection = () => {
       skills: ["Mobile Testing", "Automation", "Performance"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/qa-engineers"
-    }
+      link: "/hire-talent/qa-engineers",
+    },
   ];
 
   return (
@@ -659,11 +707,19 @@ const HireDevelopersSection = () => {
           className="mb-20 text-center"
         >
           <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
-            <span className="text-foreground">Hire Our </span>
-            <span className="text-[#E5195E]">AI Mobile Application Developers</span>
+            <span className="text-foreground">
+              Start Your Journey with Our{" "}
+            </span>
+            <span className="text-[#E5195E]">
+              Mobile App Development Experts
+            </span>
           </h2>
           <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
-            Get access to top-tier AI app development company experts who can bring your vision to life with AI-powered features and proven expertise.
+            Looking to design an app that works across all platforms without any
+            bugs or errors? Start your journey with the experts of our mobile
+            application development company in India. We will bring ideas to
+            life with the help of our seasoned knowledge, tested expertise, and
+            highly innovative technology.
           </p>
         </motion.div>
 
@@ -691,8 +747,12 @@ const HireDevelopersSection = () => {
                     {/* Header with icon and title */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
-                        <div className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
-                          <IconComponent className={`w-6 h-6 ${developer.iconColor}`} />
+                        <div
+                          className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
+                        >
+                          <IconComponent
+                            className={`w-6 h-6 ${developer.iconColor}`}
+                          />
                         </div>
                         <div className="flex-1">
                           <div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
@@ -710,7 +770,11 @@ const HireDevelopersSection = () => {
                     <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">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-white/10 text-foreground"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -743,49 +807,59 @@ const HireDevelopersSection = () => {
 // FAQ data for Mobile App Development
 const mobileAppFAQs = [
   {
-    question: "Do you develop both iOS and Android apps?",
-    answer: "Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment."
+    question:
+      "How much do you charge for mobile app development services in India?",
+    answer:
+      "The charges for our services vary as it depends on the app’s features, the platforms it needs to support, and design complexity. So, you must get in touch with us, and we will provide transparent estimates along with competitive pricing as per your outlined requirements.",
   },
   {
-    question: "What is the typical timeline for mobile app development?",
-    answer: "Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
+    question:
+      "Do you help with regular app maintenance and updates for launched apps?",
+    answer:
+      "Yes, we do. We have a team of experts focused on offering a comprehensive maintenance service that includes routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimization. This ensures the launched apps are up-to-date and user-friendly.",
   },
   {
-    question: "How much does mobile app development cost?",
-    answer: "Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
+    question: "Does your team design apps compliant with India’s privacy laws?",
+    answer:
+      "Yes, absolutely. As a seasoned company in offshore mobile app development in India, our apps are compliant with key Indian laws and regulations like the Digital Personal Data Protection (DPDP) Act, 2023, and the DPDP Rules, 2025. Plus, the apps we design and develop also follow standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security.",
   },
   {
-    question: "Do you help with App Store submissions?",
-    answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance."
+    question:
+      "Does your team deliver third-party services and API integration for the app?",
+    answer:
+      "As one of the skilled mobile app development companies in India, our services cover the integration of third-party services like payment gateways, analytics, maps, push notifications, social media plug-ins, and custom APIs. This is how we work on enhancing the app’s functionality.",
   },
   {
-    question: "Can you integrate third-party services and APIs?",
-    answer: "Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features."
+    question: "Do you offer mobile apps that can operate offline?",
+    answer:
+      "Yes, we do. The team at our mobile app development company in India develops apps that use local storage, caching strategies, and data synchronization to offer offline functionality. This is how we design apps for a larger audience, including those who want to use applications without an internet connection.",
   },
   {
-    question: "Do you provide app maintenance and updates?",
-    answer: "Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current."
+    question: "Can you help me with ideas to protect my app idea?",
+    answer:
+      "Yes, absolutely. Our experts are skilled to educate individuals in protecting their app idea, including using NDAs with developers and documents.",
   },
   {
-    question: "What about app security and data protection?",
-    answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps."
+    question: "Can you guide me in choosing app monetization methods?",
+    answer:
+      "Yes, we do. The experts at our mobile app development company in India help you in choosing among common monetization methods like in-app ads, in-app purchases, freemium models, and subscription-based models.",
   },
-  {
-    question: "Can you develop offline-capable mobile apps?",
-    answer: "Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity."
-  }
 ];
 
 // Main Mobile App Development Page Component
 export const MobileAppDevelopmentIndia = () => {
   // Set document title for SEO
   React.useEffect(() => {
-    document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
+    document.title =
+      "Mobile App Development Services | WDI - iOS & Android App Development";
 
     // Update meta description for SEO
     const metaDescription = document.querySelector('meta[name="description"]');
     if (metaDescription) {
-      metaDescription.setAttribute('content', 'Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.');
+      metaDescription.setAttribute(
+        "content",
+        "Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.",
+      );
     }
   }, []);
 
@@ -806,7 +880,7 @@ export const MobileAppDevelopmentIndia = () => {
       <TabbedServiceDisplay />
 
       {/* Process Steps */}
-      <ProcessSection />
+      <ProcessSection country="India" />
 
       {/* Hire Developers */}
       <HireDevelopersSection />

pages/MobileAppDevelopmentUk.tsx

@@ -33,7 +33,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.png";
+import heroMockupImage from "../src/images/mobile-app-banner.jpg";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 
@@ -876,7 +876,7 @@ export const MobileAppDevelopmentUk = () => {
       <TabbedServiceDisplay />
 
       {/* Process Steps */}
-      <ProcessSection />
+      <ProcessSection country="UK" />
 
       {/* Hire Developers */}
       <HireDevelopersSection />

pages/MobileAppDevelopmentUsa.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.png';
+import heroMockupImage from '../src/images/mobile-app-banner.jpg';
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";