2 Commits

Author SHA1 Message Date
9140cd173a Add .gitea/workflows/deploy.yml 2026-04-16 08:15:44 +00:00
dbf6d8775f robots fixed 2026-04-16 12:15:31 +05:30
6 changed files with 292 additions and 84 deletions

140
.gitea/workflows/deploy.yml Normal file
View File

@@ -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

View File

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

View File

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

View File

@@ -9,7 +9,8 @@ import {
Calendar, Calendar,
DollarSign, DollarSign,
Eye, Eye,
Globe, Layers, Globe,
Layers,
Play, Play,
Rocket, Rocket,
Settings, Settings,
@@ -21,7 +22,7 @@ import {
Truck, Truck,
UserPlus, UserPlus,
Watch, Watch,
Zap Zap,
} from "lucide-react"; } from "lucide-react";
import React from "react"; import React from "react";
import { FAQSection } from "../components/FAQSection"; import { FAQSection } from "../components/FAQSection";
@@ -32,11 +33,10 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; 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 { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT // Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT
const HeroWithCTA = () => { const HeroWithCTA = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -44,32 +44,50 @@ const HeroWithCTA = () => {
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
<title>Mobile Application Development Services | Mobile App Development Company - WDIPL</title> <title>
Mobile Application Development Services | Mobile App Development
Company - WDIPL
</title>
<meta <meta
name="description" name="description"
content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide." content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
/> />
{/* Canonical Link */} {/* 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) */} {/* 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 <meta
property="og:description" 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." 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <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 */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <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 <meta
name="twitter:description" 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." 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) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <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"> <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]" /> <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> </div>
</motion.div> </motion.div>
@@ -122,7 +142,8 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="max-w-lg text-lg leading-relaxed text-gray-300"> <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> </p>
</motion.div> </motion.div>
@@ -137,7 +158,7 @@ const HeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl" 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"> <div className="inline-flex items-center gap-2">
<Calendar className="flex-shrink-0 w-5 h-5" /> <Calendar className="flex-shrink-0 w-5 h-5" />
@@ -147,7 +168,7 @@ const HeroWithCTA = () => {
<Button <Button
variant="secondary" 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" 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" /> <Eye className="flex-shrink-0 w-5 h-5" />
<span>View our work</span> <span>View our work</span>
@@ -166,8 +187,8 @@ const HeroWithCTA = () => {
<div <div
className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full" className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
style={{ style={{
position: 'relative', position: "relative",
overflow: 'hidden' overflow: "hidden",
}} }}
> >
{/* Hero Image with comprehensive CSS styling */} {/* Hero Image with comprehensive CSS styling */}
@@ -176,12 +197,12 @@ const HeroWithCTA = () => {
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps" alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
className="block transition-all duration-300 scale-120 hover:scale-125" className="block transition-all duration-300 scale-120 hover:scale-125"
style={{ style={{
width: '100%', width: "100%",
height: '100%', height: "100%",
objectFit: 'contain', objectFit: "contain",
objectPosition: 'center', objectPosition: "center",
maxWidth: '100%', maxWidth: "100%",
display: 'block' display: "block",
}} }}
/> />
@@ -190,9 +211,9 @@ const HeroWithCTA = () => {
className="absolute inset-0 opacity-0 pointer-events-none" className="absolute inset-0 opacity-0 pointer-events-none"
style={{ style={{
backgroundImage: `url(${heroMockupImage})`, backgroundImage: `url(${heroMockupImage})`,
backgroundSize: 'contain', backgroundSize: "contain",
backgroundPosition: 'center', backgroundPosition: "center",
backgroundRepeat: 'no-repeat' backgroundRepeat: "no-repeat",
}} }}
/> />
</div> </div>
@@ -212,7 +233,7 @@ const HorizontalTagScroller = () => {
{ name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" }, { name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" },
{ name: "OTT & Streaming", icon: Play, color: "text-purple-400" }, { name: "OTT & Streaming", icon: Play, color: "text-purple-400" },
{ name: "Logistics", icon: Truck, color: "text-yellow-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 ( return (
@@ -234,7 +255,8 @@ const HorizontalTagScroller = () => {
Apps Built for High-Impact Industries Apps Built for High-Impact Industries
</h2> </h2>
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground"> <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> </p>
</motion.div> </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="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="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" /> <IconComponent className="w-6 h-6" />
</div> </div>
<span className="text-xl font-medium text-foreground whitespace-nowrap"> <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -285,13 +309,18 @@ const HorizontalTagScroller = () => {
key={`second-${industry.name}-${index}`} key={`second-${industry.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }} 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 }} viewport={{ once: true }}
className="flex-shrink-0 mx-3 group" 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="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="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" /> <IconComponent className="w-6 h-6" />
</div> </div>
<span className="text-xl font-medium text-foreground whitespace-nowrap"> <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -311,13 +340,18 @@ const HorizontalTagScroller = () => {
key={`third-${industry.name}-${index}`} key={`third-${industry.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }} 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 }} viewport={{ once: true }}
className="flex-shrink-0 mx-3 group" 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="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="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" /> <IconComponent className="w-6 h-6" />
</div> </div>
<span className="text-xl font-medium text-foreground whitespace-nowrap"> <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -341,28 +375,28 @@ const SideBySideContentWithIcons = () => {
{ {
id: "engineering", id: "engineering",
title: "24+ Years in App Engineering", title: "24+ Years in App Engineering",
icon: Award icon: Award,
}, },
{ {
id: "ownership", id: "ownership",
title: "100% Ownership, No Lock-ins", title: "100% Ownership, No Lock-ins",
icon: Shield icon: Shield,
}, },
{ {
id: "agile", id: "agile",
title: "Agile Sprints with Rapid Iteration", title: "Agile Sprints with Rapid Iteration",
icon: Zap icon: Zap,
}, },
{ {
id: "security", id: "security",
title: "Enterprise Security & Compliance-Ready", title: "Enterprise Security & Compliance-Ready",
icon: ShieldCheck icon: ShieldCheck,
}, },
{ {
id: "devices", id: "devices",
title: "Deep Experience Across Devices", title: "Deep Experience Across Devices",
icon: Settings icon: Settings,
} },
]; ];
return ( return (
@@ -436,39 +470,45 @@ const TabbedServiceDisplay = () => {
{ {
title: "iOS App Development", title: "iOS App Development",
icon: Smartphone, icon: Smartphone,
description: "Native iOS applications built with Swift and optimized for App Store success.", description:
link: "/services/ios-app-development" "Native iOS applications built with Swift and optimized for App Store success.",
link: "/services/ios-app-development",
}, },
{ {
title: "Android App Development", title: "Android App Development",
icon: Smartphone, icon: Smartphone,
description: "High-performance Android apps using Kotlin with Google Play optimization.", description:
link: "/services/android-app-development" "High-performance Android apps using Kotlin with Google Play optimization.",
link: "/services/android-app-development",
}, },
{ {
title: "Cross-Platform Development", title: "Cross-Platform Development",
icon: Layers, icon: Layers,
description: "Efficient cross-platform solutions using React Native and Flutter.", description:
link: "/services/cross-platform-app-development" "Efficient cross-platform solutions using React Native and Flutter.",
link: "/services/cross-platform-app-development",
}, },
{ {
title: "Wearable App Development", title: "Wearable App Development",
icon: Watch, icon: Watch,
description: "Smart watch and wearable device applications for health and fitness.", description:
link: "/services/wearable-device-development" "Smart watch and wearable device applications for health and fitness.",
link: "/services/wearable-device-development",
}, },
{ {
title: "Progressive Web Apps", title: "Progressive Web Apps",
icon: Globe, icon: Globe,
description: "Web applications that work like native mobile apps across all devices.", description:
link: "/services/pwa-development" "Web applications that work like native mobile apps across all devices.",
link: "/services/pwa-development",
}, },
{ {
title: "Enterprise Mobile Solutions", title: "Enterprise Mobile Solutions",
icon: Building, icon: Building,
description: "Secure, scalable mobile solutions for enterprise business needs.", description:
link: "/services/enterprise-software-solutions" "Secure, scalable mobile solutions for enterprise business needs.",
} link: "/services/enterprise-software-solutions",
},
]; ];
return ( return (
@@ -485,7 +525,9 @@ const TabbedServiceDisplay = () => {
Mobile App Development Services Mobile App Development Services
</h2> </h2>
<p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300"> <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> </p>
</motion.div> </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="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"> <div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-[#E5195E]" /> <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> </div>
</div> </div>
@@ -573,14 +617,15 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground"> <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> </p>
{/* CTA Button */} {/* CTA Button */}
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<ShimmerButton <ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90" 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"> <div className="inline-flex items-center gap-3">
<Brain className="flex-shrink-0 w-6 h-6" /> <Brain className="flex-shrink-0 w-6 h-6" />
@@ -610,7 +655,7 @@ const HireDevelopersSection = () => {
skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"], skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
iconBg: "bg-gray-800", iconBg: "bg-gray-800",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/mobile-app-developers" link: "/hire-talent/mobile-app-developers",
}, },
{ {
title: "Android Developers", title: "Android Developers",
@@ -618,7 +663,7 @@ const HireDevelopersSection = () => {
skills: ["Kotlin", "Java", "Jetpack Compose"], skills: ["Kotlin", "Java", "Jetpack Compose"],
iconBg: "bg-green-500", iconBg: "bg-green-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/mobile-app-developers" link: "/hire-talent/mobile-app-developers",
}, },
{ {
title: "Cross-Platform Developers", title: "Cross-Platform Developers",
@@ -626,7 +671,7 @@ const HireDevelopersSection = () => {
skills: ["React Native", "Flutter", "Xamarin"], skills: ["React Native", "Flutter", "Xamarin"],
iconBg: "bg-blue-500", iconBg: "bg-blue-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/mobile-app-developers" link: "/hire-talent/mobile-app-developers",
}, },
{ {
title: "Mobile QA Engineers", title: "Mobile QA Engineers",
@@ -634,8 +679,8 @@ const HireDevelopersSection = () => {
skills: ["Mobile Testing", "Automation", "Performance"], skills: ["Mobile Testing", "Automation", "Performance"],
iconBg: "bg-purple-500", iconBg: "bg-purple-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/qa-engineers" link: "/hire-talent/qa-engineers",
} },
]; ];
return ( return (
@@ -650,10 +695,14 @@ const HireDevelopersSection = () => {
> >
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl"> <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
<span className="text-foreground">Hire Our </span> <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> </h2>
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground"> <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> </p>
</motion.div> </motion.div>
@@ -681,8 +730,12 @@ const HireDevelopersSection = () => {
{/* Header with icon and title */} {/* Header with icon and title */}
<div className="p-8 pb-6"> <div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-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`}> <div
<IconComponent className={`w-6 h-6 ${developer.iconColor}`} /> 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>
<div className="flex-1"> <div className="flex-1">
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground"> <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-1 px-8 pb-6">
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{developer.skills.map((skill) => ( {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} {skill}
</Badge> </Badge>
))} ))}
@@ -734,48 +791,60 @@ const HireDevelopersSection = () => {
const mobileAppFAQs = [ const mobileAppFAQs = [
{ {
question: "Do you develop both iOS and Android apps?", 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?", 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?", 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?", 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?", 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?", 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?", 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?", 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 // Main Mobile App Development Page Component
export const MobileAppDevelopment = () => { export const MobileAppDevelopment = () => {
// Set document title for SEO // Set document title for SEO
React.useEffect(() => { 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 // Update meta description for SEO
const metaDescription = document.querySelector('meta[name="description"]'); const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) { 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.",
);
} }
}, []); }, []);

View File

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

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?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> <url>
<loc>https://www.wdipl.com/</loc> <loc>https://www.wdipl.com/</loc>