chore: optimize images via CI

Reviewed-on: #6

.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

TODO.md

@@ -0,0 +1,11 @@
+# Add FAQ to iOS App Development India Page
+
+## Plan Breakdown
+- [x] 1. Create TODO.md with steps (Done)
+- [x] 2. Add IOSFAQs component to pages/IOSAppDevelopmentIndia.tsx
+- [x] 3. Insert `<IOSFAQs />` before final CTA section
+- [x] 4. Verify imports (Accordion components)
+- [x] 5. Test page rendering
+- [x] 6. Mark complete
+
+**Status:** ✅ FAQ section successfully added to IOSAppDevelopmentIndia.tsx with 8 iOS-specific questions adapted from Android page. Page structure preserved. Ready for testing.

components/Footer.tsx

@@ -128,6 +128,57 @@ const footerNavigation = {
       url: "/dedicated-development-teams",
     },
   ],
+  NewColumn: [
+    {
+      label: "Android App Development India",
+      url: "/services/android-app-development-india",
+    },
+    {
+      label: "Android App Development UK",
+      url: "/services/android-app-development-uk",
+    },
+    {
+      label: "Android App Development USA",
+      url: "/services/android-app-development-usa",
+    },
+    {
+      label: "IOS App Development India",
+      url: "/services/ios-app-development-india",
+    },
+    {
+      label: "IOS App Development UK",
+      url: "/services/ios-app-development-uk",
+    },
+    {
+      label: "IOS App Development USA",
+      url: "/services/ios-app-development-usa",
+    },
+    {
+      label: "Hire Mobile App Developers India",
+      url: "/hire-talent/mobile-app-developers-india",
+    },
+     {
+      label: "Hire Mobile App Developers UK",
+      url: "/hire-talent/mobile-app-developers-uk",
+    },
+     {
+      label: "Hire Mobile App Developers USA",
+      url: "/hire-talent/mobile-app-developers-usa",
+    },
+    {
+      label: "Mobile App Development UK",
+      url: "/services/mobile-app-development-uk",
+    },
+       {
+      label: "Mobile App Development India",
+      url: "/services/mobile-app-development-india",
+    },
+    {
+      label: "Mobile App Development USA",
+      url: "/services/mobile-app-development-usa",
+    },
+
+  ],
   Company: [
     {
       label: "About WDI",
@@ -187,7 +238,6 @@ const contactInfo = [
   },
 ];
 
-
 // FooterSection component with useNavigate inside
 const FooterSection = ({
   title,
@@ -208,14 +258,12 @@ const FooterSection = ({
       viewport={{ once: true }}
       className="space-y-4"
     >
-      <h4 className="font-semibold text-white text-lg">
-        {title}
-      </h4>
+      <h4 className="font-semibold text-white text-lg">{title}</h4>
       <ul className="space-y-3">
         {links.map((link) => (
           <li key={link.label}>
             <a
-              href={link.url || '#'}
+              href={link.url || "#"}
               onClick={(e) => {
                 e.preventDefault();
                 navigate(link.url);
@@ -268,9 +316,8 @@ const NewsletterSection = () => {
             Never Miss an Update
           </h3>
           <p className="text-[#CCCCCC] text-lg mb-8 max-w-2xl mx-auto">
-            Get the latest insights on digital product
-            development, AI trends, and startup success stories
-            delivered to your inbox.
+            Get the latest insights on digital product development, AI trends,
+            and startup success stories delivered to your inbox.
           </p>
 
           {isSubscribed ? (
@@ -281,19 +328,14 @@ const NewsletterSection = () => {
             >
               <div className="flex items-center justify-center gap-2 text-green-400">
                 <Mail className="w-5 h-5" />
-                <span className="font-medium">
-                  Successfully subscribed!
-                </span>
+                <span className="font-medium">Successfully subscribed!</span>
               </div>
               <p className="text-green-300 text-sm mt-2">
                 Welcome to our community of innovators.
               </p>
             </motion.div>
           ) : (
-            <form
-              onSubmit={handleSubscribe}
-              className="max-w-md mx-auto"
-            >
+            <form onSubmit={handleSubscribe} className="max-w-md mx-auto">
               <div className="flex gap-3">
                 <Input
                   type="email"
@@ -308,14 +350,11 @@ const NewsletterSection = () => {
                   disabled={isSubmitting}
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-6 shrink-0 disabled:opacity-50"
                 >
-                  {isSubmitting
-                    ? "Subscribing..."
-                    : "Subscribe"}
+                  {isSubmitting ? "Subscribing..." : "Subscribe"}
                 </Button>
               </div>
               <p className="text-[#CCCCCC] text-xs mt-3">
-                No spam, unsubscribe at any time. We respect
-                your privacy.
+                No spam, unsubscribe at any time. We respect your privacy.
               </p>
             </form>
           )}
@@ -335,7 +374,7 @@ export const Footer = () => {
         <div className="relative z-10">
           {/* Main Footer Content */}
           <div className="container mx-auto px-6 lg:px-8 py-16">
-            <div className="grid lg:grid-cols-7 gap-12">
+            <div className="grid lg:grid-cols-8 gap-12">
               {/* Company Info */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -351,7 +390,9 @@ export const Footer = () => {
                 </div>
 
                 <p className="text-[#CCCCCC] leading-relaxed max-w-md">
-                  Website Developers India Pvt. Ltd. - Transforming ideas into scalable digital products. 25+ years of industry expertise, serving founders and CTOs across 15+ countries.
+                  Website Developers India Pvt. Ltd. - Transforming ideas into
+                  scalable digital products. 25+ years of industry expertise,
+                  serving founders and CTOs across 15+ countries.
                 </p>
 
                 {/* India Office Contact Information */}
@@ -367,7 +408,9 @@ export const Footer = () => {
                           key={contact.label}
                           href={contact.url}
                           target={contact.blank ? "_blank" : "_self"}
-                          rel={contact.blank ? "noopener noreferrer" : undefined}
+                          rel={
+                            contact.blank ? "noopener noreferrer" : undefined
+                          }
                           className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
                         >
                           <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
@@ -446,6 +489,11 @@ export const Footer = () => {
                 links={footerNavigation.HireTalent}
                 delay={0.7}
               />
+              <FooterSection
+                title="Countries we serve"
+                links={footerNavigation.NewColumn}
+                delay={0.8}
+              />
             </div>
           </div>
 

components/Navigation.tsx

@@ -101,22 +101,12 @@ const navigationData = {
       href: "/services/mobile-app-development",
       sub_services: [
         { name: "iOS App Development", href: "/services/ios-app-development" },
+
         {
           name: "Android App Development",
           href: "/services/android-app-development",
         },
-        {
-          name: "Android App Development India",
-          href: "/services/android-app-development-india",
-        },
-           {
-          name: "Android App Development UK",
-          href: "/services/android-app-development-uk",
-        },
-        {
-          name: "Android App Development USA",
-          href: "/services/android-app-development-usa",
-        },
+
         {
           name: "Cross-Platform App Development",
           href: "/services/cross-platform-app-development",
@@ -478,7 +468,7 @@ const navigationData = {
       icon: BookOpen,
       href: "https://www.wdipl.com/blog",
       target: "_blank",
-      rel: "noopener noreferrer"
+      rel: "noopener noreferrer",
     },
     { text: "Portfolio", icon: FileText, href: "/case-studies" },
     {
@@ -925,7 +915,7 @@ export const Navigation = () => {
       cancelClose();
       openMenu(item);
     },
-    [cancelClose, openMenu]
+    [cancelClose, openMenu],
   );
 
   const handleNavItemMouseLeave = useCallback(() => {
@@ -942,7 +932,7 @@ export const Navigation = () => {
         closeMenu();
       }
     },
-    [closeMenu]
+    [closeMenu],
   );
 
   const handleNavMouseEnter = useCallback(() => {
@@ -1042,7 +1032,8 @@ export const Navigation = () => {
                   {item}
                   {hasDropdown(item) && (
                     <ChevronDown
-                      className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
+                      className={`w-4 h-4 transition-transform duration-200 ${
+                        activeMenu === item ? "rotate-180" : ""
                       }`}
                     />
                   )}

components/ProcessSection.tsx

@@ -20,7 +20,7 @@ const steps = [
     id: "step-1",
     title: "1. Define Scope",
     description:
-      "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
+      "We start by gathering project data and requirements, defining the project goals, creating technical documentation, and aligning these with the client’s expectations.",
     visual: {
       type: "icon_or_doc_mockup",
       style: "minimal_ui",
@@ -30,7 +30,7 @@ const steps = [
     id: "step-2",
     title: "2. Design UI/UX",
     description:
-      "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
+      "Using Figma, our designers craft user-centric interfaces that feature clickable flows, visual systems, and detailed wireframes for work across all screens.",
     tags: [
       { label: "Wireframes", color: "#6366F1" },
       { label: "Prototyping", color: "#10B981" },
@@ -39,9 +39,9 @@ const steps = [
   },
   {
     id: "step-3",
-    title: "3. Develop with Agile Sprints",
+    title: "3. Development with Agile Sprints",
     description:
-      "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
+      "Using Agile sprints, we turn designs into production-ready code that supports continuous integration and weekly builds.",
     tags: [
       { label: "Frontend", color: "#3B82F6" },
       { label: "Backend", color: "#0EA5E9" },
@@ -50,9 +50,9 @@ const steps = [
   },
   {
     id: "step-4",
-    title: "4. Test, Launch & Scale",
+    title: "4. Testing, Launch, and Scale",
     description:
-      "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
+      "Once we are through with QA and UAT, we launch the app. Then we monitor, iterate, and scale the app to grow alongside your user base and demand.",
     chat_simulation: [
       { from: "You", text: "Are we ready to go live?" },
       { from: "Team", text: "Yes! Final tests passed 🚀" },
@@ -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();
 
@@ -264,8 +270,10 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-4xl lg:text-5xl font-semibold text-foreground mb-4"
           >
-            How We Turn an Idea into a{" "}
-            <span className="text-accent">Scalable Product</span>
+            From Ideation to Implementation:{" "}
+            <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"
           >
-            Our AI‑driven product development process transforms your vision into a scalable web or mobile product through strategic planning, AI‑powered design, and expert engineering at every stage.
-
-
+            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/AndroidAppDevelopmentIndia.tsx

@@ -64,7 +64,7 @@ const AndroidHeroWithCTA = () => {
         {/* Canonical Link */}
         <link
           rel="canonical"
-          href="https://www.wdipl.com/services/android-app-development"
+          href="https://www.wdipl.com/services/android-app-development-india"
         />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
@@ -1407,16 +1407,17 @@ export const AndroidAppDevelopmentIndia = () => {
         <HireAndroidDevelopers />
       </section>
 
-      {/* FAQs */}
-      <section className="bg-card">
-        <AndroidFAQs />
-      </section>
 
       {/* Final CTA */}
       <section className="bg-background">
         <AndroidFinalCTA />
       </section>
       
+      {/* FAQs */}
+      <section className="bg-card">
+        <AndroidFAQs />
+      </section>
+
       {/* Footer */}
       <section className="bg-background">{/* <Footer /> */}</section>
     </div>

pages/AndroidAppDevelopmentUSA.tsx

@@ -64,7 +64,7 @@ const AndroidHeroWithCTA = () => {
         {/* Canonical Link */}
         <link
           rel="canonical"
-          href="https://www.wdipl.com/services/android-app-development"
+          href="https://www.wdipl.com/services/android-app-development-usa"
         />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
@@ -1166,25 +1166,40 @@ const AndroidFAQs = () => {
   const faqs = [
     {
       question:
-        "How do you ensure app compatibility across diverse Android devices?",
+        "What Are the Main Factors Driving the Development of the Cost of Android Apps?",
       answer:
-        "We follow comprehensive testing strategies including device fragmentation testing, responsive design principles, and adaptive layouts. Our team tests across multiple screen sizes, Android versions, and hardware configurations to ensure consistent performance across the Android ecosystem.",
+        "The cost of Android app development in the USA depends on various factors, which include: app complexity, level of customization in UI/UX design, and backend infrastructure requirements.",
     },
     {
-      question: "What's your approach to Android UI/UX design?",
+      question: "What Is Your Approach to UI/UX design?",
       answer:
-        "We strictly follow Google's Material Design guidelines while incorporating your brand identity. Our designs prioritize usability, accessibility, and platform consistency while ensuring your app feels native to Android users and leverages platform-specific interaction patterns.",
+        "Our UI/UX design process follows a user-focused design approach that incorporates:\nUser research and persona development.\nInformation architecture and wireframing\nInteractive prototyping and user testing\nVisual design and style guide creation\nCreating a responsive design for all devices\nMaking adjustments based on the user feedback.",
     },
     {
-      question: "Do you provide post-launch updates and maintenance?",
+      question: "How Long Does It Take to Develop an Android App?",
       answer:
-        "Yes, we offer comprehensive post-launch support including regular updates for new Android versions, security patches, performance optimizations, feature enhancements, and Google Play Store compliance. Our maintenance packages are tailored to your specific needs.",
+        "Depending on the complexity of the app, the app development timeline is determined. A simple app takes 2 to 3 months while complex apps take 6 to 12 months.",
+    },
+    {
+      question: "Do You Agree to Sign an NDA?",
+      answer:
+        "Yes, totally! We consider the confidentiality of our clients as our top priority. We are more than happy to sign Non-disclosure Agreements (NDA) even before we start any discussion regarding your project. We maintain strict confidentiality protocols throughout our organization.",
     },
     {
       question:
-        "Can you integrate with specific Google services (e.g., Maps, Firebase)?",
+        "In 2026, What Programming Language Should be Used for Android in 2026?",
       answer:
-        "Absolutely! We specialize in Google services integration including Google Maps, Firebase, Google Pay, Google Drive, Google Analytics, and more. Our team has extensive experience leveraging the full Google ecosystem to enhance your app's functionality and user experience.",
+        "Kotlin is the modern standard for native Android Development, while Java is still used for older apps.",
+    },
+    {
+      question: "What Is the Difference between Kotlin and Flutter?",
+      answer:
+        "Kotlin is a language ideal for native Android Development. On the other hand, Flutter is a cross-platform framework (Using Dart) that builds both iOS and Android apps from one codebase.",
+    },
+    {
+      question: "How Can I Secure User Data in my App?",
+      answer:
+        "We use HTTPS for network communication and store sensitive information in Android Keystore, implement biometric authentication, and follow OWASP Mobile security standards.",
     },
   ];
 
@@ -1391,16 +1406,14 @@ export const AndroidAppDevelopmentUSA = () => {
         <HireAndroidDevelopers />
       </section>
 
-      {/* FAQs */}
-      {/* <section className="bg-card">
-        <AndroidFAQs />
-      </section> */}
-
       {/* Final CTA */}
       <section className="bg-background">
         <AndroidFinalCTA />
       </section>
-
+      {/* FAQs */}
+      <section className="bg-card">
+        <AndroidFAQs />
+      </section>
       {/* Footer */}
       <section className="bg-background">{/* <Footer /> */}</section>
     </div>

pages/AndroidAppDevelopmentUk.tsx

@@ -62,7 +62,7 @@ const AndroidHeroWithCTA = () => {
         {/* Canonical Link */}
         <link
           rel="canonical"
-          href="https://www.wdipl.com/services/android-app-development"
+          href="https://www.wdipl.com/services/android-app-development-uk"
         />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
@@ -1206,7 +1206,6 @@ const AndroidFAQs = () => {
         "WDI serves a diverse range of industries, including Healthcare, FinTech, E-Commerce, Education, etc. Our expertise spans various sectors, enabling us to understand the unique challenges of each and produce tailored solutions.",
     },
   ];
-
   return (
     <section className="py-32 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1407,16 +1406,16 @@ export const AndroidAppDevelopmentUk = () => {
         <HireAndroidDevelopers />
       </section>
 
-      {/* FAQs */}
-      <section className="bg-card">
-        <AndroidFAQs />
-      </section>
-
       {/* Final CTA */}
       <section className="bg-background">
         <AndroidFinalCTA />
       </section>
 
+      {/* FAQs */}
+      <section className="bg-card">
+        <AndroidFAQs />
+      </section>
+
       {/* Footer */}
       <section className="bg-background">{/* <Footer /> */}</section>
     </div>

pages/HireMobileAppDevelopers.tsx

@@ -161,7 +161,7 @@ export const HireMobileAppDevelopers = () => {
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
         <meta
           property="og:title"
-          content="Hire Mobile App Developers | Expert Talent at WDI"
+          content="Hire Mobile App Developers | Dedicated App Experts - WDIPL"
         />
         <meta
           property="og:description"
@@ -178,7 +178,7 @@ export const HireMobileAppDevelopers = () => {
         <meta name="twitter:card" content="summary_large_image" />
         <meta
           name="twitter:title"
-          content="Hire Mobile App Developers | Expert Talent at WDI"
+          content="Hire Mobile App Developers | Dedicated App Experts - WDIPL"
         />
         <meta
           name="twitter:description"

pages/HireMobileAppDevelopersIndia.tsx

@@ -283,7 +283,7 @@ export const HireMobileAppDevelopersIndia = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services" />
+        <link rel="canonical" href="https://www.wdipl.com/hire-talent/mobile-app-developers-india" />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
         <meta

pages/MobileAppDevelopment.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 REQUIREMENT
 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 Services | Mobile App Development Company - WDIPL</title>
+        <title>
+          Mobile Application Development Services | Mobile App Development
+          Company - WDIPL
+        </title>
         <meta
           name="description"
           content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/mobile-app-development" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/mobile-app-development"
+        />
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Mobile App Development Services by WDI Experts" />
+        <meta
+          property="og:title"
+          content="Mobile Application Development Services | Mobile App Development Company - WDIPL"
+        />
         <meta
           property="og:description"
           content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
         />
         <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 Application Development Services | Mobile App Development Company - WDIPL"
+        />
         <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>
 
@@ -122,7 +142,8 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="max-w-lg text-lg leading-relaxed text-gray-300">
-                Build secure, scalable, AI-powered high-performance apps for iOS, Android, or cross-platform fast.
+                Build secure, scalable, AI-powered high-performance apps for
+                iOS, Android, or cross-platform fast.
               </p>
             </motion.div>
 
@@ -137,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" />
@@ -147,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>
@@ -166,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 */}
@@ -176,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",
                 }}
               />
 
@@ -190,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>
@@ -212,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 (
@@ -234,7 +255,8 @@ const HorizontalTagScroller = () => {
             Apps Built for High-Impact Industries
           </h2>
           <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
-            Our AI mobile apps power industries where user trust, speed, and uptime are critical.
+            Our AI mobile apps power industries where user trust, speed, and
+            uptime are critical.
           </p>
         </motion.div>
 
@@ -265,7 +287,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">
@@ -285,13 +309,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">
@@ -311,13 +340,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">
@@ -341,28 +375,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: "Enterprise Security & Compliance-Ready",
-      icon: ShieldCheck
+      icon: ShieldCheck,
     },
     {
       id: "devices",
       title: "Deep Experience Across Devices",
-      icon: Settings
-    }
+      icon: Settings,
+    },
   ];
 
   return (
@@ -436,39 +470,45 @@ const TabbedServiceDisplay = () => {
     {
       title: "iOS App Development",
       icon: Smartphone,
-      description: "Native iOS applications built with Swift and optimized for App Store success.",
-      link: "/services/ios-app-development"
+      description:
+        "Native iOS applications built with Swift and optimized for App Store success.",
+      link: "/services/ios-app-development",
     },
     {
       title: "Android App Development",
       icon: Smartphone,
-      description: "High-performance Android apps using Kotlin with Google Play optimization.",
-      link: "/services/android-app-development"
+      description:
+        "High-performance Android apps using Kotlin with Google Play optimization.",
+      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 (
@@ -485,7 +525,9 @@ const TabbedServiceDisplay = () => {
             Mobile App Development Services
           </h2>
           <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
-            Comprehensive AI mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
+            Comprehensive AI mobile development services that transform your
+            ideas into powerful, user-friendly applications across all
+            platforms.
           </p>
         </motion.div>
 
@@ -559,7 +601,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>
@@ -573,14 +617,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" />
@@ -610,7 +655,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",
@@ -618,7 +663,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",
@@ -626,7 +671,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",
@@ -634,8 +679,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 (
@@ -650,10 +695,14 @@ const HireDevelopersSection = () => {
         >
           <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-[#E5195E]">
+              AI Mobile Application Developers
+            </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.
+            Get access to top-tier AI app development company experts who can
+            bring your vision to life with AI-powered features and proven
+            expertise.
           </p>
         </motion.div>
 
@@ -681,8 +730,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">
@@ -700,7 +753,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>
                         ))}
@@ -734,48 +791,60 @@ const HireDevelopersSection = () => {
 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."
+    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: "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."
+    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: "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."
+    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: "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."
+    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: "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."
+    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 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."
+    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: "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."
+    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 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."
-  }
+    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 MobileAppDevelopment = () => {
   // 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.",
+      );
     }
   }, []);
 

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

@@ -0,0 +1,893 @@
+import { motion } from "framer-motion";
+import {
+  Apple,
+  Award,
+  Bolt,
+  BookOpen,
+  Brain,
+  Building,
+  Calendar,
+  DollarSign,
+  Eye,
+  Globe,
+  Layers,
+  Play,
+  Rocket,
+  Settings,
+  Shield,
+  ShieldCheck,
+  ShoppingCart,
+  Smartphone,
+  Stethoscope,
+  Truck,
+  UserPlus,
+  Watch,
+  Zap,
+} from "lucide-react";
+import React from "react";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+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.jpg";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
+
+// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT
+const HeroWithCTA = () => {
+  const navigate = useNavigate();
+  return (
+    <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>
+          Mobile App Development Company UK | Mobile App Development Services
+        </title>
+        <meta
+          name="description"
+          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/mobile-app-development-uk"
+        />
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Mobile App Development Company UK | Mobile App Development Services
+"
+        />
+        <meta
+          property="og:description"
+          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
+        />
+        <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"
+        />
+
+        {/* Twitter Card Tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          name="twitter:title"
+          content="Mobile App Development Company UK | Mobile App Development Services
+"
+        />
+        <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"
+        />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                  {
+                    "@context": "https://schema.org",
+                    "@type": "Organization",
+                    "name": "WDI",
+                    "url": "https://www.wdipl.com",
+                    "sameAs": [
+                      "https://www.facebook.com/wdideas",
+                      "https://www.linkedin.com/in/website-developers-india/",
+                      "https://www.instagram.com/wdipl/"
+                    ]
+                  }
+                `}
+        </script>
+      </Helmet>
+      <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="z-10 space-y-8"
+          >
+            {/* Mobile App Development Label */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <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>
+              </div>
+            </motion.div>
+
+            {/* Main Heading */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="space-y-6"
+            >
+              <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
+                <span className="text-white">From Vision to  </span>
+                <span className="text-[#E5195E]">App Store </span>
+                <span className="text-white">in Just 6 weeks</span>
+              </h1>
+
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
+                Design secure, scalable, high-performance apps for IOS, Android,
+                or cross-platform - for the UK audience - fast and easy.
+              </p>
+            </motion.div>
+
+            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
+
+            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="flex flex-col gap-4 pt-4 sm:flex-row"
+            >
+              <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")}
+              >
+                <div className="inline-flex items-center gap-2">
+                  <Calendar className="flex-shrink-0 w-5 h-5" />
+                  <span>Book a Discovery Call</span>
+                </div>
+              </ShimmerButton>
+              <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")}
+              >
+                <Eye className="flex-shrink-0 w-5 h-5" />
+                <span>View our work</span>
+              </Button>
+            </motion.div>
+          </motion.div>
+
+          {/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="relative flex items-center justify-center order-first lg:order-last"
+          >
+            {/* 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",
+              }}
+            >
+              {/* 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 scale-120 hover:scale-125"
+                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>
+    </section>
+  );
+};
+
+// Enhanced Horizontal Tag Scroller with Marquee Animation
+const HorizontalTagScroller = () => {
+  const industries = [
+    { name: "FinTech", icon: DollarSign, color: "text-green-400" },
+    { name: "HealthTech", icon: Stethoscope, color: "text-red-400" },
+    { name: "EdTech", icon: BookOpen, color: "text-blue-400" },
+    { 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" },
+  ];
+
+  return (
+    <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 w-32 h-32 rounded-full top-20 left-10 bg-accent/5 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 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="mb-20 text-center"
+        >
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
+            High-Performing Apps for High-Value-Added UK Industries
+          </h2>
+          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
+            As one of the skilled mobile app development companies in the UK, we
+            are focused on delivering mobile apps to industries where user
+            trust, speed, and uptime play a big role.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="relative overflow-hidden"
+        >
+          {/* Gradient overlays for smooth fade effect */}
+          <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 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">
+            {/* First set of industries */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  key={`first-${industry.name}-${index}`}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
+                  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}`}
+                      >
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+
+            {/* Second set for seamless loop */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  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,
+                  }}
+                  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}`}
+                      >
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+
+            {/* Third set for extra smoothness */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  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,
+                  }}
+                  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}`}
+                      >
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated Title-Only Layout - No Body Text
+const SideBySideContentWithIcons = () => {
+  const trustFactors = [
+    {
+      id: "engineering",
+      title: "24+ Years in App Engineering",
+      icon: Award,
+    },
+    {
+      id: "ownership",
+      title: "100% Ownership, No Lock-ins",
+      icon: Shield,
+    },
+    {
+      id: "agile",
+      title: "Agile Sprints with Rapid Iteration",
+      icon: Zap,
+    },
+    {
+      id: "security",
+      title: "Enterprise Security & Compliance-Ready",
+      icon: ShieldCheck,
+    },
+    {
+      id: "devices",
+      title: "Deep Experience Across Devices",
+      icon: Settings,
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-black">
+      <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="mb-16 text-center"
+        >
+          {/* Main Heading */}
+          <h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
+            Why Leading Founders and CTOs Trust WDI
+          </h2>
+
+          {/* Subtext */}
+          <p className="text-2xl leading-relaxed text-gray-300">
+            We are more than just a company that offers mobile app development
+            services in the UK. We come with qualities, making us capable of
+            being your trusted product partner.
+          </p>
+        </motion.div>
+
+        {/* Uniform Grid - Title Only Cards */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          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;
+
+            return (
+              <motion.div
+                key={factor.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -8, scale: 1.02 }}
+                className="cursor-pointer group"
+              >
+                <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 mx-auto text-accent" />
+                    </div>
+
+                    {/* Title */}
+                    <h3 className="text-lg font-semibold leading-tight text-white">
+                      {factor.title}
+                    </h3>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Mobile Expertise Grid
+const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
+
+  const services = [
+    {
+      title: "iOS App Development",
+      icon: Smartphone,
+      description:
+        "Seamless performance of native iOS applications optimised for the App Store, designed with Swift.",
+      link: "/services/ios-app-development",
+    },
+    {
+      title: "Android App Development",
+      icon: Smartphone,
+      description:
+        "Efficient Android apps optimised with Google Play, built with the help of Kotlin.",
+      link: "/services/android-app-development",
+    },
+    {
+      title: "Cross-Platform Development",
+      icon: Layers,
+      description:
+        "Delivering efficient cross-platform app development solutions with the help of React Native and Flutter.",
+      link: "/services/cross-platform-app-development",
+    },
+    {
+      title: "Wearable App Development",
+      icon: Watch,
+      description:
+        "Improving responsive apps for smart watches and wearable devices for optimising health and fitness tracking.",
+      link: "/services/wearable-device-development",
+    },
+    {
+      title: "Progressive Web Apps",
+      icon: Globe,
+      description:
+        "Building native mobile apps like highly innovative web applications that work seamlessly across all devices.",
+      link: "/services/pwa-development",
+    },
+    {
+      title: "Enterprise Mobile Solutions",
+      icon: Building,
+      description:
+        "Secure, scalable mobile solutions for supporting critical enterprise business needs.",
+      link: "/services/enterprise-software-solutions",
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-background">
+      <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="mb-20 text-center"
+        >
+          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
+            Mobile App Development Services in the UK
+          </h2>
+          <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
+            Comprehensive mobile application development services in the UK for
+            reshaping your ideas into seamless, high-performing, user-friendly
+            apps that can be accessed across all platforms.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+        >
+          {services.map((service, index) => {
+            const IconComponent = service.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -5 }}
+                className="cursor-pointer group"
+                onClick={() => navigate(service.link)}
+              >
+                <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="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="mb-4 text-xl font-semibold text-white">
+                        {service.title}
+                      </h3>
+                      <p className="leading-relaxed text-gray-400">
+                        {service.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated CTA Banner with ShimmerButton
+const InlineCTA = () => {
+  const navigate = useNavigate();
+  return (
+    <section className="py-20 bg-black">
+      <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="max-w-4xl mx-auto text-center"
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            {/* Ready to Launch Badge */}
+            <div className="inline-block">
+              <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>
+                </div>
+              </div>
+            </div>
+
+            {/* Main Heading */}
+            <h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
+              <span className="text-foreground">Let’s Make Your</span>
+              <span className="text-[#E5195E]"> Your App Better</span>
+              <span className="text-foreground"> with Latest Intelligence</span>
+            </h2>
+
+            {/* Subtitle */}
+            <p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
+              Schedule a discovery call with our team of experts and find out
+              how AI can give your app 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")}
+              >
+                <div className="inline-flex items-center gap-3">
+                  <Brain className="flex-shrink-0 w-6 h-6" />
+                  <span>Book an AI Discovery Call</span>
+                </div>
+              </ShimmerButton>
+
+              {/* Small benefit text */}
+              <p className="text-sm text-muted-foreground">
+                App strategy • AI integration • Technology consultation
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated Hire Developers Section with ShimmerButton
+const HireDevelopersSection = () => {
+  const navigate = useNavigate();
+  const developers = [
+    {
+      title: "iOS Developers",
+      icon: Apple,
+      skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
+      iconBg: "bg-gray-800",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers",
+    },
+    {
+      title: "Android Developers",
+      icon: Smartphone,
+      skills: ["Kotlin", "Java", "Jetpack Compose"],
+      iconBg: "bg-green-500",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers",
+    },
+    {
+      title: "Cross-Platform Developers",
+      icon: Layers,
+      skills: ["React Native", "Flutter", "Xamarin"],
+      iconBg: "bg-blue-500",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers",
+    },
+    {
+      title: "Mobile QA Engineers",
+      icon: ShieldCheck,
+      skills: ["Mobile Testing", "Automation", "Performance"],
+      iconBg: "bg-purple-500",
+      iconColor: "text-white",
+      link: "/hire-talent/qa-engineers",
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-background">
+      <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="mb-20 text-center"
+        >
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
+            <span className="text-foreground">
+              Start App Development 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">
+            Want to build an app that works seamlessly across all platforms?
+            Begin your journey with the help of the experts in our mobile app
+            development services in the UK. We use our seasoned knowledge,
+            highly innovative technology, and tested expertise to convert ideas
+            into reality.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"
+        >
+          {developers.map((developer, index) => {
+            const IconComponent = developer.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -8, scale: 1.02 }}
+                className="cursor-pointer group"
+              >
+                <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="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">
+                        <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">
+                            Mobile Development
+                          </div>
+                        </div>
+                      </div>
+
+                      <h3 className="mb-4 text-xl font-semibold leading-tight text-foreground">
+                        {developer.title}
+                      </h3>
+                    </div>
+
+                    {/* Skills section */}
+                    <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"
+                          >
+                            {skill}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* CTA Buttons - Updated with ShimmerButton */}
+                    <div className="p-8 pt-0 mt-auto space-y-3">
+                      <ShimmerButton
+                        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="flex-shrink-0 w-4 h-4" />
+                          <span className="font-medium">Hire Now</span>
+                        </div>
+                      </ShimmerButton>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// FAQ data for Mobile App Development
+const mobileAppFAQs = [
+  {
+    question: "What is the cost of mobile app development services in the UK?",
+    answer:
+      "There is no fixed charge for our services. The cost depends on the app’s features, the platforms it needs to support, and design complexity. You must reach out to our team to get transparent estimates along with competitive pricing as per your outlined requirements.",
+  },
+  {
+    question: "Does your team design app compliant with the UK’s privacy laws?",
+    answer:
+      "As a seasoned mobile application development company in the UK, our apps are compliant with key UK laws and regulations like the UK GDPR, the Data Protection Act 2018, and PECR, enforced by the Information Commissioner's Office (ICO). \n\nBesides that, our app design also follows standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security.",
+  },
+  {
+    question: "How long is your mobile app development and deployment process?",
+    answer:
+      "The total time required for mobile app development and deployment depends on the complexity of the project. If you are looking to develop a simple app, then our team will take somewhere around 8 to 12 weeks to deliver the project. \n\nSimilarly, complex enterprise apps tend to take as long as 16 to 24 weeks. Get in touch with our UK team to discuss your requirements and help us provide you with a properly analysed timeline.",
+  },
+  {
+    question:
+      "Will your team deliver third-party services and API integration for the app?",
+    answer:
+      "As one of the skilled mobile application development companies in the UK, our services are focused on all kinds of assistance, including 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:
+      "Do you help with regular app maintenance and updates for launched apps?",
+    answer:
+      "We have a team of experts who offer comprehensive maintenance services. Our mobile app development services in the UK include routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimisation. This is how we guarantee the launched apps are up-to-date and user-friendly.",
+  },
+  {
+    question: "Can you help me with ideas to protect my app idea?",
+    answer:
+      "Certainly. Our experts educate individuals regarding the ways of protecting their app idea, including using NDAs with developers and documents.",
+  },
+  {
+    question: "Do you offer mobile apps that can operate offline?",
+    answer:
+      "Yes. We develop apps that offer offline functionality with the help of local storage, caching strategies, and data synchronisation. This is done to ensure our designed apps cater to a larger audience, including individuals who look for applications that do not use an internet connection.",
+  },
+  {
+    question: "Can you guide me in choosing app monetisation methods?",
+    answer:
+      "Certainly. The team of experts at our mobile application development services in the UK helps clients choose among common monetisation methods like in-app ads, in-app purchases, freemium models, and subscription-based models.",
+  },
+];
+
+// Main Mobile App Development Page Component
+export const MobileAppDevelopmentUk = () => {
+  // Set document title for SEO
+  React.useEffect(() => {
+    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.",
+      );
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen dark bg-background">
+      {/* <Navigation /> */}
+
+      {/* Hero Section */}
+      <HeroWithCTA />
+
+      {/* Industries Scroller */}
+      <HorizontalTagScroller />
+
+      {/* Why Choose WDI */}
+      <SideBySideContentWithIcons />
+
+      {/* Service Categories */}
+      <TabbedServiceDisplay />
+
+      {/* Process Steps */}
+      <ProcessSection country="UK" />
+
+      {/* Hire Developers */}
+      <HireDevelopersSection />
+
+      {/* Final CTA */}
+      <InlineCTA />
+
+      {/* FAQ Section */}
+      <FAQSection faqs={mobileAppFAQs} />
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/MobileAppDevelopmentUsa.tsx

@@ -0,0 +1,828 @@
+import { motion } from "framer-motion";
+import {
+  Apple,
+  Award,
+  Bolt,
+  BookOpen,
+  Brain,
+  Building,
+  Calendar,
+  DollarSign,
+  Eye,
+  Globe, Layers,
+  Play,
+  Rocket,
+  Settings,
+  Shield,
+  ShieldCheck,
+  ShoppingCart,
+  Smartphone,
+  Stethoscope,
+  Truck,
+  UserPlus,
+  Watch,
+  Zap
+} from "lucide-react";
+import React from "react";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+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.jpg';
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
+
+
+// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT
+const HeroWithCTA = () => {
+  const navigate = useNavigate();
+  return (
+    <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Mobile App Development Services USA | Mobile Application Development Company</title>
+        <meta
+          name="description"
+          content="Website Developers India (WDIPL) offers professional mobile app development services in USA. We build scalable iOS, Android and cross-platform apps."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services/mobile-app-development-usa" />
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Mobile App Development Services by WDI Experts" />
+        <meta
+          property="og:description"
+          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
+        />
+        <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" />
+
+        {/* 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: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" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+                  {
+                    "@context": "https://schema.org",
+                    "@type": "Organization",
+                    "name": "WDI",
+                    "url": "https://www.wdipl.com",
+                    "sameAs": [
+                      "https://www.facebook.com/wdideas",
+                      "https://www.linkedin.com/in/website-developers-india/",
+                      "https://www.instagram.com/wdipl/"
+                    ]
+                  }
+                `}
+        </script>
+      </Helmet>
+      <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="z-10 space-y-8"
+          >
+            {/* Mobile App Development Label */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <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>
+              </div>
+            </motion.div>
+
+            {/* Main Heading */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="space-y-6"
+            >
+              <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
+                <span className="text-white">From Ideation to </span>
+                <span className="text-[#E5195E]">App Store </span>
+                <span className="text-white"> in Just 6 Weeks.</span>
+              </h1>
+
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
+                Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — for the US audience — fast.
+              </p>
+            </motion.div>
+
+            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
+
+            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="flex flex-col gap-4 pt-4 sm:flex-row"
+            >
+              <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')}
+              >
+                <div className="inline-flex items-center gap-2">
+                  <Calendar className="flex-shrink-0 w-5 h-5" />
+                  <span>Book a Discovery Call</span>
+                </div>
+              </ShimmerButton>
+              <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')}
+              >
+                <Eye className="flex-shrink-0 w-5 h-5" />
+                <span>View our work</span>
+              </Button>
+            </motion.div>
+          </motion.div>
+
+          {/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="relative flex items-center justify-center order-first lg:order-last"
+          >
+            {/* 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'
+              }}
+            >
+              {/* 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 scale-120 hover:scale-125"
+                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>
+    </section>
+  );
+};
+
+// Enhanced Horizontal Tag Scroller with Marquee Animation
+const HorizontalTagScroller = () => {
+  const industries = [
+    { name: "FinTech", icon: DollarSign, color: "text-green-400" },
+    { name: "HealthTech", icon: Stethoscope, color: "text-red-400" },
+    { name: "EdTech", icon: BookOpen, color: "text-blue-400" },
+    { 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" }
+  ];
+
+  return (
+    <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 w-32 h-32 rounded-full top-20 left-10 bg-accent/5 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 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="mb-20 text-center"
+        >
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
+            Seamless Apps for High-Impact US Industries
+          </h2>
+          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
+            As an app development company in the USA, we deliver mobile apps for industries where user trust, speed, and uptime are key.          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="relative overflow-hidden"
+        >
+          {/* Gradient overlays for smooth fade effect */}
+          <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 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">
+            {/* First set of industries */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  key={`first-${industry.name}-${index}`}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.5, delay: index * 0.01 }}
+                  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}`}>
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+
+            {/* Second set for seamless loop */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  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 }}
+                  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}`}>
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+
+            {/* Third set for extra smoothness */}
+            {industries.map((industry, index) => {
+              const IconComponent = industry.icon;
+              return (
+                <motion.div
+                  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 }}
+                  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}`}>
+                        <IconComponent className="w-6 h-6" />
+                      </div>
+                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
+                        {industry.name}
+                      </span>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated Title-Only Layout - No Body Text
+const SideBySideContentWithIcons = () => {
+  const trustFactors = [
+    {
+      id: "engineering",
+      title: "24+ Years in App Engineering",
+      icon: Award
+    },
+    {
+      id: "ownership",
+      title: "100% Ownership, No Lock-ins",
+      icon: Shield
+    },
+    {
+      id: "agile",
+      title: "Agile Sprints with Rapid Iteration",
+      icon: Zap
+    },
+    {
+      id: "security",
+      title: "Secure, Compliance-Ready Apps",
+      icon: ShieldCheck
+    },
+    {
+      id: "devices",
+      title: "Seamless Experience Across Devices",
+      icon: Settings
+    }
+  ];
+
+  return (
+    <section className="py-32 bg-black">
+      <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="mb-16 text-center"
+        >
+          {/* Main Heading */}
+          <h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
+            Why WDI is Trusted by Founders and CTOs Alike          </h2>
+
+          {/* Subtext */}
+          <p className="text-2xl leading-relaxed text-gray-300">
+            We are not just a dev agency. We are your go-to product partner.
+          </p>
+        </motion.div>
+
+        {/* Uniform Grid - Title Only Cards */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          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;
+
+            return (
+              <motion.div
+                key={factor.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -8, scale: 1.02 }}
+                className="cursor-pointer group"
+              >
+                <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 mx-auto text-accent" />
+                    </div>
+
+                    {/* Title */}
+                    <h3 className="text-lg font-semibold leading-tight text-white">
+                      {factor.title}
+                    </h3>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Mobile Expertise Grid
+const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
+  const services = [
+    {
+      title: "iOS App Development",
+      icon: Smartphone,
+      description: "Innovative iOS applications optimized for the App Store and built with Swift.",
+      link: "/services/ios-app-development"
+    },
+    {
+      title: "Android App Development",
+      icon: Smartphone,
+      description: "Google Play optimized high-performance Android apps built using Kotlin.",
+      link: "/services/android-app-development"
+    },
+    {
+      title: "Cross-Platform Development",
+      icon: Layers,
+      description:
+        (
+          <>
+            {/* React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase. */}
+            Efficient{" "}              <a
+              href="/services/cross-platform-app-development"
+              className="text-[#E5195E] underline"
+            > cross-platform app development{" "}
+            </a>
+
+            solutions delivered using React Native and Flutter.
+          </>
+        ),
+      link: "/services/cross-platform-app-development"
+    },
+    {
+      title: "Wearable App Development",
+      icon: Watch,
+      description: "Responsive apps for smart watches and wearable devices for health and fitness.",
+      link: "/services/wearable-device-development"
+    },
+    {
+      title: "Progressive Web Apps",
+      icon: Globe,
+      description: "Seamless 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 that support critical enterprise business needs.",
+      link: "/services/enterprise-software-solutions"
+    }
+  ];
+
+  return (
+    <section className="py-32 bg-background">
+      <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="mb-20 text-center"
+        >
+          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
+            Mobile App Development Services in the USA          </h2>
+          <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
+            Enjoy comprehensive custom mobile app development in the USA that reshapes your ideas into powerful, user-friendly apps supported across all platforms.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
+        >
+          {services.map((service, index) => {
+            const IconComponent = service.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -5 }}
+                className="cursor-pointer group"
+                onClick={() => navigate(service.link)}
+              >
+                <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="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="mb-4 text-xl font-semibold text-white">
+                        {service.title}
+                      </h3>
+                      <p className="leading-relaxed text-gray-400">
+                        {service.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated CTA Banner with ShimmerButton
+const InlineCTA = () => {
+  const navigate = useNavigate();
+  return (
+    <section className="py-20 bg-black">
+      <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="max-w-4xl mx-auto text-center"
+        >
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="space-y-8"
+          >
+            {/* Ready to Launch Badge */}
+            <div className="inline-block">
+              <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>
+                </div>
+              </div>
+            </div>
+
+            {/* Main Heading */}
+            <h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
+              <span className="text-foreground">Let’s Impart </span>
+              <span className="text-[#E5195E]">Intelligence</span>
+              <span className="text-foreground"> Into Your Mobile App</span>
+            </h2>
+
+            {/* Subtitle */}
+            <p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
+              Schedule a discovery call with our team and explore how AI can give your app 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')}
+              >
+                <div className="inline-flex items-center gap-3">
+                  <Brain className="flex-shrink-0 w-6 h-6" />
+                  <span>Book an AI Discovery Call</span>
+                </div>
+              </ShimmerButton>
+
+              {/* Small benefit text */}
+              <p className="text-sm text-muted-foreground">
+                App strategy • AI integration • Technology consultation
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// Updated Hire Developers Section with ShimmerButton
+const HireDevelopersSection = () => {
+  const navigate = useNavigate();
+  const developers = [
+    {
+      title: "iOS Developers",
+      icon: Apple,
+      skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
+      iconBg: "bg-gray-800",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers"
+    },
+    {
+      title: "Android Developers",
+      icon: Smartphone,
+      skills: ["Kotlin", "Java", "Jetpack Compose"],
+      iconBg: "bg-green-500",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers"
+    },
+    {
+      title: "Cross-Platform Developers",
+      icon: Layers,
+      skills: ["React Native", "Flutter", "Xamarin"],
+      iconBg: "bg-blue-500",
+      iconColor: "text-white",
+      link: "/hire-talent/mobile-app-developers"
+    },
+    {
+      title: "Mobile QA Engineers",
+      icon: ShieldCheck,
+      skills: ["Mobile Testing", "Automation", "Performance"],
+      iconBg: "bg-purple-500",
+      iconColor: "text-white",
+      link: "/hire-talent/qa-engineers"
+    }
+  ];
+
+  return (
+    <section className="py-32 bg-background">
+      <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="mb-20 text-center"
+        >
+          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
+            <span className="text-foreground">Get Started 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.
+            Ready for an app that works   seamlessly across platforms? Get started with our top-tier <a
+              href="/hire-talent/mobile-app-developers"
+              className="text-[#E5195E] underline"
+            >
+              mobile app developers
+            </a> who will bring your ideas to life with cutting-edge technology and proven expertise.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"
+        >
+          {developers.map((developer, index) => {
+            const IconComponent = developer.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.01 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -8, scale: 1.02 }}
+                className="cursor-pointer group"
+              >
+                <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="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">
+                        <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">
+                            Mobile Development
+                          </div>
+                        </div>
+                      </div>
+
+                      <h3 className="mb-4 text-xl font-semibold leading-tight text-foreground">
+                        {developer.title}
+                      </h3>
+                    </div>
+
+                    {/* Skills section */}
+                    <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">
+                            {skill}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* CTA Buttons - Updated with ShimmerButton */}
+                    <div className="p-8 pt-0 mt-auto space-y-3">
+                      <ShimmerButton
+                        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="flex-shrink-0 w-4 h-4" />
+                          <span className="font-medium">Hire Now</span>
+                        </div>
+                      </ShimmerButton>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+// FAQ data for Mobile App Development
+const mobileAppFAQs = [
+  {
+    question: "Can your team develop both iOS and Android apps?",
+    answer: "Our team is well-versed in developing native iOS apps using Swift and Android apps using Kotlin. Plus, we offer cross-platform solutions using React Native and Flutter for cost-effective, seamless, multi-platform app development."
+  },
+  {
+    question: "How long does it take your team to develop and deploy a mobile app?",
+    answer: "The timeline for mobile app development and deployment varies with the project's complexity. For simpler apps, our team can deliver the project within 8 to 12 weeks. However, complex, enterprise apps can take as long as 16 to 24 weeks. Reach out to our US team with your requirements, and we will analyze this and provide a detailed project timeline."
+  },
+  {
+    question: "How much does custom mobile app development in the USA cost?",
+    answer: "The app’s features, platforms it needs to support, and design complexity will determine the cost of the project. We always provide transparent estimates along with competitive pricing as per the requirements outlined by the client. Get in touch for a detailed quote."
+  },
+  {
+    question: "Can your team help with App Store submissions in the USA?",
+    answer: "Sure, we can! Our team will handle the complete App Store submission process for the USA on both the Google Play Store and the Apple App Store. Our services will include app optimization, compliance, and approval assistance so that your app is submitted and launched with ease."
+  },
+  {
+    question: "Can your team deliver third-party services and API integration for the app?",
+    answer: "Our mobile application development services in the USA cover the integration of third-party services that include payment gateways, analytics, maps, push notifications, social media plug-ins, and custom APIs to enhance the app’s functionality."
+  },
+  {
+    question: "Does your company offer regular app maintenance and updates for launched apps?",
+    answer: "We offer a comprehensive maintenance service that includes routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimization that keeps you app up-to-date."
+  },
+  {
+    question: "Will the app designed by your team be compliant with the USA's privacy laws?",
+    answer: "As a mobile application development company in the USA, our apps are compliant with key US laws and regulations like the Children’s Online Protection and Privacy Act, 1998 (COPPA), Statewise Data Protection Acts (CCPA, VCDPA, CPA, UCPA, CDPA, etc.), and Federal laws and FTC rules. Plus, the apps also follow standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security."
+  },
+  {
+    question: "Do you offer mobile apps that can operate offline?",
+    answer: "We develop apps that offer offline functionality using local storage, caching strategies, and data synchronization. This ensures that your app works perfectly even without an internet connection."
+  }
+];
+
+// Main Mobile App Development Page Component
+export const MobileAppDevelopmentUsa = () => {
+  // Set document title for SEO
+  React.useEffect(() => {
+    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.');
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen dark bg-background">
+      {/* <Navigation /> */}
+
+      {/* Hero Section */}
+      <HeroWithCTA />
+
+      {/* Industries Scroller */}
+      <HorizontalTagScroller />
+
+      {/* Why Choose WDI */}
+      <SideBySideContentWithIcons />
+
+      {/* Service Categories */}
+      <TabbedServiceDisplay />
+
+      {/* Process Steps */}
+      <ProcessSection />
+
+      {/* Hire Developers */}
+      <HireDevelopersSection />
+
+      {/* Final CTA */}
+      <InlineCTA />
+
+      {/* FAQ Section */}
+      <FAQSection faqs={mobileAppFAQs} />
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

public/robots.txt

@@ -1,6 +1,5 @@
 User-agent: *
 Disallow: /admin/
 Disallow: /cgi-bin/
-Allow: /
 
 Sitemap: https://www.wdipl.com/sitemap.xml

public/sitemap.xml

@@ -1,305 +1,283 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
-
-  <url>
-    <loc>https://www.wdipl.com/</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/services</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/mobile-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ios-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/android-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/cross-platform-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/native-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/pwa-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/wearable-device-development</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/web-cloud</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/custom-web-app-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/saas-product-engineering</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ecommerce-platforms</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/admin-panels-dashboards</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/api-backend-development</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/software-engineering</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/enterprise-software-solutions</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/system-architecture-devops</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/third-party-integrations</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/product-modernization</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/design-experience</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ui-ux-design</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/clickable-prototypes</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/design-thinking-workshops</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/user-research-testing</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/artificial-intelligence</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ai-strategy-consulting</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ai-automation-workflows</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ai-integration-digital-products</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/gen-ai-integration-digital-products</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ai-chatbots-virtual-assistants</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/ai-model-deployment-mlops</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/machine-learning</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/custom-ml-model-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/predictive-analytics-forecasting</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/computer-vision-applications</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/nlp-text-analytics</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/services/recommendation-engines</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/solutions/digital-product-development</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/solutions/legacy-system-rebuilds</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/solutions/business-process-automation</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/solutions/mvp-startup-launch-packages</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/solutions/dedicated-offshore-odc</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/solutions/compliance-ready-systems</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/fintech-banking-apps</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/financial-services/wealthtech-platforms</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/financial-services/real-estate-tech</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/healthcare/healthtech-applications</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/healthcare/medical-compliance-solutions</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/healthcare/fitness-wellness-platforms</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/education/edtech-platforms</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/education/virtual-classrooms-lms</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/education/microlearning-apps</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/commerce/ecommerce-marketplaces</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/commerce/food-ordering-delivery</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/commerce/travel-booking-systems</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/commerce/event-ticketing-solutions</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/media/ott-streaming-apps</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/media/social-platforms-networks</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/media/sports-fan-engagement</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/mobility/transportation-apps</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/mobility/on-demand-services</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/mobility/supply-chain-fleet-management</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/industries/industrial/manufacturing-automation</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/industrial/agritech-platforms</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/industries/industrial/oil-gas-monitoring-systems</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/hire-talent</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/mobile-app-developers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/frontend-developers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/ui-ux-designers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/dedicated-development-teams</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/team-augmentation-services</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/full-stack-developers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/backend-developers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/hire-talent/qa-engineers</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/engagement-models</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/company</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/about-wdi</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/leadership-team</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/careers</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/press-media</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/our-history</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/awards-certifications</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/company/culture-values</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/resources</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/resources/blog</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/case-studies</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/resources/client-testimonials</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/resources/whitepapers-insights</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/resources/faqs</loc>
-  </url>
-
-  <url>
-    <loc>https://www.wdipl.com/contact</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/privacy</loc>
-  </url>
-  <url>
-    <loc>https://www.wdipl.com/terms</loc>
-  </url>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 
+<url>
+<loc>https://www.wdipl.com/</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/mobile-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ios-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/android-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/cross-platform-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/native-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/pwa-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/wearable-device-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/web-cloud</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/custom-web-app-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/saas-product-engineering</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ecommerce-platforms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/admin-panels-dashboards</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/api-backend-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/software-engineering</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/enterprise-software-solutions</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/system-architecture-devops</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/third-party-integrations</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/product-modernization</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/design-experience</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ui-ux-design</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/clickable-prototypes</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/design-thinking-workshops</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/user-research-testing</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/artificial-intelligence</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ai-strategy-consulting</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ai-automation-workflows</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ai-integration-digital-products</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/gen-ai-integration-digital-products</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ai-chatbots-virtual-assistants</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/ai-model-deployment-mlops</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/machine-learning</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/custom-ml-model-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/predictive-analytics-forecasting</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/computer-vision-applications</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/nlp-text-analytics</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/services/recommendation-engines</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/digital-product-development</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/legacy-system-rebuilds</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/business-process-automation</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/mvp-startup-launch-packages</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/dedicated-offshore-odc</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/solutions/compliance-ready-systems</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/fintech-banking-apps</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/financial-services/wealthtech-platforms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/financial-services/real-estate-tech</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/healthcare/healthtech-applications</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/healthcare/medical-compliance-solutions</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/healthcare/fitness-wellness-platforms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/education/edtech-platforms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/education/virtual-classrooms-lms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/education/microlearning-apps</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/commerce/ecommerce-marketplaces</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/commerce/food-ordering-delivery</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/commerce/travel-booking-systems</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/commerce/event-ticketing-solutions</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/media/ott-streaming-apps</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/media/social-platforms-networks</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/media/sports-fan-engagement</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/mobility/transportation-apps</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/mobility/on-demand-services</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/mobility/supply-chain-fleet-management</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/industrial/manufacturing-automation</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/industrial/agritech-platforms</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/industries/industrial/oil-gas-monitoring-systems</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/mobile-app-developers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/frontend-developers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/ui-ux-designers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/dedicated-development-teams</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/team-augmentation-services</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/full-stack-developers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/backend-developers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/hire-talent/qa-engineers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/engagement-models</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/about-wdi</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/leadership-team</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/careers</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/press-media</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/our-history</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/awards-certifications</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/company/culture-values</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/resources</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/resources/blog</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/case-studies</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/resources/client-testimonials</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/resources/whitepapers-insights</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/resources/faqs</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/contact</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/privacy</loc>
+</url>
+<url>
+<loc>https://www.wdipl.com/terms</loc>
+</url>
 </urlset>
-
-

src/Router.tsx

@@ -22,6 +22,7 @@ import { AndroidAppDevelopment } from "../pages/AndroidAppDevelopment";
 import { AndroidAppDevelopmentIndia } from "../pages/AndroidAppDevelopmentIndia";
 import { AndroidAppDevelopmentUk } from "../pages/AndroidAppDevelopmentUk";
 import { AndroidAppDevelopmentUSA } from "../pages/AndroidAppDevelopmentUSA";
+import { MobileAppDevelopmentUk } from "../pages/MobileAppDevelopmentUk";
 import { APIBackendDevelopment } from "../pages/APIBackendDevelopment";
 import { ClickablePrototypes } from "../pages/ClickablePrototypes";
 import { ComputerVisionApplications } from "../pages/ComputerVisionApplications";
@@ -33,6 +34,9 @@ import { EcommercePlatforms } from "../pages/EcommercePlatforms";
 import { EnterpriseSoftwareSolutions } from "../pages/EnterpriseSoftwareSolutions";
 import { GenAIIntegrationDigitalProducts } from "../pages/GenAIIntegrationDigitalProducts";
 import { IOSAppDevelopment } from "../pages/iOSAppDevelopment";
+import { IOSAppDevelopmentIndia } from "../pages/IOSAppDevelopmentIndia";
+import { IOSAppDevelopmentUK } from "../pages/IOSAppDevelopmentUK";
+import { IOSAppDevelopmentUSA } from "../pages/IOSAppDevelopmentUSA";
 import { MobileAppDevelopment } from "../pages/MobileAppDevelopment";
 import { NativeAppDevelopment } from "../pages/NativeAppDevelopment";
 import { NLPTextAnalytics } from "../pages/NLPTextAnalytics";
@@ -184,6 +188,8 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { HireMobileAppDevelopersUsa } from "@/pages/HireMobileAppDevelopersUsa";
 import { HireMobileAppDevelopersUk } from "@/pages/HireMobileAppDevelopersUk";
 import { MobileAppDevelopmentIndia } from "@/pages/MobileAppDevelopmentIndia";
+import { MobileAppDevelopmentUsa } from "@/pages/MobileAppDevelopmentUsa";
+
 
 export const AppRouter = () => (
   <Routes>
@@ -209,15 +215,35 @@ export const AppRouter = () => (
     <Route
       path="/services/mobile-app-development"
       element={<MobileAppDevelopment />}
+    />
+     <Route
+      path="/services/mobile-app-development-uk"
+      element={<MobileAppDevelopmentUk />}
     />
     <Route
       path="/services/mobile-app-development-india"
       element={<MobileAppDevelopmentIndia />}
     />
+    <Route
+      path="/services/mobile-app-development-usa"
+      element={<MobileAppDevelopmentUsa />}
+    />
     <Route
       path="/services/ios-app-development"
       element={<IOSAppDevelopment />}
     />
+    <Route
+      path="/services/ios-app-development-india"
+      element={<IOSAppDevelopmentIndia />}
+    />
+    <Route
+      path="/services/ios-app-development-uk"
+      element={<IOSAppDevelopmentUK />}
+    />
+    <Route
+      path="/services/ios-app-development-usa"
+      element={<IOSAppDevelopmentUSA />}
+    />
     <Route
       path="/services/android-app-development"
       element={<AndroidAppDevelopment />}

styles/globals.css

@@ -1,9 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');
+
 
 @custom-variant dark (&:is(.dark *));
 
@@ -65,8 +66,8 @@
   --accent-foreground: #FFFFFF;
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: rgba(255,255,255,0.05);
-  --input: rgba(255,255,255,0.05);
+  --border: rgba(255, 255, 255, 0.05);
+  --input: rgba(255, 255, 255, 0.05);
   --ring: oklch(0.439 0 0);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
@@ -207,6 +208,7 @@
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-50%);
     }
@@ -216,6 +218,7 @@
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-33.333333%);
     }
@@ -225,6 +228,7 @@
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -234,6 +238,7 @@
     0% {
       background-position: -200% center;
     }
+
     100% {
       background-position: 200% center;
     }
@@ -243,9 +248,11 @@
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
@@ -255,18 +262,23 @@
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
   }
 
   @keyframes float {
-    0%, 100% {
+
+    0%,
+    100% {
       transform: translateY(0px);
     }
+
     50% {
       transform: translateY(-10px);
     }
@@ -276,6 +288,7 @@
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -285,9 +298,11 @@
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
@@ -297,6 +312,7 @@
     0% {
       transform: rotate(0deg) translateX(60px) rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg) translateX(60px) rotate(-360deg);
     }
@@ -306,6 +322,7 @@
     0% {
       transform: rotate(0deg) translateX(50px) rotate(0deg);
     }
+
     100% {
       transform: rotate(-360deg) translateX(50px) rotate(360deg);
     }
@@ -315,6 +332,7 @@
     from {
       height: 0;
     }
+
     to {
       height: var(--radix-accordion-content-height);
     }
@@ -324,6 +342,7 @@
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
@@ -382,14 +401,12 @@
 
   /* Primary Button - WDI Brand Style with Elevation */
   .btn-primary-wdi {
-    background: linear-gradient(
-      90deg,
+    background: linear-gradient(90deg,
         #E5195E,
         #E5195E 40%,
         #ff2970 50%,
         #E5195E 60%,
-      #E5195E
-    );
+        #E5195E);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -415,14 +432,12 @@
 
   /* Secondary Button - Gray Style with Elevation */
   .btn-secondary-wdi {
-    background: linear-gradient(
-      90deg,
+    background: linear-gradient(90deg,
         #374151,
         #374151 40%,
         #4b5563 50%,
         #374151 60%,
-      #374151
-    );
+        #374151);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -531,14 +546,12 @@
 
   /* Destructive Button with Elevation */
   .btn-destructive-wdi {
-    background: linear-gradient(
-      90deg,
+    background: linear-gradient(90deg,
         #dc2626,
         #dc2626 40%,
         #ef4444 50%,
         #dc2626 60%,
-      #dc2626
-    );
+        #dc2626);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -637,7 +650,7 @@ html {
   font-size: var(--font-size);
 }
 
-h1{
+h1 {
   line-height: 54px;
 }
 
@@ -645,6 +658,6 @@ h1{
   padding-bottom: 0 !important;
 }
 
-button{
+button {
   cursor: pointer;
 }