5 Commits

11 changed files with 5774 additions and 44 deletions

11
TODO.md Normal file
View File

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

View File

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

View File

@@ -101,22 +101,12 @@ const navigationData = {
href: "/services/mobile-app-development",
sub_services: [
{ name: "iOS App Development", href: "/services/ios-app-development" },
{
name: "Android App Development",
href: "/services/android-app-development",
},
{
name: "Android App Development India",
href: "/services/android-app-development-india",
},
{
name: "Android App Development UK",
href: "/services/android-app-development-uk",
},
{
name: "Android App Development USA",
href: "/services/android-app-development-usa",
},
{
name: "Cross-Platform App Development",
href: "/services/cross-platform-app-development",
@@ -478,7 +468,7 @@ const navigationData = {
icon: BookOpen,
href: "https://www.wdipl.com/blog",
target: "_blank",
rel: "noopener noreferrer"
rel: "noopener noreferrer",
},
{ text: "Portfolio", icon: FileText, href: "/case-studies" },
{
@@ -925,7 +915,7 @@ export const Navigation = () => {
cancelClose();
openMenu(item);
},
[cancelClose, openMenu]
[cancelClose, openMenu],
);
const handleNavItemMouseLeave = useCallback(() => {
@@ -942,7 +932,7 @@ export const Navigation = () => {
closeMenu();
}
},
[closeMenu]
[closeMenu],
);
const handleNavMouseEnter = useCallback(() => {
@@ -1042,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>
@@ -1146,4 +1137,4 @@ export const Navigation = () => {
</AnimatePresence>
</nav>
);
};
};

View File

@@ -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 arent 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 Commissioners 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>
);
};

View File

@@ -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 Childrens 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>
);
};

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -37,7 +37,7 @@ 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 (

View File

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

View File

@@ -33,6 +33,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";
@@ -181,6 +184,9 @@ import { HireMobileAppDevelopersIndia } from "../pages/HireMobileAppDevelopersIn
// Placeholder
import { ArticleDetail } from "../pages/ArticleDetail";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { HireMobileAppDevelopersUsa } from "@/pages/HireMobileAppDevelopersUsa";
import { HireMobileAppDevelopersUk } from "@/pages/HireMobileAppDevelopersUk";
import { MobileAppDevelopmentIndia } from "@/pages/MobileAppDevelopmentIndia";
export const AppRouter = () => (
<Routes>
@@ -207,9 +213,25 @@ export const AppRouter = () => (
path="/services/mobile-app-development"
element={<MobileAppDevelopment />}
/>
<Route
path="/services/mobile-app-development-india"
element={<MobileAppDevelopmentIndia />}
/>
<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"
@@ -532,7 +554,14 @@ export const AppRouter = () => (
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"