chore: optimize images via CI

.gitea/workflows/build.yml

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

.gitea/workflows/compressimage.yml

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

.gitea/workflows/deploy.yml

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

.gitea/workflows/sonar.yml

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

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

@@ -32,7 +32,7 @@ const pricingTiers: PricingTier[] = [
     backendDevs: "Shared",
     qaTesters: "Part-time",
     leadTime: "< 3 Days",
-    minEngagement: "1 Month"
+    minEngagement: "1 Month",
   },
   {
     name: "Medium",
@@ -47,7 +47,7 @@ const pricingTiers: PricingTier[] = [
     backendDevs: "Shared",
     qaTesters: "Shared",
     leadTime: "< 2 Weeks",
-    minEngagement: "2 Months"
+    minEngagement: "2 Months",
   },
   {
     name: "Large",
@@ -61,27 +61,27 @@ const pricingTiers: PricingTier[] = [
     backendDevs: "Full-time",
     qaTesters: "Full-time",
     leadTime: "< 4 Weeks",
-    minEngagement: "3 Months"
-  }
+    minEngagement: "3 Months",
+  },
 ];
 
 const includedFeatures = [
   {
     left: "Access to WDI Code Library",
-    right: "Direct Communication"
+    right: "Direct Communication",
   },
   {
     left: "Time Zone Overlap: 3 Hours",
-    right: "Resource Replacement (within 1 week)"
+    right: "Resource Replacement (within 1 week)",
   },
   {
     left: "No Obligation Trial (conditional)",
-    right: "IPR & Code Ownership"
+    right: "IPR & Code Ownership",
   },
   {
     left: "Termination Notice: 1 Month",
-    right: "Performance Guarantee"
-  }
+    right: "Performance Guarantee",
+  },
 ];
 
 const comparisonRows = [
@@ -92,14 +92,17 @@ const comparisonRows = [
   { label: "Backend Developers", key: "backendDevs" as keyof PricingTier },
   { label: "QA Testers", key: "qaTesters" as keyof PricingTier },
   { label: "Lead Time to Start", key: "leadTime" as keyof PricingTier },
-  { label: "Minimum Engagement Period", key: "minEngagement" as keyof PricingTier }
+  {
+    label: "Minimum Engagement Period",
+    key: "minEngagement" as keyof PricingTier,
+  },
 ];
 
 export const DedicatedTeamPricing = () => {
   return (
     <section className="relative py-20 bg-background overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
-      
+
       <div className="relative z-10 container mx-auto px-6 lg:px-8">
         {/* Header */}
         <motion.div
@@ -116,7 +119,8 @@ export const DedicatedTeamPricing = () => {
             </h2>
           </div>
           <p className="text-muted-foreground text-lg max-w-2xl mx-auto font-manrope">
-            Scale your development with flexible team structures tailored to your project needs
+            Scale your AI mobile and web development with flexible team
+            structures tailored to your project needs.
           </p>
         </motion.div>
 
@@ -136,9 +140,9 @@ export const DedicatedTeamPricing = () => {
               transition={{ duration: 0.5, delay: index * 0.1 }}
               viewport={{ once: true }}
               className={`relative bg-card/50 backdrop-blur-sm border rounded-[20px] p-6 transition-all duration-300 ${
-                tier.isPopular 
-                  ? 'border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105' 
-                  : 'border-border/50 hover:border-accent/30'
+                tier.isPopular
+                  ? "border-blue-500/50 shadow-xl shadow-blue-500/10 scale-105"
+                  : "border-border/50 hover:border-accent/30"
               }`}
             >
               {tier.isPopular && (
@@ -148,7 +152,7 @@ export const DedicatedTeamPricing = () => {
                   </Badge>
                 </div>
               )}
-              
+
               <div className="text-center mb-6">
                 <h3 className="text-2xl font-semibold text-foreground mb-2 font-manrope">
                   {tier.name}
@@ -185,7 +189,10 @@ export const DedicatedTeamPricing = () => {
                   <tr className="border-b border-border/50 bg-card/50">
                     <th className="p-6 text-left font-semibold text-foreground font-manrope"></th>
                     {pricingTiers.map((tier) => (
-                      <th key={tier.name} className="p-6 text-center font-semibold text-foreground font-manrope">
+                      <th
+                        key={tier.name}
+                        className="p-6 text-center font-semibold text-foreground font-manrope"
+                      >
                         {tier.name}
                       </th>
                     ))}
@@ -206,13 +213,20 @@ export const DedicatedTeamPricing = () => {
                       <td className="p-6 font-medium text-muted-foreground font-manrope align-top">
                         <div className="md:hidden mb-3">{row.label}</div>
                         <div className="hidden md:block">{row.label}</div>
-                        
+
                         {/* Mobile: Stack values vertically with tier name */}
                         <div className="grid grid-cols-1 md:hidden gap-3 mt-3">
                           {pricingTiers.map((tier) => (
-                            <div key={tier.name} className="flex justify-between items-center bg-card/30 rounded-lg p-3">
-                              <span className="text-sm text-muted-foreground font-manrope">{tier.name}:</span>
-                              <span className="text-foreground font-manrope text-right">{tier[row.key]}</span>
+                            <div
+                              key={tier.name}
+                              className="flex justify-between items-center bg-card/30 rounded-lg p-3"
+                            >
+                              <span className="text-sm text-muted-foreground font-manrope">
+                                {tier.name}:
+                              </span>
+                              <span className="text-foreground font-manrope text-right">
+                                {tier[row.key]}
+                              </span>
                             </div>
                           ))}
                         </div>
@@ -220,7 +234,10 @@ export const DedicatedTeamPricing = () => {
 
                       {/* Desktop: Show values in columns */}
                       {pricingTiers.map((tier) => (
-                        <td key={tier.name} className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top">
+                        <td
+                          key={tier.name}
+                          className="hidden md:table-cell p-6 text-center text-foreground font-manrope align-top"
+                        >
                           {tier[row.key]}
                         </td>
                       ))}
@@ -249,7 +266,7 @@ export const DedicatedTeamPricing = () => {
                 Included in All Plans
               </h3>
             </div>
-            
+
             <div className="grid md:grid-cols-2 gap-6">
               {includedFeatures.map((feature, index) => (
                 <div key={index} className="space-y-3">

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>
 
@@ -455,4 +503,4 @@ export const Footer = () => {
       </footer>
     </>
   );
-};
+};

components/Navigation.tsx

@@ -101,10 +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: "Cross-Platform App Development",
           href: "/services/cross-platform-app-development",
@@ -466,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" },
     {
@@ -913,7 +915,7 @@ export const Navigation = () => {
       cancelClose();
       openMenu(item);
     },
-    [cancelClose, openMenu]
+    [cancelClose, openMenu],
   );
 
   const handleNavItemMouseLeave = useCallback(() => {
@@ -930,7 +932,7 @@ export const Navigation = () => {
         closeMenu();
       }
     },
-    [closeMenu]
+    [closeMenu],
   );
 
   const handleNavMouseEnter = useCallback(() => {
@@ -1030,8 +1032,9 @@ 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" : ""
+                      }`}
                     />
                   )}
                 </a>
@@ -1134,4 +1137,4 @@ export const Navigation = () => {
       </AnimatePresence>
     </nav>
   );
-};
+};

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,14 +75,16 @@ 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"
-              ? "bg-muted border border-border text-foreground"
-              : "bg-accent text-accent-foreground"
-              }`}
+            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"
+            }`}
           >
             <div className="text-xs font-medium mb-1 opacity-70">
               {message.from}
@@ -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/BusinessProcessAutomation.tsx

@@ -58,26 +58,41 @@ const BusinessProcessAutomationHero = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/solutions/business-process-automation" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/business-process-automation"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Business Process Automation Services by WDI" />
+        <meta
+          property="og:title"
+          content="Business Process Automation Services by WDI"
+        />
         <meta
           property="og:description"
           content="WDI's business process automation streamlines workflows, reduces manual tasks, and drives operational excellence with AI-powered solutions for growth."
         />
         <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="Business Process Automation Services by WDI" />
+        <meta
+          name="twitter:title"
+          content="Business Process Automation Services by WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI's business process automation streamlines workflows, reduces manual tasks, and drives operational excellence with AI-powered solutions for growth."
         />
-        <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">
@@ -124,7 +139,8 @@ const BusinessProcessAutomationHero = () => {
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                 Streamline your operations, reduce manual errors, and boost
                 productivity by automating key business processes with
-                intelligent solutions.
+                intelligent, scalable solutions that integrate seamlessly into
+                your digital product development ecosystem.
               </p>
             </div>
 
@@ -252,20 +268,22 @@ const BusinessProcessAutomationHero = () => {
                             className="flex items-center gap-4"
                           >
                             <div
-                              className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${item.status === "complete"
+                              className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
+                                item.status === "complete"
                                   ? "bg-green-500/20 border-green-500/30"
                                   : item.status === "active"
                                     ? "bg-blue-500/20 border-blue-500/30"
                                     : "bg-gray-500/20 border-gray-500/30"
-                                }`}
+                              }`}
                             >
                               <item.icon
-                                className={`w-5 h-5 ${item.status === "complete"
+                                className={`w-5 h-5 ${
+                                  item.status === "complete"
                                     ? "text-green-400"
                                     : item.status === "active"
                                       ? "text-blue-400"
                                       : "text-gray-400"
-                                  }`}
+                                }`}
                               />
                               {item.status === "active" && (
                                 <motion.div
@@ -282,12 +300,13 @@ const BusinessProcessAutomationHero = () => {
                             <div className="flex-1">
                               <div className="flex items-center justify-between">
                                 <span
-                                  className={`text-sm font-medium ${item.status === "complete"
+                                  className={`text-sm font-medium ${
+                                    item.status === "complete"
                                       ? "text-green-300"
                                       : item.status === "active"
                                         ? "text-blue-300"
                                         : "text-gray-400"
-                                    }`}
+                                  }`}
                                 >
                                   {item.step}
                                 </span>
@@ -309,12 +328,13 @@ const BusinessProcessAutomationHero = () => {
                               </div>
 
                               <div
-                                className={`w-full h-1 rounded-full mt-2 ${item.status === "complete"
+                                className={`w-full h-1 rounded-full mt-2 ${
+                                  item.status === "complete"
                                     ? "bg-green-500/30"
                                     : item.status === "active"
                                       ? "bg-blue-500/30"
                                       : "bg-gray-500/30"
-                                  }`}
+                                }`}
                               >
                                 {item.status === "active" && (
                                   <motion.div
@@ -709,6 +729,11 @@ const BusinessProcessAutomationIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Business Process Automation Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            End‑to‑end automation that streamlines workflows, cuts manual
+            errors, and accelerates digital product development and daily
+            operations.
+          </p>
         </motion.div>
 
         <motion.div
@@ -827,6 +852,11 @@ const BusinessProcessAutomationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             The Tangible Impact of Intelligent Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Intelligent automation drives faster, error‑free workflows and lower
+            costs, freeing teams to focus on innovation and accelerating digital
+            product development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -962,6 +992,11 @@ const BusinessProcessAutomationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Automation Journey: From Concept to Efficiency
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            From assessment to deployment, the automation journey turns manual
+            tasks into efficient workflows that support faster digital product
+            development.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -980,12 +1015,14 @@ const BusinessProcessAutomationProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1197,6 +1234,11 @@ const BusinessProcessAutomationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Operations Transformed Through Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Automation transforms operations by replacing repetitive tasks with
+            fast, reliable workflows that reduce errors and accelerate digital
+            product development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1346,24 +1388,25 @@ const BusinessProcessAutomationInlineCTA = () => {
 const BusinessProcessAutomationFAQs = () => {
   const faqs = [
     {
-      question: "What types of processes are best suited for automation?",
+      question: "What is Business Process Automation (BPA)?",
       answer:
-        "The best candidates for automation are repetitive, rule-based processes with high volume and predictable patterns: Data entry and validation tasks, invoice processing and accounts payable/receivable, customer onboarding and KYC processes, report generation and distribution, inventory management and order processing, and HR processes like payroll and employee onboarding. Processes with clear business rules, frequent execution, high error rates, or significant manual effort provide the greatest ROI. We evaluate factors like process complexity, data quality, exception handling requirements, and integration needs to determine automation feasibility and potential impact.",
+        "Business process automation uses software and intelligent workflows to handle repetitive tasks such as approvals, data entry, and notifications without manual intervention. It speeds up operations, reduces errors, and frees teams to focus on higher-value work.",
     },
     {
-      question: "What's the difference between RPA and custom automation?",
+      question:
+        "How does intelligent automation improve day-to-day operations?",
       answer:
-        "RPA (Robotic Process Automation) and custom automation serve different purposes: RPA uses software robots to mimic human interactions with existing applications, ideal for processes that work with multiple systems without APIs, require no system changes, and need quick deployment. Custom automation involves building tailored software solutions with direct system integration, API development, and purpose-built workflows. RPA is faster to implement but may be less robust, while custom automation provides more flexibility and scalability. We often recommend hybrid approaches: RPA for quick wins and immediate ROI, custom automation for long-term strategic processes, and integration between both for comprehensive automation coverage.",
+        "Intelligent automation combines rules-based automation with AI and data-driven logic to make workflows smarter and more adaptive. It can auto-route requests, prioritize alerts, and trigger AI-powered features based on real-time patterns, improving response times and decision-making.",
     },
     {
-      question: "How long does it take to implement a BPA solution?",
+      question: "Can automation integrate with our existing apps and systems?",
       answer:
-        "Implementation timelines vary based on complexity and scope: Simple RPA implementations: 4-8 weeks for basic process automation, Medium complexity projects: 8-16 weeks for multi-system integrations, Complex enterprise automation: 16-24 weeks for comprehensive workflow overhauls. Our phased approach includes: Discovery and analysis (2-4 weeks), solution design and planning (2-3 weeks), development and configuration (4-12 weeks), testing and refinement (2-4 weeks), deployment and training (1-2 weeks), and post-implementation optimization (ongoing). We prioritize quick wins and incremental value delivery, often implementing automation in phases to demonstrate ROI early while building toward comprehensive automation coverage.",
+        "Yes. Automation solutions plug into your current tools via APIs, including CRM, ERP, email, and custom software. We also design workflows that connect smoothly with AI-powered mobile and web applications, so your teams can trigger and monitor automated tasks from any device.",
     },
     {
-      question: "How do you measure the ROI of automation?",
+      question: "What if my team lacks in-house AI or iOS expertise?",
       answer:
-        "We measure automation ROI through comprehensive metrics: Quantitative benefits include time savings (hours reduced per process), cost reduction (labor and operational savings), error reduction (quality improvements), throughput increase (volume processing capability), and compliance improvements (audit and regulatory benefits). Qualitative benefits include employee satisfaction, customer experience enhancement, and strategic capability development. Our ROI calculation considers: implementation costs, ongoing maintenance expenses, training and change management costs, and both direct and indirect benefits. Typical automation projects achieve 200-400% ROI within 12-18 months. We provide detailed ROI projections during planning and track actual performance post-implementation to ensure projected benefits are realized.",
+        "If you don’t have internal AI or iOS skills, you can work with an AI app development company that handles the full stack—from concept and AI-powered design to deployment and maintenance. We act as your end-to-end partner, so your business can adopt automation and AI without needing a deep-tech team.",
     },
   ];
 
@@ -1552,9 +1595,7 @@ export const BusinessProcessAutomation = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/ComplianceReadySystems.tsx

@@ -27,7 +27,7 @@ import {
   X,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
-import hospitalize from "../assets/hospitalise.jpg"
+import hospitalize from "../assets/hospitalise.jpg";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
 import {
@@ -50,33 +50,50 @@ const ComplianceReadySystemsHero = () => {
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely</title>
+        <title>
+          Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely
+        </title>
         <meta
           name="description"
           content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/solutions/compliance-ready-systems" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/compliance-ready-systems"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
+        <meta
+          property="og:title"
+          content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely"
+        />
         <meta
           property="og:description"
           content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
         />
         <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="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
+        <meta
+          name="twitter:title"
+          content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely"
+        />
         <meta
           name="twitter:description"
           content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
         />
-        <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">
@@ -122,9 +139,9 @@ const ComplianceReadySystemsHero = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Build or adapt your digital systems to meet stringent regulatory
-                requirements, ensuring data privacy, security, and legal
-                adherence.
+                Build or adapt your AI‑powered mobile and web applications to
+                meet stringent regulatory requirements, ensuring data privacy,
+                security, and legal adherence.
               </p>
             </div>
 
@@ -227,10 +244,11 @@ const ComplianceReadySystemsHero = () => {
                           initial={{ opacity: 0, scale: 0 }}
                           animate={{ opacity: 1, scale: 1 }}
                           transition={{ duration: 0.5, delay: item.delay }}
-                          className={`p-3 rounded-lg border text-center ${item.status === "compliant"
-                            ? "bg-green-500/10 border-green-500/30"
-                            : "bg-orange-500/10 border-orange-500/30"
-                            }`}
+                          className={`p-3 rounded-lg border text-center ${
+                            item.status === "compliant"
+                              ? "bg-green-500/10 border-green-500/30"
+                              : "bg-orange-500/10 border-orange-500/30"
+                          }`}
                         >
                           <div className="flex items-center justify-center mb-2">
                             {item.status === "compliant" ? (
@@ -240,18 +258,20 @@ const ComplianceReadySystemsHero = () => {
                             )}
                           </div>
                           <div
-                            className={`text-sm font-medium ${item.status === "compliant"
-                              ? "text-green-300"
-                              : "text-orange-300"
-                              }`}
+                            className={`text-sm font-medium ${
+                              item.status === "compliant"
+                                ? "text-green-300"
+                                : "text-orange-300"
+                            }`}
                           >
                             {item.standard}
                           </div>
                           <div
-                            className={`text-xs ${item.status === "compliant"
-                              ? "text-green-400"
-                              : "text-orange-400"
-                              }`}
+                            className={`text-xs ${
+                              item.status === "compliant"
+                                ? "text-green-400"
+                                : "text-orange-400"
+                            }`}
                           >
                             {item.status === "compliant"
                               ? "Compliant"
@@ -516,6 +536,11 @@ const ComplianceReadySystemsChallenge = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
               Navigating the Complexities of Regulatory Compliance
             </h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              Design AI‑powered mobile and web applications that confidently
+              meet HIPAA, GDPR, and other compliance frameworks while protecting
+              data privacy and security.
+            </p>
           </motion.div>
 
           <div className="grid md:grid-cols-2 gap-12 items-center">
@@ -695,6 +720,11 @@ const ComplianceReadySystemsIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Compliance-Driven System Development Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Build AI‑powered mobile and web applications with HIPAA‑ and
+            GDPR‑ready architecture, ensuring secure, compliant, and audit‑ready
+            systems from the ground up
+          </p>
         </motion.div>
 
         <motion.div
@@ -818,6 +848,10 @@ const ComplianceReadySystemsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Secure Your Operations with Compliant Systems
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Protect your business with AI‑powered mobile and web applications
+            built on HIPAA‑ and GDPR‑ready compliance frameworks.
+          </p>
         </motion.div>
 
         <motion.div
@@ -953,6 +987,11 @@ const ComplianceReadySystemsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Secure & Compliant Development Process
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Build AI‑powered mobile and web applications with a secure,
+            compliance‑first lifecycle that embeds HIPAA‑, GDPR‑ready controls
+            from design to deployment.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -971,12 +1010,14 @@ const ComplianceReadySystemsProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1186,6 +1227,11 @@ const ComplianceReadySystemsCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Secure & Compliant Systems We've Delivered
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            AI‑powered mobile and web applications built with HIPAA‑ and
+            GDPR‑ready architecture, securing data‑driven operations across
+            regulated industries.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1311,7 +1357,8 @@ const ComplianceReadySystemsInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Protect your business and your data with our expert-led solutions.
+              Protect your business and your data with AI‑powered mobile and web
+              applications built on HIPAA‑ and GDPR‑ready compliance frameworks.
             </p>
 
             <ShimmerButton
@@ -1337,27 +1384,27 @@ const ComplianceReadySystemsFAQs = () => {
       question:
         "What specific regulations do you have expertise in (e.g., HIPAA, GDPR, SOC 2)?",
       answer:
-        "We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our team stays current with regulatory changes and requirements, ensuring your systems meet the latest standards. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and various financial services regulations including SOX and GLBA.",
+        "We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our AI-powered mobile and web applications are architected to meet these standards, with experts who stay current with regulatory changes. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and financial services regulations including SOX and GLBA.",
     },
     {
       question: "How do you handle ongoing compliance changes?",
       answer:
-        "We provide comprehensive ongoing compliance management: Regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes: subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change management processes. We also provide compliance calendars, training updates for your team, and emergency response procedures for urgent regulatory changes.",
+        "We provide comprehensive ongoing compliance management for AI-driven app development services and AI mobile and web development solutions: regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change-management processes, along with compliance calendars, training updates, and emergency response procedures for urgent regulatory changes.",
     },
     {
       question: "Can you help us with compliance audits?",
       answer:
-        "Yes, we provide comprehensive audit support services: Pre-audit preparation including documentation review, gap analysis, and remediation planning, audit facilitation with technical expertise and evidence preparation, post-audit remediation support for any identified deficiencies, and ongoing audit readiness maintenance. Our audit support includes: creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you're fully prepared and supported throughout the process.",
+        "Yes. We provide comprehensive audit support for AI-powered mobile and web applications: pre-audit preparation including documentation review, gap analysis, and remediation planning; audit facilitation with technical expertise and evidence preparation; post-audit remediation support for any identified deficiencies; and ongoing audit readiness maintenance. Our audit support includes creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you’re fully prepared and supported throughout the process.",
     },
     {
       question: "What security measures do you integrate into your systems?",
       answer:
-        "We implement comprehensive security controls aligned with industry best practices: Data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include: secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs. All security implementations follow zero-trust principles and defense-in-depth strategies.",
+        "We implement comprehensive security controls aligned with industry best practices for AI-driven app development services and AI mobile and web development solutions: data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs, all built on zero-trust principles and defense-in-depth strategies.",
     },
     {
       question: "Is existing system remediation something you offer?",
       answer:
-        "Absolutely! We specialize in remediating existing systems for compliance: Comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes: minimal downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance.",
+        "Absolutely. We specialize in remediating existing systems for compliance, including legacy AI mobile and web development solutions: comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes minimal-downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance across AI mobile application developers’ workflows.",
     },
   ];
 
@@ -1450,8 +1497,8 @@ const ComplianceReadySystemsFinalCTA = () => {
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
             Navigate the complex world of regulatory compliance with confidence.
-            WDI builds and fortifies systems that stand up to the strictest
-            standards.
+            WDI builds and fortifies AI‑powered mobile and web applications that
+            meet the strictest security and compliance standards.
           </motion.p>
 
           <motion.div
@@ -1546,9 +1593,7 @@ export const ComplianceReadySystems = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/ComputerVisionApplications.tsx

@@ -59,33 +59,50 @@ const ComputerVisionHeroWithCTA = () => {
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>Computer Vision Applications | Vision AI Development | WDI</title>
+        <title>
+          Computer Vision Applications | Vision AI Development | WDI
+        </title>
         <meta
           name="description"
           content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/computer-vision-applications" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/computer-vision-applications"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Computer Vision Applications | Vision AI Development | WDI" />
+        <meta
+          property="og:title"
+          content="Computer Vision Applications | Vision AI Development | WDI"
+        />
         <meta
           property="og:description"
           content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
         />
         <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="Computer Vision Applications | Vision AI Development | WDI" />
+        <meta
+          name="twitter:title"
+          content="Computer Vision Applications | Vision AI Development | WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
         />
-        <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">
@@ -128,9 +145,8 @@ const ComputerVisionHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Empowering your business with AI-driven image and video
-                analysis, enabling object detection, facial recognition, quality
-                control, and more.
+                Empower your business with advanced computer vision that enables
+                object detection, facial recognition, quality control, and more.
               </p>
             </div>
 
@@ -523,6 +539,11 @@ const ComputerVisionBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Transform Operations with Visual Intelligence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Harness AI‑powered visual intelligence to turn images and video into
+            real‑time insights that automate inspections, improve safety, and
+            optimize your workflows.
+          </p>
         </motion.div>
 
         <motion.div
@@ -658,6 +679,11 @@ const ComputerVisionProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to Vision AI Development
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            We take a focused, business‑driven approach to vision AI, aligning
+            computer‑vision solutions with your core goals and operational
+            needs.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -676,12 +702,14 @@ const ComputerVisionProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -822,6 +850,11 @@ const CVApplicationsList = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Computer Vision Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            We deliver tailored computer‑vision solutions for object detection,
+            facial recognition, quality control, and visual analytics across
+            industries.
+          </p>
         </motion.div>
 
         <motion.div
@@ -947,7 +980,8 @@ const ComputerVisionTechStack = () => {
             Computer Vision Tech Stack
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Building powerful vision AI solutions with leading frameworks and
+            Build powerful vision AI solutions using a modern computer‑vision
+            stack that combines leading frameworks and high‑performance
             hardware.
           </p>
         </motion.div>
@@ -981,9 +1015,10 @@ const ComputerVisionTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                      }`}
+                    }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1052,6 +1087,11 @@ const ComputerVisionCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Computer Vision Solutions Driving Innovation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Computer‑vision solutions transform images and video into actionable
+            insights, enabling smarter automation, security, and quality control
+            across industries.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1177,7 +1217,8 @@ const ComputerVisionInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Explore how vision AI can transform your operations and products.
+              Discover how vision AI can transform operations and products with
+              intelligent, image‑driven insights.
             </p>
 
             <ShimmerButton
@@ -1286,8 +1327,8 @@ const HireComputerVisionEngineers = () => {
             Access Expert Computer Vision Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialized engineers proficient in image processing, deep
-            learning for vision, and real-time video analysis.
+            Hire specialized engineers proficient in image processing, deep
+            learning for vision, and real‑time video analysis.
           </p>
         </motion.div>
 
@@ -1381,22 +1422,22 @@ const ComputerVisionFAQs = () => {
     {
       question: "What kind of data is needed for computer vision models?",
       answer:
-        "Computer vision models require labeled visual datasets including images or videos with annotations such as bounding boxes, classification labels, or segmentation masks. The quantity needed varies by complexity: simple classification may need thousands of images per class, while complex object detection requires tens of thousands. Data quality is crucial - images should represent real-world conditions including varied lighting, angles, backgrounds, and scenarios. We work with clients to assess existing data, identify gaps, and develop data collection strategies. We can also leverage transfer learning to reduce data requirements and use techniques like data augmentation to maximize dataset value.",
+        "Computer vision models require labeled visual datasets, including images or videos with annotations such as bounding boxes, classification labels, or segmentation masks. The quantity needed varies by complexity: simple classification may need thousands of images per class, while complex object detection requires tens of thousands.\n\nData quality is crucial. Images should reflect real-world conditions like varied lighting, angles, backgrounds, and scenarios. When building AI mobile app development features or vision AI-powered functionality, transfer learning and data augmentation help reduce data requirements while maximizing dataset value.",
     },
     {
       question: "How do you address bias in facial recognition?",
       answer:
-        "We take a comprehensive approach to bias mitigation in facial recognition systems: First, we ensure diverse and representative training datasets across age, gender, ethnicity, and other demographic factors. We implement bias testing protocols throughout development, measuring performance across different demographic groups. We use fairness-aware machine learning techniques and regularly audit models for discriminatory patterns. We provide transparency through bias reporting and allow clients to set fairness thresholds. Additionally, we recommend ethical guidelines for deployment, including consent mechanisms, opt-out options, and clear usage policies. We stay current with regulations like GDPR and emerging AI ethics standards.",
+        "Bias in facial recognition is addressed through diverse, representative training data across age, gender, ethnicity, and other demographic factors. We implement bias testing protocols throughout development, measuring performance across groups and using fairness-aware machine learning techniques.\n\nRegular audits, transparency reports, and client-defined fairness thresholds help ensure responsible outcomes. For AI mobile applications and iOS mobile app development, these safeguards are especially important when rolling out AI-powered features in consumer-facing products.",
     },
     {
       question: "Can computer vision work on edge devices?",
       answer:
-        "Yes, we specialize in edge computer vision deployment for real-time, low-latency applications. We use model optimization techniques including quantization, pruning, and knowledge distillation to reduce model size and computational requirements. We support various edge platforms including NVIDIA Jetson, Intel NCS, mobile devices, and custom embedded systems. Edge deployment offers benefits like reduced latency, improved privacy (data stays local), lower bandwidth usage, and offline operation. We balance accuracy with performance constraints and can implement hybrid architectures where edge devices handle simple tasks while cloud handles complex processing. Our edge solutions maintain high accuracy while meeting strict resource constraints.",
+        "Yes. Computer vision can run on edge devices for real-time, low-latency applications. We use model optimization techniques such as quantization, pruning, and knowledge distillation to reduce size and computational needs.\n\nWe support edge platforms such as NVIDIA Jetson, Intel NCS, mobile devices, and custom embedded systems. For AI iOS development and AI iOS development software, edge-based vision AI helps maintain responsiveness and privacy while keeping data local. This approach pairs well with AI mobile app and web development backends that handle higher-level coordination.",
     },
     {
       question: "What are the ethical implications of computer vision?",
       answer:
-        "Computer vision raises important ethical considerations we actively address: Privacy concerns around surveillance and data collection require transparent policies and user consent. Bias and fairness issues, especially in facial recognition, need diverse datasets and ongoing monitoring. We implement privacy-by-design principles, including data minimization and anonymization techniques. We provide clear guidelines on appropriate use cases and help clients develop ethical AI policies. Security considerations include protecting against adversarial attacks and ensuring data integrity. We recommend regular ethical audits, stakeholder involvement in development, and compliance with emerging AI regulations. Our goal is building beneficial technology that respects human rights and promotes fairness.",
+        "Computer vision raises important ethical questions around privacy, bias, and transparency. Privacy concerns—especially in surveillance or AI-powered design scenarios—require clear consent, data-minimization practices, and anonymization where possible.\n\nWe implement privacy-by-design principles, monitor for bias (especially in facial-recognition-based AI-powered features), and recommend ethical AI policies and regular audits. Aligning computer vision deployments with fairness and regulation is essential to building trustworthy, user-centric products.",
     },
   ];
 
@@ -1488,7 +1529,7 @@ const ComputerVisionFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            WDI develops cutting-edge Computer Vision applications that
+            WDI develops cutting‑edge computer‑vision applications that
             automate, analyze, and innovate across industries.
           </motion.p>
 
@@ -1589,9 +1630,7 @@ export const ComputerVisionApplications = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/CustomMLModelDevelopment.tsx

@@ -60,26 +60,41 @@ const CustomMLHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/custom-ml-model-development" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/custom-ml-model-development"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Custom ML Model Development | Machine Learning by WDI" />
+        <meta
+          property="og:title"
+          content="Custom ML Model Development | Machine Learning by WDI"
+        />
         <meta
           property="og:description"
           content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
         />
         <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="Custom ML Model Development | Machine Learning by WDI" />
+        <meta
+          name="twitter:title"
+          content="Custom ML Model Development | Machine Learning by WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
         />
-        <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">
@@ -122,9 +137,9 @@ const CustomMLHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building bespoke ML models tailored to your unique data and
-                business challenges, extracting valuable insights and automating
-                complex decisions.
+                Building bespoke machine learning models tailored to your unique
+                data and business challenges, extracting actionable insights and
+                automating complex, data‑driven decisions.
               </p>
             </div>
 
@@ -496,6 +511,12 @@ const CustomMLBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Invest in a Custom ML Solution?
           </h2>
+
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Because a custom machine learning solution is built to your unique
+            data, workflows, and business goals, delivering higher accuracy,
+            automation, and a durable competitive advantage over generic tools.
+          </p>
         </motion.div>
 
         <motion.div
@@ -631,6 +652,12 @@ const CustomMLDevelopmentProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Process for Building Your ML Model
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, end‑to‑end machine learning model development process
+            that aligns with your business goals, from problem definition and
+            data preparation through training, validation, deployment, and
+            ongoing optimization.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -649,12 +676,14 @@ const CustomMLDevelopmentProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -796,6 +825,11 @@ const CustomMLServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Custom ML Model Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Specialized custom ML model capabilities that solve complex,
+            domain‑specific challenges with high‑accuracy, scalable machine
+            learning models built for your unique data and workflows.
+          </p>
         </motion.div>
 
         <motion.div
@@ -932,7 +966,8 @@ const CustomMLTechStack = () => {
             Custom ML Tech Stack
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Leveraging powerful libraries and platforms for cutting-edge ML
+            Leveraging a powerful, modern machine learning tech stack of leading
+            libraries and platforms to build cutting‑edge, production‑ready ML
             solutions.
           </p>
         </motion.div>
@@ -965,9 +1000,10 @@ const CustomMLTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                      }`}
+                    }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1036,6 +1072,11 @@ const CustomMLCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Custom ML Models Driving Real Business Value
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Custom ML models that turn your data into predictive intelligence,
+            automate decisions, and deliver measurable business value,
+            efficiency gains, and competitive advantage.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1161,8 +1202,9 @@ const CustomMLInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Let's explore how a custom machine learning model can give you a
-              decisive edge.
+              Let’s explore how a custom machine learning model can analyze your
+              data, automate decisions, and give you a decisive, data‑driven
+              edge.
             </p>
 
             <ShimmerButton
@@ -1273,7 +1315,8 @@ const HireMLDevelopers = () => {
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
             Hire our specialized data scientists and ML engineers proficient in
-            developing, training, and deploying custom ML models.
+            developing, training, and deploying custom ML models that solve
+            complex business problems and drive measurable AI‑driven outcomes.
           </p>
         </motion.div>
 
@@ -1367,22 +1410,22 @@ const CustomMLFAQs = () => {
     {
       question: "What kind of data do I need for ML model development?",
       answer:
-        "The data requirements depend on your specific problem, but generally you need: sufficient quantity (typically thousands to millions of records), relevant features that correlate with your target outcome, clean and consistent data formatting, and historical examples of the outcomes you want to predict. For supervised learning, you need labeled data showing correct answers. We can work with structured data (databases, spreadsheets), unstructured data (text, images, audio), or time-series data. During our initial assessment, we'll evaluate your data quality, identify gaps, and recommend data collection or preprocessing strategies to ensure optimal model performance.",
+        "The data requirements depend on your specific problem, but generally you need sufficient quantity (often thousands to millions of records), relevant features that correlate with your target outcome, clean and consistent formatting, and historical examples of the outcomes you want to predict. For supervised learning, you need labeled data that shows correct answers.\n\nWe can work with structured data (databases, spreadsheets), unstructured data (text, images, audio), or time-series data. During our initial assessment, we’ll evaluate your data quality, identify gaps, and recommend data collection or preprocessing strategies to ensure optimal machine learning model performance.",
     },
     {
       question: "How long does it take to build a custom ML model?",
       answer:
-        "The timeline varies significantly based on complexity and scope. Simple models (like basic classification or regression) can take 4-8 weeks, while complex models (deep learning, computer vision, or NLP) may require 3-6 months. Factors affecting timeline include: data complexity and volume, model sophistication required, integration requirements, performance targets, and regulatory compliance needs. Our typical process includes 1-2 weeks for data assessment, 2-4 weeks for preprocessing and feature engineering, 2-6 weeks for model development and training, 1-2 weeks for testing and validation, and 1-2 weeks for deployment preparation. We provide detailed timelines during project planning.",
+        "Timelines vary based on complexity and scope. Simple models (like basic classification or regression) usually take 4–8 weeks, while complex models such as deep learning, computer vision, or NLP often require 3–6 months.\n\nKey factors affecting the timeline include data complexity and volume, model sophistication, integration requirements, performance targets, and regulatory needs. Our typical process includes 1–2 weeks for data assessment, 2–4 weeks for preprocessing and feature engineering, 2–6 weeks for model development and training, 1–2 weeks for testing and validation, and 1–2 weeks for deployment preparation. We provide a detailed timeline for every custom ML model project during planning.",
     },
     {
-      question: 'What is "model bias" and how do you address it?',
+      question: "What is “model bias” and how do you address it?",
       answer:
-        "Model bias occurs when ML models make systematically unfair or inaccurate predictions for certain groups or scenarios, often reflecting biases present in training data or model design. Common types include historical bias (past discrimination in data), representation bias (underrepresented groups in training data), and measurement bias (inconsistent data collection). We address bias through: comprehensive bias auditing and fairness metrics evaluation, diverse and representative training datasets, bias detection algorithms and statistical tests, fair ML techniques like adversarial debiasing, regular model monitoring for bias drift, and transparent documentation of model limitations and recommendations for responsible use.",
+        "Model bias occurs when machine learning models make systematically unfair or inaccurate predictions for certain groups or scenarios, often reflecting biases in training data or model design. Common types include historical bias (past discrimination in data), representation bias (underrepresented groups), and measurement bias (inconsistent data collection).\n\nWe address bias through comprehensive bias audits and fairness metrics, diverse and representative training datasets, bias-detection algorithms and statistical tests, fair-ML techniques like adversarial debiasing, regular monitoring for bias drift, and transparent documentation of model limitations. This helps ensure more equitable and reliable machine learning model behavior.",
     },
     {
       question: "Do you provide ongoing support for the deployed model?",
       answer:
-        "Yes, we offer comprehensive post-deployment support and maintenance services. This includes: performance monitoring and alerting systems to track model accuracy and detect drift, regular model retraining with new data to maintain performance, technical support for integration issues and troubleshooting, model updates and improvements based on new requirements, documentation and knowledge transfer to your team, compliance monitoring and audit support, and emergency response for critical model failures. We provide different support tiers ranging from basic monitoring to full managed ML services, allowing you to choose the level of ongoing support that best fits your needs and internal capabilities.",
+        "Yes. We offer comprehensive post-deployment support and maintenance for your ML model. This includes performance monitoring and alerting systems to track accuracy and detect drift, regular retraining with new data, technical support for integration and troubleshooting, model updates and improvements, documentation and knowledge transfer, compliance monitoring, and emergency response for critical failures.\n\nWe provide multiple support tiers from basic monitoring to full-service managed ML so you can choose the level of ongoing support that fits your internal capabilities and ML model operational needs.",
     },
   ];
 
@@ -1474,8 +1517,9 @@ const CustomMLFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Transform your data into a strategic asset with bespoke Machine
-            Learning models designed for your unique challenges.
+            Transform your data into a strategic asset with bespoke machine
+            learning models designed for your unique business challenges and
+            built to deliver measurable, data‑driven outcomes.
           </motion.p>
 
           <motion.div
@@ -1575,9 +1619,7 @@ export const CustomMLModelDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/DedicatedOffshoreODC.tsx

@@ -51,38 +51,53 @@ const DedicatedOffshoreODCHero = () => {
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
-              {/* Page Title and Meta Description */}
-              <title>Offshore Development Centers (ODC) Services | WDI</title>
-              <meta
-                name="description"
-                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
-              />
-      
-              {/* Canonical Link */}
-              <link rel="canonical" href="https://www.wdipl.com/solutions/dedicated-offshore-odc" />
-      
-              {/* Open Graph Tags (for Facebook, LinkedIn) */}
-              <meta property="og:title" content="Offshore Development Centers (ODC) Services | WDI" />
-              <meta
-                property="og:description"
-                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
-              />
-              <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="Offshore Development Centers (ODC) Services | WDI" />
-              <meta
-                name="twitter:description"
-                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
-              />
-              <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
-      
-              {/* Social Profiles (using JSON-LD Schema) */}
-              <script type="application/ld+json">
-                {`
+        {/* Page Title and Meta Description */}
+        <title>Offshore Development Centers (ODC) Services | WDI</title>
+        <meta
+          name="description"
+          content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/dedicated-offshore-odc"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Offshore Development Centers (ODC) Services | WDI"
+        />
+        <meta
+          property="og:description"
+          content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
+        />
+        <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="Offshore Development Centers (ODC) Services | WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
+        />
+        <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",
@@ -95,8 +110,8 @@ const DedicatedOffshoreODCHero = () => {
                                 ]
                               }
                             `}
-              </script>
-            </Helmet>
+        </script>
+      </Helmet>
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -123,8 +138,9 @@ const DedicatedOffshoreODCHero = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Scale your development capabilities rapidly and cost-effectively
-                with your own dedicated team of expert offshore developers.
+                Scale your AI mobile and web development capabilities rapidly
+                and cost‑effectively with your own dedicated team of expert
+                offshore developers.
               </p>
             </div>
 
@@ -541,6 +557,11 @@ const DedicatedOffshoreODCChallenge = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
               Scaling Your Team: The Talent & Cost Challenge
             </h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              Access AI mobile application developers and AI‑driven app
+              development services without bloating your budget or compromising
+              speed.
+            </p>
           </motion.div>
 
           <div className="grid md:grid-cols-2 gap-12 items-center">
@@ -704,6 +725,11 @@ const DedicatedOffshoreODCIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Components of Your Dedicated ODC with WDI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            AI mobile and web development solutions, expert AI mobile
+            application developers, and AI‑driven app development services under
+            one dedicated offshore team.
+          </p>
         </motion.div>
 
         <motion.div
@@ -794,6 +820,12 @@ const DedicatedOffshoreODCBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             The Strategic Advantages of a WDI ODC
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Access AI‑driven app development services, AI mobile and web
+            development solutions, and dedicated AI mobile application
+            developers with faster scaling, lower cost, and higher delivery
+            velocity.
+          </p>
         </motion.div>
 
         <motion.div
@@ -929,6 +961,11 @@ const DedicatedOffshoreODCProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Building Your Seamless Offshore Team
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Integrate AI mobile application developers and AI‑driven app
+            development services into a dedicated offshore team that works as an
+            extension of your product vision.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -1166,6 +1203,11 @@ const DedicatedOffshoreODCCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Client Success Through Dedicated Offshore Teams
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Drive growth with AI mobile and web development solutions, AI mobile
+            application developers, and AI‑driven app development services
+            working as your dedicated offshore delivery engine.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1291,8 +1333,9 @@ const DedicatedOffshoreODCInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Build a high-performing, cost-effective team tailored to your
-              needs.
+              Build a high‑performing, cost‑effective team of AI mobile
+              application developers and AI‑driven app development services
+              tailored to your product needs.
             </p>
 
             <ShimmerButton
@@ -1317,27 +1360,27 @@ const DedicatedOffshoreODCFAQs = () => {
     {
       question: "How does an ODC differ from traditional outsourcing?",
       answer:
-        "An ODC (Offshore Development Center) is fundamentally different from traditional outsourcing: ODCs provide dedicated teams that work exclusively for your company, operate as an extension of your internal team, follow your processes and culture, and offer long-term partnership focused on your business goals. Traditional outsourcing typically involves project-based engagements, shared resources across multiple clients, limited control over team composition, and short-term transactional relationships. With an ODC, you get the benefits of an in-house team - dedicated focus, deep product knowledge, cultural alignment - combined with the cost advantages and scalability of offshore development.",
+        "An ODC (Offshore Development Center) differs from traditional outsourcing in that it provides dedicated teams working exclusively for your company, operating as an extension of your internal team, following your processes and culture, and focused on long-term partnership aligned to your business goals.\n\nTraditional outsourcing typically involves project-based engagements, shared resources across multiple clients, limited control over team composition, and short-term transactional relationships. With an ODC, you gain the benefits of an in-house team—dedicated focus, deep product knowledge, cultural alignment—combined with cost advantages and scalability.",
     },
     {
       question: "How do you ensure data security and IP protection?",
       answer:
-        "We implement comprehensive security measures: Multi-layered physical security at our facilities with biometric access controls, secure IT infrastructure with encrypted data transmission and storage, strict confidentiality agreements and IP protection protocols for all team members, regular security audits and compliance assessments, and segregated work environments ensuring your data remains isolated. We maintain certifications like ISO 27001 and follow industry best practices for data protection. Additionally, we provide detailed security reports, conduct background checks on all personnel, and can accommodate specific security requirements or compliance standards your organization requires.",
+        "We implement comprehensive security measures, including multi-layered physical security with biometric access controls, secure IT infrastructure with encrypted data transmission and storage, strict confidentiality agreements and IP protection protocols, regular security audits, and segregated work environments to ensure data isolation.\n\nWe maintain certifications like ISO 27001, follow industry-standard data protection practices, conduct background checks, provide detailed security reports, and can align with specific compliance requirements to protect your systems and data.",
     },
     {
       question: "What level of control do we have over the ODC team?",
       answer:
-        "You maintain full operational control over your ODC team: Direct management of daily tasks, priorities, and deliverables, participation in hiring decisions and team composition, implementation of your development processes, tools, and methodologies, access to real-time performance metrics and project tracking, and direct communication channels with team members. While we handle administrative functions like payroll, benefits, and HR compliance, you retain complete control over the technical direction, project management, and day-to-day operations. The team reports directly to you and operates as a seamless extension of your internal development organization.",
+        "You retain full operational control over your ODC team, including direct management of daily tasks, priorities, and deliverables, participation in hiring decisions, implementation of your development processes and tools, access to real-time performance tracking, and direct communication with team members.\n\nWhile we handle administrative functions such as payroll and HR, you maintain complete control over technical direction and day-to-day operations. The team works as a seamless extension of your internal organization.",
     },
     {
       question: "How long does it take to set up an ODC?",
       answer:
-        "The ODC setup timeline typically ranges from 4-8 weeks depending on your requirements: Week 1-2: Requirements gathering, team planning, and candidate sourcing, Week 2-4: Candidate interviews, selection, and offer processes, Week 3-5: Infrastructure setup, security clearances, and legal documentation, Week 4-6: Team onboarding, tool integration, and process alignment, Week 5-8: Full operational readiness and project kickoff. For specialized skills or larger teams, the timeline may extend to 10-12 weeks. We can expedite the process with our pre-vetted talent pool for standard technology stacks. Throughout the setup, we provide regular updates and ensure smooth coordination between your team and the new ODC members.",
+        "The ODC setup timeline typically ranges from 4–8 weeks depending on your requirements:\n\nWeeks 1–2: Requirements gathering, team planning, and sourcing\nWeeks 2–4: Candidate interviews and selection\nWeeks 3–5: Infrastructure setup and security/legal processes\nWeeks 4–6: Onboarding and tool/process alignment\nWeeks 5–8: Full operational readiness and project kickoff\n\nFor specialized roles or larger teams, the timeline may extend to 10–12 weeks. We can accelerate setup using pre-vetted talent pools for common tech stacks.",
     },
     {
       question: "What are the typical cost savings compared to in-house teams?",
       answer:
-        "ODC cost savings typically range from 40-70% compared to equivalent in-house teams: Direct salary savings of 50-60% for similar skill levels, elimination of recruitment costs, training expenses, and employee benefits overhead, reduced infrastructure and facilities costs, and no long-term employment commitments or severance obligations. Additional indirect savings include faster scaling capabilities, reduced management overhead, and access to specialized skills without premium local market rates. For example, a senior developer costing $120,000 annually in the US might cost $40,000-50,000 through an ODC, while maintaining equivalent quality and productivity. The exact savings depend on your location, required skill sets, team size, and engagement model.",
+        "ODC cost savings typically range from 40–70% compared to in-house teams. This includes salary savings of 50–60%, elimination of recruitment and training costs, reduced infrastructure expenses, and no long-term employment liabilities.\n\nAdditional benefits include faster scaling, lower management overhead, and access to specialized talent at competitive rates. Actual savings depend on location, team size, skill requirements, and engagement model.",
     },
   ];
 
@@ -1429,7 +1472,8 @@ const DedicatedOffshoreODCFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Leverage WDI's expertise to establish and manage your dedicated
+            Leverage WDI’s AI mobile and web development solutions and AI‑driven
+            app development services to establish and manage your dedicated
             offshore development center, ensuring seamless integration and
             superior results.
           </motion.p>
@@ -1526,9 +1570,7 @@ export const DedicatedOffshoreODC = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/DigitalProductDevelopment.tsx

@@ -45,33 +45,50 @@ const DigitalProductDevelopmentHero = () => {
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>Digital Product Development Services | WDI – Innovate & Grow</title>
+        <title>
+          Digital Product Development Services | WDI – Innovate & Grow
+        </title>
         <meta
           name="description"
           content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/solutions/digital-product-development" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/digital-product-development"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Digital Product Development Services | WDI – Innovate & Grow" />
+        <meta
+          property="og:title"
+          content="Digital Product Development Services | WDI – Innovate & Grow"
+        />
         <meta
           property="og:description"
           content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
         />
         <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="Digital Product Development Services | WDI – Innovate & Grow" />
+        <meta
+          name="twitter:title"
+          content="Digital Product Development Services | WDI – Innovate & Grow"
+        />
         <meta
           name="twitter:description"
           content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
         />
-        <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">
@@ -116,8 +133,9 @@ const DigitalProductDevelopmentHero = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Transform your vision into market-ready digital products that
-                captivate users and drive business growth.
+                Transform your vision into market‑ready digital products that
+                captivate users and drive business growth with AI‑driven app
+                development.
               </p>
             </div>
 
@@ -460,6 +478,11 @@ const DigitalProductChallenge = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
               From Idea to Impact: Navigating the Product Journey
             </h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              A structured end‑to‑end process that turns your vision into
+              market‑ready digital product development outcomes, from concept
+              and validation through design, development, and launch.
+            </p>
           </motion.div>
 
           <div className="grid md:grid-cols-2 gap-12 items-center">
@@ -625,6 +648,11 @@ const DigitalProductIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Comprehensive Digital Product Development Services
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            End‑to‑end digital product development services that turn your
+            vision into market‑ready applications, from strategy and design
+            through development, testing, and launch.
+          </p>
         </motion.div>
 
         <motion.div
@@ -716,6 +744,11 @@ const DigitalProductBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Build Products That Succeed with WDI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            End‑to‑end digital product development partner that helps you build
+            and launch products customers love, from idea validation and
+            UX‑driven design to scalable engineering and data‑informed growth.
+          </p>
         </motion.div>
 
         <motion.div
@@ -850,6 +883,11 @@ const DigitalProductProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Collaborative Product Journey
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A transparent, team‑driven process that takes your product from
+            vision to value, with close collaboration between you, designers,
+            and engineers at every stage.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -868,12 +906,14 @@ const DigitalProductProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1043,6 +1083,10 @@ const DigitalProductCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Digital Products We've Helped Bring to Life
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A showcase of the apps, platforms, and SaaS products we’ve co‑built
+            with clients from concept to successful launch and growth.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1168,7 +1212,8 @@ const DigitalProductInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Let's discuss your vision and create a roadmap for success.
+              Let’s discuss your vision and create a clear roadmap for your
+              digital product development journey.
             </p>
 
             <ShimmerButton
@@ -1194,24 +1239,24 @@ const DigitalProductFAQs = () => {
       question:
         "What is your typical timeline for digital product development?",
       answer:
-        "Our typical timeline varies based on project complexity, but generally ranges from 3-9 months for most digital products. A simple MVP can be delivered in 6-12 weeks, while complex enterprise applications may take 6-12 months. Our process includes: Discovery & Planning (2-3 weeks), Design & Prototyping (3-4 weeks), Development (8-20 weeks depending on features), Testing & QA (2-3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every 2 weeks, so you can see progress and provide feedback throughout the development process. We'll provide a detailed timeline during our initial consultation based on your specific requirements.",
+        "Our typical timeline varies by project complexity but generally ranges from 3–9 months for most digital product development projects. A simple MVP can be ready in 6–12 weeks, while complex enterprise applications may take 6–12 months.\n\nOur process includes: Discovery & Planning (2–3 weeks), Design & Prototyping (3–4 weeks), Development (8–20 weeks depending on features), Testing & QA (2–3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every two weeks, so you can see progress and provide feedback throughout the digital product development lifecycle. We’ll provide a detailed, customized timeline during the initial consultation based on your requirements.",
     },
     {
       question:
         "How do you ensure user feedback is incorporated into the design?",
       answer:
-        "User feedback is central to our design process. We incorporate it through: User research and persona development at the start, interactive prototypes for early validation, usability testing sessions with real users, A/B testing for design decisions, and continuous feedback loops throughout development. We conduct user interviews, surveys, and testing sessions at key milestones. Our design team creates clickable prototypes that allow stakeholders and users to experience the product before development begins. We also implement analytics and feedback systems in the live product to gather ongoing user insights. Regular design reviews ensure user feedback drives iterations and improvements throughout the project lifecycle.",
+        "User feedback is central to our digital product development approach. We integrate it through: user research and persona development at the start, interactive prototypes for early validation, usability testing with real users, A/B testing for key decisions, and continuous feedback loops throughout development.\n\nWe conduct user interviews, surveys, and testing at key milestones and create clickable prototypes you and your users can experience before full build-out. Once live, we embed analytics and feedback mechanisms to capture ongoing behavior and insights. Regular design and product reviews ensure user input directly shapes iterations and refinements.",
     },
     {
       question:
         "What technologies do you specialize in for product development?",
       answer:
-        "We specialize in modern, scalable technologies including: Frontend - React, Next.js, Vue.js, Angular for web; React Native, Flutter for mobile. Backend - Node.js, Python (Django/Flask), .NET, Java, PHP. Databases - PostgreSQL, MongoDB, MySQL, Redis. Cloud - AWS, Google Cloud, Azure with containerization using Docker and Kubernetes. We also work with headless CMS solutions, API integrations, payment gateways, and emerging technologies like AI/ML integration. Our technology choices are always driven by your specific requirements, scalability needs, and long-term maintenance considerations. We'll recommend the best tech stack during our discovery phase based on your project goals and constraints.",
+        "We specialize in modern, scalable stacks for digital product development, including:\n\nFrontend: React, Next.js, Vue.js, Angular (web); React Native, Flutter (mobile).\n\nBackend: Node.js, Python (Django/Flask), .NET, Java, PHP.\n\nDatabases: PostgreSQL, MongoDB, MySQL, Redis.\n\nCloud & DevOps: AWS, Google Cloud, Azure, Docker, Kubernetes.\n\nWe also work with headless CMS, API integrations, payment gateways, and AI/ML features. Our strategy is to choose the right stack based on your product goals, scalability, and long-term maintenance—not just what’s trending.",
     },
     {
       question: "Do you offer post-launch maintenance and support?",
       answer:
-        "Yes, we provide comprehensive post-launch support including: Technical maintenance (bug fixes, security updates, performance optimization), feature enhancements and new functionality development, 24/7 monitoring and support, regular backups and security audits, analytics and performance reporting, and user support integration. Our support packages range from basic maintenance to full ongoing development partnerships. We offer different service levels including emergency support, planned maintenance windows, and proactive monitoring. We also provide training for your team, documentation, and knowledge transfer to ensure you can manage aspects of the product internally if desired. Our goal is to ensure your product remains secure, performant, and continues to evolve with your business needs.",
+        "Yes, we offer comprehensive post-launch support as part of our digital product development service. This includes: technical maintenance (bug fixes, security patches, performance tuning), feature enhancements, 24/7 monitoring, regular backups and security audits, and analytics and performance reporting.\n\nWe provide flexible support packages from basic maintenance to ongoing development partnerships, plus emergency response, scheduled maintenance windows, and proactive monitoring. We also deliver training, documentation, and knowledge transfer so your team can manage parts of the product internally. Our goal is to keep your digital product secure, fast, and aligned with your evolving business needs.",
     },
   ];
 
@@ -1303,8 +1348,9 @@ const DigitalProductFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            From groundbreaking concepts to polished, high-performing products,
-            WDI is your trusted partner for digital product excellence.
+            From groundbreaking concepts to polished, high‑performing products,
+            WDI is your trusted partner for digital product development
+            excellence.
           </motion.p>
 
           <motion.div
@@ -1398,9 +1444,7 @@ export const DigitalProductDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/HireFrontendDevelopers.tsx

@@ -80,19 +80,20 @@ export const HireFrontendDevelopers = () => {
     {
       category: "Hire Expert Developers",
       title: "Hire Frontend Developers",
-      description: "Get access to expert frontend developers skilled in React, Vue, Angular, and modern web technologies. Create stunning, responsive user interfaces that deliver exceptional user experiences.",
+      description:
+        "Get access to expert frontend developers skilled in React, Vue, Angular, and modern web technologies. Create stunning, responsive user interfaces that deliver exceptional user experiences.",
       primaryCTA: {
         text: "Hire Frontend Developers",
         href: "/start-a-project",
-        icon: Monitor
+        icon: Monitor,
       },
       secondaryCTA: {
         text: "View Developer Profiles",
         href: "/hire-talent",
-        icon: Users
-      }
+        icon: Users,
+      },
     },
-  ]
+  ];
   const deliverables = [
     {
       icon: Target,
@@ -160,26 +161,41 @@ export const HireFrontendDevelopers = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/hire-talent/frontend-developers" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/hire-talent/frontend-developers"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Hire Frontend Developers | Skilled Talent at WDI" />
+        <meta
+          property="og:title"
+          content="Hire Frontend Developers | Skilled Talent at WDI"
+        />
         <meta
           property="og:description"
           content="Hire frontend developers from WDI to build high-quality, responsive, and scalable web applications tailored to your business needs with expert skills"
         />
         <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="Hire Frontend Developers | Skilled Talent at WDI" />
+        <meta
+          name="twitter:title"
+          content="Hire Frontend Developers | Skilled Talent at WDI"
+        />
         <meta
           name="twitter:description"
           content="Hire frontend developers from WDI to build high-quality, responsive, and scalable web applications tailored to your business needs with expert skills"
         />
-        <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">
@@ -232,7 +248,9 @@ export const HireFrontendDevelopers = () => {
               Our Frontend Development Expertise
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive frontend skills for modern web development
+              Comprehensive frontend skills for modern web development,
+              including React, Vue, Angular, and AI‑powered design across
+              responsive, high‑performance interfaces.
             </p>
           </div>
 
@@ -276,7 +294,8 @@ export const HireFrontendDevelopers = () => {
               What Our Frontend Developers Bring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Exceptional frontend solutions that enhance user engagement
+              Exceptional frontend solutions that enhance user engagement and
+              deliver AI‑powered, responsive web and mobile experiences.
             </p>
           </div>
 
@@ -309,7 +328,8 @@ export const HireFrontendDevelopers = () => {
               Ideal for Projects Requiring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Frontend expertise that makes a difference
+              Frontend expertise that makes a difference with AI‑powered design
+              and high‑performance web and mobile interfaces.
             </p>
           </div>
 
@@ -377,8 +397,8 @@ export const HireFrontendDevelopers = () => {
               Ready to Transform Your User Interface?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our frontend specialists and create user experiences
-              that engage and convert.
+              Connect with our frontend specialists and create AI‑powered,
+              engaging user experiences that convert.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

pages/HireMobileAppDevelopers.tsx

@@ -4,7 +4,18 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
+import {
+  ArrowRight,
+  Smartphone,
+  Apple,
+  Code,
+  Zap,
+  Shield,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
@@ -16,79 +27,94 @@ export const HireMobileAppDevelopers = () => {
     {
       icon: Apple,
       title: "iOS Developers",
-      description: "Proficient in Swift and Objective-C for crafting robust and elegant applications for iPhone and iPad.",
-      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"]
+      description:
+        "Proficient in Swift and Objective-C for crafting robust and elegant applications for iPhone and iPad.",
+      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
     },
     {
       icon: Code,
       title: "Android Developers",
-      description: "Skilled in Kotlin and Java to build feature-rich and scalable apps for the vast Android ecosystem.",
-      skills: ["Kotlin", "Java", "Android Studio", "Room Database", "Jetpack Compose"]
+      description:
+        "Skilled in Kotlin and Java to build feature-rich and scalable apps for the vast Android ecosystem.",
+      skills: [
+        "Kotlin",
+        "Java",
+        "Android Studio",
+        "Room Database",
+        "Jetpack Compose",
+      ],
     },
     {
       icon: Smartphone,
       title: "Cross-Platform Developers",
-      description: "Experts in frameworks like React Native and Flutter for efficient development across multiple platforms with a single codebase.",
-      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"]
+      description:
+        "Experts in frameworks like React Native and Flutter for efficient development across multiple platforms with a single codebase.",
+      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
     },
     {
       icon: Code,
       title: "Hybrid App Developers",
-      description: "Experience with technologies like Ionic and Xamarin for web-based mobile applications.",
-      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"]
-    }
+      description:
+        "Experience with technologies like Ionic and Xamarin for web-based mobile applications.",
+      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
+    },
   ];
 
   const deliverables = [
     {
       icon: Target,
       title: "Intuitive UI/UX",
-      description: "Ensuring a seamless and engaging user experience."
+      description: "Ensuring a seamless and engaging user experience.",
     },
     {
       icon: Zap,
       title: "High Performance",
-      description: "Optimized apps for speed, responsiveness, and stability."
+      description: "Optimized apps for speed, responsiveness, and stability.",
     },
     {
       icon: Shield,
       title: "Robust Security",
-      description: "Implementing best practices for data protection and user privacy."
+      description:
+        "Implementing best practices for data protection and user privacy.",
     },
     {
       icon: Code,
       title: "API Integration",
-      description: "Connecting with backend services and third-party APIs seamlessly."
+      description:
+        "Connecting with backend services and third-party APIs seamlessly.",
     },
     {
       icon: Users,
       title: "Scalability",
-      description: "Building apps that can grow with your user base and feature set."
+      description:
+        "Building apps that can grow with your user base and feature set.",
     },
     {
       icon: CheckCircle,
       title: "Post-Launch Support",
-      description: "Assistance with updates, maintenance, and performance monitoring."
-    }
+      description:
+        "Assistance with updates, maintenance, and performance monitoring.",
+    },
   ];
 
   const heroBanner = [
     {
       category: "Hire Expert Developers",
       title: "Hire Mobile App Developers for Your Project",
-      description: "Get access to top-tier mobile app developers specialized in iOS, Android, React Native, and Flutter. Build engaging, high-performance mobile applications that users love.",
+      description:
+        "Get access to top‑tier AI mobile application developers specialized in iOS, Android, React Native, and Flutter. Build engaging, high‑performance AI mobile apps that users love.",
       primaryCTA: {
         text: "Hire Mobile Developers",
         href: "/start-a-project",
-        icon: Smartphone
+        icon: Smartphone,
       },
       secondaryCTA: {
         text: "View Developer Profiles",
         href: "/hire-talent",
-        icon: Users
-      }
+        icon: Users,
+      },
     },
-  ]
+  ];
 
   const projectTypes = [
     "E-commerce & Retail Apps",
@@ -96,22 +122,24 @@ export const HireMobileAppDevelopers = () => {
     "Social Networking Platforms",
     "Enterprise & Business Productivity Tools",
     "Health & Fitness Trackers",
-    "Educational Apps & E-learning Platforms"
+    "Educational Apps & E-learning Platforms",
   ];
 
   const testimonials = [
     {
-      quote: "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
+      quote:
+        "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
       author: "Sarah Johnson",
       role: "CTO, TechStart Inc.",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
+      quote:
+        "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
       author: "Michael Chen",
       role: "Product Manager, InnovateNow",
-      rating: 5
-    }
+      rating: 5,
+    },
   ];
 
   return (
@@ -119,7 +147,9 @@ export const HireMobileAppDevelopers = () => {
       {/* <Navigation /> */}
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>Hire Mobile App Developers | Dedicated App Experts - WDIPL</title>
+        <title>
+          Hire Mobile App Developers | Dedicated App Experts - WDIPL
+        </title>
         <meta
           name="description"
           content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
@@ -129,23 +159,35 @@ export const HireMobileAppDevelopers = () => {
         <link rel="canonical" href="https://www.wdipl.com/services" />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
+        <meta
+          property="og:title"
+          content="Hire Mobile App Developers | Dedicated App Experts - WDIPL"
+        />
         <meta
           property="og:description"
           content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
         />
         <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="Hire Mobile App Developers | Expert Talent at WDI" />
+        <meta
+          name="twitter:title"
+          content="Hire Mobile App Developers | Dedicated App Experts - WDIPL"
+        />
         <meta
           name="twitter:description"
           content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
         />
-        <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">
@@ -179,7 +221,11 @@ export const HireMobileAppDevelopers = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              Our developers are adept at building intuitive, secure, and scalable mobile applications that engage users and drive business growth. From native iOS and Android apps to cross-platform solutions, we have the expertise to bring your mobile vision to life.
+              Our developers are adept at building intuitive, secure, and
+              scalable mobile applications that engage users and drive business
+              growth. From native iOS and Android apps to cross-platform
+              solutions, we have the expertise to bring your mobile vision to
+              life.
             </p>
           </div>
         </div>
@@ -193,13 +239,18 @@ export const HireMobileAppDevelopers = () => {
               Our Mobile App Development Expertise
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive mobile development skills across all major platforms and frameworks
+              Comprehensive AI mobile app development skills across all major
+              platforms and frameworks, including native iOS and Android, React
+              Native, and Flutter.
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
             {expertise.map((area, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-8">
                   <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
 
@@ -213,7 +264,11 @@ export const HireMobileAppDevelopers = () => {
 
                   <div className="flex flex-wrap gap-2">
                     {area.skills.map((skill, skillIndex) => (
-                      <Badge key={skillIndex} variant="outline" className="border-white/20 text-white text-xs">
+                      <Badge
+                        key={skillIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
                         {skill}
                       </Badge>
                     ))}
@@ -233,13 +288,18 @@ export const HireMobileAppDevelopers = () => {
               What Our Mobile Developers Deliver
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive mobile solutions that exceed expectations
+              Comprehensive AI mobile app development solutions that exceed
+              expectations with high‑performance, user‑centric iOS and
+              cross‑platform applications.
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {deliverables.map((item, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -263,13 +323,18 @@ export const HireMobileAppDevelopers = () => {
               Ideal for Projects Like
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our mobile developers excel across various industry verticals
+              Our AI mobile application developers excel across various industry
+              verticals, delivering AI mobile app development solutions for iOS,
+              Android, React Native, and Flutter.
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
             {projectTypes.map((project, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{project}</span>
               </div>
@@ -323,16 +388,23 @@ export const HireMobileAppDevelopers = () => {
               Ready to Build Your Mobile App?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
+              Connect with our expert AI mobile application developers and turn
+              your vision into a powerful AI mobile app experience.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                 onClick={() => navigate("/start-a-project")}
               >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Schedule a Consultation
               </Button>
             </div>
@@ -343,4 +415,4 @@ export const HireMobileAppDevelopers = () => {
       {/* <Footer /> */}
     </div>
   );
-};
+};

pages/HireMobileAppDevelopersIndia.tsx

@@ -1,188 +1,324 @@
 import React from "react";
 import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
+import { motion } from "framer-motion";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
+import {
+  ArrowRight,
+  Smartphone,
+  Apple,
+  Code,
+  Zap,
+  Shield,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 import { MobileAppVector } from "@/components/vectors";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 
 export const HireMobileAppDevelopersIndia = () => {
-    const navigate = useNavigate();
-    const expertise = [
-        {
-            icon: Apple,
-            title: "iOS Developers",
-            description: (
-                <>
-                    To develop iOS apps, you can{" "}
-                    <a
-                        href="/hire-talent/mobile-app-developers"
-                        className="text-[#E5195E] underline"
-                    >
-                        hire mobile app developers
-                    </a>{" "}
-                    in India from us, as they are proficient in Swift and Objective-C for crafting robust and stylish mobile applications for iPhone and iPad.
-                </>
-            ),
-            skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"]
-        },
-        {
-            icon: Code,
-            title: "Android Developers",
-            description: (
-                <>
-                    Our expert{" "}
-                    <a
-                        href="/services/android-app-development"
-                        className="text-[#E5195E] underline"
-                    >
-                        Android app developers
-                    </a>{" "}
-                    in India are skilled in Kotlin and Java to develop applications with extensive features and enhanced scalability for the broader Android ecosystem.
-                </>
-            ),
-            skills: ["Kotlin", "Java", "Android Studio", "Room Database", "Jetpack Compose"]
-        },
-        {
-            icon: Smartphone,
-            title: "Cross-Platform Developers",
-            description: (
-                <>
-                    We have expert developers in frameworks like React Native and Flutter for efficient{" "}
-                    <a
-                        href="/services/cross-platform-app-development"
-                        className="text-[#E5195E] underline"
-                    >
-                        development across multiple platforms
-                    </a>{" "}
-                    using a single codebase.
-                </>
-            ),
-            skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"]
-        },
-        {
-            icon: Code,
-            title: "Hybrid App Developers",
-            description: "Experience with technologies like Ionic and Xamarin for web-based mobile applications.",
-            skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"]
-        }
-    ];
+  const navigate = useNavigate();
+  const expertise = [
+    {
+      icon: Apple,
+      title: "iOS Developers",
+      description: (
+        <>
+          To develop iOS apps, you can{" "}
+          <a
+            href="/hire-talent/mobile-app-developers"
+            className="text-[#E5195E] underline"
+          >
+            hire mobile app developers
+          </a>{" "}
+          in India from us, as they are proficient in Swift and Objective-C for
+          crafting robust and stylish mobile applications for iPhone and iPad.
+        </>
+      ),
+      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
+    },
+    {
+      icon: Code,
+      title: "Android Developers",
+      description: (
+        <>
+          Our expert{" "}
+          <a
+            href="/services/android-app-development"
+            className="text-[#E5195E] underline"
+          >
+            Android app developers
+          </a>{" "}
+          in India are skilled in Kotlin and Java to develop applications with
+          extensive features and enhanced scalability for the broader Android
+          ecosystem.
+        </>
+      ),
+      skills: [
+        "Kotlin",
+        "Java",
+        "Android Studio",
+        "Room Database",
+        "Jetpack Compose",
+      ],
+    },
+    {
+      icon: Smartphone,
+      title: "Cross-Platform Developers",
+      description: (
+        <>
+          We have expert developers in frameworks like React Native and Flutter
+          for efficient{" "}
+          <a
+            href="/services/cross-platform-app-development"
+            className="text-[#E5195E] underline"
+          >
+            development across multiple platforms
+          </a>{" "}
+          using a single codebase.
+        </>
+      ),
+      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
+    },
+    {
+      icon: Code,
+      title: "Hybrid App Developers",
+      description:
+        "Our developers are experienced with technologies like Ionic and Xamarin for web-based mobile applications.",
+      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
+    },
+  ];
 
-    const deliverables = [
-        {
-            icon: Target,
-            title: "Intuitive UI/UX",
-            description: "Ensuring a seamless and engaging user experience."
-        },
-        {
-            icon: Zap,
-            title: "High Performance",
-            description: "Optimized apps for speed, responsiveness, and stability."
-        },
-        {
-            icon: Shield,
-            title: "Robust Security",
-            description: "Implementing best practices for data protection and user privacy."
-        },
-        {
-            icon: Code,
-            title: "API Integration",
-            description: "Connecting with backend services and third-party APIs seamlessly."
-        },
-        {
-            icon: Users,
-            title: "Scalability",
-            description: "Building apps that can grow with your user base and feature set."
-        },
-        {
-            icon: CheckCircle,
-            title: "Post-Launch Support",
-            description: "Assistance with updates, maintenance, and performance monitoring."
-        }
-    ];
+  const deliverables = [
+    {
+      icon: Target,
+      title: "Intuitive UI/UX",
+      description:
+        "Our experts ensure a seamless and engaging user experience. ",
+    },
+    {
+      icon: Zap,
+      title: "Enhanced Performance",
+      description:
+        "The mobile applications delivered are speed optimized, responsive, and stable.",
+    },
+    {
+      icon: Shield,
+      title: "Strong Reliability",
+      description:
+        "Our experts implement the best practices for protecting the users’ data and prioritizing user privacy.",
+    },
+    {
+      icon: Code,
+      title: "API Integration",
+      description:
+        "Developers provide smooth integration of third-party APIs within the backend of the application.",
+    },
+    {
+      icon: Users,
+      title: "Application Scalability",
+      description:
+        "Developing applications that can grow according to your user base and feature set.",
+    },
+    {
+      icon: CheckCircle,
+      title: "Post-Launch Support",
+      description:
+        "We offer exclusive support in future app updates, maintenance, and performance monitoring of the application after its launch. ",
+    },
+  ];
 
-    const heroBanner = [
-        {
-            category: "Hire Expert Developers",
-            title: "Hire Mobile App Developers in India",
-            description: "Reach out to our premium mobile app developers in India, specialized in iOS, Android, React native, and Flutter. Develop high-impact and appealing mobile applications that Indian users love.",
-            primaryCTA: {
-                text: "Hire Mobile Developers",
-                href: "/start-a-project",
-                icon: Smartphone
-            },
-            secondaryCTA: {
-                text: "View Developer Profiles",
-                href: "/hire-talent",
-                icon: Users
-            }
-        },
-    ]
+  const heroBanner = [
+    {
+      category: "Hire Expert Developers",
+      title: "Hire Mobile App Developers in India",
+      description:
+        "Reach out to our premium mobile app developers in India, specialized in iOS, Android, React native, and Flutter. Develop high-impact and appealing mobile applications that Indian users love.",
+      primaryCTA: {
+        text: "Hire Mobile Developers",
+        href: "/start-a-project",
+        icon: Smartphone,
+      },
+      secondaryCTA: {
+        text: "View Developer Profiles",
+        href: "/hire-talent",
+        icon: Users,
+      },
+    },
+  ];
 
-    const projectTypes = [
-        "E-commerce & Retail Apps",
-        "On-Demand Services & Delivery Apps",
-        "Social Networking Platforms",
-        "Enterprise & Business Productivity Tools",
-        "Health & Fitness Trackers",
-        "Educational Apps & E-learning Platforms"
-    ];
+  const projectTypes = [
+    "E-Commerce and Retail Apps",
+    "On-demand Services and Delivery Apps",
+    "Social Networking Platforms",
+    "Enterprise and Business Productivity Tools",
+    "Health and Fitness Trackers",
+    "Educational Apps and Ed-tech Platforms",
+  ];
 
-    const testimonials = [
-        {
-            quote: "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
-            author: "Sarah Johnson",
-            role: "CTO, TechStart Inc.",
-            rating: 5
-        },
-        {
-            quote: "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
-            author: "Michael Chen",
-            role: "Product Manager, InnovateNow",
-            rating: 5
-        }
+  const testimonials = [
+    {
+      quote:
+        "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
+      author: "Sarah Johnson",
+      role: "CTO, TechStart Inc.",
+      rating: 5,
+    },
+    {
+      quote:
+        "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
+      author: "Michael Chen",
+      role: "Product Manager, InnovateNow",
+      rating: 5,
+    },
+  ];
+
+  const HireMobileFAQs = () => {
+    const faqs = [
+      {
+        question:
+          "While App Development, Which Development Methodologies Do You Typically Follow?",
+        answer:
+          "Primarily, our core work involves agile methodologies, including Scrum and Kanban. However, our goal is to adapt according to the client's preferences. If they want us to opt for Waterfall or a hybrid approach, our expert developers can efficiently do it. Our Agile process includes planning project sprints, daily standups, reviewing each project sprints and retrospectives. We utilize modern development practices such as Continuous Integration / Continuous Deployment (CI/CD), test-driven development (TDD), and code reviews to guarantee high-performance deliverables.",
+      },
+      {
+        question: " How Much Does It Cost to Build a Custom Mobile Application in India?",
+        answer:
+          "The cost of developing a mobile application entirely depends on various factors. For example, the features you want in the app, the platforms it needs for support, and the complexity of the app infrastructure depends how much it will cost to develop the application. Connect with us for a consultation and quotation. ",
+      },
+      {
+        question: " In the Indian App Development Market, Which Should I Target First?",
+        answer:
+          "Android holds most of the market share in India. However, businesses must launch apps on both iOS and Android simultaneously to gain maximum reach to the target audience.",
+      },
+      {
+        question: "How Do You Handle Application Security?",
+        answer:
+          "We follow data encryption, secure APIs, and ensure that the apps developed by our expert app developers in India follow all data protection laws of India. We also recommend penetration testing. If the app is designed to collect personal data from Indian users, we ensure that the Digital Personal Data Protection Act, 2023, and its rules are adhered to. Moreover, we also deliver apps that follow standard compliance guidelines regarding privacy policy, data rights, and data security. ",
+      },
+      {
+        question: "What Is the Estimated Timeline to Develop My Application in India?",
+        answer:
+          "The development time of a mobile application depends on the complexity, features, and app infrastructure. For simpler apps, our expert developer team in India can make the app ready for launch within 8 to 12 weeks. However, complex, feature-rich enterprise applications can take as long as 16 to 24 weeks. Contact our India team or schedule a consultation to get an estimated project timeline as per your requirements. ",
+      },
+      {
+        question: "Why Should I Choose WDI?",
+        answer:
+          "We put innovation at the heart of our approach, which sets us apart from other developing companies. Since 2018, we have been bringing cutting-edge technologies to the mainstream thanks to our seasoned professionals with deep knowledge of the industry. Over 24 years, we have delivered more than 2000 projects to more than 1000 global clients, by putting our commitments and client-focused approach to deliver tailored solutions to them. Thus, we have been a reliable partner across different sectors and industries in India.",
+      },
+      {
+        question: "How Can You Support the App’s Scalability?",
+        answer:
+          "We focus on building scalable digital solutions using cloud-native infrastructure. Furthermore, we use containerization and microservices to support both horizontal and vertical scaling. We also offer full lifecycle support for the app’s development and help you launch in 6 weeks. ",
+      },
     ];
 
     return (
-        <div className="dark min-h-screen bg-background">
-            {/* <Navigation /> */}
-            <Helmet>
-                {/* Page Title and Meta Description */}
-                <title>Hire Mobile App Developers in India | WDIPL</title>
-                <meta
-                    name="description"
-                    content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
-                />
+      <section className="py-32 bg-black">
+        <div className="container mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center mb-20"
+          >
+            <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+              Frequently Asked Questions
+            </h2>
+          </motion.div>
 
-                {/* Canonical Link */}
-                <link rel="canonical" href="https://www.wdipl.com/services" />
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="max-w-4xl mx-auto"
+          >
+            <Accordion type="single" collapsible className="space-y-8">
+              {faqs.map((faq, index) => (
+                <AccordionItem
+                  key={index}
+                  value={`item-${index}`}
+                  className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
+                >
+                  <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
+                    <span className="font-semibold text-white">
+                      {faq.question}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </motion.div>
+        </div>
+      </section>
+    );
+  };
 
-                {/* Open Graph Tags (for Facebook, LinkedIn) */}
-                <meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
-                <meta
-                    property="og:description"
-                    content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
-                />
-                <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" />
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Hire Mobile App Developers in India | WDIPL</title>
+        <meta
+          name="description"
+          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
+        />
 
-                {/* Twitter Card Tags */}
-                <meta name="twitter:card" content="summary_large_image" />
-                <meta name="twitter:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
-                <meta
-                    name="twitter:description"
-                    content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
-                />
-                <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/hire-talent/mobile-app-developers-india" />
 
-                {/* Social Profiles (using JSON-LD Schema) */}
-                <script type="application/ld+json">
-                    {`
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Hire Mobile App Developers | Expert Talent at WDI"
+        />
+        <meta
+          property="og:description"
+          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
+        />
+        <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="Hire Mobile App Developers | Expert Talent at WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
+        />
+        <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",
@@ -195,123 +331,147 @@ export const HireMobileAppDevelopersIndia = () => {
                                 ]
                               }
                             `}
-                </script>
-            </Helmet>
-            {/* Hero Section with MobileAppVector */}
-            <HireTalentHeroBanner
-                vectorComponent={MobileAppVector}
-                category={heroBanner[0].category}
-                title={heroBanner[0].title}
-                description={heroBanner[0].description}
-                primaryCTA={heroBanner[0].primaryCTA}
-                secondaryCTA={heroBanner[0].secondaryCTA}
-            />
+        </script>
+      </Helmet>
+      {/* Hero Section with MobileAppVector */}
+      <HireTalentHeroBanner
+        vectorComponent={MobileAppVector}
+        category={heroBanner[0].category}
+        title={heroBanner[0].title}
+        description={heroBanner[0].description}
+        primaryCTA={heroBanner[0].primaryCTA}
+        secondaryCTA={heroBanner[0].secondaryCTA}
+      />
 
-            {/* Introduction */}
-            <section className="py-16 bg-card/50">
-                <div className="container mx-auto px-6 lg:px-8">
-                    <div className="max-w-4xl mx-auto text-center">
-                        <p className="text-lg text-muted-foreground leading-relaxed">
-                            Our expert app developers in India can proficiently develop and deliver intuitive, stable, and scalable mobile applications that connect to Indian users and influence business growth in India in varied sectors. We provide a wide range of mobile application solutions, from native iOS and Android apps to cross-platform applications. Combining our proven expertise and your trust, we are here to make your mobile visions a reality.
-                        </p>
-                    </div>
-                </div>
-            </section>
+      {/* Introduction */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              Our expert app developers in India can proficiently develop and
+              deliver intuitive, stable, and scalable mobile applications that
+              connect to Indian users and influence business growth in India in
+              varied sectors. We provide a wide range of mobile application
+              solutions, from native iOS and Android apps to cross-platform
+              applications. Combining our proven expertise and your trust, we
+              are here to make your mobile visions a reality.
+            </p>
+          </div>
+        </div>
+      </section>
 
-            {/* Mobile Development Expertise */}
-            <section className="py-16 bg-background">
-                <div className="container mx-auto px-6 lg:px-8">
-                    <div className="text-center mb-12">
-                        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
-                            Our Proven Expertise in Mobile App Development                        </h2>
-                        <p className="text-muted-foreground max-w-2xl mx-auto">
-                            We provide 360-degree mobile app development expertise across all main platforms and frameworks, with proven outcomes.
-                        </p>
-                    </div>
+      {/* Mobile Development Expertise */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Our Proven Expertise in Mobile App Development{" "}
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              We provide 360-degree mobile app development expertise across all
+              main platforms and frameworks, with proven outcomes.
+            </p>
+          </div>
 
-                    <div className="grid md:grid-cols-2 gap-8">
-                        {expertise.map((area, index) => (
-                            <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
-                                <CardContent className="p-8">
-                                    <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
+          <div className="grid md:grid-cols-2 gap-8">
+            {expertise.map((area, index) => (
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-8">
+                  <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
 
-                                    <h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
-                                        {area.title}
-                                    </h3>
+                  <h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {area.title}
+                  </h3>
 
-                                    <p className="text-muted-foreground mb-6 leading-relaxed">
-                                        {area.description}
-                                    </p>
+                  <p className="text-muted-foreground mb-6 leading-relaxed">
+                    {area.description}
+                  </p>
 
-                                    <div className="flex flex-wrap gap-2">
-                                        {area.skills.map((skill, skillIndex) => (
-                                            <Badge key={skillIndex} variant="outline" className="border-white/20 text-white text-xs">
-                                                {skill}
-                                            </Badge>
-                                        ))}
-                                    </div>
-                                </CardContent>
-                            </Card>
-                        ))}
-                    </div>
-                </div>
-            </section>
+                  <div className="flex flex-wrap gap-2">
+                    {area.skills.map((skill, skillIndex) => (
+                      <Badge
+                        key={skillIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
+                        {skill}
+                      </Badge>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
 
-            {/* What Our Developers Deliver */}
-            <section className="py-16 bg-card/50">
-                <div className="container mx-auto px-6 lg:px-8">
-                    <div className="text-center mb-12">
-                        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
-                            What Our Mobile Developers Deliver
-                        </h2>
-                        <p className="text-muted-foreground max-w-2xl mx-auto">
-                            Comprehensive mobile solutions that exceed expectations
-                        </p>
-                    </div>
+      {/* What Our Developers Deliver */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              What Our Specialist Mobile App Developers in India Deliver
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Delivering all-around mobile solutions in India that go beyond
+              users’ expectations.
+            </p>
+          </div>
 
-                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                        {deliverables.map((item, index) => (
-                            <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
-                                <CardContent className="p-6 text-center">
-                                    <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
-                                    <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
-                                        {item.title}
-                                    </h3>
-                                    <p className="text-muted-foreground text-sm leading-relaxed">
-                                        {item.description}
-                                    </p>
-                                </CardContent>
-                            </Card>
-                        ))}
-                    </div>
-                </div>
-            </section>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {deliverables.map((item, index) => (
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-6 text-center">
+                  <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
+                  <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {item.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {item.description}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
 
-            {/* Ideal Projects */}
-            <section className="py-16 bg-background">
-                <div className="container mx-auto px-6 lg:px-8">
-                    <div className="text-center mb-12">
-                        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
-                            Ideal for Projects Like
-                        </h2>
-                        <p className="text-muted-foreground max-w-2xl mx-auto">
-                            Our mobile developers excel across various industry verticals
-                        </p>
-                    </div>
+      {/* Ideal Projects */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Our Diverse Range of App Development in India
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Thanks to our expert app developers in India, who are efficient in
+              many domains, we have excelled in developing mobile applications
+              across different industry verticals.
+            </p>
+          </div>
 
-                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
-                        {projectTypes.map((project, index) => (
-                            <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
-                                <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
-                                <span className="text-white">{project}</span>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </section>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
+            {projectTypes.map((project, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
+                <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                <span className="text-white">{project}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
-            {/* Testimonials */}
-            {/* <section className="py-16 bg-card/50">
+      {/* Testimonials */}
+      {/* <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
@@ -347,32 +507,45 @@ export const HireMobileAppDevelopersIndia = () => {
         </div>
       </section> */}
 
-            {/* CTA Section */}
-            <section className="py-16 bg-background">
-                <div className="container mx-auto px-6 lg:px-8">
-                    <div className="max-w-4xl mx-auto text-center">
-                        <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
-                            Ready to Build Your Mobile App?
-                        </h2>
-                        <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-                            Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
-                        </p>
-                        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                            <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                                onClick={() => navigate("/start-a-project")}
-                            >
-                                Get Started Today
-                                <ArrowRight className="ml-2 w-4 h-4" />
-                            </Button>
-                            <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
-                                Schedule a Consultation
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            {/* <Footer /> */}
+      {/* CTA Section */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
+              Ready to Get Your Own Mobile App in India?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+              Connect with our specialized mobile app developers in India and
+              transform your dream of accessibility into a powerful mobile
+              experience.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigate("/start-a-project")}
+              >
+                Get Started Today
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
+                Schedule a Consultation
+              </Button>
+            </div>
+          </div>
         </div>
-    );
-};
+      </section>
+
+      {/* FAQs */}
+      <section className="bg-card">
+        <HireMobileFAQs />
+      </section>
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/HireMobileAppDevelopersUk.tsx

@@ -0,0 +1,572 @@
+import React from "react";
+import { Navigation } from "../components/Navigation";
+import { Footer } from "../components/Footer";
+import { motion } from "framer-motion";
+import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
+import { Card, CardContent } from "../components/ui/card";
+import {
+  ArrowRight,
+  Smartphone,
+  Apple,
+  Code,
+  Zap,
+  Shield,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
+import { MobileAppVector } from "@/components/vectors";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
+
+export const HireMobileAppDevelopersUk = () => {
+  const navigate = useNavigate();
+  const expertise = [
+    {
+      icon: Apple,
+      title: "iOS Developers",
+      description: (
+        <>
+          Seasoned experts proficient in Swift and Objective-C for designing strong and seamless applications for iPhone and iPad.
+        </>
+      ),
+      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
+    },
+    {
+      icon: Code,
+      title: "Android Developers",
+      description: (
+        <>
+          Designing scalable apps for the vast Android ecosystem with seasoned skills in Kotlin and Java.
+        </>
+      ),
+      skills: [
+        "Kotlin",
+        "Java",
+        "Android Studio",
+        "Room Database",
+        "Jetpack Compose",
+      ],
+    },
+    {
+      icon: Smartphone,
+      title: "Cross-Platform Developers",
+      description: (
+        <>
+          {/* React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase. */}
+          Seasoned experts making
+          <a
+            href="/services/cross-platform-app-development"
+            className="text-[#E5195E] underline"
+          >
+            efficient development across multiple platforms          </a>
+          with a single codebase, with frameworks like React Native and Flutter.
+
+        </>
+      ),
+      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
+    },
+    {
+      icon: Code,
+      title: "Hybrid App Developers",
+      description: (
+        <>
+          Building better web-based mobile applications with advanced technologies like Ionic and Xamarin.
+
+        </>
+      ),
+      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
+    },
+  ];
+
+  const deliverables = [
+    {
+      icon: Target,
+      title: "Intuitive UI/UX",
+      description:
+        "Guaranteeing a seamless and engaging user experience.",
+    },
+    {
+      icon: Zap,
+      title: "High Performance",
+      description:
+        "Checking apps and clearing bugs to optimise speed, responsiveness, and stability.",
+    },
+    {
+      icon: Shield,
+      title: "Robust Security",
+      description:
+        "Ensuring data protection and user privacy by implementing best practices.",
+    },
+    {
+      icon: Code,
+      title: "API Integration",
+      description:
+        "Supporting seamless connection between backend services and third-party APIs.",
+    },
+    {
+      icon: Users,
+      title: "Scalability",
+      description:
+        "Designing high-performing apps that grow with your user base and feature set.",
+    },
+    {
+      icon: CheckCircle,
+      title: "Post-Launch Assistance",
+      description:
+        (
+          <>
+            {/* React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase. */}
+            Ensuring optimal app performance through{" "}
+            <a
+              href="/solutions/mvp-startup-launch-packages"
+              className="text-[#E5195E] underline"
+            > post-launch updates, maintenance, and regular monitoring.
+            </a>
+
+
+          </>
+        ),
+    },
+  ];
+
+  const heroBanner = [
+    {
+      category: "Hire Expert Developers",
+      title: "Transform Business Ideas into Functional End Products with Mobile App Developers",
+      description:
+        "Build high-performing applications with the help of mobile app developers in the UK, specialising in iOS, Android, React Native, and Flutter. Get going with efficient and engaging mobile applications that users love and find easy to use!",
+      primaryCTA: {
+        text: "Hire Mobile Developers",
+        href: "/start-a-project",
+        icon: Smartphone,
+      },
+      secondaryCTA: {
+        text: "View Developer Profiles",
+        href: "/hire-talent",
+        icon: Users,
+      },
+    },
+  ];
+
+  const projectTypes = [
+    "E-Commerce and Retail Apps",
+    "On-demand Services and Delivery Apps",
+    "Social Networking Platforms",
+    "Enterprise and Business Productivity Tools",
+    "Health and Fitness Trackers",
+    "Educational Apps & E-learning Platforms",
+  ];
+
+  const testimonials = [
+    {
+      quote:
+        "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
+      author: "Sarah Johnson",
+      role: "CTO, TechStart Inc.",
+      rating: 5,
+    },
+    {
+      quote:
+        "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
+      author: "Michael Chen",
+      role: "Product Manager, InnovateNow",
+      rating: 5,
+    },
+  ];
+
+  const HireMobileFAQs = () => {
+    const faqs = [
+      {
+        question:
+          "How do I hire your app developers in the UK?",
+        answer:
+          "The process of hiring our app developers is fairly simple. Just reach out to us, discuss your vision, and we will take over the rest of the process. ",
+      },
+      {
+        question: "What is the cost of hiring mobile app developers?",
+        answer:
+          "The charges for hiring our mobile app developers aren’t fixed. This varies depending on the type of app that you are developing and other specifics.  ",
+      },
+      {
+        question: "Are your app developers skilled in complying with regulatory standards?",
+        answer:
+          "Certainly. Our app developers in the UK are skilled in complying with regulatory standards. This is why our designed 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). ",
+      },
+      {
+        question: "What is the best way to guarantee security and quality in outsourced app development?",
+        answer:
+          "WDI guarantees security and quality in outsourced app development through a strict QA procedure. We use secure coding techniques and maintain constant transparency with frequent updates, testing, and version control.  ",
+      },
+      {
+        question: "Can you develop a mobile app for a dual-screen system?",
+        answer:
+          "Yes. Our app developers in the UK are experienced in building all types of mobile apps. They utilise a range of solutions to design a range of mobile apps, including those for dual-screen smartphones. ",
+      },
+      {
+        question: "Is outsourcing mobile app developers a good choice?  ",
+        answer:
+          "Definitely. Outsourcing an app developer in the UK helps with cost reduction. This also lets you access worldwide talent without spending a huge sum of your budget. ",
+      },
+      {
+        question: "How long does it take for mobile app developers to develop an app?",
+        answer:
+          "The time required for mobile app developers to develop an app depends on the specifications of the app. Simpler apps generally take 8 to 12 weeks. On the other hand, complex enterprise apps take 16 to 24 weeks. ",
+      },
+      {
+        question: "Will your app developers guide me with monetising my app?",
+        answer:
+          "Certainly. Our team of app developers in the UK guides you in choosing among common monetisation processes like in-app ads, in-app purchases, freemium models, and subscription-based models. ",
+      },
+    ];
+
+    return (
+      <section className="py-32 bg-black">
+        <div className="container mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center mb-20"
+          >
+            <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+              Frequently Asked Questions
+            </h2>
+          </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="max-w-4xl mx-auto"
+          >
+            <Accordion type="single" collapsible className="space-y-8">
+              {faqs.map((faq, index) => (
+                <AccordionItem
+                  key={index}
+                  value={`item-${index}`}
+                  className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
+                >
+                  <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
+                    <span className="font-semibold text-white">
+                      {faq.question}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </motion.div>
+        </div>
+      </section>
+    );
+  };
+
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>App Developers in UK | Hire Mobile App Developers</title>
+        <meta
+          name="description"
+          content="Hire professional mobile app developers in the UK from WDIPL. Build high-performance Android and iOS apps with experienced development teams."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/hire-talent/mobile-app-developers-uk" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="App Developers in UK | Hire Mobile App Developers"
+        />
+        <meta
+          property="og:description"
+          content="Hire professional mobile app developers in the UK from WDIPL. Build high-performance Android and iOS apps with experienced development teams."
+        />
+        <meta property="og:url" content="https://www.wdipl.com/hire-talent/mobile-app-developers-uk" />
+        <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="Hire Mobile App Developers | Expert Talent at WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
+        />
+        <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>
+      {/* Hero Section with MobileAppVector */}
+      <HireTalentHeroBanner
+        vectorComponent={MobileAppVector}
+        category={heroBanner[0].category}
+        title={heroBanner[0].title}
+        description={heroBanner[0].description}
+        primaryCTA={heroBanner[0].primaryCTA}
+        secondaryCTA={heroBanner[0].secondaryCTA}
+      />
+
+      {/* Introduction */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Seasoned App Developers in the UK for High-Performance App Development            </h2>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+
+
+              We have a team of seasoned app developers in the UK skilled at building intuitive, scalable, and secure mobile applications. Our apps are designed to seamlessly engage users and help with business growth. From native <a
+                href="/services/mobile-app-development"
+                className="text-[#E5195E] underline"
+              >iOS and Android apps</a>  to cross-platform solutions, we bring your mobile vision to life with expertise in a wide range of solutions.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Mobile Development Expertise */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Our Mobile App Development Expertise{" "}
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              {/* With years of experience, the app developers of our company are skilled in all major platforms and frameworks. */}
+              {/* With years of experience, the{" "}
+              <a
+                href="/services/mobile-app-development"
+                className="text-[#E5195E] underline"
+              >
+                app developers
+              </a>{" "}
+              of our company are skilled in all major platforms and frameworks. */}
+
+              As one of the seasoned app development companies, our app developers in the UK are skilled in all major platforms and frameworks.
+
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {expertise.map((area, index) => (
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-8">
+                  <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
+
+                  <h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {area.title}
+                  </h3>
+
+                  <p className="text-muted-foreground mb-6 leading-relaxed">
+                    {area.description}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2">
+                    {/* {area.skills.map((skill, skillIndex) => (
+                      <Badge
+                        key={skillIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
+                        {skill}
+                      </Badge>
+                    ))} */}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What Our Developers Deliver */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              What Sets Apart Our Mobile App Developers in the UK
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Our mobile app developers in the UK are experts in comprehensive mobile solutions, equipped with skills that set them apart from others.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {deliverables.map((item, index) => (
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-6 text-center">
+                  <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
+                  <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {item.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {item.description}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ideal Projects */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Ideal for Projects Like
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Our team of mobile app developers in the UK excels across various industry verticals
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
+            {projectTypes.map((project, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
+                <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                <span className="text-white">{project}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      {/* <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              What Our Clients Say
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Success stories from satisfied clients
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+            {testimonials.map((testimonial, index) => (
+              <Card key={index} className="bg-background/50 border-white/10">
+                <CardContent className="p-8">
+                  <div className="flex gap-1 mb-4">
+                    {[...Array(testimonial.rating)].map((_, i) => (
+                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                    ))}
+                  </div>
+                  
+                  <p className="text-muted-foreground mb-6 leading-relaxed italic">
+                    "{testimonial.quote}"
+                  </p>
+                  
+                  <div className="border-t border-white/10 pt-6">
+                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section> */}
+
+      {/* CTA Section */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
+              Ready to Design a High-Performing Mobile App?</h2>
+            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+              Get in touch with our team of seasoned app developers in the UK and give your vision the shape of a powerful mobile experience with us.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigate("/start-a-project")}
+              >
+                Get Started Today
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
+                Schedule a Consultation
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
+      >
+        <span className="text-white">We serve customers </span>
+        <span className="text-[#E5195E]">globally</span>
+      </motion.h2>
+      {/* FAQs */}
+      <section className="bg-card">
+        <HireMobileFAQs />
+      </section>
+
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/HireMobileAppDevelopersUsa.tsx

@@ -0,0 +1,550 @@
+import React from "react";
+import { Navigation } from "../components/Navigation";
+import { Footer } from "../components/Footer";
+import { motion } from "framer-motion";
+import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
+import { Card, CardContent } from "../components/ui/card";
+import {
+  ArrowRight,
+  Smartphone,
+  Apple,
+  Code,
+  Zap,
+  Shield,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
+import { MobileAppVector } from "@/components/vectors";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
+
+export const HireMobileAppDevelopersUsa = () => {
+  const navigate = useNavigate();
+  const expertise = [
+    {
+      icon: Apple,
+      title: "iOS Developers",
+      description: (
+        <>
+          Seasoned expertise in Swift and Objective-C, capable of designing robust iPhone and iPad applications.
+        </>
+      ),
+      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
+    },
+    {
+      icon: Code,
+      title: "Android Developers",
+      description: (
+        <>
+          Experts in using Kotlin and Java for building and designing scalable apps for the vast Android ecosystem.
+        </>
+      ),
+      skills: [
+        "Kotlin",
+        "Java",
+        "Android Studio",
+        "Room Database",
+        "Jetpack Compose",
+      ],
+    },
+    {
+      icon: Smartphone,
+      title: "Cross-Platform Developers",
+      description: (
+        <>
+          React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase.
+        </>
+      ),
+      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
+    },
+    {
+      icon: Code,
+      title: "Hybrid App Developers",
+      description: (
+        <>
+          Seasoned developers with skills in advanced technologies like Ionic and Xamarin to build better{" "}
+          <a
+            href="/services/mobile-app-development"
+            className="text-[#E5195E] underline"
+          >
+            web-based mobile applications.
+          </a>{" "}
+
+        </>
+      ),
+      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
+    },
+  ];
+
+  const deliverables = [
+    {
+      icon: Target,
+      title: "Intuitive UI/UX",
+      description:
+        "Crafting a seamless and engaging user experience.",
+    },
+    {
+      icon: Zap,
+      title: "Uninterrupted Performance",
+      description:
+        "Highly efficient apps that optimize speed, responsiveness, and stability.",
+    },
+    {
+      icon: Shield,
+      title: "Foolproof Security",
+      description:
+        "Guaranteeing data protection and user privacy with the implementation of best practices",
+    },
+    {
+      icon: Code,
+      title: "API Integration",
+      description:
+        "Creating a seamless connection between third-party APIs and backend services.",
+    },
+    {
+      icon: Users,
+      title: "Scalability",
+      description:
+        "Building seamless apps that grow with your user base and feature set.",
+    },
+    {
+      icon: CheckCircle,
+      title: "Post-Launch Assistance",
+      description:
+        "Regular support with post-launch updates, maintenance, and monitoring for optimal app performance. ",
+    },
+  ];
+
+  const heroBanner = [
+    {
+      category: "Hire Expert Developers",
+      title: "Turning Vision into Scalable Products with Mobile App Developers",
+      description:
+        "Design seamless applications with the help of mobile app developers, specializing in iOS, Android, React Native, and Flutter. Hire mobile app developers in the USA and build high-performing and engaging mobile applications that users love.",
+      primaryCTA: {
+        text: "Hire Mobile Developers",
+        href: "/start-a-project",
+        icon: Smartphone,
+      },
+      secondaryCTA: {
+        text: "View Developer Profiles",
+        href: "/hire-talent",
+        icon: Users,
+      },
+    },
+  ];
+
+  const projectTypes = [
+    "E-Commerce and Retail Apps",
+    "On-demand Services and Delivery Apps",
+    "Social Networking Platforms",
+    "Enterprise and Business Productivity Tools",
+    "Health and Fitness Trackers",
+    "Educational Apps and Ed-tech Platforms",
+  ];
+
+  const testimonials = [
+    {
+      quote:
+        "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
+      author: "Sarah Johnson",
+      role: "CTO, TechStart Inc.",
+      rating: 5,
+    },
+    {
+      quote:
+        "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
+      author: "Michael Chen",
+      role: "Product Manager, InnovateNow",
+      rating: 5,
+    },
+  ];
+
+  const HireMobileFAQs = () => {
+    const faqs = [
+      {
+        question:
+          "What is the process of hiring mobile app developers in the USA from you?",
+        answer:
+          "The process of hiring our app developers is fairly simple. Just reach out to us, discuss your vision, and we will take over the rest of the process.",
+      },
+      {
+        question: "Are your app developers skilled in complying with regulatory standards?",
+        answer:
+          "Certainly. Our app developers are aware of the importance of complying with regulatory standards. The apps that we design and develop 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. It also follows standard compliances for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security. ",
+      },
+      {
+        question: "What is the best way to guarantee security and quality in outsourced app development?",
+        answer:
+          "WDI guarantees security and quality in outsourced app development through a strict QA procedure. We use secure coding techniques and maintain constant transparency with frequent updates, testing, and version control. ",
+      },
+      {
+        question: "What are the charges of hiring mobile app developers in the USA?",
+        answer:
+          "We do not have any fixed charges for our mobile app developers. The cost of our services depends on the app that you are developing with the help of our experts and its specifics. ",
+      },
+      {
+        question: "Will hiring mobile app developers from you be ideal to develop a mobile app for a dual-screen system?",
+        answer:
+          "Certainly, our experts utilize different solutions to design a range of mobile apps, including those for dual-screen smartphones. So, hiring mobile app developers in the USA from us will be ideal because we are skilled in building all types of mobile apps. ",
+      },
+      {
+        question: "Is it profitable to outsource mobile app developers? ",
+        answer:
+          "Definitely, outsourcing app developers is great for cost reduction. This allows you to design high-performing apps with expert assistance at rates that do not cause a dent in your budget.",
+      },
+      {
+        question: "How long will your app developers take to develop an app?",
+        answer:
+          "The time range for developing an app with the help of our experts varies depending on the type of app. Simpler apps take around 8 to 12 weeks, but complex enterprise apps take 16 to 24 weeks. ",
+      },
+      {
+        question: "Can the app developers help me with monetizing my app?",
+        answer:
+          "Certainly, our app developers are focused on offering overall assistance. We help you choose from common monetization processes like in-app ads, in-app purchases, freemium models, and subscription-based models. ",
+      },
+    ];
+
+    return (
+      <section className="py-32 bg-black">
+        <div className="container mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+            className="text-center mb-20"
+          >
+            <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+              Frequently Asked Questions
+            </h2>
+          </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="max-w-4xl mx-auto"
+          >
+            <Accordion type="single" collapsible className="space-y-8">
+              {faqs.map((faq, index) => (
+                <AccordionItem
+                  key={index}
+                  value={`item-${index}`}
+                  className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
+                >
+                  <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
+                    <span className="font-semibold text-white">
+                      {faq.question}
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </motion.div>
+        </div>
+      </section>
+    );
+  };
+
+  return (
+    <div className="dark min-h-screen bg-background">
+      {/* <Navigation /> */}
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Hire App Developers in USA | Professional Mobile App Developers</title>
+        <meta
+          name="description"
+          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/hire-talent/mobile-app-developers-usa" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Hire App Developers in USA | Professional Mobile App Developers"
+        />
+        <meta
+          property="og:description"
+          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
+        />
+        <meta property="og:url" content="https://www.wdipl.com/hire-talent/mobile-app-developers-usa" />
+        <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="Hire Mobile App Developers | Expert Talent at WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
+        />
+        <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>
+      {/* Hero Section with MobileAppVector */}
+      <HireTalentHeroBanner
+        vectorComponent={MobileAppVector}
+        category={heroBanner[0].category}
+        title={heroBanner[0].title}
+        description={heroBanner[0].description}
+        primaryCTA={heroBanner[0].primaryCTA}
+        secondaryCTA={heroBanner[0].secondaryCTA}
+      />
+
+      {/* Introduction */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Trained App Developers in the USA for Seamless App Development
+            </h2>
+            <p className="text-lg text-muted-foreground leading-relaxed">
+              We offer our clients the assistance of skilled app developers, capable of building intuitive, scalable, and secure mobile applications. We design apps that seamlessly engage users and help with growth in their industry. From native iOS and Android apps to cross-platform solutions, hiring mobile app developers in the USA from us is ideal to turn ideation into a scalable reality.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Mobile Development Expertise */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Our Mobile App Development Proficiency{" "}
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              {/* With years of experience, the app developers of our company are skilled in all major platforms and frameworks. */}
+              With years of experience, the{" "}
+              <a
+                href="/services/mobile-app-development"
+                className="text-[#E5195E] underline"
+              >
+                app developers
+              </a>{" "}
+              of our company are skilled in all major platforms and frameworks.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {expertise.map((area, index) => (
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-8">
+                  <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
+
+                  <h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {area.title}
+                  </h3>
+
+                  <p className="text-muted-foreground mb-6 leading-relaxed">
+                    {area.description}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2">
+                    {/* {area.skills.map((skill, skillIndex) => (
+                      <Badge
+                        key={skillIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
+                        {skill}
+                      </Badge>
+                    ))} */}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What Our Developers Deliver */}
+      <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Why Our Mobile App Developers in the USA Stand Out            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              One of the major factors behind hiring mobile app developers in the USA is their expertise in comprehensive mobile solutions. It is the skills they are equipped with that set them apart from others.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {deliverables.map((item, index) => (
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
+                <CardContent className="p-6 text-center">
+                  <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
+                  <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
+                    {item.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {item.description}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ideal Projects */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              Ideal for Projects Like
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Hiring mobile app developers in the USA from us lets you access the assistance of experts who excel across various industry verticals:
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
+            {projectTypes.map((project, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
+                <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
+                <span className="text-white">{project}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      {/* <section className="py-16 bg-card/50">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
+              What Our Clients Say
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Success stories from satisfied clients
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+            {testimonials.map((testimonial, index) => (
+              <Card key={index} className="bg-background/50 border-white/10">
+                <CardContent className="p-8">
+                  <div className="flex gap-1 mb-4">
+                    {[...Array(testimonial.rating)].map((_, i) => (
+                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                    ))}
+                  </div>
+                  
+                  <p className="text-muted-foreground mb-6 leading-relaxed italic">
+                    "{testimonial.quote}"
+                  </p>
+                  
+                  <div className="border-t border-white/10 pt-6">
+                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section> */}
+
+      {/* CTA Section */}
+      <section className="py-16 bg-background">
+        <div className="container mx-auto px-6 lg:px-8">
+          <div className="max-w-4xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
+              Looking to Build a High-Performing Mobile App?            </h2>
+            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+              Hire mobile app developers in the USA from us to turn your vision into the shape of a powerful mobile experience with us.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigate("/start-a-project")}
+              >
+                Get Started Today
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
+                Schedule a Consultation
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
+      >
+        <span className="text-white">We serve customers </span>
+        <span className="text-[#E5195E]">globally</span>
+      </motion.h2>
+      {/* FAQs */}
+      <section className="bg-card">
+        <HireMobileFAQs />
+      </section>
+
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

pages/HireUIUXDesigners.tsx

@@ -103,19 +103,20 @@ export const HireUIUXDesigners = () => {
     {
       category: "Hire Expert Designers",
       title: "Hire UI/UX Designers",
-      description: "Get access to expert UI/UX designers who create intuitive, beautiful, and user-centered digital experiences. Transform your ideas into engaging designs that users love and convert.",
+      description:
+        "Get access to expert UI/UX designers who create intuitive, beautiful, and user‑centered digital experiences. Transform your ideas into engaging, AI‑powered designs that users love and convert.",
       primaryCTA: {
         text: "Hire UI/UX Designers",
         href: "/start-a-project",
-        icon: Palette
+        icon: Palette,
       },
       secondaryCTA: {
         text: "View Designer Portfolios",
         href: "/hire-talent",
-        icon: Users
-      }
+        icon: Users,
+      },
     },
-  ]
+  ];
 
   const deliverables = [
     {
@@ -211,26 +212,41 @@ export const HireUIUXDesigners = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/hire-talent/ui-ux-designers" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/hire-talent/ui-ux-designers"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Hire UI/UX Designers for Your Project | WDI" />
+        <meta
+          property="og:title"
+          content="Hire UI/UX Designers for Your Project | WDI"
+        />
         <meta
           property="og:description"
           content="Engage top UI/UX designers from WDI for stunning, user-centric web and app interfaces. Elevate your digital products with award-winning design expertise."
         />
         <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="Hire UI/UX Designers for Your Project | WDI" />
+        <meta
+          name="twitter:title"
+          content="Hire UI/UX Designers for Your Project | WDI"
+        />
         <meta
           name="twitter:description"
           content="Engage top UI/UX designers from WDI for stunning, user-centric web and app interfaces. Elevate your digital products with award-winning design expertise."
         />
-        <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">
@@ -283,7 +299,8 @@ export const HireUIUXDesigners = () => {
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
               Our designers are proficient in the latest design tools and
-              methodologies
+              AI‑powered design methodologies, crafting pixel‑perfect UI/UX for
+              AI mobile and web applications.
             </p>
           </div>
 
@@ -323,8 +340,9 @@ export const HireUIUXDesigners = () => {
               Our UI/UX Design Expertise
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive design skills for creating exceptional user
-              experiences
+              Comprehensive AI‑powered design skills for creating exceptional
+              user experiences across AI mobile apps and responsive web
+              interfaces.
             </p>
           </div>
 
@@ -368,7 +386,8 @@ export const HireUIUXDesigners = () => {
               What Our UI/UX Designers Deliver
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Design solutions that drive engagement and business success
+              Design solutions that drive engagement and business success with
+              AI‑powered, user‑centered mobile and web experiences.
             </p>
           </div>
 
@@ -401,7 +420,9 @@ export const HireUIUXDesigners = () => {
               Ideal for Projects Requiring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Design expertise that transforms user experiences
+              Design expertise that transforms user experiences with AI‑powered,
+              intuitive interfaces for AI mobile apps and responsive web
+              platforms.
             </p>
           </div>
 
@@ -470,7 +491,7 @@ export const HireUIUXDesigners = () => {
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
               Connect with our UI/UX designers and transform your digital
-              products into engaging user experiences.
+              products into engaging, AI‑powered user experiences.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

pages/MVPStartupLaunchPackages.tsx

@@ -56,26 +56,41 @@ const MVPStartupLaunchPackagesHero = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/solutions/mvp-startup-launch-packages" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/solutions/mvp-startup-launch-packages"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="MVP & Startup Launch Packages for Growth | WDI" />
+        <meta
+          property="og:title"
+          content="MVP & Startup Launch Packages for Growth | WDI"
+        />
         <meta
           property="og:description"
           content="Launch faster with WDI’s MVP & Startup Launch Packages. Validate ideas, reduce time-to-market, and build scalable products with expert startup support."
         />
         <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="MVP & Startup Launch Packages for Growth | WDI" />
+        <meta
+          name="twitter:title"
+          content="MVP & Startup Launch Packages for Growth | WDI"
+        />
         <meta
           name="twitter:description"
           content="Launch faster with WDI’s MVP & Startup Launch Packages. Validate ideas, reduce time-to-market, and build scalable products with expert startup support."
         />
-        <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">
@@ -121,7 +136,7 @@ const MVPStartupLaunchPackagesHero = () => {
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                 Rapidly launch your innovative startup idea with a lean,
-                functional Minimum Viable Product, validated for market fit.
+                functional Minimum Viable Product, validated for market fit
               </p>
             </div>
 
@@ -510,6 +525,10 @@ const MVPStartupChallenge = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
               The Startup Dilemma: Launching Fast, Learning Faster
             </h2>
+            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+              Build AI mobile and web development solutions that validate,
+              iterate, and scale with lean MVPs and AI‑powered features.
+            </p>
           </motion.div>
 
           <div className="grid md:grid-cols-2 gap-12 items-center">
@@ -677,6 +696,10 @@ const MVPStartupIncludes = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Key Components of Our MVP Launch Package
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Lean, AI‑powered mobile and web development solutions to launch
+            fast, validate quickly, and scale smarter.
+          </p>
         </motion.div>
 
         <motion.div
@@ -799,6 +822,10 @@ const MVPStartupBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Achieve Your Goals with Our MVP Solution
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Launch AI‑powered mobile and web applications faster, validate
+            market fit, and scale with lean MVP development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -932,6 +959,10 @@ const MVPStartupProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Streamlined MVP Development Process
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            From concept to AI‑powered mobile and web applications, we build
+            lean MVPs that launch fast, learn sooner, and scale smarter.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -950,12 +981,14 @@ const MVPStartupProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1124,6 +1157,10 @@ const MVPStartupCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Startups That Soared with Our MVPs
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Real founders, real growth AI mobile and web development solutions
+            that launched fast, validated quickly, and scaled smarter.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1249,7 +1286,8 @@ const MVPStartupInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Start building your future with a clear, validated roadmap.
+              Start building your future with a clear, validated roadmap for
+              AI‑powered mobile and web applications.
             </p>
 
             <ShimmerButton
@@ -1272,24 +1310,24 @@ const MVPStartupInlineCTA = () => {
 const MVPStartupFAQs = () => {
   const faqs = [
     {
-      question: "What's the typical timeline for an MVP project?",
+      question: "What’s the typical timeline for an MVP project?",
       answer:
-        "Our typical MVP timeline ranges from 6-12 weeks, depending on complexity and feature scope. A basic MVP with 3-5 core features usually takes 6-8 weeks, while more complex MVPs with advanced functionality may take 10-12 weeks. Our process includes: Discovery & Strategy (1-2 weeks), Rapid Prototyping (1-2 weeks), Agile Development (4-6 weeks), Testing & Refinement (1-2 weeks), and Launch preparation (1 week). We work in 2-week sprints to ensure continuous progress and allow for feedback incorporation throughout the development process.",
+        "Our typical MVP timeline ranges from 6–12 weeks, depending on complexity and feature scope. A basic MVP with 3–5 core features usually takes 6–8 weeks, while more complex MVPs with advanced functionality may take 10–12 weeks.\n\nOur process includes: Discovery & Strategy (1–2 weeks), Rapid Prototyping (1–2 weeks), Agile Development (4–6 weeks), Testing & Refinement (1–2 weeks), and Launch preparation (1 week). We work in 2-week sprints to ensure continuous progress and allow for feedback incorporation throughout the development process.",
     },
     {
       question: "How do you help us define the core features for our MVP?",
       answer:
-        "We use a structured approach to identify your MVP's core features: Discovery workshops to understand your vision and target users, competitive analysis to identify market gaps and opportunities, user story mapping to prioritize features based on user value, MoSCoW prioritization (Must have, Should have, Could have, Won't have), and validation techniques including user interviews and prototype testing. We help you focus on the 20% of features that will deliver 80% of the value, ensuring your MVP addresses the core problem while remaining lean and cost-effective. Our goal is to build the minimum feature set that proves your concept and attracts early users.",
+        "We use a structured approach to identify your MVP’s core features: discovery workshops to understand your vision and target users, competitive analysis to identify market gaps and opportunities, user story mapping to prioritize features based on user value, MoSCoW prioritization (Must have, Should have, Could have, Won’t have), and validation techniques including user interviews and prototype testing.\n\nWe help you focus on the 20% of features that will deliver 80% of the value, ensuring your MVP addresses the core problem while remaining lean and cost-effective. Our goal is to build the minimum feature set that proves your concept and attracts early users.",
     },
     {
       question: "Can your MVP scale into a full product?",
       answer:
-        "Absolutely! Our MVPs are designed with scalability in mind. We use: Modern, scalable technology stacks that can grow with your business, modular architecture that allows for easy feature additions, cloud infrastructure that scales automatically with user growth, clean code practices and documentation for future development, and database design that handles increasing data volumes. We provide a technical roadmap for scaling beyond the MVP, including performance optimization strategies, feature expansion plans, and infrastructure scaling recommendations. Many of our MVP clients have successfully scaled their products to serve thousands of users and secure significant funding rounds.",
+        "Absolutely. Our MVPs are designed with scalability in mind. We use modern, scalable technology stacks that can grow with your business, modular architecture that allows for easy feature additions, cloud infrastructure that scales automatically with user growth, clean code practices and documentation for future development, and database design that handles increasing data volumes.\n\nWe provide a technical roadmap for scaling beyond the MVP, including performance optimization strategies, feature expansion plans, and infrastructure scaling recommendations. Many MVPs successfully scale to support thousands of users and evolve into full-scale products.",
     },
     {
-      question: "What's included in post-launch support for MVPs?",
+      question: "What’s included in post-launch support for MVPs?",
       answer:
-        "Our post-launch support includes: Critical bug fixes and performance issues resolution (30 days), basic technical support for deployment and hosting issues, analytics setup and initial data interpretation, user feedback collection and analysis guidance, and consultation on next development priorities. Extended support packages are available including: ongoing maintenance and updates, feature enhancement development, performance monitoring and optimization, user acquisition and retention analytics, and technical scaling guidance. We also offer product strategy sessions to help you interpret user feedback and plan your product roadmap based on real user data and market validation results.",
+        "Our post-launch support includes critical bug fixes and performance issues resolution (30 days), basic technical support for deployment and hosting issues, analytics setup and initial data interpretation, user feedback collection and analysis guidance, and consultation on next development priorities.\n\nExtended support packages are available, including ongoing maintenance and updates, feature enhancement development, performance monitoring and optimization, user acquisition and retention analytics, and technical scaling guidance. We also offer product strategy sessions to help you interpret user feedback and plan your roadmap based on real user data and validation results.",
     },
   ];
 
@@ -1482,9 +1520,7 @@ export const MVPStartupLaunchPackages = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

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,44 +33,61 @@ 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
+// 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 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.",
+      );
     }
   }, []);
 
@@ -810,4 +879,4 @@ export const MobileAppDevelopment = () => {
       {/* <Footer /> */}
     </div>
   );
-};
+};

pages/MobileAppDevelopmentIndia.tsx

@@ -0,0 +1,897 @@
+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 REQUIREMENTS
+const HeroWithCTA = () => {
+  const navigate = useNavigate();
+  return (
+    <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>
+        <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"
+        />
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <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"
+        />
+
+        {/* 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 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.
+              </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">
+            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>
+        </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">
+            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!
+          </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:
+        "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: (
+        <>
+          Innovative{" "}
+          <a
+            href="/services/android-app-development"
+            className="text-[#E5195E] underline"
+          >
+            Android apps
+          </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",
+    },
+    {
+      title: "Cross-Platform Development",
+      icon: Layers,
+      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",
+    },
+    {
+      title: "Progressive Web Apps",
+      icon: Globe,
+      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",
+    },
+  ];
+
+  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 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.
+          </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 Architect </span>
+              <span className="text-[#E5195E]">Intelligence</span>
+              <span className="text-foreground"> Into Your App</span>
+            </h2>
+
+            {/* 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.
+            </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 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">
+            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>
+
+        <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:
+      "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:
+      "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: "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:
+      "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: "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: "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: "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.",
+  },
+];
+
+// 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";
+
+    // 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="India" />
+
+      {/* Hire Developers */}
+      <HireDevelopersSection />
+
+      {/* Final CTA */}
+      <InlineCTA />
+
+      {/* FAQ Section */}
+      <FAQSection faqs={mobileAppFAQs} />
+
+      {/* <Footer /> */}
+    </div>
+  );
+};

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>
+  );
+};

pages/NLPTextAnalytics.tsx

@@ -56,33 +56,50 @@ const NLPHeroWithCTA = () => {
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
         {/* Page Title and Meta Description */}
-        <title>NLP & Text Analytics | Language AI & Text Intelligence | WDI</title>
+        <title>
+          NLP & Text Analytics | Language AI & Text Intelligence | WDI
+        </title>
         <meta
           name="description"
           content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/nlp-text-analytics" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/nlp-text-analytics"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="NLP & Text Analytics | Language AI & Text Intelligence | WDI" />
+        <meta
+          property="og:title"
+          content="NLP & Text Analytics | Language AI & Text Intelligence | WDI"
+        />
         <meta
           property="og:description"
           content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
         />
         <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="NLP & Text Analytics | Language AI & Text Intelligence | WDI" />
+        <meta
+          name="twitter:title"
+          content="NLP & Text Analytics | Language AI & Text Intelligence | WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
         />
-        <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">
@@ -125,9 +142,8 @@ const NLPHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Extracting meaningful insights, sentiments, and structures from
-                unstructured text data to power intelligent applications and
-                informed decisions.
+                Extract meaningful insights from unstructured text to power
+                AI‑driven app development services and informed decisions.
               </p>
             </div>
 
@@ -558,6 +574,10 @@ const NLPBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Unlock Insights from Your Textual Data
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Transform unstructured text into actionable intelligence for AI
+            mobile and web development solutions.
+          </p>
         </motion.div>
 
         <motion.div
@@ -693,6 +713,10 @@ const NLPProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Approach to Text Intelligence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, AI‑driven strategy that turns unstructured text into
+            actionable insights for AI‑powered mobile and web applications.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -711,12 +735,14 @@ const NLPProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -869,6 +895,10 @@ const NLPServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized NLP & Text Analytics Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Tailored NLP and text‑analytics solutions that deliver AI‑driven app
+            development services across mobile and web platforms.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1000,7 +1030,8 @@ const NLPTechStack = () => {
             NLP & Text Analytics Tech Stack
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Leveraging cutting-edge NLP libraries and deep learning models.
+            Leveraging cutting‑edge NLP libraries and deep learning models to
+            power AI mobile and web development solutions.
           </p>
         </motion.div>
 
@@ -1034,9 +1065,10 @@ const NLPTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                      }`}
+                    }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1105,6 +1137,10 @@ const NLPCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Text Analytics Driving Business Intelligence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Transform unstructured text into structured signals that power AI
+            mobile and web development solutions and smarter business decisions.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1230,8 +1266,8 @@ const NLPInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Transform unstructured text into actionable insights and
-              intelligent applications.
+              Transform unstructured text into actionable insights and AI‑driven
+              app development services.
             </p>
 
             <ShimmerButton
@@ -1341,8 +1377,8 @@ const HireNLPEngineers = () => {
             Access Expert NLP Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialists in natural language processing, text mining,
-            and conversational AI for your data-driven projects.
+            Hire specialists in natural language processing, text mining, and
+            conversational AI to power AI mobile and web development solutions
           </p>
         </motion.div>
 
@@ -1436,22 +1472,22 @@ const NLPFAQs = () => {
     {
       question: "What types of text data can be analyzed?",
       answer:
-        "Our NLP solutions can analyze virtually any type of textual data including: customer reviews and feedback, social media posts and comments, emails and support tickets, documents and reports, survey responses, news articles and blogs, legal documents, medical records, chat logs and transcripts, product descriptions, and web content. We handle structured text (forms, databases), semi-structured text (emails, social media), and unstructured text (free-form documents). Our systems support multiple languages and can process data from various sources including APIs, databases, files, and real-time streams. We also work with domain-specific text like technical documentation, financial reports, and scientific literature.",
+        "Our NLP solutions can analyze customer reviews, feedback, social media posts, emails, support tickets, documents, reports, surveys, news articles, legal documents, medical records, chat logs, product descriptions, and web content. We handle structured, semi-structured, and unstructured text across multiple languages and sources, supporting AI-driven app development services and data-driven workflows.",
     },
     {
       question: "How accurate is sentiment analysis?",
       answer:
-        "Sentiment analysis accuracy varies by domain and complexity, but our systems typically achieve 85-95% accuracy for general sentiment classification. Accuracy depends on several factors: text quality and clarity, domain specificity (finance vs. social media), language and cultural context, and model training data quality. We provide confidence scores with each prediction and can fine-tune models for specific industries or use cases. For binary sentiment (positive/negative), we often achieve 90%+ accuracy. Multi-class sentiment (positive/neutral/negative) typically achieves 85-90%. We also offer emotion detection, aspect-based sentiment analysis, and sarcasm detection. Our models are continuously improved through active learning and domain adaptation techniques.",
+        "Sentiment analysis accuracy typically falls in the 85–95% range for general classification, depending on text quality, domain, language, and model training.\n\nWe provide confidence scores, fine-tune models for specific industries, and support binary, multi-class, and aspect-based sentiment, plus emotion detection and sarcasm handling. Our models keep improving via active learning and domain adaptation for consistent AI-powered insights.",
     },
     {
       question: "Can NLP be used for multiple languages?",
       answer:
-        "Yes, our NLP solutions support multilingual processing across 50+ languages including English, Spanish, French, German, Chinese, Japanese, Arabic, Hindi, Portuguese, Russian, Italian, Korean, Dutch, Swedish, and many others. We offer: cross-lingual models that work across multiple languages simultaneously, language-specific models optimized for individual languages, automatic language detection, real-time translation integration, and multilingual sentiment analysis and entity recognition. Our systems handle different scripts (Latin, Cyrillic, Arabic, Chinese characters, etc.) and can process code-mixed text where multiple languages appear in the same document. We also support low-resource languages through transfer learning and can develop custom models for specific regional dialects or domain-specific terminology.",
+        "Yes. Our NLP solutions support multilingual processing across 50+ languages, including English, Spanish, French, German, Chinese, Japanese, Arabic, Hindi, Portuguese, and more.\n\nWe combine cross-lingual and language-specific models, automatic language detection, real-time translation, and multilingual entity recognition and sentiment analysis. This capability powers AI mobile and web development solutions that serve global audiences and diverse linguistic contexts.",
     },
     {
-      question: 'What is "prompt engineering" in the context of NLP?',
+      question: "What is “prompt engineering” in the context of NLP?",
       answer:
-        "Prompt engineering is the practice of designing and optimizing text prompts to get the best results from large language models (LLMs) like GPT, BERT, or custom models. It involves: crafting clear, specific instructions that guide the model's output, designing few-shot examples that demonstrate the desired behavior, iterating on prompt structure to improve accuracy and relevance, and optimizing for specific tasks like classification, generation, or extraction. Effective prompt engineering includes: context setting (providing background information), task specification (clearly defining what you want), format instruction (specifying output structure), and constraint definition (setting boundaries or requirements). Our team specializes in prompt optimization for business applications, ensuring consistent, high-quality outputs from LLMs while minimizing costs and latency. We also develop prompt templates and automated prompt optimization techniques.",
+        "Prompt engineering is designing and optimizing text prompts to get the best outputs from large language models (LLMs). It involves crafting clear instructions, few-shot examples, and structured formats for tasks like classification, generation, or extraction.\n\nOur team optimizes prompts for business use cases, ensuring consistent, high-quality responses from LLMs while minimizing cost and latency for AI-powered applications.",
     },
   ];
 
@@ -1544,8 +1580,8 @@ const NLPFinalCTA = () => {
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
             Leverage the power of Natural Language Processing to extract
-            insights, automate tasks, and create intelligent textual
-            applications.
+            insights, automate tasks, and create AI‑driven app development
+            services across mobile and web platforms.
           </motion.p>
 
           <motion.div
@@ -1603,7 +1639,7 @@ export const NLPTextAnalytics = () => {
       <section className="bg-card">
         <NLPTechStack />
       </section>
-      
+
       {/* Process */}
       <section className="bg-card">
         <NLPProcess />
@@ -1645,9 +1681,7 @@ export const NLPTextAnalytics = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/PredictiveAnalyticsForecasting.tsx

@@ -65,26 +65,41 @@ const PredictiveAnalyticsHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/predictive-analytics-forecasting" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/predictive-analytics-forecasting"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Predictive Analytics | Forecasting & AI Insights | WDI" />
+        <meta
+          property="og:title"
+          content="Predictive Analytics | Forecasting & AI Insights | WDI"
+        />
         <meta
           property="og:description"
           content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
         />
         <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="Predictive Analytics | Forecasting & AI Insights | WDI" />
+        <meta
+          name="twitter:title"
+          content="Predictive Analytics | Forecasting & AI Insights | WDI"
+        />
         <meta
           name="twitter:description"
           content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
         />
-        <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">
@@ -128,8 +143,9 @@ const PredictiveAnalyticsHeroWithCTA = () => {
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                 Harnessing the power of your data to anticipate future trends,
-                predict outcomes, and make proactive, data-driven business
-                decisions.
+                predict outcomes, and make proactive, data‑driven business
+                decisions with AI‑driven predictive analytics and demand
+                forecasting.
               </p>
             </div>
 
@@ -513,6 +529,11 @@ const PredictiveAnalyticsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Gain a Competitive Edge with Future Insights
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Leverage AI‑driven predictive analytics and demand forecasting to
+            anticipate market shifts, optimize decisions, and stay ahead of the
+            competition.
+          </p>
         </motion.div>
 
         <motion.div
@@ -654,6 +675,12 @@ const PredictiveAnalyticsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to Forecasting Future Outcomes
           </h2>
+
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, data‑driven strategy that uses predictive analytics
+            and advanced forecasting models to anticipate future trends and
+            guide proactive, high‑impact business decisions.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -672,12 +699,14 @@ const PredictiveAnalyticsProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -819,6 +848,11 @@ const PredictiveAnalyticsServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Predictive Analytics Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Tailored predictive analytics services that use advanced forecasting
+            models and data‑driven insights to anticipate trends, optimize
+            decisions, and create measurable business impact.
+          </p>
         </motion.div>
 
         <motion.div
@@ -977,7 +1011,9 @@ const PredictiveAnalyticsTechStack = () => {
             Predictive Analytics Tech Stack
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Utilizing powerful tools for accurate data analysis and forecasting.
+            Utilizing powerful tools and modern predictive analytics platforms
+            for accurate data analysis, modeling, and demand forecasting at
+            scale.
           </p>
         </motion.div>
 
@@ -1009,9 +1045,10 @@ const PredictiveAnalyticsTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                      }`}
+                    }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1080,6 +1117,11 @@ const PredictiveAnalyticsCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Predictive Insights Driving Business Success
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Actionable predictive insights that anticipate trends, optimize
+            decisions, and power AI‑driven forecasting to accelerate growth and
+            business success.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1206,7 +1248,8 @@ const PredictiveAnalyticsInlineCTA = () => {
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
               Unlock the power of your data to anticipate trends and drive
-              proactive strategies.
+              proactive, AI‑driven decision‑making strategies that create
+              measurable business value.
             </p>
 
             <ShimmerButton
@@ -1315,7 +1358,8 @@ const HirePredictiveAnalyticsSpecialists = () => {
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
             Hire our specialists in statistical modeling, machine learning, and
-            business intelligence for advanced forecasting.
+            business intelligence to build advanced predictive analytics models
+            and drive accurate, data‑driven forecasting.
           </p>
         </motion.div>
 
@@ -1407,24 +1451,24 @@ const HirePredictiveAnalyticsSpecialists = () => {
 const PredictiveAnalyticsFAQs = () => {
   const faqs = [
     {
-      question: "What data is required for accurate predictive models?",
+      question: "What data is needed for accurate predictive models?",
       answer:
-        "Accurate predictive models require sufficient historical data (typically 2-5 years), relevant features that influence the outcome, clean and consistent data quality, and adequate volume (thousands to millions of records depending on complexity). Key data types include: transactional data, customer behavior data, external factors (seasonality, economic indicators), and outcome variables. We work with structured data (databases, spreadsheets), semi-structured data (logs, JSON), and unstructured data (text, images). Data quality is more important than quantity - we assess completeness, accuracy, consistency, and relevance during our initial data audit to ensure optimal model performance.",
+        "Accurate predictive models require enough historical data typically 2–5 years to capture meaningful patterns, along with relevant features that influence the outcome and clean, consistent data quality. You also need adequate volume (thousands to millions of records depending on complexity).\n\nKey data types include transactional data, customer behavior data, external factors like seasonality and economic indicators, and clear outcome variables. We work with structured data (databases, spreadsheets), semi-structured data (logs, JSON), and unstructured data (text, images). During our initial data audit, we check completeness, accuracy, consistency, and relevance because data quality matters more than quantity in predictive analytics.",
     },
     {
-      question: "How reliable are predictive forecasts?",
+      question: "How accurate are predictive forecasts?",
       answer:
-        "Forecast reliability varies by use case, data quality, and model complexity, but our predictive models typically achieve 85-95% accuracy for well-defined problems with quality data. Reliability depends on: data completeness and quality, model selection and tuning, external factors and market stability, and forecast horizon (shorter-term predictions are generally more accurate). We provide confidence intervals and uncertainty measures with all predictions, implement continuous monitoring to track accuracy over time, use ensemble methods to improve reliability, and regularly retrain models with new data. We're transparent about model limitations and provide recommendations for interpreting and acting on predictions.",
+        "The accuracy of predictive forecasts depends on the use case, data quality, and model complexity, but we typically achieve 85–95% accuracy for well-defined problems with good data. Accuracy is influenced by how complete and clean the data is, the choice and tuning of the model, external market conditions, and how far ahead the forecast looks (short-term predictions are usually more reliable).\n\nWe provide confidence intervals and uncertainty measures with every forecast, continuously monitor performance, use ensemble methods, and retrain models as new data arrives. We’re transparent about limitations so you can trust and act confidently on your predictive analytics insights.",
     },
     {
-      question: "What industries benefit most from predictive analytics?",
+      question: "Which industries benefit most from predictive analytics?",
       answer:
-        "Predictive analytics provides value across virtually all industries, with particularly strong benefits in: Retail & E-commerce (demand forecasting, customer churn, personalization), Financial Services (credit risk, fraud detection, investment analysis), Healthcare (patient outcomes, resource planning, drug discovery), Manufacturing (predictive maintenance, quality control, supply chain), Telecommunications (network optimization, customer retention, capacity planning), Energy & Utilities (demand forecasting, asset management, grid optimization), and Transportation & Logistics (route optimization, demand prediction, maintenance scheduling). Success depends more on data availability and business maturity than industry type.",
+        "Predictive analytics delivers value across almost every sector, with especially strong results in retail & e-commerce (demand forecasting, customer churn, personalization), financial services (credit risk, fraud detection, investment analysis), healthcare (patient outcomes, resource planning), manufacturing (predictive maintenance, supply chain), telecommunications (network optimization, customer retention), energy & utilities (demand forecasting, asset management), and transportation & logistics (route optimization, demand prediction).\n\nWhat matters most is having accessible, usable data and clear business objectives—not the industry itself. That’s why even niche or complex sectors can gain measurable advantages from predictive analytics.",
     },
     {
       question: "Can predictive models be integrated into existing dashboards?",
       answer:
-        "Yes, our predictive models seamlessly integrate with existing business intelligence dashboards and reporting systems. We support integration with: Tableau, Power BI, Qlik, and other BI platforms through APIs and data connections, custom web dashboards with real-time prediction updates, Excel and Google Sheets for simpler use cases, CRM systems (Salesforce, HubSpot) for sales and marketing predictions, ERP systems for operational forecasting, and cloud platforms (AWS QuickSight, Google Data Studio, Azure Power BI). We provide REST APIs, scheduled data refreshes, real-time streaming for immediate insights, and custom visualization components. Our team ensures predictions are presented in an intuitive, actionable format for decision-makers.",
+        "Yes. Our predictive models integrate smoothly into existing dashboards and reporting tools. We support major platforms such as Tableau, Power BI, and Qlik through APIs and standard data connectors, plus custom web dashboards with real-time prediction updates.\n\nWe can also deliver predictions into Excel, Google Sheets, CRM systems (Salesforce, HubSpot), ERP systems, and cloud analytics tools. Using REST APIs, scheduled refreshes, and real-time streaming, we ensure predictions appear in an intuitive, actionable format inside your predictive analytics dashboards so decision-makers can act quickly on insights.",
     },
   ];
 
@@ -1617,9 +1661,7 @@ export const PredictiveAnalyticsForecasting = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/RecommendationEngines.tsx

@@ -67,26 +67,41 @@ const RecommendationEnginesHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/recommendation-engines" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/recommendation-engines"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Recommendation Engines | AI-Powered Personalization | WDI" />
+        <meta
+          property="og:title"
+          content="Recommendation Engines | AI-Powered Personalization | WDI"
+        />
         <meta
           property="og:description"
           content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
         />
         <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="Recommendation Engines | AI-Powered Personalization | WDI" />
+        <meta
+          name="twitter:title"
+          content="Recommendation Engines | AI-Powered Personalization | WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
         />
-        <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">
@@ -122,7 +137,7 @@ const RecommendationEnginesHeroWithCTA = () => {
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                 Building intelligent systems that personalize user experiences,
                 drive engagement, and boost conversions by suggesting relevant
-                products, content, or services.
+                products, content, and services.
               </p>
             </div>
 
@@ -472,6 +487,11 @@ const RecommendationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Drive Growth with Hyper-Personalization
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Personalized recommendation engines that deliver tailored
+            experiences, increase engagement, and maximize conversions across
+            digital touchpoints.
+          </p>
         </motion.div>
 
         <motion.div
@@ -607,6 +627,11 @@ const RecommendationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to Building Your Personalized Engine
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, data‑driven methodology to design and deploy
+            personalized recommendation engines that align with your business
+            goals and user behavior.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -625,12 +650,14 @@ const RecommendationProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      } text-center lg:text-left`}
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -771,6 +798,10 @@ const RecommendationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Recommendation Engine Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Tailored recommendation‑engine solutions that power AI‑powered
+            mobile and web applications with hyper‑personalized experiences.
+          </p>
         </motion.div>
 
         <motion.div
@@ -942,9 +973,10 @@ const RecommendationTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
+                      colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                      }`}
+                    }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1013,6 +1045,11 @@ const RecommendationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Personalization Driving Real-World Impact
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Personalized recommendation engines transform user journeys,
+            increase engagement, and deliver measurable business growth across
+            AI‑powered mobile and web applications.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1140,8 +1177,9 @@ const RecommendationInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Discover how intelligent recommendations can transform your user
-              engagement and revenue.
+              Discover how intelligent recommendations can transform user
+              engagement and revenue with AI‑powered mobile and web
+              applications.
             </p>
 
             <ShimmerButton
@@ -1227,8 +1265,9 @@ const HireMLEngineers = () => {
             Access Expert Recommendation Systems Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our data scientists and ML engineers specializing in building,
-            optimizing, and deploying highly effective recommendation engines.
+            Hire data scientists and ML engineers who specialize in building,
+            optimizing, and deploying highly effective recommendation engines
+            for AI‑powered mobile and web applications.
           </p>
         </motion.div>
 
@@ -1323,22 +1362,22 @@ const RecommendationFAQs = () => {
       question:
         "What data is crucial for building a good recommendation engine?",
       answer:
-        "Building effective recommendation engines requires several types of data: User interaction data (clicks, views, purchases, ratings, time spent), user profile information (demographics, preferences, past behavior), item/content metadata (categories, descriptions, features, price), contextual data (time, location, device, session information), and social data (connections, shares, reviews). The quality and quantity of user-item interactions are most critical - we typically need at least 1000+ users and 100+ items with sufficient interaction history. We can also incorporate external data sources like social media activity, browsing patterns, and third-party demographics to enhance recommendation accuracy and handle cold start scenarios.",
+        "Building effective recommendation engines requires user interaction data (clicks, views, purchases, ratings, time spent), user profiles, item/content metadata, contextual data (time, location, device), and social signals.\n\nThe most important factor is high-quality user-item interaction history, usually starting from 1,000+ users and 100+ items. External data like browsing patterns and third-party demographics can enhance performance and help with cold-start scenarios in AI-powered mobile and web applications.",
     },
     {
       question: 'What is the "cold start problem" in recommendations?',
       answer:
-        "The cold start problem occurs when recommendation systems struggle to make accurate suggestions for new users (user cold start) or new items (item cold start) due to lack of historical data. For new users, we address this through: demographic-based recommendations, popular item suggestions, onboarding questionnaires to capture preferences, and social login integration. For new items, we use: content-based filtering using item attributes, expert/editorial recommendations, promotional campaigns, and transfer learning from similar items. We implement hybrid approaches that combine multiple strategies, active learning to quickly gather feedback, and gradual transition from simple to sophisticated recommendations as data accumulates.",
+        "The cold start problem happens when recommendation engines can’t yet deliver accurate suggestions for new users or new items due to limited or missing data.\n\nFor new users, solutions include demographic-based recommendations, popular items, onboarding questionnaires, and social-login preferences. For new items, strategies include content-based filtering, editorial recommendations, promotions, and transfer learning from similar items. Hybrid and active-learning approaches help recommendation engines stabilize quickly as data accumulates.",
     },
     {
       question: "How do you measure the success of a recommendation engine?",
       answer:
-        "We measure recommendation engine success through multiple metrics: Accuracy metrics (precision, recall, F1-score, RMSE for ratings), ranking quality (NDCG, MAP, MRR), business metrics (click-through rate, conversion rate, revenue per user, average order value), engagement metrics (time on site, pages per session, return visits), and diversity/coverage metrics (catalog coverage, recommendation diversity, novelty). We implement comprehensive A/B testing frameworks to compare different algorithms and track both online (real-time user behavior) and offline (historical data validation) performance. Key business KPIs typically include 15-35% increase in conversions, 20-40% improvement in user engagement, and 10-25% boost in average order value.",
+        "Success for recommendation engines is measured through accuracy metrics (precision, recall, F1, RMSE), ranking quality (NDCG, MAP, MRR), business KPIs (click-through rate, conversion rate, revenue per user, average order value), and engagement metrics (time on site, pages per session, return visits).\n\nWe also track diversity, coverage, and novelty while using A/B testing to compare algorithms and validate both real-time and historical performance. Typical business outcomes include higher conversion, boosted engagement, and increased revenue in AI-powered mobile and web applications.",
     },
     {
       question: "Can recommendation engines be integrated into any platform?",
       answer:
-        "Yes, recommendation engines can be integrated into virtually any digital platform through flexible APIs and SDKs. We provide: RESTful APIs for real-time recommendations, batch processing for offline recommendations, webhooks for event-driven updates, and multiple SDK options (JavaScript, Python, Java, iOS, Android). Integration approaches include: embedded widgets for e-commerce sites, API calls for mobile apps, server-side integration for web applications, and cloud-based solutions (AWS Personalize, Google Recommendations AI). We ensure compatibility with existing tech stacks, provide comprehensive documentation, handle data privacy/GDPR compliance, and offer custom integration support. The system scales from small applications to enterprise platforms handling millions of users and recommendations per day.",
+        "Yes. Recommendation engines can be integrated into virtually any platform via flexible APIs and SDKs. We provide RESTful endpoints for real-time recommendations, batch processing for offline use, webhooks for event-driven updates, and SDKs for web and mobile (JavaScript, Python, Java, iOS, Android).\n\nIntegrations work as embedded widgets for e-commerce, API calls for AI-powered mobile applications, and server-side implementations for web development stacks, scaling from small apps to enterprise-grade systems handling millions of daily recommendations.",
     },
   ];
 
@@ -1431,8 +1470,8 @@ const RecommendationFinalCTA = () => {
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
             WDI designs and builds sophisticated recommendation engines that
-            captivate your audience and significantly boost your business
-            metrics.
+            captivate your audience and significantly boost engagement and
+            conversion metrics.
           </motion.p>
 
           <motion.div
@@ -1532,9 +1571,7 @@ export const RecommendationEngines = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-card">{/* <Footer /> */}</section>
     </div>
   );
 };

public/robots.txt

@@ -1,6 +1,5 @@
 User-agent: *
 Disallow: /admin/
-Disallow: /cgi-bin/ 
-Allow: /
- 
+Disallow: /cgi-bin/
+
 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>
-
+<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

@@ -19,6 +19,10 @@ import { AIIntegrationDigitalProducts } from "../pages/AIIntegrationDigitalProdu
 import { AIModelDeploymentMLOps } from "../pages/AIModelDeploymentMLOps";
 import { AIStrategyConsulting } from "../pages/AIStrategyConsulting";
 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";
@@ -30,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";
@@ -178,10 +185,13 @@ import { HireMobileAppDevelopersIndia } from "../pages/HireMobileAppDevelopersIn
 // Placeholder
 import { ArticleDetail } from "../pages/ArticleDetail";
 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>
     {/* Homepage */}
     <Route path="/" element={<Homepage />} />
@@ -195,99 +205,321 @@ export const AppRouter = () => (
     <Route path="/web-cloud" element={<WebCloudServices />} />
     <Route path="/software-engineering" element={<SoftwareEngineering />} />
     <Route path="/design-experience" element={<DesignExperience />} />
-    <Route path="/artificial-intelligence" element={<ArtificialIntelligenceServices />} />
+    <Route
+      path="/artificial-intelligence"
+      element={<ArtificialIntelligenceServices />}
+    />
     <Route path="/machine-learning" element={<MachineLearning />} />
 
     {/* SERVICES */}
-    <Route path="/services/mobile-app-development" element={<MobileAppDevelopment />} />
-    <Route path="/services/ios-app-development" element={<IOSAppDevelopment />} />
-    <Route path="/services/android-app-development" element={<AndroidAppDevelopment />} />
-    <Route path="/services/cross-platform-app-development" element={<CrossPlatformAppDevelopment />} />
-    <Route path="/services/native-app-development" element={<NativeAppDevelopment />} />
+    <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 />}
+    />
+    <Route
+      path="/services/android-app-development-india"
+      element={<AndroidAppDevelopmentIndia />}
+    />
+    <Route
+      path="/services/android-app-development-uk"
+      element={<AndroidAppDevelopmentUk />}
+    />
+    <Route
+      path="/services/android-app-development-usa"
+      element={<AndroidAppDevelopmentUSA />}
+    />
+    <Route
+      path="/services/cross-platform-app-development"
+      element={<CrossPlatformAppDevelopment />}
+    />
+    <Route
+      path="/services/native-app-development"
+      element={<NativeAppDevelopment />}
+    />
     <Route path="/services/pwa-development" element={<PWADevelopment />} />
-    <Route path="/services/wearable-device-development" element={<WearableDeviceDevelopment />} />
-    <Route path="/services/custom-web-app-development" element={<CustomWebAppDevelopment />} />
-    <Route path="/services/saas-product-engineering" element={<SaaSProductEngineering />} />
-    <Route path="/services/ecommerce-platforms" element={<EcommercePlatforms />} />
-    <Route path="/services/admin-panels-dashboards" element={<AdminPanelsDashboards />} />
-    <Route path="/services/api-backend-development" element={<APIBackendDevelopment />} />
-    <Route path="/services/enterprise-software-solutions" element={<EnterpriseSoftwareSolutions />} />
-    <Route path="/services/system-architecture-devops" element={<SystemArchitectureDevOps />} />
-    <Route path="/services/third-party-integrations" element={<ThirdPartyIntegrations />} />
-    <Route path="/services/product-modernization" element={<ProductModernization />} />
+    <Route
+      path="/services/wearable-device-development"
+      element={<WearableDeviceDevelopment />}
+    />
+    <Route
+      path="/services/custom-web-app-development"
+      element={<CustomWebAppDevelopment />}
+    />
+    <Route
+      path="/services/saas-product-engineering"
+      element={<SaaSProductEngineering />}
+    />
+    <Route
+      path="/services/ecommerce-platforms"
+      element={<EcommercePlatforms />}
+    />
+    <Route
+      path="/services/admin-panels-dashboards"
+      element={<AdminPanelsDashboards />}
+    />
+    <Route
+      path="/services/api-backend-development"
+      element={<APIBackendDevelopment />}
+    />
+    <Route
+      path="/services/enterprise-software-solutions"
+      element={<EnterpriseSoftwareSolutions />}
+    />
+    <Route
+      path="/services/system-architecture-devops"
+      element={<SystemArchitectureDevOps />}
+    />
+    <Route
+      path="/services/third-party-integrations"
+      element={<ThirdPartyIntegrations />}
+    />
+    <Route
+      path="/services/product-modernization"
+      element={<ProductModernization />}
+    />
     <Route path="/services/ui-ux-design" element={<UIUXDesign />} />
-    <Route path="/services/clickable-prototypes" element={<ClickablePrototypes />} />
-    <Route path="/services/design-thinking-workshops" element={<DesignThinkingWorkshops />} />
-    <Route path="/services/user-research-testing" element={<UserResearchTesting />} />
-    <Route path="/services/ai-strategy-consulting" element={<AIStrategyConsulting />} />
-    <Route path="/services/ai-automation-workflows" element={<AIAutomationWorkflows />} />
-    <Route path="/services/ai-integration-digital-products" element={<AIIntegrationDigitalProducts />} />
-    <Route path="/services/gen-ai-integration-digital-products" element={<GenAIIntegrationDigitalProducts />} />
-    <Route path="/services/ai-chatbots-virtual-assistants" element={<AIChatbotsVirtualAssistants />} />
-    <Route path="/services/ai-model-deployment-mlops" element={<AIModelDeploymentMLOps />} />
-    <Route path="/services/custom-ml-model-development" element={<CustomMLModelDevelopment />} />
-    <Route path="/services/predictive-analytics-forecasting" element={<PredictiveAnalyticsForecasting />} />
-    <Route path="/services/computer-vision-applications" element={<ComputerVisionApplications />} />
+    <Route
+      path="/services/clickable-prototypes"
+      element={<ClickablePrototypes />}
+    />
+    <Route
+      path="/services/design-thinking-workshops"
+      element={<DesignThinkingWorkshops />}
+    />
+    <Route
+      path="/services/user-research-testing"
+      element={<UserResearchTesting />}
+    />
+    <Route
+      path="/services/ai-strategy-consulting"
+      element={<AIStrategyConsulting />}
+    />
+    <Route
+      path="/services/ai-automation-workflows"
+      element={<AIAutomationWorkflows />}
+    />
+    <Route
+      path="/services/ai-integration-digital-products"
+      element={<AIIntegrationDigitalProducts />}
+    />
+    <Route
+      path="/services/gen-ai-integration-digital-products"
+      element={<GenAIIntegrationDigitalProducts />}
+    />
+    <Route
+      path="/services/ai-chatbots-virtual-assistants"
+      element={<AIChatbotsVirtualAssistants />}
+    />
+    <Route
+      path="/services/ai-model-deployment-mlops"
+      element={<AIModelDeploymentMLOps />}
+    />
+    <Route
+      path="/services/custom-ml-model-development"
+      element={<CustomMLModelDevelopment />}
+    />
+    <Route
+      path="/services/predictive-analytics-forecasting"
+      element={<PredictiveAnalyticsForecasting />}
+    />
+    <Route
+      path="/services/computer-vision-applications"
+      element={<ComputerVisionApplications />}
+    />
     <Route path="/services/nlp-text-analytics" element={<NLPTextAnalytics />} />
-    <Route path="/services/recommendation-engines" element={<RecommendationEngines />} />
+    <Route
+      path="/services/recommendation-engines"
+      element={<RecommendationEngines />}
+    />
 
     {/* SOLUTIONS */}
-    <Route path="/solutions/digital-product-development" element={<DigitalProductDevelopment />} />
-    <Route path="/solutions/mvp-startup-launch-packages" element={<MVPStartupLaunchPackages />} />
-    <Route path="/solutions/legacy-system-rebuilds" element={<LegacySystemRebuilds />} />
-    <Route path="/solutions/dedicated-offshore-odc" element={<DedicatedOffshoreODC />} />
-    <Route path="/solutions/business-process-automation" element={<BusinessProcessAutomation />} />
-    <Route path="/solutions/compliance-ready-systems" element={<ComplianceReadySystems />} />
+    <Route
+      path="/solutions/digital-product-development"
+      element={<DigitalProductDevelopment />}
+    />
+    <Route
+      path="/solutions/mvp-startup-launch-packages"
+      element={<MVPStartupLaunchPackages />}
+    />
+    <Route
+      path="/solutions/legacy-system-rebuilds"
+      element={<LegacySystemRebuilds />}
+    />
+    <Route
+      path="/solutions/dedicated-offshore-odc"
+      element={<DedicatedOffshoreODC />}
+    />
+    <Route
+      path="/solutions/business-process-automation"
+      element={<BusinessProcessAutomation />}
+    />
+    <Route
+      path="/solutions/compliance-ready-systems"
+      element={<ComplianceReadySystems />}
+    />
 
     {/* Simplified solution routes */}
-    <Route path="/digital-product-development" element={<DigitalProductDevelopment />} />
+    <Route
+      path="/digital-product-development"
+      element={<DigitalProductDevelopment />}
+    />
     <Route path="/mvp-startup-launch" element={<MVPStartupLaunchPackages />} />
     <Route path="/legacy-system-rebuilds" element={<LegacySystemRebuilds />} />
-    <Route path="/dedicated-development-centers" element={<DedicatedOffshoreODC />} />
-    <Route path="/business-process-automation" element={<BusinessProcessAutomation />} />
-    <Route path="/compliance-ready-systems" element={<ComplianceReadySystems />} />
+    <Route
+      path="/dedicated-development-centers"
+      element={<DedicatedOffshoreODC />}
+    />
+    <Route
+      path="/business-process-automation"
+      element={<BusinessProcessAutomation />}
+    />
+    <Route
+      path="/compliance-ready-systems"
+      element={<ComplianceReadySystems />}
+    />
 
     {/* INDUSTRIES - Financial Services */}
-    <Route path="/industries/fintech-banking-apps" element={<FinTechBankingApps />} />
-    <Route path="/industries/financial-services/wealthtech-platforms" element={<WealthTechPlatforms />} />
-    <Route path="/industries/financial-services/real-estate-tech" element={<RealEstateTech />} />
+    <Route
+      path="/industries/fintech-banking-apps"
+      element={<FinTechBankingApps />}
+    />
+    <Route
+      path="/industries/financial-services/wealthtech-platforms"
+      element={<WealthTechPlatforms />}
+    />
+    <Route
+      path="/industries/financial-services/real-estate-tech"
+      element={<RealEstateTech />}
+    />
 
     {/* INDUSTRIES - Healthcare & Wellness */}
-    <Route path="/industries/healthcare/healthtech-applications" element={<HealthTechApplications />} />
-    <Route path="/industries/healthcare/medical-compliance-solutions" element={<MedicalComplianceSolutions />} />
-    <Route path="/industries/healthcare/fitness-wellness-platforms" element={<FitnessWellnessPlatforms />} />
+    <Route
+      path="/industries/healthcare/healthtech-applications"
+      element={<HealthTechApplications />}
+    />
+    <Route
+      path="/industries/healthcare/medical-compliance-solutions"
+      element={<MedicalComplianceSolutions />}
+    />
+    <Route
+      path="/industries/healthcare/fitness-wellness-platforms"
+      element={<FitnessWellnessPlatforms />}
+    />
 
     {/* INDUSTRIES - Learning & Education */}
-    <Route path="/industries/education/edtech-platforms" element={<EdTechPlatforms />} />
-    <Route path="/industries/education/virtual-classrooms-lms" element={<VirtualClassroomsLMS />} />
-    <Route path="/industries/education/microlearning-apps" element={<MicrolearningApps />} />
+    <Route
+      path="/industries/education/edtech-platforms"
+      element={<EdTechPlatforms />}
+    />
+    <Route
+      path="/industries/education/virtual-classrooms-lms"
+      element={<VirtualClassroomsLMS />}
+    />
+    <Route
+      path="/industries/education/microlearning-apps"
+      element={<MicrolearningApps />}
+    />
 
     {/* INDUSTRIES - Commerce & Consumer */}
-    <Route path="/industries/commerce/ecommerce-marketplaces" element={<EcommerceMarketplaces />} />
-    <Route path="/industries/commerce/food-ordering-delivery" element={<FoodOrderingDelivery />} />
-    <Route path="/industries/commerce/travel-booking-systems" element={<TravelBookingSystems />} />
-    <Route path="/industries/commerce/event-ticketing-solutions" element={<EventTicketingSolutions />} />
+    <Route
+      path="/industries/commerce/ecommerce-marketplaces"
+      element={<EcommerceMarketplaces />}
+    />
+    <Route
+      path="/industries/commerce/food-ordering-delivery"
+      element={<FoodOrderingDelivery />}
+    />
+    <Route
+      path="/industries/commerce/travel-booking-systems"
+      element={<TravelBookingSystems />}
+    />
+    <Route
+      path="/industries/commerce/event-ticketing-solutions"
+      element={<EventTicketingSolutions />}
+    />
 
     {/* INDUSTRIES - Media & Community */}
-    <Route path="/industries/media/ott-streaming-apps" element={<OTTStreamingApps />} />
-    <Route path="/industries/media/social-platforms-networks" element={<SocialPlatformsNetworks />} />
-    <Route path="/industries/media/sports-fan-engagement" element={<SportsFanEngagement />} />
+    <Route
+      path="/industries/media/ott-streaming-apps"
+      element={<OTTStreamingApps />}
+    />
+    <Route
+      path="/industries/media/social-platforms-networks"
+      element={<SocialPlatformsNetworks />}
+    />
+    <Route
+      path="/industries/media/sports-fan-engagement"
+      element={<SportsFanEngagement />}
+    />
 
     {/* INDUSTRIES - Mobility & Logistics */}
-    <Route path="/industries/mobility/transportation-apps" element={<TransportationApps />} />
-    <Route path="/industries/mobility/on-demand-services" element={<OnDemandServices />} />
-    <Route path="/industries/mobility/supply-chain-fleet-management" element={<SupplyChainFleetManagement />} />
+    <Route
+      path="/industries/mobility/transportation-apps"
+      element={<TransportationApps />}
+    />
+    <Route
+      path="/industries/mobility/on-demand-services"
+      element={<OnDemandServices />}
+    />
+    <Route
+      path="/industries/mobility/supply-chain-fleet-management"
+      element={<SupplyChainFleetManagement />}
+    />
 
     {/* INDUSTRIES - Industrial & Emerging Tech */}
-    <Route path="/industries/industrial/manufacturing-automation" element={<ManufacturingAutomation />} />
-    <Route path="/industries/industrial/agritech-platforms" element={<AgriTechPlatforms />} />
-    <Route path="/industries/industrial/oil-gas-monitoring-systems" element={<OilGasMonitoringSystems />} />
+    <Route
+      path="/industries/industrial/manufacturing-automation"
+      element={<ManufacturingAutomation />}
+    />
+    <Route
+      path="/industries/industrial/agritech-platforms"
+      element={<AgriTechPlatforms />}
+    />
+    <Route
+      path="/industries/industrial/oil-gas-monitoring-systems"
+      element={<OilGasMonitoringSystems />}
+    />
 
     {/* COMPANY PAGES */}
     <Route path="/company/about-wdi" element={<AboutWDI />} />
     <Route path="/company/our-history" element={<OurHistory />} />
     <Route path="/company/leadership-team" element={<LeadershipTeam />} />
-    <Route path="/company/awards-certifications" element={<AwardsCertifications />} />
+    <Route
+      path="/company/awards-certifications"
+      element={<AwardsCertifications />}
+    />
     <Route path="/company/careers" element={<Careers />} />
     <Route path="/company/culture-values" element={<CultureValues />} />
     <Route path="/company/press-media" element={<PressMedia />} />
@@ -299,50 +531,140 @@ export const AppRouter = () => (
 
     {/* HIRE TALENT PAGES */}
     <Route path="/hire-talent" element={<HireTalent />} />
-    <Route path="/hire-talent/mobile-app-developers" element={<HireMobileAppDevelopers />} />
-    <Route path="/hire-talent/full-stack-developers" element={<HireFullStackDevelopers />} />
-    <Route path="/hire-talent/frontend-developers" element={<HireFrontendDevelopers />} />
-    <Route path="/hire-talent/backend-developers" element={<HireBackendDevelopers />} />
-    <Route path="/hire-talent/ui-ux-designers" element={<HireUIUXDesigners />} />
+    <Route
+      path="/hire-talent/mobile-app-developers"
+      element={<HireMobileAppDevelopers />}
+    />
+    <Route
+      path="/hire-talent/full-stack-developers"
+      element={<HireFullStackDevelopers />}
+    />
+    <Route
+      path="/hire-talent/frontend-developers"
+      element={<HireFrontendDevelopers />}
+    />
+    <Route
+      path="/hire-talent/backend-developers"
+      element={<HireBackendDevelopers />}
+    />
+    <Route
+      path="/hire-talent/ui-ux-designers"
+      element={<HireUIUXDesigners />}
+    />
     <Route path="/hire-talent/qa-engineers" element={<HireQAEngineers />} />
-    <Route path="/dedicated-development-teams" element={<DedicatedDevelopmentTeams />} />
+    <Route
+      path="/dedicated-development-teams"
+      element={<DedicatedDevelopmentTeams />}
+    />
     <Route path="/engagement-models" element={<EngagementModels />} />
-    <Route path="/team-augmentation-services" element={<TeamAugmentationServices />} />
-    <Route path="/hire-talent/mobile-app-developers-india" element={<HireMobileAppDevelopersIndia />} />
-
-
+    <Route
+      path="/team-augmentation-services"
+      element={<TeamAugmentationServices />}
+    />
+    <Route
+      path="/hire-talent/mobile-app-developers-india"
+      element={<HireMobileAppDevelopersIndia />}
+    />
+    <Route
+      path="/hire-talent/mobile-app-developers-usa"
+      element={<HireMobileAppDevelopersUsa />}
+    />
+    <Route
+      path="/hire-talent/mobile-app-developers-uk"
+      element={<HireMobileAppDevelopersUk />}
+    />
     {/* New hire pages */}
-    <Route path="/hire-talent/ios-app-developers" element={<HireiOSAppDevelopers />} />
-    <Route path="/hire-talent/android-app-developers" element={<HireAndroidAppDevelopers />} />
-    <Route path="/hire-talent/cross-platform-developers" element={<HireCrossPlatformDevelopers />} />
-    <Route path="/hire-talent/native-app-developers" element={<HireNativeAppDevelopers />} />
+    <Route
+      path="/hire-talent/ios-app-developers"
+      element={<HireiOSAppDevelopers />}
+    />
+    <Route
+      path="/hire-talent/android-app-developers"
+      element={<HireAndroidAppDevelopers />}
+    />
+    <Route
+      path="/hire-talent/cross-platform-developers"
+      element={<HireCrossPlatformDevelopers />}
+    />
+    <Route
+      path="/hire-talent/native-app-developers"
+      element={<HireNativeAppDevelopers />}
+    />
     <Route path="/hire-talent/pwa-developers" element={<HirePWADevelopers />} />
-    <Route path="/hire-talent/wearable-app-developers" element={<HireWearableAppDevelopers />} />
-    <Route path="/hire-talent/custom-web-app-developers" element={<HireCustomWebAppDevelopers />} />
-    <Route path="/hire-talent/saas-product-developers" element={<HireSaaSProductDevelopers />} />
-    <Route path="/hire-talent/ecommerce-platform-developers" element={<HireEcommercePlatformDevelopers />} />
-    <Route path="/hire-talent/admin-panel-developers" element={<HireAdminPanelDevelopers />} />
-    <Route path="/hire-talent/api-backend-developers" element={<HireAPIBackendDevelopers />} />
-    <Route path="/hire-talent/enterprise-software-developers" element={<HireEnterpriseSoftwareDevelopers />} />
-    <Route path="/hire-talent/system-architecture-developers" element={<HireSystemArchitectureDevOpsDevelopers />} />
-    <Route path="/hire-talent/third-party-integration-developers" element={<HireThirdPartyIntegrationsDevelopers />} />
-    <Route path="/hire-talent/product-modernization-developers" element={<HireProductModernizationDevelopers />} />
-    <Route path="/hire-talent/clickable-prototypes-developers" element={<HireClickablePrototypesDevelopers />} />
-    <Route path="/hire-talent/design-thinking-workshops-developers" element={<HireDesignThinkingWorkshopsDevelopers />} />
-    <Route path="/hire-talent/user-research-testing-developers" element={<HireUserResearchTestingDevelopers />} />
+    <Route
+      path="/hire-talent/wearable-app-developers"
+      element={<HireWearableAppDevelopers />}
+    />
+    <Route
+      path="/hire-talent/custom-web-app-developers"
+      element={<HireCustomWebAppDevelopers />}
+    />
+    <Route
+      path="/hire-talent/saas-product-developers"
+      element={<HireSaaSProductDevelopers />}
+    />
+    <Route
+      path="/hire-talent/ecommerce-platform-developers"
+      element={<HireEcommercePlatformDevelopers />}
+    />
+    <Route
+      path="/hire-talent/admin-panel-developers"
+      element={<HireAdminPanelDevelopers />}
+    />
+    <Route
+      path="/hire-talent/api-backend-developers"
+      element={<HireAPIBackendDevelopers />}
+    />
+    <Route
+      path="/hire-talent/enterprise-software-developers"
+      element={<HireEnterpriseSoftwareDevelopers />}
+    />
+    <Route
+      path="/hire-talent/system-architecture-developers"
+      element={<HireSystemArchitectureDevOpsDevelopers />}
+    />
+    <Route
+      path="/hire-talent/third-party-integration-developers"
+      element={<HireThirdPartyIntegrationsDevelopers />}
+    />
+    <Route
+      path="/hire-talent/product-modernization-developers"
+      element={<HireProductModernizationDevelopers />}
+    />
+    <Route
+      path="/hire-talent/clickable-prototypes-developers"
+      element={<HireClickablePrototypesDevelopers />}
+    />
+    <Route
+      path="/hire-talent/design-thinking-workshops-developers"
+      element={<HireDesignThinkingWorkshopsDevelopers />}
+    />
+    <Route
+      path="/hire-talent/user-research-testing-developers"
+      element={<HireUserResearchTestingDevelopers />}
+    />
 
     {/* RESOURCES PAGES */}
     <Route path="/resources/blog" element={<Blog />} />
     <Route path="/case-studies" element={<CaseStudies />} />
-    <Route path="/resources/client-testimonials" element={<ClientTestimonials />} />
-    <Route path="/resources/whitepapers-insights" element={<WhitepapersInsights />} />
+    <Route
+      path="/resources/client-testimonials"
+      element={<ClientTestimonials />}
+    />
+    <Route
+      path="/resources/whitepapers-insights"
+      element={<WhitepapersInsights />}
+    />
     <Route path="/resources/faqs" element={<FAQs />} />
 
     {/* CONTACT PAGES */}
     <Route path="/contact-us" element={<Contact />} />
     <Route path="/contact-us-now" element={<Contact />} />
     <Route path="/contact/request-a-proposal" element={<RequestProposal />} />
-    <Route path="/contact/schedule-a-discovery-call" element={<ScheduleDiscoveryCall />} />
+    <Route
+      path="/contact/schedule-a-discovery-call"
+      element={<ScheduleDiscoveryCall />}
+    />
     <Route path="/contact/office-locations" element={<OfficeLocations />} />
     <Route path="/contact/client-support" element={<ClientSupport />} />
     <Route path="/contact/send-your-cv" element={<SendYourCV />} />
@@ -357,7 +679,10 @@ export const AppRouter = () => (
     {/* <Route path="/projects/seezun" element={<SeezunProject />} /> */}
     <Route path="/projects/woka" element={<WokaProject />} />
     <Route path="/projects/tanami" element={<TanamiProject />} />
-    <Route path="/projects/traderscircuit" element={<TradersCircuitProject />} />
+    <Route
+      path="/projects/traderscircuit"
+      element={<TradersCircuitProject />}
+    />
     <Route path="/projects/goodtimes" element={<GoodTimesProject />} />
     <Route path="/projects/prosperty" element={<ProspertyProject />} />
     <Route path="/projects/ranoutof" element={<RanOutOfProject />} />
@@ -367,15 +692,36 @@ export const AppRouter = () => (
     <Route path="/projects/simpletend" element={<SimpliTendProject />} />
 
     {/* ARTICLE PAGES */}
-    <Route path="/articles/future-of-ai-healthcare" element={<FutureOfAIHealthcare />} />
-    <Route path="/articles/compliance-ready-systems-fintech" element={<ComplianceReadyFintech />} />
-    <Route path="/articles/legacy-system-scaling" element={<LegacySystemScaling />} />
-    <Route path="/articles/automation-reshaping-business" element={<AutomationReshapingBusiness />} />
+    <Route
+      path="/articles/future-of-ai-healthcare"
+      element={<FutureOfAIHealthcare />}
+    />
+    <Route
+      path="/articles/compliance-ready-systems-fintech"
+      element={<ComplianceReadyFintech />}
+    />
+    <Route
+      path="/articles/legacy-system-scaling"
+      element={<LegacySystemScaling />}
+    />
+    <Route
+      path="/articles/automation-reshaping-business"
+      element={<AutomationReshapingBusiness />}
+    />
 
     {/* INSIGHT PAGES */}
-    <Route path="/insights/ux-review-presentations" element={<UXReviewPresentations />} />
-    <Route path="/insights/migrating-to-linear-101" element={<MigratingToLinear101 />} />
-    <Route path="/insights/building-your-api-stack" element={<BuildingYourAPIStack />} />
+    <Route
+      path="/insights/ux-review-presentations"
+      element={<UXReviewPresentations />}
+    />
+    <Route
+      path="/insights/migrating-to-linear-101"
+      element={<MigratingToLinear101 />}
+    />
+    <Route
+      path="/insights/building-your-api-stack"
+      element={<BuildingYourAPIStack />}
+    />
 
     {/* PLACEHOLDER */}
     {/* <Route path="/comming-soon" element={<CaseStudyComingSoon projectTitle="Coming Soon Project" />} /> */}
@@ -388,5 +734,5 @@ export const dynamicRoutes = {
     "ux-review-presentations": UXReviewPresentations,
     "migrating-to-linear-101": MigratingToLinear101,
     "building-your-api-stack": BuildingYourAPIStack,
-  }
-};
+  },
+};

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;
@@ -198,114 +199,130 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
-  
+
   .scrollbar-hide::-webkit-scrollbar {
     display: none;
   }
-  
+
   @keyframes scroll {
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-50%);
     }
   }
-  
+
   @keyframes marquee {
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-33.333333%);
     }
   }
-  
+
   @keyframes shimmer {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
   }
-  
+
   @keyframes shimmerSweep {
     0% {
       background-position: -200% center;
     }
+
     100% {
       background-position: 200% center;
     }
   }
-  
+
   @keyframes gradient {
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
   }
-  
+
   @keyframes gradientMove {
     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);
     }
   }
-  
+
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
   }
-  
+
   @keyframes scaleUp {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
   }
-  
+
   @keyframes orbit {
     0% {
       transform: rotate(0deg) translateX(60px) rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg) translateX(60px) rotate(-360deg);
     }
   }
-  
+
   @keyframes orbitReverse {
     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,35 +342,36 @@
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
   }
-  
+
   .animate-scroll {
     animation: scroll 20s linear infinite;
   }
-  
+
   .animate-marquee {
     animation: marquee 30s linear infinite;
   }
-  
+
   .animate-marquee-paused {
     animation-play-state: paused;
   }
-  
+
   .animate-gradient {
     animation: gradient 8s ease infinite;
   }
-  
+
   .animate-float {
     animation: float 3s ease-in-out infinite;
   }
-  
+
   .animate-rotate {
     animation: rotate 10s linear infinite;
   }
-  
+
   .animate-scale {
     animation: scaleUp 2s ease-in-out infinite;
   }
@@ -382,14 +401,12 @@
 
   /* Primary Button - WDI Brand Style with Elevation */
   .btn-primary-wdi {
-    background: linear-gradient(
-      90deg,
-      #E5195E,
-      #E5195E 40%,
-      #ff2970 50%,
-      #E5195E 60%,
-      #E5195E
-    );
+    background: linear-gradient(90deg,
+        #E5195E,
+        #E5195E 40%,
+        #ff2970 50%,
+        #E5195E 60%,
+        #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,
-      #374151,
-      #374151 40%,
-      #4b5563 50%,
-      #374151 60%,
-      #374151
-    );
+    background: linear-gradient(90deg,
+        #374151,
+        #374151 40%,
+        #4b5563 50%,
+        #374151 60%,
+        #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,
-      #dc2626,
-      #dc2626 40%,
-      #ef4444 50%,
-      #dc2626 60%,
-      #dc2626
-    );
+    background: linear-gradient(90deg,
+        #dc2626,
+        #dc2626 40%,
+        #ef4444 50%,
+        #dc2626 60%,
+        #dc2626);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -585,23 +598,23 @@
   .delay-300 {
     animation-delay: 300ms;
   }
-  
+
   .delay-500 {
     animation-delay: 500ms;
   }
-  
+
   .delay-700 {
     animation-delay: 700ms;
   }
-  
+
   .delay-1000 {
     animation-delay: 1000ms;
   }
-  
+
   .delay-1200 {
     animation-delay: 1200ms;
   }
-  
+
   .delay-1500 {
     animation-delay: 1500ms;
   }
@@ -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;
 }