|
|
|
|
@@ -9,7 +9,8 @@ import {
|
|
|
|
|
Calendar,
|
|
|
|
|
DollarSign,
|
|
|
|
|
Eye,
|
|
|
|
|
Globe, Layers,
|
|
|
|
|
Globe,
|
|
|
|
|
Layers,
|
|
|
|
|
Play,
|
|
|
|
|
Rocket,
|
|
|
|
|
Settings,
|
|
|
|
|
@@ -21,7 +22,7 @@ import {
|
|
|
|
|
Truck,
|
|
|
|
|
UserPlus,
|
|
|
|
|
Watch,
|
|
|
|
|
Zap
|
|
|
|
|
Zap,
|
|
|
|
|
} from "lucide-react";
|
|
|
|
|
import React from "react";
|
|
|
|
|
import { FAQSection } from "../components/FAQSection";
|
|
|
|
|
@@ -32,11 +33,10 @@ import { Badge } from "../components/ui/badge";
|
|
|
|
|
import { Button } from "../components/ui/button";
|
|
|
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
|
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
|
|
|
import heroMockupImage from '../src/images/mobile-app-banner.png';
|
|
|
|
|
import heroMockupImage from "../src/images/mobile-app-banner.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();
|
|
|
|
|
@@ -44,32 +44,50 @@ const HeroWithCTA = () => {
|
|
|
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
|
|
|
<Helmet>
|
|
|
|
|
{/* Page Title and Meta Description */}
|
|
|
|
|
<title>Mobile Application Development Services | Mobile App Development Company - WDIPL</title>
|
|
|
|
|
<title>
|
|
|
|
|
Mobile Application Development Services | Mobile App Development
|
|
|
|
|
Company - WDIPL
|
|
|
|
|
</title>
|
|
|
|
|
<meta
|
|
|
|
|
name="description"
|
|
|
|
|
content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* Canonical Link */}
|
|
|
|
|
<link rel="canonical" href="https://www.wdipl.com/services/mobile-app-development" />
|
|
|
|
|
<link
|
|
|
|
|
rel="canonical"
|
|
|
|
|
href="https://www.wdipl.com/services/mobile-app-development"
|
|
|
|
|
/>
|
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
|
|
|
<meta property="og:title" content="Mobile App Development Services by WDI Experts" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:title"
|
|
|
|
|
content="Mobile Application Development Services | Mobile App Development Company - WDIPL"
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
property="og:description"
|
|
|
|
|
content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
|
|
|
|
|
/>
|
|
|
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
|
|
|
|
content="https://www.wdipl.com/your-preview-image.jpg"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* Twitter Card Tags */}
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta name="twitter:title" content="Mobile App Development Services by WDI Experts" />
|
|
|
|
|
<meta
|
|
|
|
|
name="twitter:title"
|
|
|
|
|
content="Mobile Application Development Services | Mobile App Development Company - WDIPL"
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
name="twitter:description"
|
|
|
|
|
content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
|
|
|
|
|
/>
|
|
|
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
|
<meta
|
|
|
|
|
name="twitter:image"
|
|
|
|
|
content="https://www.wdipl.com/your-preview-image.jpg"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
|
|
|
<script type="application/ld+json">
|
|
|
|
|
@@ -104,7 +122,9 @@ const HeroWithCTA = () => {
|
|
|
|
|
>
|
|
|
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
|
|
|
|
|
<Smartphone className="w-4 h-4 text-[#E5195E]" />
|
|
|
|
|
<span className="text-sm font-medium text-white/90">Mobile App Development</span>
|
|
|
|
|
<span className="text-sm font-medium text-white/90">
|
|
|
|
|
Mobile App Development
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
@@ -122,7 +142,8 @@ const HeroWithCTA = () => {
|
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
|
|
|
|
|
Build secure, scalable, AI-powered high-performance apps for iOS, Android, or cross-platform fast.
|
|
|
|
|
Build secure, scalable, AI-powered high-performance apps for
|
|
|
|
|
iOS, Android, or cross-platform fast.
|
|
|
|
|
</p>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
@@ -137,7 +158,7 @@ const HeroWithCTA = () => {
|
|
|
|
|
>
|
|
|
|
|
<ShimmerButton
|
|
|
|
|
className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl"
|
|
|
|
|
onClick={() => navigate('/start-a-project')}
|
|
|
|
|
onClick={() => navigate("/start-a-project")}
|
|
|
|
|
>
|
|
|
|
|
<div className="inline-flex items-center gap-2">
|
|
|
|
|
<Calendar className="flex-shrink-0 w-5 h-5" />
|
|
|
|
|
@@ -147,7 +168,7 @@ const HeroWithCTA = () => {
|
|
|
|
|
<Button
|
|
|
|
|
variant="secondary"
|
|
|
|
|
className="px-8 text-lg font-medium text-white transition-all duration-300 rounded-lg shadow-lg h-14 bg-white/10 hover:bg-white/20 border-white/20 hover:border-white/30 hover:shadow-xl"
|
|
|
|
|
onClick={() => navigate('/case-studies')}
|
|
|
|
|
onClick={() => navigate("/case-studies")}
|
|
|
|
|
>
|
|
|
|
|
<Eye className="flex-shrink-0 w-5 h-5" />
|
|
|
|
|
<span>View our work</span>
|
|
|
|
|
@@ -166,8 +187,8 @@ const HeroWithCTA = () => {
|
|
|
|
|
<div
|
|
|
|
|
className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
|
|
|
|
|
style={{
|
|
|
|
|
position: 'relative',
|
|
|
|
|
overflow: 'hidden'
|
|
|
|
|
position: "relative",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* Hero Image with comprehensive CSS styling */}
|
|
|
|
|
@@ -176,12 +197,12 @@ const HeroWithCTA = () => {
|
|
|
|
|
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
|
|
|
|
|
className="block transition-all duration-300 scale-120 hover:scale-125"
|
|
|
|
|
style={{
|
|
|
|
|
width: '100%',
|
|
|
|
|
height: '100%',
|
|
|
|
|
objectFit: 'contain',
|
|
|
|
|
objectPosition: 'center',
|
|
|
|
|
maxWidth: '100%',
|
|
|
|
|
display: 'block'
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
objectFit: "contain",
|
|
|
|
|
objectPosition: "center",
|
|
|
|
|
maxWidth: "100%",
|
|
|
|
|
display: "block",
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
@@ -190,9 +211,9 @@ const HeroWithCTA = () => {
|
|
|
|
|
className="absolute inset-0 opacity-0 pointer-events-none"
|
|
|
|
|
style={{
|
|
|
|
|
backgroundImage: `url(${heroMockupImage})`,
|
|
|
|
|
backgroundSize: 'contain',
|
|
|
|
|
backgroundPosition: 'center',
|
|
|
|
|
backgroundRepeat: 'no-repeat'
|
|
|
|
|
backgroundSize: "contain",
|
|
|
|
|
backgroundPosition: "center",
|
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -212,7 +233,7 @@ const HorizontalTagScroller = () => {
|
|
|
|
|
{ name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" },
|
|
|
|
|
{ name: "OTT & Streaming", icon: Play, color: "text-purple-400" },
|
|
|
|
|
{ name: "Logistics", icon: Truck, color: "text-yellow-400" },
|
|
|
|
|
{ name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" }
|
|
|
|
|
{ name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@@ -234,7 +255,8 @@ const HorizontalTagScroller = () => {
|
|
|
|
|
Apps Built for High-Impact Industries
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
|
|
|
|
|
Our AI mobile apps power industries where user trust, speed, and uptime are critical.
|
|
|
|
|
Our AI mobile apps power industries where user trust, speed, and
|
|
|
|
|
uptime are critical.
|
|
|
|
|
</p>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
@@ -265,7 +287,9 @@ const HorizontalTagScroller = () => {
|
|
|
|
|
>
|
|
|
|
|
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
|
|
|
<div className="flex items-center gap-4">
|
|
|
|
|
<div className={`w-8 h-8 flex items-center justify-center ${industry.color}`}>
|
|
|
|
|
<div
|
|
|
|
|
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
|
|
|
|
>
|
|
|
|
|
<IconComponent className="w-6 h-6" />
|
|
|
|
|
</div>
|
|
|
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
|
|
|
@@ -285,13 +309,18 @@ const HorizontalTagScroller = () => {
|
|
|
|
|
key={`second-${industry.name}-${index}`}
|
|
|
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
|
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
|
|
|
transition={{ duration: 0.5, delay: (index + industries.length) * 0.1 }}
|
|
|
|
|
transition={{
|
|
|
|
|
duration: 0.5,
|
|
|
|
|
delay: (index + industries.length) * 0.1,
|
|
|
|
|
}}
|
|
|
|
|
viewport={{ once: true }}
|
|
|
|
|
className="flex-shrink-0 mx-3 group"
|
|
|
|
|
>
|
|
|
|
|
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
|
|
|
<div className="flex items-center gap-4">
|
|
|
|
|
<div className={`w-8 h-8 flex items-center justify-center ${industry.color}`}>
|
|
|
|
|
<div
|
|
|
|
|
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
|
|
|
|
>
|
|
|
|
|
<IconComponent className="w-6 h-6" />
|
|
|
|
|
</div>
|
|
|
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
|
|
|
@@ -311,13 +340,18 @@ const HorizontalTagScroller = () => {
|
|
|
|
|
key={`third-${industry.name}-${index}`}
|
|
|
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
|
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
|
|
|
transition={{ duration: 0.5, delay: (index + industries.length * 2) * 0.1 }}
|
|
|
|
|
transition={{
|
|
|
|
|
duration: 0.5,
|
|
|
|
|
delay: (index + industries.length * 2) * 0.1,
|
|
|
|
|
}}
|
|
|
|
|
viewport={{ once: true }}
|
|
|
|
|
className="flex-shrink-0 mx-3 group"
|
|
|
|
|
>
|
|
|
|
|
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
|
|
|
<div className="flex items-center gap-4">
|
|
|
|
|
<div className={`w-8 h-8 flex items-center justify-center ${industry.color}`}>
|
|
|
|
|
<div
|
|
|
|
|
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
|
|
|
|
>
|
|
|
|
|
<IconComponent className="w-6 h-6" />
|
|
|
|
|
</div>
|
|
|
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
|
|
|
@@ -341,28 +375,28 @@ const SideBySideContentWithIcons = () => {
|
|
|
|
|
{
|
|
|
|
|
id: "engineering",
|
|
|
|
|
title: "24+ Years in App Engineering",
|
|
|
|
|
icon: Award
|
|
|
|
|
icon: Award,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "ownership",
|
|
|
|
|
title: "100% Ownership, No Lock-ins",
|
|
|
|
|
icon: Shield
|
|
|
|
|
icon: Shield,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "agile",
|
|
|
|
|
title: "Agile Sprints with Rapid Iteration",
|
|
|
|
|
icon: Zap
|
|
|
|
|
icon: Zap,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "security",
|
|
|
|
|
title: "Enterprise Security & Compliance-Ready",
|
|
|
|
|
icon: ShieldCheck
|
|
|
|
|
icon: ShieldCheck,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "devices",
|
|
|
|
|
title: "Deep Experience Across Devices",
|
|
|
|
|
icon: Settings
|
|
|
|
|
}
|
|
|
|
|
icon: Settings,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@@ -436,39 +470,45 @@ const TabbedServiceDisplay = () => {
|
|
|
|
|
{
|
|
|
|
|
title: "iOS App Development",
|
|
|
|
|
icon: Smartphone,
|
|
|
|
|
description: "Native iOS applications built with Swift and optimized for App Store success.",
|
|
|
|
|
link: "/services/ios-app-development"
|
|
|
|
|
description:
|
|
|
|
|
"Native iOS applications built with Swift and optimized for App Store success.",
|
|
|
|
|
link: "/services/ios-app-development",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Android App Development",
|
|
|
|
|
icon: Smartphone,
|
|
|
|
|
description: "High-performance Android apps using Kotlin with Google Play optimization.",
|
|
|
|
|
link: "/services/android-app-development"
|
|
|
|
|
description:
|
|
|
|
|
"High-performance Android apps using Kotlin with Google Play optimization.",
|
|
|
|
|
link: "/services/android-app-development",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Cross-Platform Development",
|
|
|
|
|
icon: Layers,
|
|
|
|
|
description: "Efficient cross-platform solutions using React Native and Flutter.",
|
|
|
|
|
link: "/services/cross-platform-app-development"
|
|
|
|
|
description:
|
|
|
|
|
"Efficient cross-platform solutions using React Native and Flutter.",
|
|
|
|
|
link: "/services/cross-platform-app-development",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Wearable App Development",
|
|
|
|
|
icon: Watch,
|
|
|
|
|
description: "Smart watch and wearable device applications for health and fitness.",
|
|
|
|
|
link: "/services/wearable-device-development"
|
|
|
|
|
description:
|
|
|
|
|
"Smart watch and wearable device applications for health and fitness.",
|
|
|
|
|
link: "/services/wearable-device-development",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Progressive Web Apps",
|
|
|
|
|
icon: Globe,
|
|
|
|
|
description: "Web applications that work like native mobile apps across all devices.",
|
|
|
|
|
link: "/services/pwa-development"
|
|
|
|
|
description:
|
|
|
|
|
"Web applications that work like native mobile apps across all devices.",
|
|
|
|
|
link: "/services/pwa-development",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Enterprise Mobile Solutions",
|
|
|
|
|
icon: Building,
|
|
|
|
|
description: "Secure, scalable mobile solutions for enterprise business needs.",
|
|
|
|
|
link: "/services/enterprise-software-solutions"
|
|
|
|
|
}
|
|
|
|
|
description:
|
|
|
|
|
"Secure, scalable mobile solutions for enterprise business needs.",
|
|
|
|
|
link: "/services/enterprise-software-solutions",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@@ -485,7 +525,9 @@ const TabbedServiceDisplay = () => {
|
|
|
|
|
Mobile App Development Services
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
|
|
|
|
|
Comprehensive AI mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
|
|
|
|
|
Comprehensive AI mobile development services that transform your
|
|
|
|
|
ideas into powerful, user-friendly applications across all
|
|
|
|
|
platforms.
|
|
|
|
|
</p>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
@@ -559,7 +601,9 @@ const InlineCTA = () => {
|
|
|
|
|
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
|
|
<Rocket className="w-4 h-4 text-[#E5195E]" />
|
|
|
|
|
<span className="text-[#E5195E] text-sm font-medium">AI-Driven Innovation</span>
|
|
|
|
|
<span className="text-[#E5195E] text-sm font-medium">
|
|
|
|
|
AI-Driven Innovation
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -573,14 +617,15 @@ const InlineCTA = () => {
|
|
|
|
|
|
|
|
|
|
{/* Subtitle */}
|
|
|
|
|
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
|
|
|
|
Schedule a discovery call to explore how AI can give you a strategic edge.
|
|
|
|
|
Schedule a discovery call to explore how AI can give you a
|
|
|
|
|
strategic edge.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
{/* CTA Button */}
|
|
|
|
|
<div className="flex flex-col items-center gap-4">
|
|
|
|
|
<ShimmerButton
|
|
|
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
|
|
|
|
onClick={() => navigate('/start-a-project')}
|
|
|
|
|
onClick={() => navigate("/start-a-project")}
|
|
|
|
|
>
|
|
|
|
|
<div className="inline-flex items-center gap-3">
|
|
|
|
|
<Brain className="flex-shrink-0 w-6 h-6" />
|
|
|
|
|
@@ -610,7 +655,7 @@ const HireDevelopersSection = () => {
|
|
|
|
|
skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
|
|
|
|
|
iconBg: "bg-gray-800",
|
|
|
|
|
iconColor: "text-white",
|
|
|
|
|
link: "/hire-talent/mobile-app-developers"
|
|
|
|
|
link: "/hire-talent/mobile-app-developers",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Android Developers",
|
|
|
|
|
@@ -618,7 +663,7 @@ const HireDevelopersSection = () => {
|
|
|
|
|
skills: ["Kotlin", "Java", "Jetpack Compose"],
|
|
|
|
|
iconBg: "bg-green-500",
|
|
|
|
|
iconColor: "text-white",
|
|
|
|
|
link: "/hire-talent/mobile-app-developers"
|
|
|
|
|
link: "/hire-talent/mobile-app-developers",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Cross-Platform Developers",
|
|
|
|
|
@@ -626,7 +671,7 @@ const HireDevelopersSection = () => {
|
|
|
|
|
skills: ["React Native", "Flutter", "Xamarin"],
|
|
|
|
|
iconBg: "bg-blue-500",
|
|
|
|
|
iconColor: "text-white",
|
|
|
|
|
link: "/hire-talent/mobile-app-developers"
|
|
|
|
|
link: "/hire-talent/mobile-app-developers",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Mobile QA Engineers",
|
|
|
|
|
@@ -634,8 +679,8 @@ const HireDevelopersSection = () => {
|
|
|
|
|
skills: ["Mobile Testing", "Automation", "Performance"],
|
|
|
|
|
iconBg: "bg-purple-500",
|
|
|
|
|
iconColor: "text-white",
|
|
|
|
|
link: "/hire-talent/qa-engineers"
|
|
|
|
|
}
|
|
|
|
|
link: "/hire-talent/qa-engineers",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@@ -650,10 +695,14 @@ const HireDevelopersSection = () => {
|
|
|
|
|
>
|
|
|
|
|
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
|
|
|
|
|
<span className="text-foreground">Hire Our </span>
|
|
|
|
|
<span className="text-[#E5195E]">AI Mobile Application Developers</span>
|
|
|
|
|
<span className="text-[#E5195E]">
|
|
|
|
|
AI Mobile Application Developers
|
|
|
|
|
</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
|
|
|
|
|
Get access to top-tier AI app development company experts who can bring your vision to life with AI-powered features and proven expertise.
|
|
|
|
|
Get access to top-tier AI app development company experts who can
|
|
|
|
|
bring your vision to life with AI-powered features and proven
|
|
|
|
|
expertise.
|
|
|
|
|
</p>
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
|
|
|
|
@@ -681,8 +730,12 @@ const HireDevelopersSection = () => {
|
|
|
|
|
{/* Header with icon and title */}
|
|
|
|
|
<div className="p-8 pb-6">
|
|
|
|
|
<div className="flex items-start gap-4 mb-6">
|
|
|
|
|
<div className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
|
|
|
|
|
<IconComponent className={`w-6 h-6 ${developer.iconColor}`} />
|
|
|
|
|
<div
|
|
|
|
|
className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
|
|
|
|
|
>
|
|
|
|
|
<IconComponent
|
|
|
|
|
className={`w-6 h-6 ${developer.iconColor}`}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex-1">
|
|
|
|
|
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
|
|
|
|
|
@@ -700,7 +753,11 @@ const HireDevelopersSection = () => {
|
|
|
|
|
<div className="flex-1 px-8 pb-6">
|
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
|
|
|
{developer.skills.map((skill) => (
|
|
|
|
|
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
|
|
|
|
|
<Badge
|
|
|
|
|
key={skill}
|
|
|
|
|
variant="secondary"
|
|
|
|
|
className="text-xs bg-white/10 text-foreground"
|
|
|
|
|
>
|
|
|
|
|
{skill}
|
|
|
|
|
</Badge>
|
|
|
|
|
))}
|
|
|
|
|
@@ -734,48 +791,60 @@ const HireDevelopersSection = () => {
|
|
|
|
|
const mobileAppFAQs = [
|
|
|
|
|
{
|
|
|
|
|
question: "Do you develop both iOS and Android apps?",
|
|
|
|
|
answer: "Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment."
|
|
|
|
|
answer:
|
|
|
|
|
"Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "What is the typical timeline for mobile app development?",
|
|
|
|
|
answer: "Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
|
|
|
|
|
answer:
|
|
|
|
|
"Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "How much does mobile app development cost?",
|
|
|
|
|
answer: "Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
|
|
|
|
|
answer:
|
|
|
|
|
"Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "Do you help with App Store submissions?",
|
|
|
|
|
answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance."
|
|
|
|
|
answer:
|
|
|
|
|
"Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "Can you integrate third-party services and APIs?",
|
|
|
|
|
answer: "Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features."
|
|
|
|
|
answer:
|
|
|
|
|
"Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "Do you provide app maintenance and updates?",
|
|
|
|
|
answer: "Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current."
|
|
|
|
|
answer:
|
|
|
|
|
"Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "What about app security and data protection?",
|
|
|
|
|
answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps."
|
|
|
|
|
answer:
|
|
|
|
|
"We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps.",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
question: "Can you develop offline-capable mobile apps?",
|
|
|
|
|
answer: "Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity."
|
|
|
|
|
}
|
|
|
|
|
answer:
|
|
|
|
|
"Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity.",
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Main Mobile App Development Page Component
|
|
|
|
|
export const MobileAppDevelopment = () => {
|
|
|
|
|
// Set document title for SEO
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
|
|
|
|
|
document.title =
|
|
|
|
|
"Mobile App Development Services | WDI - iOS & Android App Development";
|
|
|
|
|
|
|
|
|
|
// Update meta description for SEO
|
|
|
|
|
const metaDescription = document.querySelector('meta[name="description"]');
|
|
|
|
|
if (metaDescription) {
|
|
|
|
|
metaDescription.setAttribute('content', 'Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.');
|
|
|
|
|
metaDescription.setAttribute(
|
|
|
|
|
"content",
|
|
|
|
|
"Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.",
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
@@ -810,4 +879,4 @@ export const MobileAppDevelopment = () => {
|
|
|
|
|
{/* <Footer /> */}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|