Add .gitea/workflows/deploy.yml

.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=/var/www/app-prod" >> $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

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

@@ -94,7 +94,7 @@ export const AboutYourProject: React.FC<AboutYourProjectProps> = () => {
   }).test(
     'human-verification',
     'Human verification is required',
-    function(value) {
+    function (value) {
       return isHumanVerified;
     }
   );
@@ -419,8 +419,11 @@ export const AboutYourProject: React.FC<AboutYourProjectProps> = () => {
             <span className="text-[#E5195E]">Project</span>
           </h2>
           <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
-            Fill out the form below and our experts will get back to you within
-            24 hours
+            Fill out the form below and our AI mobile app and AI development experts will get back to you within 24 hours.            </p>
+
+          <p className="text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">
+
+            We’ll review your idea, provide a tailored roadmap, and discuss the best approach. Whether it’s a custom AI‑powered mobile app, AI‑driven web application, or end‑to‑end AI integration.
           </p>
         </motion.div>
 

components/CarouselTestimonials.tsx

@@ -201,8 +201,8 @@ const StarRating = ({ rating }: { rating: number }) => {
         <Star
           key={i}
           className={`w-4 h-4 ${i < rating
-              ? 'text-yellow-400 fill-yellow-400'
-              : 'text-gray-600 fill-gray-600'
+            ? 'text-yellow-400 fill-yellow-400'
+            : 'text-gray-600 fill-gray-600'
             }`}
         />
       ))}
@@ -424,7 +424,7 @@ export const CarouselTestimonials = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            Don't just take our word for it. Here's what founders and product leaders say about working with us.
+            Don’t just take our word for it. Read what founders and AI‑driven product leaders say about building web and mobile apps with us.
           </motion.p>
         </div>
 

components/CaseStudySlider.tsx

@@ -40,6 +40,7 @@ import { ImageWithFallback } from "./figma/ImageWithFallback";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card, CardContent } from "./ui/card";
+import { link } from "fs";
 
 // Internal data (no need to pass props)
 const defaultCaseStudies = [
@@ -100,8 +101,8 @@ const defaultCaseStudies = [
         category: "Loyalty & Rewards",
         industry: "Hospitality",
         featured: false,
-        link: "/comming-soon",
-        icon: Utensils
+        // link: "/comming-soon",
+        link: "", icon: Utensils
     },
     {
         id: 9,
@@ -130,7 +131,8 @@ const defaultCaseStudies = [
         category: "Lifestyle",
         industry: "Chemicals",
         featured: false,
-        link: "/comming-soon",
+        // link: "/comming-soon",
+        link: "",
         icon: FlaskConical
     },
     {
@@ -150,8 +152,8 @@ const defaultCaseStudies = [
         category: "Lifestyle",
         industry: "Consumer",
         featured: false,
-        link: "/comming-soon",
-        icon: Trophy
+        // link: "/comming-soon",
+        link: "", icon: Trophy
     },
     {
         id: 14,
@@ -180,8 +182,8 @@ const defaultCaseStudies = [
         category: "AgriTech",
         industry: "Agriculture",
         featured: false,
-        link: "/comming-soon",
-        icon: Tractor
+        // link: "/comming-soon",
+        link: "", icon: Tractor
     },
     {
         id: 17,
@@ -190,8 +192,8 @@ const defaultCaseStudies = [
         category: "AgriTech",
         industry: "Agriculture",
         featured: false,
-        link: "/comming-soon",
-        icon: Globe
+        // link: "/comming-soon",
+        link: "", icon: Globe
     },
 ];
 
@@ -261,7 +263,7 @@ export const CaseStudySlider = ({
     };
 
     return (
-        <section 
+        <section
             className="py-20 pt-10"
             onMouseEnter={() => setIsAutoPlaying(false)}
             onMouseLeave={() => setIsAutoPlaying(autoPlay)}
@@ -272,19 +274,19 @@ export const CaseStudySlider = ({
                 <div className="flex items-center justify-end mb-8">
                     {caseStudies.length > visibleSlides && (
                         <div className="flex items-center gap-2">
-                            <Button 
-                                variant="outline" 
-                                size="icon" 
-                                onClick={prevSlide} 
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={prevSlide}
                                 disabled={currentIndex === 0}
                                 className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
                             >
                                 <ChevronLeft className="w-5 h-5" />
                             </Button>
-                            <Button 
-                                variant="outline" 
-                                size="icon" 
-                                onClick={nextSlide} 
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                onClick={nextSlide}
                                 disabled={currentIndex >= maxIndex}
                                 className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
                             >
@@ -298,12 +300,12 @@ export const CaseStudySlider = ({
                 <div className="relative overflow-hidden" ref={sliderRef}>
                     <motion.div
                         className="flex gap-6"
-                        animate={{ 
-                            x: `-${getTranslationPercentage()}%` 
+                        animate={{
+                            x: `-${getTranslationPercentage()}%`
                         }}
-                        transition={{ 
-                            type: "spring", 
-                            stiffness: 400, 
+                        transition={{
+                            type: "spring",
+                            stiffness: 400,
                             damping: 40,
                             duration: 0.6
                         }}
@@ -315,15 +317,15 @@ export const CaseStudySlider = ({
                                 <motion.div
                                     key={study.id}
                                     className="flex-shrink-0"
-                                    style={{ 
-                                        width: `calc(${100 / visibleSlides}% - 1.5rem)` 
+                                    style={{
+                                        width: `calc(${100 / visibleSlides}% - 1.5rem)`
                                     }}
                                     initial={{ opacity: 0, scale: 0.9 }}
                                     animate={{ opacity: 1, scale: 1 }}
-                                    transition={{ 
-                                        duration: 0.5, 
+                                    transition={{
+                                        duration: 0.5,
                                         delay: index * 0.1,
-                                        ease: "easeOut" 
+                                        ease: "easeOut"
                                     }}
                                 >
                                     <Card
@@ -333,20 +335,20 @@ export const CaseStudySlider = ({
                                         <CardContent className="h-full p-0 CardContentOverride">
                                             {/* Image */}
                                             <div className="relative overflow-hidden">
-                                                <ImageWithFallback 
-                                                    src={study.image} 
-                                                    alt={study.title} 
-                                                    className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110" 
+                                                <ImageWithFallback
+                                                    src={study.image}
+                                                    alt={study.title}
+                                                    className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
                                                 />
                                                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                                                
+
                                                 {/* Category Badge */}
                                                 <div className="absolute top-2 left-4">
                                                     <Badge className="text-xs text-white border-0 bg-accent/90">
                                                         {study.category}
                                                     </Badge>
                                                 </div>
-                                                
+
                                                 {/* Featured Badge */}
                                                 {study.featured && (
                                                     <div className="absolute top-2 right-4">
@@ -356,7 +358,7 @@ export const CaseStudySlider = ({
                                                         </div>
                                                     </div>
                                                 )}
-                                                
+
                                                 {/* Icon */}
                                                 <div className="absolute bottom-4 left-4">
                                                     <div className="flex items-center justify-center w-10 h-10 rounded-full bg-white/20 backdrop-blur-md">
@@ -379,11 +381,10 @@ export const CaseStudySlider = ({
                             <button
                                 key={index}
                                 onClick={() => goToSlide(index)}
-                                className={`w-2 h-2 rounded-full transition-all duration-300 ${
-                                    index === currentIndex 
-                                        ? "bg-accent w-6" 
+                                className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentIndex
+                                        ? "bg-accent w-6"
                                         : "bg-white/30 hover:bg-white/50"
-                                }`}
+                                    }`}
                             />
                         ))}
                     </div>

components/ClientLogos.tsx

@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 import { GridPattern } from "./GridPattern";
+import Flag from 'react-world-flags';
 
 const companyLogos = [
   { name: "TechFlow Solutions", logo: null, width: "140" },
@@ -38,90 +39,97 @@ const companyLogos = [
   { name: "InnovateLab", logo: null, width: "120" }
 ];
 
-const countryFlags = [
-  {
-    name: "United States",
-    alt: "United States flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#B22234"/>
-        <rect width="24" height="1.38" y="1.38" fill="white"/>
-        <rect width="24" height="1.38" y="4.15" fill="white"/>
-        <rect width="24" height="1.38" y="6.92" fill="white"/>
-        <rect width="24" height="1.38" y="9.69" fill="white"/>
-        <rect width="24" height="1.38" y="12.46" fill="white"/>
-        <rect width="24" height="1.38" y="15.23" fill="white"/>
-        <rect width="9.6" height="9.69" fill="#3C3B6E"/>
-      </svg>
-    )
-  },
-  {
-    name: "United Kingdom",
-    alt: "United Kingdom flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#012169"/>
-        <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
-        <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
-        <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
-        <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
-      </svg>
-    )
-  },
-  {
-    name: "India",
-    alt: "India flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="6" fill="#FF9933"/>
-        <rect width="24" height="6" y="6" fill="white"/>
-        <rect width="24" height="6" y="12" fill="#138808"/>
-        <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
-        <g transform="translate(12,9)">
-          {Array.from({length: 24}, (_, i) => (
-            <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
-          ))}
-        </g>
-      </svg>
-    )
-  },
-  {
-    name: "Canada",
-    alt: "Canada flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="6" height="18" fill="#FF0000"/>
-        <rect width="12" height="18" x="6" fill="white"/>
-        <rect width="6" height="18" x="18" fill="#FF0000"/>
-        <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
-      </svg>
-    )
-  },
-  {
-    name: "Australia",
-    alt: "Australia flag icon",
-    flagSvg: (
-      <svg viewBox="0 0 24 18" className="w-8 h-6">
-        <rect width="24" height="18" fill="#012169"/>
-        <g transform="scale(0.5)">
-          <rect width="24" height="9" fill="#012169"/>
-          <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
-          <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
-          <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
-          <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
-        </g>
-        <g fill="white">
-          <circle cx="18" cy="6" r="0.5"/>
-          <circle cx="20" cy="8" r="0.3"/>
-          <circle cx="19" cy="10" r="0.4"/>
-          <circle cx="21" cy="12" r="0.3"/>
-          <circle cx="18" cy="14" r="0.5"/>
-        </g>
-      </svg>
-    )
-  }
-];
+// const countryFlags = [
+//   {
+//     name: "United States",
+//     alt: "United States flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#B22234"/>
+//         <rect width="24" height="1.38" y="1.38" fill="white"/>
+//         <rect width="24" height="1.38" y="4.15" fill="white"/>
+//         <rect width="24" height="1.38" y="6.92" fill="white"/>
+//         <rect width="24" height="1.38" y="9.69" fill="white"/>
+//         <rect width="24" height="1.38" y="12.46" fill="white"/>
+//         <rect width="24" height="1.38" y="15.23" fill="white"/>
+//         <rect width="9.6" height="9.69" fill="#3C3B6E"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "United Kingdom",
+//     alt: "United Kingdom flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#012169"/>
+//         <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
+//         <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
+//         <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
+//         <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "India",
+//     alt: "India flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="6" fill="#FF9933"/>
+//         <rect width="24" height="6" y="6" fill="white"/>
+//         <rect width="24" height="6" y="12" fill="#138808"/>
+//         <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
+//         <g transform="translate(12,9)">
+//           {Array.from({length: 24}, (_, i) => (
+//             <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
+//           ))}
+//         </g>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "Canada",
+//     alt: "Canada flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="6" height="18" fill="#FF0000"/>
+//         <rect width="12" height="18" x="6" fill="white"/>
+//         <rect width="6" height="18" x="18" fill="#FF0000"/>
+//         <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
+//       </svg>
+//     )
+//   },
+//   {
+//     name: "Australia",
+//     alt: "Australia flag icon",
+//     flagSvg: (
+//       <svg viewBox="0 0 24 18" className="w-8 h-6">
+//         <rect width="24" height="18" fill="#012169"/>
+//         <g transform="scale(0.5)">
+//           <rect width="24" height="9" fill="#012169"/>
+//           <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
+//           <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
+//           <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
+//           <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
+//         </g>
+//         <g fill="white">
+//           <circle cx="18" cy="6" r="0.5"/>
+//           <circle cx="20" cy="8" r="0.3"/>
+//           <circle cx="19" cy="10" r="0.4"/>
+//           <circle cx="21" cy="12" r="0.3"/>
+//           <circle cx="18" cy="14" r="0.5"/>
+//         </g>
+//       </svg>
+//     )
+//   }
+// ];
 
+const countryFlags = [
+  { name: "United States", code: "US", alt: "United States flag" },
+  { name: "United Kingdom", code: "GB", alt: "United Kingdom flag" },
+  { name: "India", code: "IN", alt: "India flag" },
+  { name: "Canada", code: "CA", alt: "Canada flag" },
+  { name: "Australia", code: "AU", alt: "Australia flag" }
+];
 const ProjectImageCircles = () => (
   <motion.div
     initial={{ opacity: 0, y: 20 }}
@@ -136,15 +144,15 @@ const ProjectImageCircles = () => (
           key={index}
           initial={{ opacity: 0, scale: 0 }}
           whileInView={{ opacity: 1, scale: 1 }}
-          transition={{ 
-            duration: 0.5, 
+          transition={{
+            duration: 0.5,
             delay: 0.5 + (index * 0.1),
             type: "spring",
-            stiffness: 200 
+            stiffness: 200
           }}
           viewport={{ once: true }}
-          whileHover={{ 
-            scale: 1.1, 
+          whileHover={{
+            scale: 1.1,
             zIndex: 10,
             transition: { duration: 0.2 }
           }}
@@ -154,19 +162,20 @@ const ProjectImageCircles = () => (
             zIndex: countryFlags.length - index
           }}
         >
+          {/* Circular container */}
           <div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
-            <div 
+            <div
               className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
-              role="img" 
+              role="img"
               aria-label={flag.alt}
             >
-              {flag.flagSvg}
+              <Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
             </div>
           </div>
-          
+
           {/* Subtle glow effect */}
           <div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
-          
+
           {/* Tooltip */}
           <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
             <div className="text-center">
@@ -181,7 +190,7 @@ const ProjectImageCircles = () => (
 );
 
 const LogoCard = ({ name, width }: { name: string; width: string }) => (
-  <div 
+  <div
     className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
     style={{ minWidth: `${width}px` }}
   >
@@ -219,7 +228,7 @@ export const ClientLogos = () => {
   return (
     <section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
-      
+
       <div className="container relative z-10 px-6 mx-auto lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -232,10 +241,10 @@ export const ClientLogos = () => {
             Trusted by Founders and CTOs Across 15+ Countries
           </h2>
         </motion.div>
-        
+
         {/* Project Image Circles */}
         <ProjectImageCircles />
-        
+
         {/* Company Logos Ticker */}
         <div className="overflow-hidden">
           <MarqueeRow logos={companyLogos} />

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

@@ -185,7 +185,7 @@ const FeaturedCaseStudies = () => {
             Featured Success Stories
           </h2>
           <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
-            Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions.
+            Discover how AI mobile app development transformed companies across industries, delivering remarkable engagement and business results through innovative solutions.
           </p>
         </motion.div>
 
@@ -250,11 +250,11 @@ const FeaturedCaseStudies = () => {
                           >
                             <div className="flex items-center gap-3">
                               <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
-                                  study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
-                                    study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
-                                      study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
-                                        study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
-                                          'from-emerald-500 to-teal-500'
+                                study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
+                                  study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
+                                    study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
+                                      study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
+                                        'from-emerald-500 to-teal-500'
                                 } flex items-center justify-center flex-shrink-0`}>
                                 <AchievementIcon className="w-5 h-5 text-white" />
                               </div>
@@ -346,8 +346,13 @@ const FeaturedCaseStudies = () => {
           <h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
             More Success Stories
           </h3>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
 
-          <div className="grid items-stretch gap-8 lg:grid-cols-3">
+            Explore additional triumphs where AI-powered features revolutionized user engagement and drove exponential growth for diverse enterprises.
+
+          </p>
+          <div className="grid items-stretch gap-8 lg:grid-cols-3" style={{ marginTop: "25px" }}
+          >
             {moreSuccessStories.map((story, index) => {
               const AchievementIcon = story.keyAchievement.icon;
 
@@ -361,6 +366,7 @@ const FeaturedCaseStudies = () => {
                   className="h-full group"
                 >
                   <Card
+
                     className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                     onClick={() => {
                       if (story.title === 'TradersCircuit') {
@@ -397,11 +403,11 @@ const FeaturedCaseStudies = () => {
                             >
                               <div className="flex items-center gap-3">
                                 <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
-                                    story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
-                                      story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
-                                        story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
-                                          story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
-                                            'from-emerald-500 to-teal-500'
+                                  story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
+                                    story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
+                                      story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
+                                        story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
+                                          'from-emerald-500 to-teal-500'
                                   } flex items-center justify-center flex-shrink-0`}>
                                   <AchievementIcon className="w-5 h-5 text-white" />
                                 </div>

components/Footer.tsx

@@ -28,6 +28,9 @@ const footerNavigation = {
     { label: "Resources", url: "/resources" },
     { label: "Contact", url: "/start-a-project" },
   ],
+  // weServe: [
+  //   { label: "Mobile App Development", url: "/industries/startups" },
+  // ]
   Resources: [
     { label: "Articles", url: "/resources/blog" },
     { label: "Portfolio", url: "/case-studies" },
@@ -125,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",
@@ -184,7 +238,6 @@ const contactInfo = [
   },
 ];
 
-
 // FooterSection component with useNavigate inside
 const FooterSection = ({
   title,
@@ -205,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);
@@ -265,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 ? (
@@ -278,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"
@@ -305,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>
           )}
@@ -332,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 }}
@@ -348,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 */}
@@ -364,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" />
@@ -443,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>
 
@@ -452,4 +503,4 @@ export const Footer = () => {
       </footer>
     </>
   );
-};
+};

components/HeroSection.tsx

@@ -71,7 +71,7 @@ export function HeroSection() {
               transition={{ duration: 0.8, delay: 0.3 }}
             >
               {/* Architecting Digital Success for Startups & Enterprises */}
-              AI mobile application developers for Startups & Enterprises
+              Mobile application developers for Startups & Enterprises
             </motion.h1>
 
             <motion.p

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 🚀" },
@@ -264,8 +264,8 @@ 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,7 +274,8 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            Our proven process transforms your vision into reality through strategic planning, AI-powered design, and expert engineering every step of the way.
+            As a mobile app development company in the USA, we turn the vision you have for your app into reality through expert planning, innovative design, and intuitive engineering.
+
 
           </motion.p>
         </div>

package.json

@@ -58,6 +58,7 @@
     "react-responsive-masonry": "^2.7.1",
     "react-router-dom": "^7.6.3",
     "react-slick": "^0.30.3",
+    "react-world-flags": "^1.6.0",
     "recharts": "^2.15.4",
     "slick-carousel": "^1.8.1",
     "sonner": "^2.0.3",

pages/AIAutomationWorkflows.tsx

@@ -63,26 +63,41 @@ const AutomationHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-       <link rel="canonical" href="https://www.wdipl.com/services/ai-automation-workflows" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/ai-automation-workflows"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="AI Automation | Smart AI-Powered Workflows by WDI" />
+        <meta
+          property="og:title"
+          content="AI Automation | Smart AI-Powered Workflows by WDI"
+        />
         <meta
           property="og:description"
           content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
         />
         <meta property="og:url" content="https://www.wdipl.com/services" />
         <meta property="og:type" content="website" />
-        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+        <meta
+          property="og:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
+        />
 
         {/* Twitter Card Tags */}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="AI Automation | Smart AI-Powered Workflows by WDI" />
+        <meta
+          name="twitter:title"
+          content="AI Automation | Smart AI-Powered Workflows by WDI"
+        />
         <meta
           name="twitter:description"
           content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
         />
-        <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 +140,9 @@ const AutomationHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Revolutionize your operations by embedding Artificial
-                Intelligence into workflows, automating repetitive tasks, and
-                enhancing efficiency across your organization.
+                Embed AI into your workflows, automate repetitive tasks, and
+                boost efficiency with AI‑powered automation designed for modern
+                businesses.
               </p>
             </div>
 
@@ -491,6 +506,11 @@ const AutomationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Drive Efficiency and Innovation with AI Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A clean, self‑standing heading that pairs well with your earlier
+            “AI‑powered automation & workflow” section. If you want, you can add
+            a short line under it like
+          </p>
         </motion.div>
 
         <motion.div
@@ -626,6 +646,11 @@ const AutomationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to Workflow Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, AI‑led approach to workflow automation that aligns
+            with your business goals, streamlines operations, and powers
+            AI‑powered mobile and web solutions.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -783,6 +808,11 @@ const AutomationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized AI-Powered Automation Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Custom AI‑driven automation solutions that streamline workflows,
+            reduce manual effort, and power AI‑powered mobile and web
+            operations.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1078,6 +1108,10 @@ const AutomationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Real-World Impact of AI-Powered Automation
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Clear, outcome‑focused heading that sets up the section well. If
+            you’d like, you can pair it with a short lead‑in line like:
+          </p>
         </motion.div>
 
         <motion.div
@@ -1203,8 +1237,9 @@ const AutomationInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Discover how AI can transform your most repetitive and
-              time-consuming tasks.
+              Discover how AI‑powered automation can transform your most
+              repetitive and time‑consuming tasks into streamlined, AI‑driven
+              workflows.
             </p>
 
             <ShimmerButton
@@ -1314,7 +1349,8 @@ const HireAutomationEngineers = () => {
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
             Hire our specialists in RPA, intelligent process automation, and
-            workflow optimization with AI.
+            AI‑driven workflow optimization to build scalable, AI‑powered
+            automation solutions.
           </p>
         </motion.div>
 
@@ -1408,23 +1444,23 @@ const AutomationFAQs = () => {
     {
       question: "What types of processes are best suited for AI automation?",
       answer:
-        "AI automation works best for repetitive, rule-based processes with high volume and predictable patterns. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value.",
+        "AI automation works best for repetitive, rule‑based processes with high volume and predictable patterns, especially when they feed into AI‑powered mobile and web workflows. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value.",
     },
     {
       question: "How do you measure the ROI of AI automation?",
       answer:
-        "We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 12-36 months. Most clients see 200-400% ROI within the first year, with payback periods typically ranging from 6-18 months depending on process complexity and volume.",
+        "We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 12–36 months. Most clients see 200–400% ROI within the first year, with payback periods typically ranging from 6–18 months depending on process complexity and volume.",
     },
     {
       question: "What's the difference between RPA and IPA?",
       answer:
-        "RPA (Robotic Process Automation) handles rule-based, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decision-making based on variable inputs.",
+        "RPA (Robotic Process Automation) handles rule‑based, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decision‑making based on variable inputs.",
     },
     {
       question:
         "Do you provide training for staff after automation implementation?",
       answer:
-        "Yes, comprehensive training and change management are integral parts of our automation implementation. We provide role-specific training for system administrators, process owners, and end-users. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer train-the-trainer programs to build internal capabilities for scaling automation across your organization.",
+        "Yes, comprehensive training and change management are integral parts of our automation implementation, including AI‑powered automation projects. We provide role‑specific training for system administrators, process owners, and end‑users. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer train‑the‑trainer programs to build internal capabilities for scaling automation across your organization.",
     },
   ];
 
@@ -1517,7 +1553,8 @@ const AutomationFinalCTA = () => {
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
             Drive unprecedented efficiency, accuracy, and scalability by
-            integrating AI into your core business processes.
+            integrating AI‑powered automation into your core business processes
+            and workflows.
           </motion.p>
 
           <motion.div
@@ -1611,9 +1648,7 @@ export const AIAutomationWorkflows = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-background">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-background">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/AIChatbotsVirtualAssistants.tsx

@@ -123,9 +123,7 @@ const ChatbotsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building intelligent conversational AI solutions that enhance
-                customer service, streamline internal processes, and provide
-                instant, accurate information.
+                Building intelligent conversational AI solutions that enhance service, automate workflows, and deliver AI‑driven chatbot experiences for your users.
               </p>
             </div>
 
@@ -621,6 +619,9 @@ const ChatbotDevelopmentProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Approach to Conversational AI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A focused strategy to design and deploy conversational AI solutions that drive AI‑driven engagement and smarter support across your apps and platforms.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -783,6 +784,9 @@ const ChatbotServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Conversational AI Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Focused conversational AI products that deliver AI‑driven engagement, automate support, and streamline workflows for your apps and teams.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1018,6 +1022,9 @@ const ChatbotCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Intelligent Chatbots Driving Customer Engagement
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Smarter conversational AI bots that guide users, automate support, and drive higher engagement throughout the customer journey.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1143,8 +1150,7 @@ const ChatbotInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Let's discuss how conversational AI can transform your
-              interactions.
+              Let’s discuss how conversational AI can transform your interactions through AI‑powered chatbots that automate support, personalize journeys, and deliver instant, accurate answers.
             </p>
 
             <ShimmerButton
@@ -1253,8 +1259,7 @@ const HireChatbotDevelopers = () => {
             Access Expert Chatbot & Virtual Assistant Developers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialists in NLP, conversation design, and AI model
-            training for cutting-edge chatbots.
+            Leverage deep‑domain specialists in NLP and conversation design to create AI‑powered chatbots that fit your voice, workflows, and user‑experience goals.
           </p>
         </motion.div>
 
@@ -1347,24 +1352,24 @@ const ChatbotFAQs = () => {
   const faqs = [
     {
       question:
-        "What is the difference between a rule-based chatbot and an AI chatbot?",
+        "What is the difference between a rule‑based chatbot and an AI chatbot?",
       answer:
-        "Rule-based chatbots follow predefined decision trees and can only respond to specific keywords or phrases they're programmed to recognize. They're limited to scripted responses and can't handle variations in user queries. AI chatbots, on the other hand, use natural language processing and machine learning to understand user intent, context, and variations in language. They can learn from conversations, handle complex queries, understand synonyms and context, and provide more natural, human-like responses. AI chatbots are more flexible, scalable, and capable of handling unexpected user inputs.",
+        "Rule‑based chatbots follow predefined decision trees and can only respond to specific keywords or phrases they are programmed to recognize. They are limited to scripted responses and cannot handle variations in user queries. AI chatbots, in contrast, use natural language processing (NLP) and machine learning to understand user intent, context, and variations in language. They learn from conversations, handle complex queries, recognize synonyms and context shifts, and provide more natural, human‑like responses. AI chatbots are more flexible, scalable, and able to cope with unexpected inputs.",
     },
     {
       question: "How long does it take to develop a custom chatbot?",
       answer:
-        "The development timeline varies based on complexity and requirements. A simple rule-based chatbot can be developed in 2-4 weeks, while a basic AI chatbot typically takes 6-8 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training can take 3-6 months. Factors affecting timeline include: conversation complexity, number of integrations, training data availability, multi-language support, voice capabilities, and testing requirements. We provide detailed project timelines during the planning phase based on your specific needs.",
+        "The development timeline depends on scope and complexity. A simple rule‑based chatbot can be built in 2–4 weeks, while a basic AI chatbot typically takes 6–8 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training usually requires 3–6 months. Key factors affecting the timeline include conversation complexity, the number of integrations, availability of training data, multi‑language support, voice capabilities, and testing depth. We provide a detailed, project‑specific timeline during the planning phase.",
     },
     {
       question: "Can a chatbot integrate with my existing CRM/ERP system?",
       answer:
-        "Yes, chatbots can integrate with virtually any CRM, ERP, or business system through APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custom systems. Integration capabilities include: retrieving customer information, updating records, creating tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, real-time data synchronization while maintaining data privacy and system performance. The integration complexity depends on your system's API capabilities and security requirements.",
+        "Yes. Chatbots can integrate with virtually any CRM, ERP, or business system using APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custom‑built platforms. Typical integration capabilities include retrieving customer profiles, updating records, creating support tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, real‑time data sync, maintain data‑privacy standards, and optimize for system performance. Complexity depends on your system’s API maturity and security requirements.",
     },
     {
       question: "How do you measure the success of a chatbot?",
       answer:
-        "Chatbot success is measured through multiple key performance indicators (KPIs): User Engagement (conversation completion rate, session duration, return users), Resolution Metrics (first contact resolution, escalation rate, successful task completion), Customer Satisfaction (CSAT scores, user feedback ratings, Net Promoter Score), Operational Efficiency (response time, cost per interaction, agent workload reduction), and Business Impact (lead generation, conversion rates, cost savings). We implement comprehensive analytics dashboards to track these metrics in real-time and provide regular performance reports with actionable insights for continuous improvement.",
+        "We implement analytics dashboards that monitor these KPIs in real time and deliver regular performance reports with actionable recommendations for continuous improvement.",
     },
   ];
 

pages/AIIntegrationDigitalProducts.tsx

@@ -59,26 +59,41 @@ const AIIntegrationHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/ai-integration-digital-products" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/ai-integration-digital-products"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="AI Integration | Smarter Digital Products with AI | WDI" />
+        <meta
+          property="og:title"
+          content="AI Integration | Smarter Digital Products with AI | WDI"
+        />
         <meta
           property="og:description"
           content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms."
         />
         <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="AI Integration | Smarter Digital Products with AI | WDI" />
+        <meta
+          name="twitter:title"
+          content="AI Integration | Smarter Digital Products with AI | WDI"
+        />
         <meta
           name="twitter:description"
           content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms."
         />
-        <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,9 +136,9 @@ const AIIntegrationHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Elevate your existing applications with intelligent features
-                that personalize user experiences, automate functions, and
-                provide predictive insights.
+                Enhance your existing digital products with AI‑driven features
+                that personalize experiences, automate tasks, and deliver
+                predictive insights.
               </p>
             </div>
 
@@ -543,6 +558,11 @@ const AIIntegrationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Integrate AI into Your Existing Products?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            To unlock AI‑powered features that enhance user experiences,
+            automate key functions, and deliver predictive insights without
+            rebuilding your digital products from scratch.
+          </p>
         </motion.div>
 
         <motion.div
@@ -676,8 +696,13 @@ const AIIntegrationProcess = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
-            Our Strategic Approach to AI-Powered Product Enhancement
+            Our Strategic Approach to AI‑Powered Product Enhancement
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A clear roadmap to enrich your current products with AI‑driven
+            features that improve UX, automate workflows, and unlock predictive
+            insights.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -843,6 +868,11 @@ const AIIntegrationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized AI Product Integration Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Specialized AI product integration for existing apps and platforms,
+            focused on AI‑driven enhancements, seamless workflows, and faster
+            time‑to‑value.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1076,6 +1106,10 @@ const AIIntegrationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Digital Products Transformed by AI Integration
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            See how AI integration turns your current digital products into
+            smarter, faster, and more user‑focused mobile and web experiences.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1201,8 +1235,9 @@ const AIIntegrationInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Discover how AI can unlock new value and capabilities within your
-              existing applications.
+              Discover how AI‑powered integration can unlock new value,
+              capabilities, and personalized experiences within your existing
+              mobile and web applications.
             </p>
 
             <ShimmerButton
@@ -1312,8 +1347,8 @@ const HireAIIntegrationSpecialists = () => {
             Access Expert AI Integration Engineers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our skilled developers and data scientists experienced in
-            embedding AI models into diverse digital products.
+            Hire developers and data scientists who specialize in embedding AI
+            models into your existing digital products.
           </p>
         </motion.div>
 
@@ -1407,22 +1442,22 @@ const AIIntegrationFAQs = () => {
     {
       question: "What data do I need to prepare for AI integration?",
       answer:
-        "The data requirements depend on your specific AI use case. Generally, you'll need clean, relevant data that represents your users' behavior and preferences. For recommendation engines, user interaction data and product/content metadata are essential. For chatbots, conversation logs and FAQ databases help train the model. For predictive analytics, historical user behavior and outcome data are crucial. We conduct a thorough data audit to identify what you have, what you need, and help prepare your data for optimal AI performance.",
+        "The data requirements depend on your specific AI use case. Generally, you’ll need clean, relevant data that represents your users’ behavior and preferences, especially for AI‑powered mobile and web experiences. For recommendation engines, user interaction data and product/content metadata are essential. For chatbots, conversation logs and FAQ databases help train the model. For predictive analytics, historical user behavior and outcome data are crucial. We conduct a thorough data audit to identify what you have, what you need, and help prepare your data for optimal AI performance.",
     },
     {
       question: "Will AI integration impact my app's performance?",
       answer:
-        "When implemented correctly, AI integration should enhance rather than hinder your app's performance. We use efficient API architectures, caching strategies, and optimized models to minimize latency. Many AI features can be processed asynchronously or in the background. We also implement progressive loading and fallback mechanisms to ensure your app remains fast and responsive. Performance testing is a crucial part of our integration process to ensure optimal user experience.",
+        "When implemented correctly, AI integration should enhance rather than hinder your app’s performance. We use efficient API architectures, caching strategies, and optimized models to minimize latency. Many AI features can be processed asynchronously or in the background. We also implement progressive loading and fallback mechanisms to ensure your app remains fast and responsive. Performance testing is a crucial part of our integration process to ensure optimal user experience for AI‑powered mobile and web applications.",
     },
     {
       question: "Can you integrate AI into legacy applications?",
       answer:
-        "Yes, we specialize in integrating AI into legacy applications through various approaches. We can create API-based integrations that work with existing systems, implement microservices architectures for gradual AI adoption, or develop hybrid solutions that bridge old and new technologies. Our team assesses your current architecture and recommends the best integration approach that minimizes disruption while maximizing AI benefits. We've successfully integrated AI into applications built on various legacy technologies.",
+        "Yes, we specialize in integrating AI into legacy applications through various approaches. We can create API‑based integrations that work with existing systems, implement microservices architectures for gradual AI adoption, or develop hybrid solutions that bridge old and new technologies. Our team assesses your current architecture and recommends the best integration approach that minimizes disruption while maximizing AI benefits for your existing digital products.",
     },
     {
       question: "How do you handle data privacy and security with AI features?",
       answer:
-        "Data privacy and security are paramount in our AI integrations. We implement privacy-by-design principles, ensuring compliance with GDPR, CCPA, and other relevant regulations. This includes data encryption, anonymization techniques, secure API communications, and minimal data collection practices. We can implement on-premise AI solutions for sensitive data, use federated learning approaches, or ensure strict data governance in cloud deployments. All AI models are designed with privacy protection and security best practices from the ground up.",
+        "Data privacy and security are paramount in our AI integrations. We implement privacy‑by‑design principles, ensuring compliance with GDPR, CCPA, and other relevant regulations. This includes data encryption, anonymization techniques, secure API communications, and minimal  data collection practices. We can implement on‑premise AI solutions for sensitive data, use federated learning approaches, or ensure strict data governance in cloud deployments. All AI models are designed with privacy protection and security best practices from the ground up, especially for AI‑powered features.",
     },
   ];
 
@@ -1514,8 +1549,7 @@ const AIIntegrationFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Empower your digital offerings with WDI's expertise in seamlessly
-            embedding cutting-edge AI features.
+            Empower your digital offerings with WDI’s expertise in seamlessly embedding cutting‑edge AI features and AI‑powered enhancements.
           </motion.p>
 
           <motion.div
@@ -1609,9 +1643,7 @@ export const AIIntegrationDigitalProducts = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-background">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-background">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/AIModelDeploymentMLOps.tsx

@@ -123,9 +123,7 @@ const MLOpsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Ensuring your Machine Learning models are seamlessly deployed,
-                efficiently managed, and continuously optimized for peak
-                performance in production environments.
+                Streamline AI model deployment and MLOps workflows to deploy, monitor, and optimize machine learning models in production, ensuring reliable, scalable, and high‑performance AI systems.
               </p>
             </div>
 
@@ -488,6 +486,9 @@ const MLOpsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Robust MLOps is Crucial for Your AI Success
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Robust MLOps is essential for turning machine learning models into scalable, production‑ready AI systems that deliver reliable, secure, and continuously optimized performance across your organization.
+          </p>
         </motion.div>
 
         <motion.div
@@ -629,6 +630,9 @@ const MLOpsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Approach to MLOps Excellence
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, end‑to‑end MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, production‑grade results.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -795,6 +799,9 @@ const MLOpsServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized MLOps Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A structured, end‑to‑end MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, production‑grade results.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1040,6 +1047,9 @@ const MLOpsCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Ensuring AI Performance in Production
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Proactively monitoring, measuring, and optimizing AI model performance in production to maintain accuracy, stability, scalability, and low‑latency inference across real‑world workloads.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1165,8 +1175,7 @@ const MLOpsInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Ensure your AI investments deliver continuous value with expert
-              deployment and maintenance.
+              Ensure your AI and machine learning models deliver continuous business value through expert deployment, monitoring, and ongoing MLOps‑driven optimization.
             </p>
 
             <ShimmerButton
@@ -1276,8 +1285,7 @@ const HireMLOpsEngineers = () => {
             Access Expert MLOps & ML Infrastructure Talent
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our specialized engineers proficient in deploying, monitoring,
-            and maintaining production-grade ML models.
+            Hire our specialized engineers proficient in deploying, monitoring, and maintaining production‑grade machine learning models, with deep expertise in MLOps, model observability, and scalable ML infrastructure.
           </p>
         </motion.div>
 
@@ -1371,22 +1379,22 @@ const MLOpsFAQs = () => {
     {
       question: 'What is "model drift" and how do you handle it?',
       answer:
-        "Model drift occurs when a machine learning model's performance degrades over time due to changes in the underlying data distribution or relationships between variables. There are two main types: data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy.",
+        "Model drift occurs when a machine learning model’s performance degrades over time due to changes in the underlying data distribution or relationships between variables. The two main types are data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy and keep your AI systems performing at peak levels in production.",
     },
     {
       question: "How do you ensure data security for models in production?",
       answer:
-        "We implement comprehensive security measures at multiple levels: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with role-based permissions, audit logging for all model interactions, and compliance with industry standards like GDPR, HIPAA, and SOC 2. We also employ techniques like differential privacy, federated learning where appropriate, and secure multi-party computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure and data.",
+        "We implement comprehensive security measures at multiple levels for production‑grade AI and machine learning models: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with role‑based permissions, audit logging for all model interactions, and compliance with industry standards such as GDPR, HIPAA, and SOC 2.  We also employ techniques like differential privacy, federated learning where appropriate, and secure multi‑party computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure, models, and training data throughout the MLOps lifecycle.",
     },
     {
       question: "What is the difference between DevOps and MLOps?",
       answer:
-        "While DevOps focuses on software development and deployment, MLOps extends these practices to machine learning workflows with unique considerations: MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), deals with non-deterministic outcomes and model retraining, requires specialized infrastructure for GPU/TPU workloads, and addresses ML-specific compliance and explainability requirements. MLOps also involves continuous training alongside continuous integration/deployment, and requires different tooling for model registries, feature stores, and ML-specific monitoring systems.",
+        "While DevOps focuses on software development, testing, and deployment, MLOps extends these practices to machine learning workflows with unique requirements. MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), and deals with non‑deterministic outcomes and periodic model retraining. MLOps also requires specialized infrastructure for GPU/TPU workloads, addresses ML‑specific compliance, explainability, and governance needs, and includes continuous training in addition to continuous integration and deployment. It relies on different tooling for model registries, feature stores, and ML‑specific monitoring systems, making it the backbone of scalable, production‑ready AI.",
     },
     {
       question: "Can you help migrate existing models to a new MLOps platform?",
       answer:
-        "Yes, we specialize in MLOps platform migrations and model modernization. Our migration process includes: comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms (AWS SageMaker, Azure ML, Google AI Platform, on-premise to cloud, etc.) and ensure all model governance, monitoring, and compliance requirements are maintained throughout the transition.",
+        "Yes. We specialize in MLOps platform migrations and ML model modernization. Our migration process includes a comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms such as AWS SageMaker, Azure ML, Google AI Platform, and on‑premise to cloud environments, ensuring all model governance, monitoring, and compliance requirements are maintained throughout the transition and that your AI investments continue to deliver value in the new MLOps ecosystem.",
     },
   ];
 

pages/AboutWDI.tsx

@@ -96,7 +96,7 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                WDI is a dynamic and forward-thinking company dedicated to transforming businesses through cutting-edge technology and exceptional service.
+                WDI is a dynamic, AI‑driven company dedicated to transforming businesses through cutting‑edge technology and exceptional digital solutions.
               </p>
             </div>
 
@@ -192,8 +192,7 @@ const WhyChooseWDISection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Our core strengths that set us apart in the industry
-          </p>
+            Our AI‑driven core strengths that set us apart in the digital solutions and app development industry.          </p>
         </motion.div>
 
         <motion.div
@@ -265,7 +264,7 @@ const ImpactNumbersSection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Measurable results that speak to our commitment and expertise
+            Measurable AI‑driven results that speak to our commitment and expertise in digital solutions and app development.
           </p>
         </motion.div>
 
@@ -501,7 +500,7 @@ const MissionSection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mb-12">
-            To empower businesses worldwide with innovative digital solutions that drive growth, enhance efficiency, and create lasting value. We believe in the transformative power of technology and are committed to making it accessible, reliable, and impactful for every client we serve.
+            To empower businesses worldwide with AI‑driven digital solutions that drive growth, enhance efficiency, and create lasting value. We believe in the transformative power of technology and are committed to making it accessible, reliable, and impactful for every client we serve.
           </p>
         </motion.div>
 
@@ -617,23 +616,23 @@ const InlineCTA = () => {
 const aboutWDIFAQs = [
   {
     question: "When was WDI founded?",
-    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
+    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting‑edge technology and exceptional digital solutions. Today, we are recognized industry leaders in AI‑powered app and web development."
   },
   {
     question: "What makes WDI different from other development companies?",
-    answer: "Our unique combination of technical expertise, innovative approach, and client-focused service sets us apart. We don't just deliver projects; we build lasting partnerships and drive real business value."
+    answer: "Our unique combination of AI‑driven technical expertise, innovative product thinking, and client‑first service sets us apart. We don’t just deliver projects we build lasting partnerships and drive measurable business growth."
   },
   {
     question: "How many clients has WDI served?",
-    answer: "We've had the privilege of serving over 50 global clients across various industries, delivering more than 500 successful projects with a 98% client satisfaction rate."
+    answer: "We’ve had the privilege of serving over 50 global clients across multiple industries, delivering more than 500 successful AI‑driven web and mobile projects with a 98% client satisfaction rate."
   },
   {
     question: "What industries does WDI specialize in?",
-    answer: "We serve clients across multiple industries including fintech, healthcare, e-commerce, education, and enterprise solutions. Our diverse expertise allows us to adapt our solutions to any industry's specific needs."
+    answer: "We specialize in fintech, healthcare, e‑commerce, education, and enterprise digital solutions. Our AI‑driven development experience allows us to customize scalable products for any industry’s unique needs."
   },
   {
     question: "Does WDI offer ongoing support after project completion?",
-    answer: "Absolutely! We believe in long-term partnerships with our clients. We provide comprehensive post-launch support, maintenance, updates, and continuous optimization to ensure your solutions evolve with your business needs."
+    answer: "Absolutely. We believe in long‑term partnerships and provide comprehensive post‑launch support, maintenance, updates, and continuous optimization so your AI‑driven solutions evolve with your business."
   }
 ];
 
@@ -651,7 +650,7 @@ export const AboutWDI = () => {
       <InlineCTA />
       <FAQSection
         title="About WDI Questions"
-        subtitle="Get answers to common questions about our company and mission."
+        subtitle="Get answers to common questions about our company, AI‑driven services, and mission."
         faqs={aboutWDIFAQs}
       />
       {/* <Footer /> */}

pages/AmozProject.tsx

@@ -3,6 +3,7 @@ import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
+import amozImg from "../assets/amoz.jpg"
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
@@ -13,7 +14,7 @@ export const AmozProject = () => {
   return (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -26,11 +27,11 @@ export const AmozProject = () => {
                   AI Social Commerce Case Study
                 </Badge>
               </div>
-              
+
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                 Amoz Platform
               </h1>
-              
+
               <p className="text-xl text-muted-foreground mb-8 font-manrope">
                 AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
               </p>
@@ -56,10 +57,21 @@ export const AmozProject = () => {
                   <div className="text-lg font-bold text-white font-manrope">8 experts</div>
                   <div className="text-xs text-muted-foreground font-manrope">Team Size</div>
                 </div>
-                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                {/* <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                   <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                   <div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div>
                   <div className="text-xs text-muted-foreground font-manrope">Platforms</div>
+                </div> */}
+                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
+                  <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
+
+                  <div className="text-lg font-bold text-white font-manrope break-words">
+                    iOS/Android/Web
+                  </div>
+
+                  <div className="text-xs text-muted-foreground font-manrope">
+                    Platforms
+                  </div>
                 </div>
                 <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                   <DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
@@ -86,7 +98,7 @@ export const AmozProject = () => {
 
               {/* CTA Buttons */}
               <div className="flex flex-col sm:flex-row gap-4">
-                <Button 
+                <Button
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
                   onClick={() => navigate('/start-a-project')}
@@ -94,7 +106,7 @@ export const AmozProject = () => {
                   Build Your AI Commerce Platform
                   <ArrowRight className="w-5 h-5 ml-2" />
                 </Button>
-                <Button 
+                <Button
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -107,8 +119,8 @@ export const AmozProject = () => {
 
             <div className="relative">
               <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
-                <ImageWithFallback 
-                  src="/images/amoz-platform-mockup.jpg"
+                <ImageWithFallback
+                  src={amozImg}
                   alt="Amoz AI-Powered Social Commerce Platform"
                   className="w-full h-full object-cover rounded-lg"
                 />
@@ -138,7 +150,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
-            
+
             <div className="grid md:grid-cols-3 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -179,7 +191,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-12">
               <div>
                 <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -227,7 +239,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-12 mb-16">
               <div>
                 <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -312,43 +324,43 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
-            
+
             <div className="mb-12">
               <div className="text-center mb-8">
                 <p className="text-lg text-muted-foreground font-manrope">
                   <strong>Agile</strong> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
                 </p>
               </div>
-              
+
               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {[
-                  { 
-                    phase: "Discovery & Planning", 
+                  {
+                    phase: "Discovery & Planning",
                     duration: "3 weeks",
                     description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
                   },
-                  { 
-                    phase: "Design & Prototyping", 
+                  {
+                    phase: "Design & Prototyping",
                     duration: "5 weeks",
                     description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
                   },
-                  { 
-                    phase: "Core Development", 
+                  {
+                    phase: "Core Development",
                     duration: "10 weeks",
                     description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
                   },
-                  { 
-                    phase: "Live Shopping & Messaging", 
+                  {
+                    phase: "Live Shopping & Messaging",
                     duration: "5 weeks",
                     description: "Real-time video streaming module, in-app chat and engagement features"
                   },
-                  { 
-                    phase: "Testing & Optimization", 
+                  {
+                    phase: "Testing & Optimization",
                     duration: "3 weeks",
                     description: "Load & stress testing for peak events, AI accuracy tuning"
                   },
-                  { 
-                    phase: "Launch & Scaling", 
+                  {
+                    phase: "Launch & Scaling",
                     duration: "2 weeks",
                     description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
                   }
@@ -379,7 +391,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
-            
+
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
               {[
                 {
@@ -431,7 +443,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
-            
+
             <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
               {[
                 { label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
@@ -492,7 +504,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -557,7 +569,7 @@ export const AmozProject = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -608,7 +620,7 @@ export const AmozProject = () => {
               Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button 
+              <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
                 onClick={() => navigate('/start-a-project')}
@@ -616,7 +628,7 @@ export const AmozProject = () => {
                 Start Your Project
                 <ArrowRight className="w-5 h-5 ml-2" />
               </Button>
-              <Button 
+              <Button
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

pages/ArtificialIntelligenceServices.tsx

@@ -32,38 +32,53 @@ const HeroWithCTA = () => {
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
-              {/* Page Title and Meta Description */}
-              <title>Artificial Intelligence | Custom AI Solutions by WDI</title>
-              <meta
-                name="description"
-                content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
-              />
-      
-              {/* Canonical Link */}
-              <link rel="canonical" href="https://www.wdipl.com/artificial-intelligence" />
-      
-              {/* Open Graph Tags (for Facebook, LinkedIn) */}
-              <meta property="og:title" content="Artificial Intelligence | Custom AI Solutions by WDI" />
-              <meta
-                property="og:description"
-                content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital 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" />
-      
-              {/* Twitter Card Tags */}
-              <meta name="twitter:card" content="summary_large_image" />
-              <meta name="twitter:title" content="Artificial Intelligence | Custom AI Solutions by WDI" />
-              <meta
-                name="twitter:description"
-                content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
-              />
-              <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>Artificial Intelligence | Custom AI Solutions by WDI</title>
+        <meta
+          name="description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
+        />
+
+        {/* Canonical Link */}
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/artificial-intelligence"
+        />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta
+          property="og:title"
+          content="Artificial Intelligence | Custom AI Solutions by WDI"
+        />
+        <meta
+          property="og:description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital 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"
+        />
+
+        {/* Twitter Card Tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          name="twitter:title"
+          content="Artificial Intelligence | Custom AI Solutions by WDI"
+        />
+        <meta
+          name="twitter:description"
+          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
+        />
+        <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",
@@ -76,8 +91,8 @@ const HeroWithCTA = () => {
                                 ]
                               }
                             `}
-              </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
@@ -106,9 +121,9 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Transform your business with cutting-edge artificial
-                intelligence solutions that drive automation, insights, and
-                competitive advantage.
+                Transform your business with cutting‑edge AI mobile app
+                development and artificial intelligence solutions that drive
+                automation, insights, and competitive advantage.
               </p>
             </div>
 
@@ -232,8 +247,9 @@ const HorizontalTagScroller = () => {
             <span className="text-white"> We Master</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Cutting-edge artificial intelligence technologies that power
-            next-generation business solutions.
+            Cutting‑edge artificial intelligence technologies that power
+            next‑generation business solutions and AI‑powered features for
+            modern mobile and web applications.
           </p>
         </motion.div>
 
@@ -360,7 +376,8 @@ const SideBySideContentWithIcons = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Leading AI innovation with proven results and expertise.
+            Leading AI innovation with proven results and expertise in
+            AI‑powered mobile and web development for modern businesses.
           </p>
         </motion.div>
 
@@ -465,8 +482,9 @@ const TabbedServiceDisplay = () => {
             AI Services & Solutions
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
-            Comprehensive artificial intelligence services designed to transform
-            your business operations and drive innovation.
+            Comprehensive artificial intelligence services, including AI mobile
+            app development and AI‑powered features, designed to transform your
+            business operations and drive innovation.
           </p>
         </motion.div>
 
@@ -556,7 +574,8 @@ const InlineCTA = () => {
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
               Unlock the power of artificial intelligence to automate processes,
-              gain insights, and drive competitive advantage.
+              gain insights, and drive competitive advantage with AI‑powered
+              mobile and web solutions.
             </p>
 
             {/* CTA Button */}
@@ -637,8 +656,7 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">AI Specialists</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Get access to expert AI professionals who build intelligent
-            solutions that drive business transformation.
+            Get access to expert AI professionals and AI mobile application developers who build intelligent solutions that drive business transformation.
           </p>
         </motion.div>
 
@@ -728,27 +746,27 @@ const aiServicesFAQs = [
   {
     question: "What types of AI solutions can WDI develop?",
     answer:
-      "We develop a wide range of AI solutions including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs.",
+      "We develop a wide range of AI solutions, including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs and AI mobile app development requirements.",
   },
   {
     question: "How do you ensure AI models are accurate and reliable?",
     answer:
-      "We follow rigorous testing methodologies, use cross-validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results.",
+      "We follow rigorous testing methodologies, use cross‑validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results for your AI‑powered applications.",
   },
   {
     question: "Can you integrate AI into our existing software systems?",
     answer:
-      "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack.",
+      "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack and support AI‑powered design.",
   },
   {
     question: "What is your approach to data privacy and AI ethics?",
     answer:
-      "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks.",
+      "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks for responsible AI solutions.",
   },
   {
     question: "How long does it take to develop and deploy an AI solution?",
     answer:
-      "Development timelines vary based on complexity, but typically range from 3-6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery.",
+      "Development timelines vary based on complexity, but typically range from 3–6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery of AI‑powered features.",
   },
 ];
 
@@ -765,7 +783,7 @@ export function ArtificialIntelligenceServices() {
       <HireDevelopersSection />
       <FAQSection
         title="AI Services Questions"
-        subtitle="Get answers to common questions about our artificial intelligence services."
+        subtitle="Get answers to common questions about our artificial intelligence services and AI‑powered features."
         faqs={aiServicesFAQs}
       />
       {/* <Footer /> */}

pages/Blog.tsx

@@ -257,11 +257,7 @@ export const Blog = () => {
               WDI Blog: Insights, Innovation & Industry Trends
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Welcome to the WDI Blog, your go-to source for the latest
-              insights, expert opinions, and thought leadership in software
-              development and digital transformation. We cover a range of topics
-              from cutting-edge technologies to industry best practices,
-              designed to inform, inspire, and empower your digital journey.
+              Welcome to the WDI Blog, your go-to source for the latest AI‑driven insights, expert opinions, and thought leadership in software development and digital transformation. We cover topics ranging from cutting‑edge AI technologies and cloud‑native development to industry best practices, designed to inform, inspire, and empower your digital journey.
             </p>
           </div>
         </div>
@@ -525,8 +521,7 @@ export const Blog = () => {
               Ready to Transform Your Business?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Get insights from our experts and discover how we can help
-              accelerate your digital transformation.
+              Get AI‑driven insights from our experts and discover how we can help accelerate your digital transformation.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

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

@@ -303,7 +303,7 @@ export const CaseStudies = () => {
               <span className="text-accent">Define Excellence</span>
             </h1>
             <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
-              Explore our portfolio of award-winning projects that have transformed businesses and delighted millions of users across diverse industries.
+              Explore our portfolio of AI‑driven, award‑winning projects that have transformed businesses and delighted millions of users across diverse industries.
             </p>
           </div>
         </motion.div>
@@ -461,7 +461,7 @@ export const CaseStudies = () => {
               Ready to Create Your Own Success Story?
             </h2>
             <p className="mb-8 text-xl leading-relaxed text-gray-300">
-              Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
+              Join the ranks of industry leaders who have transformed their businesses with our AI‑driven innovative solutions.
             </p>
             <div className="flex flex-col justify-center gap-4 sm:flex-row">
               <Button

pages/ClickablePrototypes.tsx

@@ -59,26 +59,41 @@ const PrototypesHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/clickable-prototypes" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/clickable-prototypes"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Prototypes | Mobile App Development Visualization | WDI" />
+        <meta
+          property="og:title"
+          content="Prototypes | Mobile App Development Visualization | WDI"
+        />
         <meta
           property="og:description"
           content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
         />
         <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="Prototypes | Mobile App Development Visualization | WDI" />
+        <meta
+          name="twitter:title"
+          content="Prototypes | Mobile App Development Visualization | WDI"
+        />
         <meta
           name="twitter:description"
           content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
         />
-        <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">
@@ -119,12 +134,13 @@ const PrototypesHeroWithCTA = () => {
             {/* Main Heading */}
             <div className="space-y-6">
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
-                Interactive Clickable Prototypes
+                Create Exceptional User Experiences with Research-Driven Design
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Visualize and test your digital product idea before development,
-                ensuring flawless user flows and gathering invaluable feedback.
+                Design solutions that not only look great but also drive
+                conversion and user engagement through AI-powered design and AI
+                mobile app thinking.
               </p>
             </div>
 
@@ -433,6 +449,11 @@ const PrototypeBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Prototype Before You Build?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Test clickable prototypes early to perfect user flows, catch design
+            flaws, and gather stakeholder feedback, saving costs before full AI
+            mobile application development and web development.
+          </p>
         </motion.div>
 
         <motion.div
@@ -524,6 +545,12 @@ const PrototypingProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Process for Bringing Your Idea to Life
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            We turn your vision into reality with clickable prototypes,
+            intuitive user flows, and continuous user feedback to shape an AI
+            mobile app or web product users truly love, built by an experienced
+            AI app development company.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -678,6 +705,12 @@ const PrototypingServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Specialized Prototyping Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Advanced clickable prototypes for seamless user flows, rapid user
+            feedback loops, and polished interactive prototypes tailored to your
+            AI mobile app, iOS mobile app development, and web development
+            roadmap.{" "}
+          </p>
         </motion.div>
 
         <motion.div
@@ -836,8 +869,10 @@ const PrototypingTools = () => {
             Prototyping Tools We Use
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Utilizing industry-leading tools to create realistic and testable
-            prototypes.
+            Utilizing industry‑leading tools like Figma, ProtoPie, and Proto.io
+            to create realistic, interactive and testable clickable prototypes
+            that reflect true user interactions for AI mobile app and AI iOS
+            development projects.
           </p>
         </motion.div>
 
@@ -849,40 +884,41 @@ const PrototypingTools = () => {
           className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
         >
           {tools.map((tech, index) => {
-              const IconComponent = tech.icon;
-              const colorClasses = {
-                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
-                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
-                green: "bg-green-500/20 text-green-400 border-green-500/30",
-                red: "bg-red-500/20 text-red-400 border-red-500/30",
-              };
+            const IconComponent = tech.icon;
+            const colorClasses = {
+              blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+              orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+              green: "bg-green-500/20 text-green-400 border-green-500/30",
+              red: "bg-red-500/20 text-red-400 border-red-500/30",
+            };
 
-              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, scale: 1.05 }}
-                  className="group"
-                >
-                  <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] ||
-                        "bg-accent/20 text-accent border-accent/30"
-                        }`}
-                    >
-                      <IconComponent className="w-6 h-6" />
-                    </div>
-                    <h4 className="font-semibold text-white text-sm mb-1">
-                      {tech.name}
-                    </h4>
-                    <p className="text-xs text-gray-400">{tech.category}</p>
-                  </Card>
-                </motion.div>
-              );
-            })}
+            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, scale: 1.05 }}
+                className="group"
+              >
+                <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] ||
+                      "bg-accent/20 text-accent border-accent/30"
+                    }`}
+                  >
+                    <IconComponent className="w-6 h-6" />
+                  </div>
+                  <h4 className="font-semibold text-white text-sm mb-1">
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-gray-400">{tech.category}</p>
+                </Card>
+              </motion.div>
+            );
+          })}
         </motion.div>
       </div>
     </section>
@@ -940,6 +976,12 @@ const PrototypingCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Prototypes That Led to Successful Products
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Clickable prototypes transformed Dyson vacuums, Apple iPhones, and
+            Super Soakers into billion‑dollar successes through perfected user
+            flows and feedback, much like a modern AI mobile app or iOS mobile
+            app development project would.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1171,8 +1213,9 @@ const HirePrototypeDesigners = () => {
             Need Expertise in Interactive Prototyping?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Our designers specialize in creating realistic and testable
-            prototypes for web and mobile applications.
+            Our AI mobile application developers and designers specialize in
+            clickable prototypes and realistic, testable user flows for AI
+            mobile app, iOS mobile app development, and web development
           </p>
         </motion.div>
 
@@ -1237,8 +1280,11 @@ const HirePrototypeDesigners = () => {
           className="text-center space-y-6"
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigate("/hire-talent/clickable-prototypes-developers")}
+            <ShimmerButton
+              className="text-lg px-8 py-4"
+              onClick={() =>
+                navigate("/hire-talent/clickable-prototypes-developers")
+              }
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1376,8 +1422,10 @@ const PrototypingFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Reduce risk and ensure product-market fit by visualizing and testing
-            your ideas before coding begins.
+            Reduce risk and ensure product‑market fit by visualizing and testing
+            clickable prototypes, refining user flows, and collecting user
+            feedback before full AI mobile app development, AI iOS development,
+            or web development begins.
           </motion.p>
 
           <motion.div
@@ -1471,9 +1519,7 @@ export const ClickablePrototypes = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-background">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-background">{/* <Footer /> */}</section>
     </div>
   );
 };

pages/ClientTestimonials.tsx

@@ -454,14 +454,10 @@ export const ClientTestimonials = () => {
               </Badge>
             </div>
             <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-              Client Testimonials: Our Clients' Success, Our Greatest Reward
+              Client Testimonials: Real Results, Real Impact
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Nothing speaks louder than the words of our satisfied clients. At
-              WDI, we're dedicated to building strong partnerships and
-              delivering exceptional results. Read what our clients have to say
-              about their experiences working with our dedicated teams and
-              innovative solutions.
+              There’s no better proof of success than feedback from our clients. At WDI, we focus on building long‑term, AI‑driven collaborations and delivering measurable business outcomes. Explore what our clients have to say about their experience with our expert teams and innovative app and web solutions.
             </p>
           </div>
         </div>
@@ -730,8 +726,7 @@ export const ClientTestimonials = () => {
               Ready to Join Our Success Stories?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Become our next success story. Let's discuss how we can help you
-              achieve exceptional results for your business.
+              Become our next AI‑driven success story. Let’s discuss how we can help you achieve exceptional results for your web, mobile, and digital products.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

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

@@ -67,7 +67,7 @@ export const DedicatedDevelopmentTeams = () => {
     {
       category: "Team Solutions",
       title: "Dedicated Development Teams",
-      description: "Build your extended development team with our dedicated developers who work exclusively on your projects. Scale fast with pre-vetted talent that integrates seamlessly with your processes.",
+      description: "Build your extended AI mobile and web development team with our dedicated developers who work exclusively on your projects. Scale fast with pre‑vetted talent that integrates seamlessly into your workflows.",
       primaryCTA: {
         text: "Build Your Team",
         href: "/start-a-project",
@@ -225,8 +225,7 @@ export const DedicatedDevelopmentTeams = () => {
               Why Choose a WDI Dedicated Team?
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Experience the advantages of having a fully committed team working
-              exclusively on your projects
+              Experience the advantages of a fully committed AI‑driven app development team working exclusively on your AI mobile and web development solutions.
             </p>
           </div>
 
@@ -259,8 +258,7 @@ export const DedicatedDevelopmentTeams = () => {
               How Our Dedicated Teams Work
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              A streamlined process to get your dedicated team up and running
-            </p>
+              A streamlined process to get your AI‑driven app development team up and running, fully integrated with your AI mobile and web development workflows.            </p>
           </div>
 
           <div className="max-w-5xl mx-auto">
@@ -365,8 +363,7 @@ export const DedicatedDevelopmentTeams = () => {
               Ready to Build Your Innovation Hub?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Get a dedicated team that works exclusively for you with full
-              transparency and control.
+              Get a dedicated AI‑driven app development team that works exclusively for you, with full transparency and control over your AI mobile and web development initiatives.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

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

@@ -105,7 +105,7 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
+                Create engaging, intuitive experiences with AI-powered design that drive conversions and delight users through research-driven, modern design thinking.
               </p>
             </div>
 
@@ -195,7 +195,7 @@ const HorizontalTagScroller = () => {
             <span className="text-foreground"> & Expertise</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Comprehensive design services that create meaningful user experiences and drive business results.
+            Comprehensive iOS mobile app development design services that craft meaningful user experiences, boost engagement, and deliver measurable business results.
           </p>
         </motion.div>
 
@@ -315,8 +315,7 @@ const SideBySideContentWithIcons = () => {
           </h2>
 
           <p className="text-2xl text-gray-300 leading-relaxed">
-            User-centered design that drives measurable business results.
-          </p>
+            User-centered web development design that drives higher engagement, intuitive experiences, and measurable business results through proven UX methodologies.          </p>
         </motion.div>
 
         <motion.div
@@ -415,7 +414,7 @@ const TabbedServiceDisplay = () => {
             Design & Experience Services
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
-            Comprehensive design services that create meaningful connections between users and digital products.
+            Comprehensive AI mobile app design services that create meaningful connections between users and digital products through intuitive, conversion-focused experiences.
           </p>
         </motion.div>
 
@@ -502,8 +501,7 @@ const InlineCTA = () => {
 
             {/* Subtitle */}
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Design solutions that not only look great but also drive conversion and user engagement.
-            </p>
+              Design solutions that not only look great but also drive conversion and user engagement through AI-powered design.            </p>
 
             {/* CTA Button */}
             <div className="flex flex-col items-center gap-4">
@@ -583,8 +581,7 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">Design Experts</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Get access to talented designers who create beautiful, functional user experiences.
-          </p>
+            Get access to talented AI mobile application developers who create beautiful, functional user experiences that drive engagement and conversions.          </p>
         </motion.div>
 
         <motion.div
@@ -664,23 +661,23 @@ const HireDevelopersSection = () => {
 const designExperienceFAQs = [
   {
     question: "What is your design process?",
-    answer: "Our design process includes discovery, user research, wireframing, prototyping, visual design, usability testing, and iterative refinement. We involve clients at every stage to ensure alignment with business goals."
+    answer: "Our design process includes discovery, user research, wireframing, prototyping, visual design, usability testing, and iterative refinement. We involve clients at every stage with AI mobile app insights to ensure alignment with business goals."
   },
   {
     question: "How do you ensure designs convert users?",
-    answer: "We use data-driven design principles, conduct user research, A/B test design elements, analyze user behavior, and optimize based on conversion metrics to ensure designs drive business results."
+    answer: "We use data-driven design principles, conduct user research, A/B test design elements, analyze user behavior, and optimize based on conversion metrics. AI-powered features help predict user actions to maximize business results."
   },
   {
     question: "Do you create design systems?",
-    answer: "Yes, we create comprehensive design systems including component libraries, style guides, pattern libraries, and documentation to ensure consistency across all touchpoints and enable scalable design."
+    answer: "Yes, we create comprehensive design systems including component libraries, style guides, pattern libraries, and documentation. These ensure consistency across all touchpoints with web development scalability"
   },
   {
     question: "Can you redesign our existing product?",
-    answer: "Absolutely! We conduct design audits, user research, and competitive analysis to identify improvement opportunities, then redesign your product to enhance user experience and business performance."
+    answer: "Absolutely! We conduct design audits, user research, and competitive analysis to identify improvement opportunities. Then we redesign using iOS mobile app development standards to enhance user experience and performance."
   },
   {
     question: "How do you handle accessibility in design?",
-    answer: "We follow WCAG guidelines and design for accessibility from the start, ensuring our designs are inclusive and usable by people with various abilities. This includes color contrast, typography, navigation, and interaction design."
+    answer: "We follow WCAG guidelines and design for accessibility from the start, ensuring inclusivity for all abilities. This covers color contrast, typography, navigation, and interaction design with AI iOS development support."
   }
 ];
 
@@ -697,7 +694,7 @@ export function DesignExperience() {
       <HireDevelopersSection />
       <FAQSection
         title="Design & Experience Questions"
-        subtitle="Get answers to common questions about our design and user experience services."
+        subtitle="Get answers to common questions about design and user experience services enhanced with AI-powered design."
         faqs={designExperienceFAQs}
       />
       {/* <Footer /> */}

pages/DesignThinkingWorkshops.tsx

@@ -59,26 +59,41 @@ const WorkshopsHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-        <link rel="canonical" href="https://www.wdipl.com/services/design-thinking-workshops" />
+        <link
+          rel="canonical"
+          href="https://www.wdipl.com/services/design-thinking-workshops"
+        />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
-        <meta property="og:title" content="Design Thinking Workshop | Web Development Strategy" />
+        <meta
+          property="og:title"
+          content="Design Thinking Workshop | Web Development Strategy"
+        />
         <meta
           property="og:description"
           content="Join WDI’s interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning."
         />
         <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="Design Thinking Workshop | Web Development Strategy" />
+        <meta
+          name="twitter:title"
+          content="Design Thinking Workshop | Web Development Strategy"
+        />
         <meta
           name="twitter:description"
           content="Join WDI’s interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning."
         />
-        <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">
@@ -123,9 +138,10 @@ const WorkshopsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Unlock innovation and problem-solve effectively with WDI's
-                facilitated design thinking workshops, tailored to your business
-                challenges.
+                Unlock innovation and problem‑solve effectively with WDI’s
+                AI‑powered design thinking workshops, tailored to your business
+                challenges and aligned with your AI mobile app, web development,
+                and AI iOS development goals.
               </p>
             </div>
 
@@ -483,6 +499,12 @@ const WorkshopBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Facilitate Innovation with Design Thinking?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Design thinking aligns innovation with real user needs, enabling
+            AI-powered design, AI mobile app, and web development teams to
+            prototype faster, reduce risk, and deliver truly human‑centered
+            products.
+          </p>
         </motion.div>
 
         <motion.div
@@ -587,9 +609,11 @@ const DesignThinkingApproach = () => {
             <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
               WDI's Facilitated Design Thinking Journey
             </h2>
-            <p className="text-xl text-gray-300 leading-relaxed mb-8">
-              Our expert facilitators guide your team through every step,
-              ensuring clear objectives and actionable results.
+            <p className="mt-4 text-gray-400 leading-relaxed mb-8">
+              Our expert facilitators guide your team through every step with
+              AI‑powered design, turning challenges in AI mobile app, web
+              development, and AI iOS development into clear objectives and
+              actionable results.
             </p>
             <div className="flex items-center gap-4">
               <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
@@ -763,6 +787,12 @@ const WorkshopFormats = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Tailored Workshops for Your Specific Needs
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Custom‑designed Interactive Design Thinking Workshops aligned with
+            your AI mobile app, web development, and AI iOS development goals,
+            so your team builds AI‑powered features and products with clear,
+            user‑centered outcomes.
+          </p>
         </motion.div>
 
         <motion.div
@@ -956,6 +986,12 @@ const WorkshopCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Success Stories from Our Workshops
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Real‑world results from WDI’s Interactive Design Thinking Workshops
+            helping teams ship better AI mobile app experiences, AI‑powered
+            features, and web development products through focused, AI‑powered
+            design thinking sprints.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1192,7 +1228,8 @@ const HireFacilitators = () => {
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
             Our senior UX strategists and design thinking facilitators can guide
-            your team to actionable outcomes.
+            your team to actionable outcomes for AI‑powered design, AI mobile
+            app, iOS mobile app development, and web development initiatives.
           </p>
         </motion.div>
 
@@ -1257,8 +1294,11 @@ const HireFacilitators = () => {
           className="text-center space-y-6"
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigate("/hire-talent/design-thinking-workshops-developers")}
+            <ShimmerButton
+              className="text-lg px-8 py-4"
+              onClick={() =>
+                navigate("/hire-talent/design-thinking-workshops-developers")
+              }
             >
               <div className="inline-flex items-center gap-2">
                 <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1395,8 +1435,10 @@ const WorkshopFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Harness the power of Design Thinking to create user-centric
-            solutions and drive meaningful business results.
+            Harness the power of Design Thinking and AI‑powered design to create
+            AI mobile app‑ready, user‑centric solutions that drive meaningful
+            business results across web development and iOS mobile app
+            development.
           </motion.p>
 
           <motion.div
@@ -1491,9 +1533,7 @@ export const DesignThinkingWorkshops = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-background">
-        {/* <Footer /> */}
-      </section>
+      <section className="bg-background">{/* <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/EngagementModels.tsx

@@ -115,22 +115,22 @@ export const EngagementModels = () => {
     },
   ];
 
-  const heroBanner =[
+  const heroBanner = [
     {
-    category: "Engagement Options",
-    title: "Flexible Engagement Models",
-    description: "Choose from our flexible engagement models designed to fit your project needs, budget, and timeline. From fixed-price projects to dedicated teams, find the perfect collaboration approach.",
-    primaryCTA: {
-      text: "Explore Models",
-      href: "/start-a-project",
-      icon: Target
+      category: "Engagement Options",
+      title: "Flexible Engagement Models",
+      description: "Choose from AI‑driven flexible engagement models designed to fit your project needs, budget, and timeline. From fixed‑price projects to dedicated teams, find the perfect collaboration approach for your web and mobile development.",
+      primaryCTA: {
+        text: "Explore Models",
+        href: "/start-a-project",
+        icon: Target
+      },
+      secondaryCTA: {
+        text: "Get Consultation",
+        href: "/hire-talent",
+        icon: Users
+      }
     },
-    secondaryCTA: {
-      text: "Get Consultation",
-      href: "/hire-talent",
-      icon: Users
-    }
-  },
   ]
 
   const testimonials = [
@@ -154,7 +154,7 @@ export const EngagementModels = () => {
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
 
-        <Helmet>
+      <Helmet>
         {/* Page Title and Meta Description */}
         <title>Engagement Models | Flexible Software Development Options</title>
         <meta
@@ -163,7 +163,7 @@ export const EngagementModels = () => {
         />
 
         {/* Canonical Link */}
-       <link rel="canonical" href="https://www.wdipl.com/engagement-models" />
+        <link rel="canonical" href="https://www.wdipl.com/engagement-models" />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
         <meta property="og:title" content="Engagement Models | Flexible Software Development Options" />
@@ -233,8 +233,7 @@ export const EngagementModels = () => {
               Our Core Engagement Models
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Flexible approaches designed to meet your specific project needs
-              and goals
+              Flexible AI‑driven engagement approaches designed to meet your specific project needs and goals in web and mobile development.
             </p>
           </div>
 
@@ -330,8 +329,7 @@ export const EngagementModels = () => {
               Model Comparison
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Compare our engagement models to find the perfect fit for your
-              project
+              Compare our AI‑driven engagement models to find the perfect fit for your web and mobile development project.
             </p>
           </div>
 
@@ -369,10 +367,10 @@ export const EngagementModels = () => {
                             <Badge
                               variant="outline"
                               className={`border-blue-500/30 text-blue-400 ${feature.fixedPrice === "High"
-                                  ? "bg-blue-500/10"
-                                  : feature.fixedPrice === "Medium"
-                                    ? "bg-yellow-500/10"
-                                    : "bg-red-500/10"
+                                ? "bg-blue-500/10"
+                                : feature.fixedPrice === "Medium"
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
                                 }`}
                             >
                               {feature.fixedPrice}
@@ -382,10 +380,10 @@ export const EngagementModels = () => {
                             <Badge
                               variant="outline"
                               className={`border-green-500/30 text-green-400 ${feature.timeAndMaterial === "High"
-                                  ? "bg-green-500/10"
-                                  : feature.timeAndMaterial === "Medium"
-                                    ? "bg-yellow-500/10"
-                                    : "bg-red-500/10"
+                                ? "bg-green-500/10"
+                                : feature.timeAndMaterial === "Medium"
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
                                 }`}
                             >
                               {feature.timeAndMaterial}
@@ -395,10 +393,10 @@ export const EngagementModels = () => {
                             <Badge
                               variant="outline"
                               className={`border-[#E5195E]/30 text-[#E5195E] ${feature.dedicatedTeam === "High"
-                                  ? "bg-[#E5195E]/10"
-                                  : feature.dedicatedTeam.includes("Medium")
-                                    ? "bg-yellow-500/10"
-                                    : "bg-red-500/10"
+                                ? "bg-[#E5195E]/10"
+                                : feature.dedicatedTeam.includes("Medium")
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
                                 }`}
                             >
                               {feature.dedicatedTeam}
@@ -423,10 +421,7 @@ export const EngagementModels = () => {
               Choosing the Right Model
             </h2>
             <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
-              Our experts will consult with you to analyze your project's
-              specific needs, objectives, budget, and desired level of control
-              to recommend the most suitable engagement model for optimal
-              success.
+              Our AI‑driven experts will consult with you to analyze your project’s specific needs, objectives, budget, and desired level of control, then recommend the most suitable engagement model for optimal web and mobile development success.
             </p>
 
             <Card className="bg-card/50 border-white/10 text-left">
@@ -519,8 +514,7 @@ export const EngagementModels = () => {
               Ready to Find Your Perfect Model?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Let our experts help you choose the engagement model that best
-              fits your project needs and goals.
+              Let our AI‑driven experts help you choose the engagement model that best fits your web and mobile development project needs and goals.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

pages/EnterpriseSoftwareSolutions.tsx

@@ -127,9 +127,7 @@ const EnterpriseHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Crafting custom, high-impact software tailored to streamline
-                large-scale operations, enhance productivity, and drive digital
-                transformation for enterprises.
+                Crafting custom, high-impact AI-powered features software tailored to streamline large-scale operations, enhance productivity, and drive digital transformation for enterprises.
               </p>
             </div>
 
@@ -509,6 +507,13 @@ const EnterpriseBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Custom Enterprise Solutions from WDI?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            {/* End-to-end solutions for every stage of your product lifecycle. */}
+
+            WDI delivers tailored AI app development company solutions that optimize processes, unlock real-time insights, and scale seamlessly with your enterprise growth.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -644,6 +649,11 @@ const EnterpriseProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Strategic Approach to Enterprise Software
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI aligns business objectives with AI iOS development through discovery, agile execution, and cloud-native architecture delivering scalable systems that evolve with enterprise growth.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -797,6 +807,11 @@ const EnterpriseServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Enterprise Software Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI offers end-to-end AI mobile app solutions from custom ERP/CRM systems and cloud migration to intelligent analytics platforms that power enterprise-wide digital transformation
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1012,8 +1027,7 @@ const EnterpriseTechStack = () => {
             Leveraging Robust Enterprise-Grade Technologies
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            For reliability and performance at scale with proven enterprise
-            solutions.
+            For reliability and performance at scale with proven AI-powered features enterprise solutions that ensure seamless operations across your entire organization.
           </p>
         </motion.div>
 
@@ -1262,6 +1276,11 @@ const EnterpriseCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Enterprise Solutions Driving Real Business Impact
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI crafts AI-powered features that deliver measurable ROI through streamlined operations, enhanced decision-making, and accelerated digital transformation for enterprises.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1478,8 +1497,7 @@ const HireEnterpriseTalent = () => {
             Build Your Enterprise Team with WDI Talent
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access highly experienced architects, project managers, and senior
-            developers skilled in complex enterprise environments.
+            Access highly experienced AI app development company architects, project managers, and senior developers skilled in complex enterprise environments.
           </p>
         </motion.div>
 
@@ -1684,8 +1702,7 @@ const EnterpriseFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with us for custom enterprise software solutions that
-            deliver efficiency, innovation, and a competitive edge.
+            Partner with WDI's AI-powered design experts for custom enterprise software solutions that deliver efficiency, innovation, and competitive edge.
           </motion.p>
 
           <motion.div

pages/FAQs.tsx

@@ -34,22 +34,22 @@ export const FAQs = () => {
         {
           question: "What industries does WDI serve?",
           answer:
-            "WDI serves a diverse range of industries including Healthcare, FinTech, E-commerce, Education, Manufacturing, Real Estate, Logistics, and many more. Our expertise spans across various sectors, allowing us to understand unique industry challenges and deliver tailored solutions that meet specific regulatory requirements and business needs.",
+            "WDI serves a diverse range of AI‑driven industries, including Healthcare, FinTech, E‑commerce, Education, Manufacturing, Real Estate, Logistics, and more. Our AI mobile and web development solutions are tailored to each sector’s regulatory and business needs, delivering scalable AI‑powered mobile and web applications.",
         },
         {
           question: "What makes WDI different from other tech partners?",
           answer:
-            "We differentiate ourselves through our comprehensive approach that combines technical excellence with deep industry knowledge. Our unique strengths include: 1) End-to-end solution delivery from concept to deployment, 2) Agile methodology with transparent communication, 3) Proven track record with 500+ successful projects, 4) Expert team of 150+ professionals, 5) Focus on long-term partnerships rather than just project completion, and 6) Cutting-edge technology adoption including AI/ML, cloud solutions, and modern development frameworks.",
+            "As an AI app development company, we differentiate ourselves through a comprehensive, AI-driven approach that blends technical excellence with deep industry knowledge. Our approach ensures scalable, innovative, and business-focused solutions tailored to client needs.\n\nKey strengths include:\n\n• End-to-end AI-driven app development services from concept to deployment\n• Agile methodology with transparent communication\n• Proven track record with 500+ successful projects\n• Expert team of 150+ AI mobile application developers\n• Focus on long-term partnerships rather than one-off projects\n• Adoption of cutting-edge technologies, including AI/ML, cloud solutions, and modern development frameworks",
         },
         {
           question: "How long has WDI been in business?",
           answer:
-            "WDI has been pioneering digital transformation solutions for over 6 years. Since our founding, we have successfully delivered 500+ projects, built a team of 150+ expert professionals, and established ourselves as a trusted technology partner for businesses ranging from startups to enterprise organizations.",
+            "WDI has been pioneering AI‑driven digital transformation solutions for over 6 years. Our AI mobile and web development team has delivered 500+ successful projects, built a team of 150+ experts, and become a trusted technology partner for startups and enterprise organizations.",
         },
         {
           question: "What is WDI's approach to project management?",
           answer:
-            "We follow Agile project management methodologies, primarily Scrum and Kanban, but we adapt our approach based on client preferences and project requirements. Our process includes regular sprint planning, daily standups, sprint reviews, and retrospectives. We maintain transparent communication through dedicated project managers, regular status updates, and collaborative tools that keep clients informed throughout the development process.",
+            "We follow Agile project management methodologies, primarily Scrum and Kanban, tailored to client preferences and project needs. Our process includes sprint planning, daily standups, reviews, and retrospectives. We maintain transparent communication through dedicated project managers, regular updates, and collaborative tools that keep clients informed throughout the AI‑driven development lifecycle.",
         },
       ],
     },
@@ -60,22 +60,22 @@ export const FAQs = () => {
         {
           question: "What development methodologies does WDI follow?",
           answer:
-            "We primarily follow Agile methodologies including Scrum and Kanban, but we can adapt to client preferences such as Waterfall or hybrid approaches. Our Agile process includes sprint planning, daily standups, sprint reviews, and retrospectives. We use modern development practices like continuous integration/continuous deployment (CI/CD), test-driven development (TDD), and code reviews to ensure high-quality deliverables.",
+            "We primarily follow Agile methodologies, including Scrum and Kanban, but can adapt to client preferences such as Waterfall or hybrid approaches. Our Agile process includes sprint planning, daily standups, reviews, and retrospectives, supported by modern practices like CI/CD, test‑driven development, and rigorous code reviews to ensure high‑quality, AI‑driven deliverables across AI mobile and web development projects.",
         },
         {
           question: "Do you offer post-development support and maintenance?",
           answer:
-            "Yes, we provide comprehensive post-launch support and maintenance packages that include: 1) 24/7 technical support, 2) Bug fixes and security patches, 3) Performance monitoring and optimization, 4) Feature enhancements and updates, 5) Infrastructure management and scaling, 6) Regular health checks and reporting. Our support packages are customizable based on your specific needs and can include different SLA levels.",
+            "Yes. We provide comprehensive post‑launch support and maintenance packages featuring: 1) 24/7 technical support, 2) bug fixes and security patches, 3) performance monitoring and optimization, 4) feature enhancements and AI‑driven updates, 5) infrastructure management and scaling, and 6) regular health checks and reporting. Packages are customizable with flexible SLAs to match your AI mobile and web development needs.",
         },
         {
           question: "Can WDI integrate with our existing systems?",
           answer:
-            "Absolutely! We specialize in third-party integrations and can seamlessly connect new solutions with your existing systems, databases, and applications. Our integration expertise includes APIs, webhooks, middleware solutions, ETL processes, and cloud-to-cloud integrations. We ensure data consistency, security, and minimal disruption to your current operations during the integration process.",
+            "Absolutely. We specialize in third‑party integrations and can seamlessly connect new AI‑driven solutions with your existing systems, databases, and applications. Our expertise includes APIs, webhooks, middleware, ETL processes, and cloud‑to‑cloud integrations, all designed to ensure data consistency, security, and minimal disruption to ongoing operations for AI‑powered mobile and web applications.",
         },
         {
           question: "What is your approach to UI/UX design?",
           answer:
-            "Our UI/UX design process follows a user-centered design approach that includes: 1) User research and persona development, 2) Information architecture and wireframing, 3) Interactive prototyping and user testing, 4) Visual design and style guide creation, 5) Accessibility compliance (WCAG guidelines), 6) Responsive design for all devices, and 7) Continuous iteration based on user feedback. We use design thinking workshops to align stakeholders and ensure optimal user experiences.",
+            "Our UI/UX design follows a user‑centered, AI‑driven approach, including: 1) user research and persona development, 2) information architecture and wireframing, 3) interactive prototyping and user testing, 4) visual design and style guide creation, 5) accessibility compliance (WCAG), 6) responsive design across all devices, and 7) continuous iteration based on feedback. We conduct design‑thinking workshops to align stakeholders and deliver exceptional AI‑powered design and user experiences for AI mobile app development.",
         },
       ],
     },
@@ -86,22 +86,23 @@ export const FAQs = () => {
         {
           question: "How does WDI vet its talent?",
           answer:
-            "Our rigorous vetting process includes: 1) Technical assessments and coding challenges, 2) Multiple rounds of technical interviews, 3) Portfolio and project reviews, 4) Behavioral and cultural fit evaluations, 5) Reference checks from previous employers, 6) Continuous skill assessment and certification programs. We maintain a 95% client satisfaction rate with our talent, and all our professionals undergo regular training to stay updated with the latest technologies and best practices.",
+            "Our rigorous vetting process for AI mobile application developers and AI‑driven app development teams includes: 1) Technical assessments and coding challenges, 2) Multiple rounds of technical interviews, 3) Portfolio and project reviews, 4) Behavioral and cultural fit evaluations, 5) Reference checks from previous employers, and 6) Continuous skill assessment and certification programs. We maintain a 95% client satisfaction rate with our talent, and all professionals undergo regular training to stay current with the latest AI mobile and web development technologies and best practices.",
         },
         {
           question: "What are your typical engagement models?",
+
           answer:
-            "We offer three primary engagement models: 1) Fixed Price - Best for well-defined projects with clear scope and requirements, 2) Time & Material - Ideal for projects with evolving requirements or ongoing development needs, 3) Dedicated Team - Perfect for long-term partnerships where you need a committed team working exclusively on your projects. We can also create hybrid models that combine elements from different approaches based on your specific needs.",
+            "We offer three primary engagement models tailored to meet diverse project requirements and business goals. Each model is designed to provide flexibility, efficiency, and the right level of collaboration based on your needs.\n\nKey engagement models include:\n\n• Fixed-Price – Best for well-defined AI mobile and web development projects with clear scope and requirements\n• Time & Material – Ideal for projects with evolving needs or ongoing AI-driven development\n• Dedicated Team – Perfect for long-term partnerships where you need a committed AI app development company team working exclusively on your AI-powered mobile and web applications\n\nWe can also create hybrid models by combining elements from different approaches based on your specific needs."
         },
         {
           question: "Can we hire dedicated developers from WDI?",
           answer:
-            "Yes, we offer dedicated development teams and individual developer hiring options. Our dedicated resources work exclusively on your projects and can be scaled up or down based on your needs. This model provides you with direct access to our talent pool while we handle all HR, administrative, and infrastructure aspects. The dedicated team integrates with your existing processes and becomes an extension of your in-house team.",
+            "Yes, we offer dedicated development teams and individual developer hiring options. Our AI mobile application developers work exclusively on your AI‑driven projects and can be scaled up or down as needed. This model gives you direct access to our AI mobile app development talent pool while we handle HR, administrative, and infrastructure aspects. Dedicated teams integrate with your existing processes and become an extension of your in‑house AI mobile and web development team.",
         },
         {
           question: "What is the typical timeline for team augmentation?",
           answer:
-            "Team augmentation timelines depend on the specific skills required and team size. Generally: 1) Standard skill sets: 1-2 weeks, 2) Specialized skills: 2-4 weeks, 3) Large teams (10+ members): 4-6 weeks. Our process includes requirement analysis, talent matching, interviews, onboarding, and integration. We maintain a bench of pre-vetted professionals to accelerate the process for common technology stacks.",
+            "Team augmentation timelines depend on the required skills and team size, but generally: 1) Standard AI mobile and web skill sets: 1–2 weeks, 2) Specialized AI‑driven skills: 2–4 weeks, 3) Large teams (10+ members): 4–6 weeks. Our process includes requirement analysis, talent matching, interviews, onboarding, and integration. We maintain a bench of pre‑vetted AI mobile application developers and AI‑driven professionals to accelerate ramp up for common technology stacks and AI mobile app development projects.",
         },
       ],
     },
@@ -113,17 +114,17 @@ export const FAQs = () => {
           question:
             "Which programming languages and frameworks do you specialize in?",
           answer:
-            "We specialize in a wide range of modern technologies including: Frontend - React, Angular, Vue.js, Next.js, TypeScript; Backend - Node.js, Python, Java, .NET, PHP; Mobile - React Native, Flutter, iOS (Swift), Android (Kotlin); Cloud - AWS, Azure, Google Cloud; Databases - PostgreSQL, MongoDB, MySQL, Redis; AI/ML - TensorFlow, PyTorch, scikit-learn; DevOps - Docker, Kubernetes, Jenkins, Terraform. We continuously evaluate and adopt emerging technologies to provide cutting-edge solutions.",
+            "We specialize in a wide range of modern AI-driven technologies, enabling us to deliver scalable, high-performance, and future-ready solutions across mobile and web platforms.\n\nOur core technology expertise includes:\n\n• Frontend – React, Angular, Vue.js, Next.js, TypeScript\n• Backend – Node.js, Python, Java, .NET, PHP\n• Mobile – React Native, Flutter, iOS (Swift), Android (Kotlin)\n• Cloud – AWS, Azure, Google Cloud\n• Databases – PostgreSQL, MongoDB, MySQL, Redis\n• AI/ML – TensorFlow, PyTorch, scikit-learn\n• DevOps – Docker, Kubernetes, Jenkins, Terraform\n\nWe continuously evaluate and adopt emerging technologies to deliver cutting-edge AI mobile and web development solutions."
         },
         {
           question: "How do you ensure data security and privacy?",
           answer:
-            "We adhere to industry-leading security standards and protocols including: 1) ISO 27001 and SOC 2 compliance, 2) GDPR and other data privacy regulations, 3) End-to-end encryption for data in transit and at rest, 4) Multi-factor authentication and access controls, 5) Regular security audits and penetration testing, 6) Secure coding practices and code reviews, 7) Infrastructure security with VPNs and firewalls, 8) Employee training on security best practices, and 9) Incident response and disaster recovery plans.",
+            "We adhere to industry-leading security standards and protocols to ensure the highest level of protection for applications and data across the entire development lifecycle.\n\nOur security practices include:\n\n• ISO 27001 and SOC 2 compliance\n• GDPR and other data privacy regulations\n• End-to-end encryption for data in transit and at rest\n• Multi-factor authentication and strict access controls\n• Regular security audits and penetration testing\n• Secure coding practices and rigorous code reviews\n• Infrastructure security with VPNs and firewalls\n• Employee training on security best practices\n• Incident response and disaster recovery plans\n\nThese practices ensure robust protection for AI-powered mobile and web applications throughout the AI-driven development lifecycle."
         },
         {
           question: "What cloud platforms do you work with?",
           answer:
-            "We are certified partners with major cloud platforms including Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). Our cloud services include: 1) Cloud migration and modernization, 2) Infrastructure as Code (IaC), 3) Serverless architecture implementation, 4) Containerization with Docker and Kubernetes, 5) CI/CD pipeline setup, 6) Cloud security implementation, 7) Cost optimization strategies, and 8) 24/7 monitoring and support.",
+            "We are certified partners with major cloud platforms and leverage their capabilities to deliver scalable, secure, and high-performance solutions tailored to modern business needs.\n\nOur cloud services include:\n\n• Cloud migration and modernization\n• Infrastructure as Code (IaC)\n• Serverless architecture implementation\n• Containerization with Docker and Kubernetes\n• CI/CD pipeline setup\n• Cloud security implementation\n• Cost optimization strategies\n• 24/7 monitoring and support\n\nWe utilize platforms such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP) to build scalable and secure AI-powered mobile and web development solutions."
         },
         {
           question: "Do you provide AI and Machine Learning solutions?",
@@ -139,22 +140,22 @@ export const FAQs = () => {
         {
           question: "What are your payment terms?",
           answer:
-            "Our standard payment terms are: 1) Fixed Price projects: 30% advance, 40% at milestone completion, 30% at project delivery, 2) Time & Material: Monthly billing with NET 15-30 payment terms, 3) Dedicated Team: Monthly advance payment for team costs. We accept payments via wire transfer, ACH, or other agreed methods. For long-term partnerships, we can discuss customized payment structures that align with your business cycles and budget planning.",
+            "Our standard AI-driven project payment terms are designed to provide flexibility and transparency across different engagement models, ensuring smooth collaboration and financial planning.\n\nPayment terms include:\n\n• Fixed-Price projects – 30% advance, 40% at milestone completion, 30% at project delivery\n• Time & Material – Monthly billing with NET 15–30 payment terms\n• Dedicated Team – Monthly advance payment for AI mobile and web development team costs\n\nWe accept payments via wire transfer, ACH, or other mutually agreed methods. For long-term AI app development partnerships, we can also customize payment structures aligned with your business cycles and budget planning."
         },
         {
           question: "Can we sign an NDA?",
           answer:
-            "Absolutely! Confidentiality is paramount to us, and we are happy to sign Non-Disclosure Agreements (NDAs) before any project discussions begin. We have standard mutual NDAs ready, or we can review and sign your NDA format. We maintain strict confidentiality protocols throughout our organization and ensure that all team members working on your project sign appropriate confidentiality agreements.",
+            "Absolutely. Confidentiality is paramount to us, and we are happy to sign Non‑Disclosure Agreements (NDAs) before any project discussions begin. We have standard mutual NDAs ready, or we can review and sign your NDA format. We maintain strict confidentiality protocols and ensure all AI‑driven team members working on your AI mobile and web development projects sign appropriate confidentiality agreements.",
         },
         {
           question: "What is included in your project estimates?",
           answer:
-            "Our project estimates include: 1) Detailed scope of work and deliverables, 2) Development hours breakdown by task/feature, 3) Team composition and hourly rates, 4) Project timeline with milestones, 5) Third-party service costs (if applicable), 6) Testing and quality assurance, 7) Project management overhead, 8) Documentation and knowledge transfer. We provide transparent pricing with no hidden costs and clearly outline any assumptions or exclusions.",
+            "Our AI mobile and web development project estimates are designed to provide complete transparency, clarity, and alignment with your business goals from the outset.\n\nOur estimates include:\n\n• Detailed scope of work and deliverables\n• Development hours breakdown by task/feature\n• Team composition and hourly rates\n• Project timeline with milestones\n• Third-party service costs (if applicable)\n• Testing and quality assurance\n• Project management overhead\n• Documentation and knowledge transfer\n\nWe ensure transparent pricing with no hidden costs and clearly outline all assumptions and exclusions for AI-powered mobile and web applications."
         },
         {
           question: "Do you offer different pricing models?",
           answer:
-            "Yes, we offer flexible pricing models to suit different needs: 1) Fixed Price - Best for projects with well-defined scope, 2) Time & Material - Ideal for evolving requirements, 3) Dedicated Team - Monthly fixed cost for dedicated resources, 4) Outcome-based - Performance-linked pricing for specific results, 5) Hybrid models - Combination of the above based on project phases. We work with you to determine the most cost-effective and suitable pricing structure for your specific situation.",
+            "Yes. We offer flexible pricing models designed to accommodate different project scopes, timelines, and business objectives in AI-driven development.\n\nOur pricing models include:\n\n• Fixed-Price – Best for AI mobile app development projects with a well-defined scope\n• Time & Material – Ideal for evolving AI-driven requirements and ongoing development\n• Dedicated Team – Monthly fixed cost for a dedicated AI app development team\n• Outcome-based – Performance-linked pricing tied to specific business results\n• Hybrid models – A combination of the above approaches based on different project phases\n\nWe collaborate closely with you to determine the most cost-effective and suitable pricing structure for your AI mobile and web development needs."
         },
       ],
     },
@@ -254,10 +255,7 @@ export const FAQs = () => {
               FAQs: Your Questions, Our Answers
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Have questions about our services, processes, or how we work? Our
-              Frequently Asked Questions (FAQs) section provides quick and
-              comprehensive answers to common inquiries, helping you find the
-              information you need efficiently.
+              Have questions about our AI‑driven services, development processes, or how we work with clients? Our Frequently Asked Questions (FAQs) section provides clear, concise answers to common inquiries so you can quickly find the information you need.
             </p>
           </div>
         </div>

pages/GenAIIntegrationDigitalProducts.tsx

@@ -122,9 +122,7 @@ const GenAIIntegrationHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Infuse your applications with the power of Generative AI,
-                enabling dynamic content creation, intelligent code generation,
-                and hyper-personalized user experiences.
+                Infuse your applications with the power of Generative AI, enabling dynamic content creation, intelligent code generation, and hyper‑personalized user experiences through AI‑powered mobile and web solutions.
               </p>
             </div>
 
@@ -503,6 +501,9 @@ const GenAIIntegrationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Unlock New Dimensions with Generative AI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Unleash creative, intelligent, and highly personalized experiences in your digital products with Generative AI‑powered features.
+          </p>
         </motion.div>
 
         <motion.div
@@ -638,6 +639,9 @@ const GenAIIntegrationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Strategic Path to Embedding Generative AI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            A focused roadmap to integrate Generative AI into your mobile and web products and unlock AI‑driven creativity and automation.
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -792,6 +796,9 @@ const GenAIIntegrationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Specialized Generative AI Integration Solutions
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Specialized Generative AI integration that embeds smart, creative, and scalable AI features into your existing digital products.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1083,6 +1090,9 @@ const GenAICaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
             Digital Products Reimagined with Generative AI
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+            Where Generative AI turns your existing products into dynamic, AI‑powered digital experiences.
+          </p>
         </motion.div>
 
         <motion.div
@@ -1208,8 +1218,7 @@ const GenAIInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Let's unlock the creative and functional potential of Generative
-              AI for your applications.
+              Let’s unlock the creative and functional potential of Generative AI to reimagine your apps and workflows.
             </p>
 
             <ShimmerButton
@@ -1319,9 +1328,7 @@ const HireGenAISpecialists = () => {
             Access Expert Generative AI Engineers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Hire our data scientists and developers specialized in prompt
-            engineering, model fine-tuning, and integrating large language
-            models.
+            Hire our data scientists and developers who specialize in prompt engineering, model fine‑tuning, and large‑language‑model integration.
           </p>
         </motion.div>
 
@@ -1415,23 +1422,23 @@ const GenAIFAQs = () => {
     {
       question: "What are the ethical considerations for using Generative AI?",
       answer:
-        "Ethical GenAI implementation involves several key considerations: bias prevention and mitigation, ensuring diverse training data, implementing content filtering and safety measures, maintaining transparency about AI-generated content, respecting intellectual property rights, protecting user privacy, and establishing clear guidelines for AI use. We work with you to develop comprehensive AI ethics policies, implement bias detection systems, create content moderation workflows, and ensure compliance with emerging AI regulations while maintaining responsible AI practices throughout the development lifecycle.",
+        "Ethical GenAI implementation involves several key considerations: bias prevention and mitigation, ensuring diverse training data, implementing content filtering and safety measures, maintaining transparency about AI‑generated content, respecting intellectual property rights, protecting user privacy, and establishing clear guidelines for AI use. We work with you to develop comprehensive AI ethics policies, implement bias detection systems, create content moderation workflows, and ensure compliance with emerging AI regulations while maintaining responsible AI practices throughout the development lifecycle and AI‑powered digital products.",
     },
     {
       question:
         "How do you ensure the accuracy and safety of AI-generated content?",
       answer:
-        "We implement multi-layered content validation systems including automated fact-checking, human review processes, confidence scoring, and real-time monitoring. Our approach includes prompt engineering for consistent outputs, implementing guardrails and safety filters, creating feedback loops for continuous improvement, and establishing clear escalation procedures for problematic content. We also use techniques like retrieval-augmented generation (RAG) to ground AI responses in verified information sources and implement version control for prompt templates to maintain quality standards.",
+        "We implement multi‑layered content validation systems including automated fact‑checking, human review processes, confidence scoring, and real‑time monitoring. Our approach includes prompt engineering for consistent outputs, implementing guardrails and safety filters, creating feedback loops for continuous improvement, and establishing clear escalation procedures for problematic content. We also use techniques like retrieval‑augmented generation (RAG) to ground AI responses in verified information sources and implement version control for prompt templates, all designed to keep your AI‑powered applications accurate and safe.",
     },
     {
       question: "Can GenAI be customized with our own data?",
       answer:
-        "Yes, GenAI can be extensively customized with your proprietary data through several approaches: fine-tuning models on your specific domain data, implementing retrieval-augmented generation (RAG) to access your knowledge base, creating custom prompt templates reflecting your brand voice, and developing domain-specific model variants. We ensure data privacy through secure training environments, implement data anonymization when needed, and can deploy models on-premises or in private cloud environments. The customization level depends on your specific use case, data volume, and privacy requirements.",
+        "Yes, GenAI can be extensively customized with your proprietary data through several approaches: fine‑tuning models on your specific domain data, implementing retrieval‑augmented generation (RAG) to access your knowledge base, creating custom prompt templates reflecting your brand voice, and developing domain‑specific model variants. We ensure data privacy through secure training environments, implement data anonymization when needed, and can deploy models on‑premises or in private cloud environments. The customization level depends on your specific use case, data volume, and privacy requirements, and it directly supports AI‑driven mobile and web experiences.",
     },
     {
       question: "What's the typical cost for GenAI integration?",
       answer:
-        "GenAI integration costs vary based on several factors: the complexity of use cases, volume of API calls, model selection (GPT-4 vs. open-source models), level of customization required, and infrastructure needs. Costs typically include API usage fees, development time, fine-tuning expenses, and ongoing monitoring. We help optimize costs through efficient prompt engineering, model selection strategies, caching mechanisms, and usage optimization. We provide detailed cost projections during the planning phase and implement cost monitoring to ensure budget alignment throughout the project lifecycle.",
+        "GenAI integration costs vary based on several factors: the complexity of use cases, volume of API calls, model selection (GPT‑4 vs. open‑source models), level of customization required, and infrastructure needs. Costs typically include API usage fees, development time, fine‑tuning expenses, and ongoing monitoring. We help optimize costs through efficient prompt engineering, model selection strategies, caching mechanisms, and usage optimization. We provide detailed cost projections during the planning phase and implement cost monitoring to ensure budget alignment throughout the project lifecycle for AI‑powered product development.",
     },
   ];
 
@@ -1523,8 +1530,7 @@ const GenAIFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Transform your products with dynamic content generation, smart
-            automation, and unparalleled personalization.
+            Transform your products with dynamic content generation, smart automation, and unparalleled personalization through AI‑powered mobile and web experiences.
           </motion.p>
 
           <motion.div

pages/HireBackendDevelopers.tsx

@@ -109,7 +109,7 @@ export const HireBackendDevelopers = () => {
     {
       category: "Hire Expert Developers",
       title: "Hire Backend Developers",
-      description: "Access skilled backend developers proficient in Node.js, Python, Java, .NET, and cloud technologies. Build scalable, secure server-side applications and APIs that power your business.",
+      description: "Access skilled AI‑driven backend developers proficient in Node.js, Python, Java, .NET, and cloud technologies. Build scalable, secure server‑side applications and APIs that power your AI‑driven web and mobile business.",
       primaryCTA: {
         text: "Hire Backend Developers",
         href: "/start-a-project",
@@ -297,8 +297,7 @@ export const HireBackendDevelopers = () => {
               Popular Backend Technology Stacks
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our developers are proficient in the most powerful backend
-              technologies
+              Our AI‑driven backend developers are proficient in the most powerful backend technologies for scalable web and mobile applications.
             </p>
           </div>
 
@@ -343,8 +342,7 @@ export const HireBackendDevelopers = () => {
               Our Backend Development Expertise
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive backend skills for enterprise-grade applications
-            </p>
+              Comprehensive AI‑driven backend skills for enterprise‑grade web and mobile applications.            </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -387,8 +385,7 @@ export const HireBackendDevelopers = () => {
               What Our Backend Developers Offer
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive backend solutions that power your applications
-            </p>
+              Comprehensive AI‑driven backend solutions that power your web and mobile applications.            </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -420,8 +417,7 @@ export const HireBackendDevelopers = () => {
               Ideal for Projects Requiring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Backend expertise for complex and demanding applications
-            </p>
+              Backend expertise for complex, AI‑driven, and high‑demand web and mobile applications.            </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
@@ -488,8 +484,7 @@ export const HireBackendDevelopers = () => {
               Ready to Build a Solid Foundation?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our backend specialists and create the robust
-              infrastructure your application needs.
+              Connect with our AI‑driven backend specialists and create the robust, scalable infrastructure your web and mobile application needs.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

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

@@ -62,7 +62,7 @@ export const HireFullStackDevelopers = () => {
     {
       category: "Hire Expert Developers",
       title: "Hire Full Stack Developers",
-      description: "Access skilled full stack developers proficient in modern frontend and backend technologies. Build complete web applications from database to user interface with seamless integration.",
+      description: "Access skilled AI‑driven full stack developers proficient in modern frontend and backend technologies. Build complete web and mobile applications from database to user interface with seamless integration.",
       primaryCTA: {
         text: "Hire Full Stack Developers",
         href: "/start-a-project",
@@ -241,8 +241,7 @@ export const HireFullStackDevelopers = () => {
               Popular Technology Stacks
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our developers are proficient in the most sought-after technology
-              combinations
+              Our AI‑driven full stack developers are proficient in the most sought‑after technology combinations for web and mobile app development.
             </p>
           </div>
 
@@ -287,7 +286,7 @@ export const HireFullStackDevelopers = () => {
               Our Full Stack Expertise Includes
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive technical skills across the entire development stack
+              Comprehensive AI‑driven technical skills across the entire development stack, from database and backend services to frontend interfaces and DevOps.
             </p>
           </div>
 
@@ -327,8 +326,7 @@ export const HireFullStackDevelopers = () => {
               Benefits of Hiring WDI Full Stack Developers
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Why full stack developers are the smart choice for your project
-            </p>
+              Why AI‑driven full stack developers are the smart choice for your web and mobile projects           </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
@@ -360,8 +358,7 @@ export const HireFullStackDevelopers = () => {
               Full Stack Solutions For
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Complex applications that benefit from end-to-end expertise
-            </p>
+              Complex AI‑driven web and mobile applications that benefit from end‑to‑end full stack development expertise.            </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
@@ -428,8 +425,7 @@ export const HireFullStackDevelopers = () => {
               Ready to Streamline Your Development Process?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our full stack developers and experience the
-              efficiency of end-to-end expertise.
+              Connect with our AI‑driven full stack developers and experience the efficiency of end‑to‑end full stack development expertise.
             </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",
-      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.",
+      title: "Hire Mobile App Developers for Your Project",
+      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,60 +122,76 @@ 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 (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
- <Helmet>
-          {/* Page Title and Meta Description */}
-          <title>Hire Mobile App Developers | Expert Talent at WDI</title>
-          <meta
-            name="description"
-            content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
-          />
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <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."
+        />
 
-          {/* Canonical Link */}
-          <link rel="canonical" href="https://www.wdipl.com/services" />
+        {/* Canonical Link */}
+        <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:description"
-            content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
-          />
-          <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" />
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <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"
+        />
 
-          {/* 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 skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
-          />
-          <meta name="twitter: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 | 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"
+        />
 
-          {/* Social Profiles (using JSON-LD Schema) */}
-          <script type="application/ld+json">
-            {`
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
                               {
                                 "@context": "https://schema.org",
                                 "@type": "Organization",
@@ -162,8 +204,8 @@ export const HireMobileAppDevelopers = () => {
                                 ]
                               }
                             `}
-          </script>
-        </Helmet>
+        </script>
+      </Helmet>
       {/* Hero Section with MobileAppVector */}
       <HireTalentHeroBanner
         vectorComponent={MobileAppVector}
@@ -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

@@ -0,0 +1,551 @@
+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 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:
+        "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:
+        "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 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:
+          "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 (
+      <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 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."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="hhttps://www.wdipl.com/hire-talent/mobile-app-developers-india" />
+
+        {/* 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",
+                                "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">
+            <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>
+
+          <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 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>
+
+      {/* 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>
+
+      {/* 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 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/HireQAEngineers.tsx

@@ -106,7 +106,7 @@ export const HireQAEngineers = () => {
     {
       category: "Hire Expert Engineers",
       title: "Hire QA Engineers",
-      description: "Access skilled QA engineers who ensure your software meets the highest quality standards. From manual testing to test automation, deliver bug-free, reliable applications that users trust.",
+      description: "Access skilled AI‑driven QA engineers who ensure your software meets the highest quality standards. From manual testing to test automation, deliver bug‑free, reliable web and mobile applications that users trust.",
       primaryCTA: {
         text: "Hire QA Engineers",
         href: "/start-a-project",
@@ -291,8 +291,7 @@ export const HireQAEngineers = () => {
               Testing Tools & Technologies
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our QA engineers are proficient in the latest testing tools and
-              methodologies
+              Our AI‑driven QA engineers are proficient in the latest testing tools and methodologies for modern web and mobile applications.
             </p>
           </div>
 
@@ -332,8 +331,7 @@ export const HireQAEngineers = () => {
               What Our QA Engineers Deliver
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Quality assurance solutions that ensure reliable software delivery
-            </p>
+              AI‑driven quality assurance solutions that ensure reliable, high‑performance web and mobile software delivery.          </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
@@ -404,8 +402,7 @@ export const HireQAEngineers = () => {
               Ready to Ensure Quality Excellence?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our QA specialists and deliver software that exceeds
-              expectations.
+              Connect with our AI‑driven QA specialists and deliver web and mobile software that exceeds expectations.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

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

@@ -186,7 +186,7 @@ export const Homepage = () => {
                             <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
                             <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
                                 {/* End-to-end solutions for every stage of your product lifecycle. */}
-                                We are the ai app development company, End-to-end solutions for every stage of your product lifecycle.
+                                We are the AI app development company, End-to-end solutions for every stage of your product lifecycle.
                             </p>
                         </div>
                     </motion.div>

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

@@ -102,7 +102,7 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Harness the power of machine learning to predict outcomes, automate decisions, and unlock valuable insights from your data.
+                Harness the power of machine learning to predict outcomes, automate decisions, and unlock data‑driven insights with scalable, AI‑powered predictive analytics and decision‑automation solutions.
               </p>
             </div>
 
@@ -201,7 +201,7 @@ const HorizontalTagScroller = () => {
             <span className="text-white"> We Master</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Cutting-edge machine learning methodologies that deliver accurate predictions and intelligent automation.
+            Cutting‑edge machine learning methodologies that deliver accurate predictions, intelligent automation, and scalable AI‑driven analytics across high‑impact use cases.
           </p>
         </motion.div>
 
@@ -321,7 +321,7 @@ const SideBySideContentWithIcons = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed">
-            Advanced ML capabilities with proven results and enterprise-grade deployment.
+           Advanced ML capabilities with proven business outcomes, production‑ready AI models, and enterprise‑grade deployment and MLOps for scalable, secure machine learning solutions.
           </p>
         </motion.div>
 
@@ -421,7 +421,7 @@ const TabbedServiceDisplay = () => {
             Machine Learning Services
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
-            Comprehensive machine learning solutions that turn your data into competitive advantage.
+            Comprehensive machine learning solutions that turn your data into actionable insights, predictive intelligence, and competitive advantage with scalable, AI‑driven ML models.
           </p>
         </motion.div>
 
@@ -508,7 +508,7 @@ const InlineCTA = () => {
 
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
-              Transform your data into predictive intelligence that drives smarter business decisions and competitive advantage.
+             Transform your data into predictive intelligence that drives smarter business decisions, AI‑driven automation, and measurable competitive advantage.
             </p>
 
             {/* CTA Button */}
@@ -588,7 +588,7 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">ML Specialists</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Get access to expert machine learning professionals who build predictive models that drive business value.
+            Get access to expert machine learning professionals who design, build, and deploy predictive models that drive measurable business value and scalable AI‑driven outcomes.
           </p>
         </motion.div>
 
@@ -669,23 +669,23 @@ const HireDevelopersSection = () => {
 const machineLearningFAQs = [
   {
     question: "What types of machine learning models can you develop?",
-    answer: "We develop various ML models including supervised learning (classification, regression), unsupervised learning (clustering, dimensionality reduction), reinforcement learning, and deep learning models using frameworks like TensorFlow and PyTorch."
+    answer: "We develop various machine learning models including supervised learning (classification, regression), unsupervised learning (clustering, dimensionality reduction), reinforcement learning, and deep learning models using frameworks like TensorFlow and PyTorch."
   },
   {
     question: "How do you ensure the accuracy of machine learning models?",
-    answer: "We use rigorous validation techniques including cross-validation, train-test-validation splits, A/B testing, and continuous monitoring. We also implement feature engineering, hyperparameter tuning, and ensemble methods to maximize accuracy."
+    answer: "We use rigorous validation techniques including cross‑validation, train‑test‑validation splits, A/B testing, and continuous monitoring. We also implement feature engineering, hyperparameter tuning, and ensemble methods to maximize machine learning model accuracy and ensure reliable, production‑grade predictions."
   },
   {
     question: "Can you integrate ML models into our existing systems?",
-    answer: "Yes, we specialize in ML model deployment and integration. We can deploy models as REST APIs, batch processing systems, real-time streaming solutions, or embed them directly into your applications using various deployment strategies."
+    answer: "Yes. We specialize in ML model deployment and integration into your existing infrastructure. We can deploy models as REST APIs, batch processing systems, real‑time streaming solutions, or embed them directly into your applications using cloud, on‑premise, or hybrid deployment strategies."
   },
   {
     question: "How do you handle data quality and preprocessing?",
-    answer: "We implement comprehensive data pipelines that include data cleaning, normalization, feature engineering, handling missing values, outlier detection, and data validation to ensure your ML models work with high-quality, reliable data."
+    answer: "We implement comprehensive data pipelines that include data cleaning, normalization, feature engineering, handling missing values, outlier detection, and data validation to ensure your machine learning models work with high‑quality, reliable, and consistent data."
   },
   {
     question: "What is your approach to MLOps and model maintenance?",
-    answer: "We follow MLOps best practices including version control for models and data, automated testing, continuous integration/deployment, model monitoring, performance tracking, and automated retraining to ensure models remain accurate over time."
+    answer: "We follow MLOps best practices including version control for models and data, automated testing, continuous integration and deployment, model monitoring, performance tracking, and automated retraining workflows to ensure models remain accurate, robust, and production‑ready over time."
   }
 ];
 

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.png";
 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 App Development Services by WDI Experts</title>
+        <title>
+          Mobile Application Development Services | Mobile App Development
+          Company - WDIPL
+        </title>
         <meta
           name="description"
-          content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
+          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="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
+          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="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
+          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
+        />
+        <meta
+          name="twitter:image"
+          content="https://www.wdipl.com/your-preview-image.jpg"
         />
-        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
 
         {/* Social Profiles (using JSON-LD Schema) */}
         <script type="application/ld+json">
@@ -104,7 +122,9 @@ const HeroWithCTA = () => {
             >
               <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
                 <Smartphone className="w-4 h-4 text-[#E5195E]" />
-                <span className="text-sm font-medium text-white/90">Mobile App Development</span>
+                <span className="text-sm font-medium text-white/90">
+                  Mobile App Development
+                </span>
               </div>
             </motion.div>
 
@@ -116,13 +136,14 @@ const HeroWithCTA = () => {
               className="space-y-6"
             >
               <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
-                <span className="text-white">From concept to </span>
-                <span className="text-[#E5195E]">App Store</span>
-                <span className="text-white"> in just 6 weeks.</span>
+                <span className="text-white">Mobile App </span>
+                <span className="text-[#E5195E]">Development Services</span>
+                <span className="text-white"> for iOS & Android.</span>
               </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,823 @@
+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.png';
+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">Hire Our </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.
+          </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: "Do you develop both iOS and Android apps?",
+    answer: "Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment."
+  },
+  {
+    question: "What is the typical timeline for mobile app development?",
+    answer: "Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
+  },
+  {
+    question: "How much does mobile app development cost?",
+    answer: "Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
+  },
+  {
+    question: "Do you help with App Store submissions?",
+    answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance."
+  },
+  {
+    question: "Can you integrate third-party services and APIs?",
+    answer: "Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features."
+  },
+  {
+    question: "Do you provide app maintenance and updates?",
+    answer: "Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current."
+  },
+  {
+    question: "What about app security and data protection?",
+    answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps."
+  },
+  {
+    question: "Can you develop offline-capable mobile apps?",
+    answer: "Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity."
+  }
+];
+
+// Main Mobile App Development Page Component
+export const MobileAppDevelopmentIndia = () => {
+  // Set document title for SEO
+  React.useEffect(() => {
+    document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
+
+    // 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/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.png";
+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 />
+
+      {/* 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.png';
+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/ProductModernization.tsx

@@ -125,9 +125,7 @@ const ModernizationHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Revitalize your outdated software and digital products,
-                transforming them into modern, scalable, and high-performing
-                solutions.
+                Revitalize outdated software through AI mobile app development, transforming legacy systems into modern, scalable solutions that boost performance and agility.
               </p>
             </div>
 
@@ -440,6 +438,11 @@ const ModernizationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Modernize Your Existing Product?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Modernizing with WDI unlocks AI-powered features, enhances scalability, cuts maintenance costs, and future-proofs your software for sustained enterprise growth.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -537,6 +540,12 @@ const ModernizationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Strategic Phased Approach to Modernization
           </h2>
+
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            A structured roadmap using AI iOS development transforms legacy systems step-by-step from assessment to deployment minimizing risks while maximizing performance gains.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -702,6 +711,11 @@ const ModernizationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Product Modernization Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Mastering AI mobile app integrations and web development, we rebuild legacy systems into scalable, high-performance platforms that drive enterprise innovation.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1117,6 +1131,11 @@ const ModernizationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Successful Product Modernization Stories
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Legacy systems reborn through AI-powered features deliver 3-5x faster performance, seamless scalability, and millions in annual savings as proven in enterprise transformations.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1348,8 +1367,7 @@ const HireModernizationTalent = () => {
             Access Expert Talent for Your Modernization Project
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Hire skilled architects and developers experienced in safely
-            migrating and upgrading complex legacy systems.
+            Hire AI mobile application developers skilled in safely migrating and upgrading complex legacy systems for seamless, high-performance transformations.
           </p>
         </motion.div>
 
@@ -1556,8 +1574,7 @@ const ModernizationFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Don't let outdated technology hinder your growth. Transform your
-            software into a modern, competitive asset.
+            Don't let outdated technology hinder growth. Transform software into modern, competitive assets through AI-powered design
           </motion.p>
 
           <motion.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>
   );
 };

pages/SoftwareEngineering.tsx

@@ -551,8 +551,7 @@ const InlineCTA = () => {
 
             {/* Subtitle */}
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Robust, scalable systems engineered with modern practices and
-              proven methodologies.
+              Robust, scalable systems engineered with AI mobile application developers and modern practices for unmatched performance.
             </p>
 
             {/* CTA Button */}
@@ -635,8 +634,7 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">Engineering Experts</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Get access to senior software engineers who build robust, scalable
-            enterprise systems.
+            Get access to WDI's senior AI-powered features engineers who build robust, scalable enterprise systems with cutting-edge expertise.
           </p>
         </motion.div>
 
@@ -726,7 +724,7 @@ const softwareEngineeringFAQs = [
   {
     question: "What software engineering methodologies do you follow?",
     answer:
-      "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software.",
+      "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture enhanced by AI-powered features to ensure high-quality, maintainable software.",
   },
   {
     question: "How do you ensure code quality and maintainability?",
@@ -741,7 +739,7 @@ const softwareEngineeringFAQs = [
   {
     question: "What is your approach to system architecture?",
     answer:
-      "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements.",
+      "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that evolve with your business requirements.",
   },
   {
     question: "Do you provide ongoing software maintenance?",
@@ -763,7 +761,7 @@ export function SoftwareEngineering() {
       <HireDevelopersSection />
       <FAQSection
         title="Software Engineering Questions"
-        subtitle="Get answers to common questions about our software engineering services."
+        subtitle="Get answers to common questions about our AI app development company software engineering services."
         faqs={softwareEngineeringFAQs}
       />
       {/* <Footer /> */}

pages/StartAProject.tsx

@@ -85,7 +85,11 @@ const HeroSection = () => {
               <span className="text-[#E5195E]">Reality</span>
             </h1>
             <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
-              Connect with Mobile App and AI Development Experts Today.
+              Connect with Mobile App and AI Development Experts Today
+              <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
+
+                Transform your concept into a fully functional mobile and AI‑driven solution with our expert development team.
+              </p>
             </p>
           </div>
         </motion.div>
@@ -117,10 +121,10 @@ const VisionSection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-8">
-            Have a big idea and are looking for customised solutions? From
-            bespoke app development to AI-enabled platforms, and scalable system
-            upgrades, our experts can turn ideas into premium digital products.
-            Let's connect and create scalable and thriving solutions.
+            Have a big idea and are looking for customized mobile and AI solutions? From bespoke app development to AI‑enabled platforms and scalable system upgrades, our experts can turn your ideas into premium digital products.</p>
+          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-8">
+
+            Whether you need an AI‑driven mobile app, intelligent backend systems, or integration of AI features into existing platforms, we help you build scalable, future‑ready solutions.
           </p>
 
           <Button
@@ -294,9 +298,10 @@ const JoinWDISection = () => {
           </h2>
 
           <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
-            We're always looking for passionate, talented individuals to join
-            our growing team. If you're ready to work on innovative projects and
-            make a real impact, we'd love to hear from you.
+            We’re always looking for passionate, talented individuals…developers, designers, AI specialists, and product minds, to join our growing team. If you’re ready to work on innovative AI‑driven and mobile-first projects and make a real impact, we’d love to hear from you.</p>
+          <p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
+
+            Whether you specialize in AI mobile app development, full‑stack engineering, DevOps, or product strategy, the WDI family offers opportunities to grow, collaborate, and help shape the future of technology.
           </p>
         </motion.div>
 

pages/SystemArchitectureDevOps.tsx

@@ -126,9 +126,7 @@ const DevOpsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Designing robust, scalable system architectures and implementing
-                efficient DevOps practices for continuous delivery and
-                operational excellence.
+                Designing AI-powered, robust, scalable system architectures and implementing efficient DevOps practices for continuous delivery and operational excellence.
               </p>
             </div>
 
@@ -510,6 +508,11 @@ const DevOpsBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             The Foundation for High-Performance Software
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Harnessing enterprise-grade technologies and scalable architectures, WDI delivers the resilient core infrastructure essential for high-performance applications driving enterprise innovation.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -645,6 +648,11 @@ const DevOpsProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Approach to Building and Optimizing Your Digital Infrastructure
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI's AI iOS development methodology crafts resilient, scalable digital foundations through agile DevOps and web development expertise, ensuring optimal performance and future-ready operations.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -810,6 +818,11 @@ const DevOpsServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Specialized Expertise
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI excels in AI mobile app development and iOS mobile app development, delivering scalable enterprise solutions with cutting-edge expertise.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1016,8 +1029,7 @@ const DevOpsTechStack = () => {
             Leveraging Industry-Leading Tools
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            For robust and automated infrastructure management.
-          </p>
+            WDI uses top AI-powered design platforms for automated infrastructure management, ensuring robust efficiency and seamless scalability.          </p>
         </motion.div>
 
         {/* Cloud Platforms */}
@@ -1306,6 +1318,11 @@ const DevOpsCaseStudies = () => {
             Empowering Businesses with Resilient Infrastructure & Agile
             Operations
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI delivers AI mobile app development infrastructure and agile operations that ensure resilient performance, rapid scalability, and seamless enterprise agility.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1538,8 +1555,7 @@ const HireDevOpsTalent = () => {
             Need Specialized DevOps or Cloud Architecture Talent?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our highly skilled engineers proficient in cloud platforms,
-            CI/CD, and system automation.
+            Access WDI's AI mobile application developers. highly skilled engineers proficient in AI iOS development, cloud platforms, CI/CD pipelines, and system automation for enterprise excellence.
           </p>
         </motion.div>
 
@@ -1743,8 +1759,7 @@ const DevOpsFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with WDI to build a secure, scalable, and efficient digital
-            foundation for your business.
+            Partner with WDI for AI mobile app development to build secure, scalable foundations that ensure seamless enterprise operations.
           </motion.p>
 
           <motion.div

pages/TeamAugmentationServices.tsx

@@ -72,7 +72,7 @@ export const TeamAugmentationServices = () => {
     {
       category: "Team Enhancement",
       title: "Team Augmentation Services",
-      description: "Enhance your existing development team with our skilled professionals. Fill skill gaps, accelerate delivery, and scale your capabilities without the overhead of full-time hiring.",
+      description: "Enhance your existing AI mobile and web development team with our skilled professionals. Fill skill gaps, accelerate delivery, and scale your capabilities without the overhead of full‑time hiring.",
       primaryCTA: {
         text: "Augment Your Team",
         href: "/start-a-project",
@@ -287,8 +287,7 @@ export const TeamAugmentationServices = () => {
               Why Choose WDI for Team Augmentation?
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Experience the advantages of professional team augmentation
-              services
+              Experience the advantages of AI‑driven app development‑focused team augmentation services that scale your AI mobile and web development capabilities with pre‑vetted talent and seamless integration.
             </p>
           </div>
 
@@ -363,7 +362,7 @@ export const TeamAugmentationServices = () => {
               Roles We Can Augment
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Expert professionals across all major technology domains
+              Expert professionals across all major technology domains ready to integrate into your AI‑driven app and web development workflows.
             </p>
           </div>
 
@@ -442,8 +441,7 @@ export const TeamAugmentationServices = () => {
               Team Augmentation vs Traditional Hiring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              See why team augmentation is the smarter choice for scaling your
-              team
+              Discover why AI‑driven team augmentation is the smarter choice for scaling your app development team and accelerating AI‑powered mobile and web projects.
             </p>
           </div>
 
@@ -560,8 +558,7 @@ export const TeamAugmentationServices = () => {
               Ready to Scale Your Team?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Get the skilled professionals you need to accelerate your projects
-              and fill critical skill gaps.
+              Get skilled AI‑driven app development professionals to accelerate your projects and fill critical skill gaps in your mobile and web development team.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button

pages/ThirdPartyIntegrations.tsx

@@ -125,9 +125,7 @@ const IntegrationsHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Connecting your disparate software systems and applications for
-                unified data flow, automated workflows, and enhanced
-                functionality.
+                Enable AI-powered features to connect disparate systems, ensuring unified data flow, automated workflows, and enhanced app functionality.
               </p>
             </div>
 
@@ -482,6 +480,11 @@ const IntegrationBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why Integrate Your Systems with WDI?
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI streamlines your operations with AI-powered features, breaking down silos for real-time data flow, smarter decisions, and scalable growth.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -617,6 +620,11 @@ const IntegrationProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Strategic Approach to Seamless Integration
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI employs AI iOS development techniques to unify systems effortlessly, enabling smooth data exchange and automated processes for peak operational efficiency.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -635,14 +643,12 @@ const IntegrationProcess = () => {
                   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-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -782,6 +788,11 @@ const IntegrationServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive Integration Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI's web development expertise powers seamless API connections and AI mobile app integrations, creating unified ecosystems that boost efficiency and scalability.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -956,7 +967,7 @@ const IntegrationTechStack = () => {
             Utilizing Robust Protocols and Platforms
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            For reliable system connectivity and seamless data exchange.
+            WDI leverages AI-powered design protocols and platforms for reliable system connectivity, ensuring seamless data exchange and uninterrupted enterprise workflows.
           </p>
         </motion.div>
 
@@ -1177,6 +1188,11 @@ const IntegrationCaseStudies = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
             Systems That Speak: Our Integration Success Stories
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            WDI's AI-powered features bring systems together seamlessly, powering real-time data sync and automated workflows that transform enterprise operations.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -1408,8 +1424,7 @@ const HireIntegrationTalent = () => {
             Need Expertise in System Integration?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Hire our developers experienced in API development, middleware, and
-            connecting diverse software platforms.
+            Hire WDI's AI mobile application developers experienced in API development, middleware, and connecting diverse software platforms for seamless enterprise integration.
           </p>
         </motion.div>
 
@@ -1613,8 +1628,7 @@ const IntegrationFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Achieve unparalleled efficiency and data consistency by seamlessly
-            integrating your essential software systems.
+            Achieve unparalleled efficiency and data consistency through AI app development company solutions that seamlessly integrate your essential software systems.
           </motion.p>
 
           <motion.div
@@ -1667,7 +1681,7 @@ export const ThirdPartyIntegrations = () => {
         <IntegrationBenefits />
       </section>
 
-       {/* Case Studies */}
+      {/* Case Studies */}
       <section className="bg-background">
         <IntegrationCaseStudies />
       </section>

pages/UIUXDesign.tsx

@@ -120,8 +120,7 @@ const UIUXHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Crafting visually stunning and highly intuitive user interfaces
-                and experiences that engage users and drive business objectives.
+                Crafting visually stunning and highly intuitive interfaces with AI-powered design that engage users and drive business objectives.
               </p>
             </div>
 
@@ -488,6 +487,11 @@ const UIUXBenefits = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Why User-Centric Design Matters
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            User-centric AI-powered design boosts satisfaction, cuts development costs, and drives higher engagement by prioritizing intuitive experiences over aesthetics.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -579,6 +583,11 @@ const UIUXDesignProcess = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
             Our Collaborative & Iterative Design Process
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Team-driven cycles of prototyping, testing, and refinement with AI-powered design ensure user-focused outcomes and continuous improvement at every stage.
+
+          </p>
         </motion.div>
 
         <div className="relative">
@@ -738,6 +747,11 @@ const UIUXDesignServices = () => {
           <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
             Our Comprehensive UI/UX Design Capabilities
           </h2>
+          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+
+            Full-spectrum AI-powered design expertise from user research and wireframing to prototyping, testing, and scalable design systems that drive engagement and conversions.
+
+          </p>
         </motion.div>
 
         <motion.div
@@ -892,8 +906,7 @@ const DesignToolsMethodologies = () => {
             Design Tools & Methodologies
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Leveraging industry-standard tools and methodologies for impactful
-            design.
+            Leveraging industry-standard tools like Figma, Sketch, and Adobe XD alongside AI-powered design methodologies for impactful, scalable user experiences.
           </p>
         </motion.div>
 
@@ -1123,8 +1136,7 @@ const HireUIUXDesigners = () => {
             Hire World-Class UI/UX Designers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our pool of talented designers specializing in intuitive
-            interfaces, user research, and strategic UX.
+            Access our pool of talented AI-powered design specialists who excel in intuitive interfaces, user research, and strategic UX that drives results.
           </p>
         </motion.div>
 
@@ -1327,8 +1339,7 @@ const UIUXFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with WDI for compelling UI/UX design that captures attention
-            and drives meaningful interactions.
+            Partner with WDI for compelling AI-powered design that captures attention and drives meaningful interactions.
           </motion.p>
 
           <motion.div

pages/VIB360Project.tsx

@@ -4,6 +4,7 @@ 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 vib360 from "../assets/vib360.jpg"
 import { ArrowRight, Calendar, Users, Smartphone, Globe, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 // import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";
@@ -15,7 +16,7 @@ export const VIB360Project = () => {
   return (
     <div className="dark min-h-screen bg-background">
       {/* <Navigation /> */}
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -28,11 +29,11 @@ export const VIB360Project = () => {
                   Industrial IoT Case Study
                 </Badge>
               </div>
-              
+
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                 VIB360 Platform
               </h1>
-              
+
               <p className="text-xl text-muted-foreground mb-8 font-manrope">
                 Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI-enabled solution for real-time monitoring and operational efficiency
               </p>
@@ -88,7 +89,7 @@ export const VIB360Project = () => {
 
               {/* CTA Buttons */}
               <div className="flex flex-col sm:flex-row gap-4">
-                <Button 
+                <Button
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
                   onClick={() => navigate('/start-a-project')}
@@ -96,7 +97,7 @@ export const VIB360Project = () => {
                   Build Your IoT Platform
                   <ArrowRight className="w-5 h-5 ml-2" />
                 </Button>
-                <Button 
+                <Button
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -109,8 +110,8 @@ export const VIB360Project = () => {
 
             <div className="relative">
               <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
-                <img 
-                  src={vib360Image} 
+                <img
+                  src={vib360Image}
                   alt="VIB360 Industrial IoT Vibration Monitoring Platform"
                   className="w-full h-full object-cover rounded-lg"
                 />
@@ -140,7 +141,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
-            
+
             <div className="grid md:grid-cols-3 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -181,7 +182,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-12">
               <div>
                 <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -229,7 +230,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-12 mb-16">
               <div>
                 <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -315,43 +316,43 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
-            
+
             <div className="mb-12">
               <div className="text-center mb-8">
                 <p className="text-lg text-muted-foreground font-manrope">
                   <strong>Agile</strong> (2-week sprints) with sprint reviews with hardware + software teams, field testing after each major release, iterative model retraining with new sensor data
                 </p>
               </div>
-              
+
               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {[
-                  { 
-                    phase: "Discovery & Planning", 
+                  {
+                    phase: "Discovery & Planning",
                     duration: "3 weeks",
                     description: "Hardware-software integration feasibility, AI model baseline setup"
                   },
-                  { 
-                    phase: "Design & Prototyping", 
+                  {
+                    phase: "Design & Prototyping",
                     duration: "5 weeks",
                     description: "Sensor data visualization mockups, mobile UI/UX for technician workflows"
                   },
-                  { 
-                    phase: "Core Platform Development", 
+                  {
+                    phase: "Core Platform Development",
                     duration: "12 weeks",
                     description: "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
                   },
-                  { 
-                    phase: "AI & Analytics Module", 
+                  {
+                    phase: "AI & Analytics Module",
                     duration: "6 weeks",
                     description: "Model training & tuning, predictive maintenance alerts"
                   },
-                  { 
-                    phase: "Integration & Testing", 
+                  {
+                    phase: "Integration & Testing",
                     duration: "5 weeks",
                     description: "SCADA/ERP integration APIs, field testing in pilot plants"
                   },
-                  { 
-                    phase: "Deployment & Training", 
+                  {
+                    phase: "Deployment & Training",
                     duration: "3 weeks",
                     description: "Rollout to initial sites, staff training & documentation"
                   }
@@ -382,7 +383,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
-            
+
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
               {[
                 {
@@ -434,7 +435,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-6xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
-            
+
             <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
               {[
                 { label: "Site Deployments", value: "15", icon: Factory, desc: "industrial sites" },
@@ -495,7 +496,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -560,7 +561,7 @@ export const VIB360Project = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto">
             <h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
-            
+
             <div className="grid md:grid-cols-2 gap-8">
               <Card className="bg-card/50 border-white/10">
                 <CardContent className="p-6">
@@ -611,7 +612,7 @@ export const VIB360Project = () => {
               Create advanced predictive maintenance platforms with AI-enabled vibration monitoring and real-time analytics for industrial excellence.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button 
+              <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
                 onClick={() => navigate('/start-a-project')}
@@ -619,7 +620,7 @@ export const VIB360Project = () => {
                 Start Your Project
                 <ArrowRight className="w-5 h-5 ml-2" />
               </Button>
-              <Button 
+              <Button
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

pages/WhitepapersInsights.tsx

@@ -284,7 +284,8 @@ export const WhitepapersInsights = () => {
               Whitepapers & Insights: Deep Dives into Industry Trends
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              For those seeking in-depth knowledge and strategic guidance, WDI offers a curated collection of Whitepapers & Insights. These resources delve into complex industry challenges, emerging technologies, and best practices, providing valuable intelligence to help you make informed decisions and stay ahead of the curve.
+              For leaders seeking strategic, AI‑driven guidance, WDI offers a curated library of Whitepapers & Insights. These resources explore complex industry challenges, emerging technologies, and best‑practice approaches, delivering actionable intelligence to help you make informed decisions and stay ahead in the evolving digital landscape.
+
             </p>
           </div>
         </div>
@@ -565,7 +566,7 @@ export const WhitepapersInsights = () => {
               Need Custom Research or Consulting?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Our research team can provide custom analysis and insights tailored to your specific business needs and challenges.
+              Our AI‑driven research team can provide tailored analysis and strategic insights specifically designed for your business goals and challenges.
             </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">

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,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+<xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 
   <url>
     <loc>https://www.wdipl.com/</loc>

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";
@@ -173,209 +180,552 @@ import { HireThirdPartyIntegrationsDevelopers } from "../pages/HireThirdPartyInt
 import { HireClickablePrototypesDevelopers } from "../pages/HireClickablePrototypesDevelopers";
 import { HireDesignThinkingWorkshopsDevelopers } from "../pages/HireDesignThinkingWorkshopsDevelopers";
 import { HireUserResearchTestingDevelopers } from "../pages/HireUserResearchTestingDevelopers";
+import { HireMobileAppDevelopersIndia } from "../pages/HireMobileAppDevelopersIndia";
 
 // 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 />} />
-      <Route path="/home" element={<Homepage />} />
+  <Routes>
+    {/* Homepage */}
+    <Route path="/" element={<Homepage />} />
+    <Route path="/home" element={<Homepage />} />
 
-      {/* Main Category Pages */}
-      <Route path="/services" element={<Services />} />
-      <Route path="/solutions" element={<Solutions />} />
-      <Route path="/industries" element={<Industries />} />
-      <Route path="/resources" element={<Resources />} />
-      <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="/machine-learning" element={<MachineLearning />} />
+    {/* Main Category Pages */}
+    <Route path="/services" element={<Services />} />
+    <Route path="/solutions" element={<Solutions />} />
+    <Route path="/industries" element={<Industries />} />
+    <Route path="/resources" element={<Resources />} />
+    <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="/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/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/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/nlp-text-analytics" element={<NLPTextAnalytics />} />
-      <Route path="/services/recommendation-engines" element={<RecommendationEngines />} />
+    {/* SERVICES */}
+    <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/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/nlp-text-analytics" element={<NLPTextAnalytics />} />
+    <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 />} />
+    {/* 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 />}
+    />
 
-      {/* Simplified solution routes */}
-      <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 />} />
+    {/* Simplified solution routes */}
+    <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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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/careers" element={<Careers />} />
-      <Route path="/company/culture-values" element={<CultureValues />} />
-      <Route path="/company/press-media" element={<PressMedia />} />
+    {/* 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/careers" element={<Careers />} />
+    <Route path="/company/culture-values" element={<CultureValues />} />
+    <Route path="/company/press-media" element={<PressMedia />} />
 
-      {/* CAREERS PAGES */}
-      <Route path="/careers" element={<Careers />} />
-      <Route path="/careers/open-positions" element={<Careers />} />
-      <Route path="/careers/send-cv" element={<Careers />} />
+    {/* CAREERS PAGES */}
+    <Route path="/careers" element={<Careers />} />
+    <Route path="/careers/open-positions" element={<Careers />} />
+    <Route path="/careers/send-cv" element={<Careers />} />
 
-      {/* 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/qa-engineers" element={<HireQAEngineers />} />
-      <Route path="/dedicated-development-teams" element={<DedicatedDevelopmentTeams />} />
-      <Route path="/engagement-models" element={<EngagementModels />} />
-      <Route path="/team-augmentation-services" element={<TeamAugmentationServices />} />
+    {/* 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/qa-engineers" element={<HireQAEngineers />} />
+    <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="/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/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 />}
+    />
 
-      {/* 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/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 />} />
+    {/* 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/faqs" element={<FAQs />} />
 
-      {/* 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/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/office-locations" element={<OfficeLocations />} />
+    <Route path="/contact/client-support" element={<ClientSupport />} />
+    <Route path="/contact/send-your-cv" element={<SendYourCV />} />
+    <Route path="/start-a-project" element={<StartAProject />} />
+    <Route path="/thank-you" element={<ThankYou />} />
 
-      {/* 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/office-locations" element={<OfficeLocations />} />
-      <Route path="/contact/client-support" element={<ClientSupport />} />
-      <Route path="/contact/send-your-cv" element={<SendYourCV />} />
-      <Route path="/start-a-project" element={<StartAProject />} />
-      <Route path="/thank-you" element={<ThankYou />} />
+    {/* LEGACY CONTACT ROUTE SUPPORT */}
+    <Route path="/contact/contact-form" element={<ContactMain />} />
 
-      {/* LEGACY CONTACT ROUTE SUPPORT */}
-      <Route path="/contact/contact-form" element={<ContactMain />} />
+    {/* PROJECT PAGES */}
+    <Route path="/projects/regroup" element={<RegroupProject />} />
+    {/* <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/goodtimes" element={<GoodTimesProject />} />
+    <Route path="/projects/prosperty" element={<ProspertyProject />} />
+    <Route path="/projects/ranoutof" element={<RanOutOfProject />} />
+    <Route path="/projects/vib360" element={<VIB360Project />} />
+    <Route path="/projects/amble" element={<AmbleProject />} />
+    <Route path="/projects/amoz" element={<AmozProject />} />
+    <Route path="/projects/simpletend" element={<SimpliTendProject />} />
 
-      {/* PROJECT PAGES */}
-      <Route path="/projects/regroup" element={<RegroupProject />} />
-      {/* <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/goodtimes" element={<GoodTimesProject />} />
-      <Route path="/projects/prosperty" element={<ProspertyProject />} />
-      <Route path="/projects/ranoutof" element={<RanOutOfProject />} />
-      <Route path="/projects/vib360" element={<VIB360Project />} />
-      <Route path="/projects/amble" element={<AmbleProject />} />
-      <Route path="/projects/amoz" element={<AmozProject />} />
-      <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 />}
+    />
 
-      {/* 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 />} />
+    {/* 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 />}
+    />
 
-      {/* 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 />} />
-
-      {/* PLACEHOLDER */}
-      {/* <Route path="/comming-soon" element={<CaseStudyComingSoon projectTitle="Coming Soon Project" />} /> */}
-    </Routes>
+    {/* PLACEHOLDER */}
+    {/* <Route path="/comming-soon" element={<CaseStudyComingSoon projectTitle="Coming Soon Project" />} /> */}
+  </Routes>
 );
 
 export const dynamicRoutes = {
@@ -384,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;
 }