898 lines
35 KiB
TypeScript
898 lines
35 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
Apple,
|
||
Award,
|
||
Bolt,
|
||
BookOpen,
|
||
Brain,
|
||
Building,
|
||
Calendar,
|
||
DollarSign,
|
||
Eye,
|
||
Globe,
|
||
Layers,
|
||
Play,
|
||
Rocket,
|
||
Settings,
|
||
Shield,
|
||
ShieldCheck,
|
||
ShoppingCart,
|
||
Smartphone,
|
||
Stethoscope,
|
||
Truck,
|
||
UserPlus,
|
||
Watch,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import React from "react";
|
||
import { FAQSection } from "../components/FAQSection";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { ProcessSection } from "../components/ProcessSection";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import heroMockupImage from "../src/images/mobile-app-banner.jpg";
|
||
import { Helmet } from "react-helmet-async";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
|
||
const HeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>
|
||
Mobile Application Development Company India | Mobile App Development
|
||
Services
|
||
</title>
|
||
<meta
|
||
name="description"
|
||
content="WDIPL is a leading mobile application development company in India providing custom mobile app development services for Android and iOS with scalable offshore solutions."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link
|
||
rel="canonical"
|
||
href="https://www.wdipl.com/services/mobile-app-development-india"
|
||
/>
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta
|
||
property="og:title"
|
||
content="Mobile App Development Services by WDI Experts"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="WDIPL is a leading mobile application development company in India providing custom mobile app development services for Android and iOS with scalable offshore solutions."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta
|
||
name="twitter:title"
|
||
content="Mobile App Development Services by WDI Experts"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
|
||
/>
|
||
<meta
|
||
name="twitter:image"
|
||
content="https://www.wdipl.com/your-preview-image.jpg"
|
||
/>
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container px-6 mx-auto lg:px-8 max-w-7xl">
|
||
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="z-10 space-y-8"
|
||
>
|
||
{/* Mobile App Development Label */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
|
||
<Smartphone className="w-4 h-4 text-[#E5195E]" />
|
||
<span className="text-sm font-medium text-white/90">
|
||
Mobile App Development
|
||
</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Main Heading */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="space-y-6"
|
||
>
|
||
<h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
|
||
<span className="text-white">From Ideas</span>
|
||
<span className="text-[#E5195E]"> Straight to App</span>
|
||
<span className="text-white"> Store within 6 Weeks</span>
|
||
</h1>
|
||
|
||
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
|
||
Design secure, scalable, high-performance apps for Android, iOS,
|
||
or cross-platform - for the Indian audience - fast.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
|
||
|
||
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="flex flex-col gap-4 pt-4 sm:flex-row"
|
||
>
|
||
<ShimmerButton
|
||
className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Calendar className="flex-shrink-0 w-5 h-5" />
|
||
<span>Book a Discovery Call</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="secondary"
|
||
className="px-8 text-lg font-medium text-white transition-all duration-300 rounded-lg shadow-lg h-14 bg-white/10 hover:bg-white/20 border-white/20 hover:border-white/30 hover:shadow-xl"
|
||
onClick={() => navigate("/case-studies")}
|
||
>
|
||
<Eye className="flex-shrink-0 w-5 h-5" />
|
||
<span>View our work</span>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex items-center justify-center order-first lg:order-last"
|
||
>
|
||
{/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
|
||
<div
|
||
className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
|
||
style={{
|
||
position: "relative",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{/* Hero Image with comprehensive CSS styling */}
|
||
<img
|
||
src={heroMockupImage}
|
||
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
|
||
className="block transition-all duration-300 scale-120 hover:scale-125"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
objectFit: "contain",
|
||
objectPosition: "center",
|
||
maxWidth: "100%",
|
||
display: "block",
|
||
}}
|
||
/>
|
||
|
||
{/* Alternative background method for enhanced browser support */}
|
||
<div
|
||
className="absolute inset-0 opacity-0 pointer-events-none"
|
||
style={{
|
||
backgroundImage: `url(${heroMockupImage})`,
|
||
backgroundSize: "contain",
|
||
backgroundPosition: "center",
|
||
backgroundRepeat: "no-repeat",
|
||
}}
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Enhanced Horizontal Tag Scroller with Marquee Animation
|
||
const HorizontalTagScroller = () => {
|
||
const industries = [
|
||
{ name: "FinTech", icon: DollarSign, color: "text-green-400" },
|
||
{ name: "HealthTech", icon: Stethoscope, color: "text-red-400" },
|
||
{ name: "EdTech", icon: BookOpen, color: "text-blue-400" },
|
||
{ name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" },
|
||
{ name: "OTT & Streaming", icon: Play, color: "text-purple-400" },
|
||
{ name: "Logistics", icon: Truck, color: "text-yellow-400" },
|
||
{ name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" },
|
||
];
|
||
|
||
return (
|
||
<section className="relative py-32 overflow-hidden bg-background">
|
||
{/* Add subtle decorative elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none">
|
||
<div className="absolute w-32 h-32 rounded-full top-20 left-10 bg-accent/5 blur-2xl"></div>
|
||
<div className="absolute w-40 h-40 rounded-full bottom-20 right-10 bg-blue-500/5 blur-2xl"></div>
|
||
</div>
|
||
<div className="container relative z-10 px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
|
||
Efficient Apps for High-Impact Indian Industries
|
||
</h2>
|
||
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
|
||
As a mobile app development company in India, we are focused on
|
||
delivering mobile apps for industries where speed, trust, and uptime
|
||
play a key role.{" "}
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="relative overflow-hidden"
|
||
>
|
||
{/* Gradient overlays for smooth fade effect */}
|
||
<div className="absolute top-0 bottom-0 left-0 z-10 w-20 pointer-events-none bg-gradient-to-r from-card to-transparent"></div>
|
||
<div className="absolute top-0 bottom-0 right-0 z-10 w-20 pointer-events-none bg-gradient-to-l from-card to-transparent"></div>
|
||
|
||
{/* Marquee container */}
|
||
<div className="flex animate-marquee hover:animate-marquee-paused">
|
||
{/* First set of industries */}
|
||
{industries.map((industry, index) => {
|
||
const IconComponent = industry.icon;
|
||
return (
|
||
<motion.div
|
||
key={`first-${industry.name}-${index}`}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
className="flex-shrink-0 mx-3 group"
|
||
>
|
||
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
||
{industry.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
|
||
{/* Second set for seamless loop */}
|
||
{industries.map((industry, index) => {
|
||
const IconComponent = industry.icon;
|
||
return (
|
||
<motion.div
|
||
key={`second-${industry.name}-${index}`}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{
|
||
duration: 0.5,
|
||
delay: (index + industries.length) * 0.1,
|
||
}}
|
||
viewport={{ once: true }}
|
||
className="flex-shrink-0 mx-3 group"
|
||
>
|
||
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
||
{industry.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
|
||
{/* Third set for extra smoothness */}
|
||
{industries.map((industry, index) => {
|
||
const IconComponent = industry.icon;
|
||
return (
|
||
<motion.div
|
||
key={`third-${industry.name}-${index}`}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{
|
||
duration: 0.5,
|
||
delay: (index + industries.length * 2) * 0.1,
|
||
}}
|
||
viewport={{ once: true }}
|
||
className="flex-shrink-0 mx-3 group"
|
||
>
|
||
<div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
|
||
>
|
||
<IconComponent className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
||
{industry.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Updated Title-Only Layout - No Body Text
|
||
const SideBySideContentWithIcons = () => {
|
||
const trustFactors = [
|
||
{
|
||
id: "engineering",
|
||
title: "24+ Years in App Engineering",
|
||
icon: Award,
|
||
},
|
||
{
|
||
id: "ownership",
|
||
title: "100% Ownership, No Lock-ins",
|
||
icon: Shield,
|
||
},
|
||
{
|
||
id: "agile",
|
||
title: "Agile Sprints with Rapid Iteration",
|
||
icon: Zap,
|
||
},
|
||
{
|
||
id: "security",
|
||
title: "Secure, Compliance-Ready Apps",
|
||
icon: ShieldCheck,
|
||
},
|
||
{
|
||
id: "devices",
|
||
title: "Seamless Experience Across Devices",
|
||
icon: Settings,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-16 text-center"
|
||
>
|
||
{/* Main Heading */}
|
||
<h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
|
||
What Helps Founders and CTOs Trust WDI{" "}
|
||
</h2>
|
||
|
||
{/* Subtext */}
|
||
<p className="text-2xl leading-relaxed text-gray-300">
|
||
We do more than just offer mobile application development services
|
||
in India; we are your most trusted product partner!
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Uniform Grid - Title Only Cards */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid grid-cols-1 gap-6 mx-auto md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 max-w-7xl"
|
||
>
|
||
{trustFactors.map((factor, index) => {
|
||
const IconComponent = factor.icon;
|
||
|
||
return (
|
||
<motion.div
|
||
key={factor.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="cursor-pointer group"
|
||
>
|
||
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
|
||
{/* Icon - Clean without background */}
|
||
<div className="mb-6">
|
||
<IconComponent className="w-10 h-10 mx-auto text-accent" />
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h3 className="text-lg font-semibold leading-tight text-white">
|
||
{factor.title}
|
||
</h3>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Enhanced Mobile Expertise Grid
|
||
const TabbedServiceDisplay = () => {
|
||
const navigate = useNavigate();
|
||
const services = [
|
||
{
|
||
title: "iOS App Development",
|
||
icon: Smartphone,
|
||
description:
|
||
"High-performing native iOS applications created with Swift and optimized for the App Store.",
|
||
link: "/services/ios-app-development",
|
||
},
|
||
{
|
||
title: "Android App Development",
|
||
icon: Smartphone,
|
||
description: (
|
||
<>
|
||
Innovative{" "}
|
||
<a
|
||
href="/services/android-app-development"
|
||
className="text-[#E5195E] underline"
|
||
>
|
||
Android apps
|
||
</a>{" "}
|
||
built with the help of Kotlin and optimized through Google Play.
|
||
</>
|
||
),
|
||
// "High-performance Android apps using Kotlin with Google Play optimization.",
|
||
link: "/services/android-app-development",
|
||
},
|
||
{
|
||
title: "Cross-Platform Development",
|
||
icon: Layers,
|
||
description:
|
||
"Efficient cross-platform solutions using React Native and Flutter.",
|
||
link: "/services/cross-platform-app-development",
|
||
},
|
||
{
|
||
title: "Wearable App Development",
|
||
icon: Watch,
|
||
description:
|
||
"Smart watch and wearable device applications for health and fitness.",
|
||
link: "/services/wearable-device-development",
|
||
},
|
||
{
|
||
title: "Progressive Web Apps",
|
||
icon: Globe,
|
||
description:
|
||
"Web applications that work like native mobile apps across all devices.",
|
||
link: "/services/pwa-development",
|
||
},
|
||
{
|
||
title: "Enterprise Mobile Solutions",
|
||
icon: Building,
|
||
description:
|
||
"Secure, scalable mobile solutions for enterprise business needs.",
|
||
link: "/services/enterprise-software-solutions",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-background">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||
Mobile App Development Services in India{" "}
|
||
</h2>
|
||
<p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
|
||
Transform the application with a comprehensive offshore mobile app
|
||
development in India. Reshape your ideas into efficient,
|
||
user-friendly apps that run smoothly across all platforms.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{services.map((service, index) => {
|
||
const IconComponent = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="cursor-pointer group"
|
||
onClick={() => navigate(service.link)}
|
||
>
|
||
<div className="h-full p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-sm rounded-2xl hover:border-accent/30 hover:shadow-xl">
|
||
<div className="flex flex-col items-start space-y-6">
|
||
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="mb-4 text-xl font-semibold text-white">
|
||
{service.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-gray-400">
|
||
{service.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Updated CTA Banner with ShimmerButton
|
||
const InlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Ready to Launch Badge */}
|
||
<div className="inline-block">
|
||
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
|
||
<div className="flex items-center gap-2">
|
||
<Rocket className="w-4 h-4 text-[#E5195E]" />
|
||
<span className="text-[#E5195E] text-sm font-medium">
|
||
AI-Driven Innovation
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Heading */}
|
||
<h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
|
||
<span className="text-foreground">Let's Architect </span>
|
||
<span className="text-[#E5195E]">Intelligence</span>
|
||
<span className="text-foreground"> Into Your App</span>
|
||
</h2>
|
||
|
||
{/* Subtitle */}
|
||
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
||
Schedule a discovery call to explore how AI can give you a
|
||
strategic edge.
|
||
</p>
|
||
|
||
{/* CTA Button */}
|
||
<div className="flex flex-col items-center gap-4">
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Brain className="flex-shrink-0 w-6 h-6" />
|
||
<span>Book an AI Discovery Call</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
{/* Small benefit text */}
|
||
<p className="text-sm text-muted-foreground">
|
||
App strategy • AI integration • Technology consultation
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Updated Hire Developers Section with ShimmerButton
|
||
const HireDevelopersSection = () => {
|
||
const navigate = useNavigate();
|
||
const developers = [
|
||
{
|
||
title: "iOS Developers",
|
||
icon: Apple,
|
||
skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
|
||
iconBg: "bg-gray-800",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/mobile-app-developers",
|
||
},
|
||
{
|
||
title: "Android Developers",
|
||
icon: Smartphone,
|
||
skills: ["Kotlin", "Java", "Jetpack Compose"],
|
||
iconBg: "bg-green-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/mobile-app-developers",
|
||
},
|
||
{
|
||
title: "Cross-Platform Developers",
|
||
icon: Layers,
|
||
skills: ["React Native", "Flutter", "Xamarin"],
|
||
iconBg: "bg-blue-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/mobile-app-developers",
|
||
},
|
||
{
|
||
title: "Mobile QA Engineers",
|
||
icon: ShieldCheck,
|
||
skills: ["Mobile Testing", "Automation", "Performance"],
|
||
iconBg: "bg-purple-500",
|
||
iconColor: "text-white",
|
||
link: "/hire-talent/qa-engineers",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-background">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
|
||
<span className="text-foreground">
|
||
Start Your Journey with Our{" "}
|
||
</span>
|
||
<span className="text-[#E5195E]">
|
||
Mobile App Development Experts
|
||
</span>
|
||
</h2>
|
||
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
|
||
Looking to design an app that works across all platforms without any
|
||
bugs or errors? Start your journey with the experts of our mobile
|
||
application development company in India. We will bring ideas to
|
||
life with the help of our seasoned knowledge, tested expertise, and
|
||
highly innovative technology.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"
|
||
>
|
||
{developers.map((developer, index) => {
|
||
const IconComponent = developer.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="cursor-pointer group"
|
||
>
|
||
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="flex flex-col h-full p-0">
|
||
{/* Header with icon and title */}
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div
|
||
className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
|
||
>
|
||
<IconComponent
|
||
className={`w-6 h-6 ${developer.iconColor}`}
|
||
/>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
|
||
Mobile Development
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="mb-4 text-xl font-semibold leading-tight text-foreground">
|
||
{developer.title}
|
||
</h3>
|
||
</div>
|
||
|
||
{/* Skills section */}
|
||
<div className="flex-1 px-8 pb-6">
|
||
<div className="flex flex-wrap gap-2">
|
||
{developer.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-white/10 text-foreground"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA Buttons - Updated with ShimmerButton */}
|
||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||
<ShimmerButton
|
||
className="w-full py-3 text-sm shadow-lg rounded-xl hover:shadow-xl"
|
||
onClick={() => navigate(developer.link)}
|
||
>
|
||
<div className="inline-flex items-center justify-center gap-2">
|
||
<UserPlus className="flex-shrink-0 w-4 h-4" />
|
||
<span className="font-medium">Hire Now</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// FAQ data for Mobile App Development
|
||
const mobileAppFAQs = [
|
||
{
|
||
question:
|
||
"How much do you charge for mobile app development services in India?",
|
||
answer:
|
||
"The charges for our services vary as it depends on the app’s features, the platforms it needs to support, and design complexity. So, you must get in touch with us, and we will provide transparent estimates along with competitive pricing as per your outlined requirements.",
|
||
},
|
||
{
|
||
question:
|
||
"Do you help with regular app maintenance and updates for launched apps?",
|
||
answer:
|
||
"Yes, we do. We have a team of experts focused on offering a comprehensive maintenance service that includes routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimization. This ensures the launched apps are up-to-date and user-friendly.",
|
||
},
|
||
{
|
||
question: "Does your team design apps compliant with India’s privacy laws?",
|
||
answer:
|
||
"Yes, absolutely. As a seasoned company in offshore mobile app development in India, our apps are compliant with key Indian laws and regulations like the Digital Personal Data Protection (DPDP) Act, 2023, and the DPDP Rules, 2025. Plus, the apps we design and develop also follow standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security.",
|
||
},
|
||
{
|
||
question:
|
||
"Does your team deliver third-party services and API integration for the app?",
|
||
answer:
|
||
"As one of the skilled mobile app development companies in India, our services cover the integration of third-party services like payment gateways, analytics, maps, push notifications, social media plug-ins, and custom APIs. This is how we work on enhancing the app’s functionality.",
|
||
},
|
||
{
|
||
question: "Do you offer mobile apps that can operate offline?",
|
||
answer:
|
||
"Yes, we do. The team at our mobile app development company in India develops apps that use local storage, caching strategies, and data synchronization to offer offline functionality. This is how we design apps for a larger audience, including those who want to use applications without an internet connection.",
|
||
},
|
||
{
|
||
question: "Can you help me with ideas to protect my app idea?",
|
||
answer:
|
||
"Yes, absolutely. Our experts are skilled to educate individuals in protecting their app idea, including using NDAs with developers and documents.",
|
||
},
|
||
{
|
||
question: "Can you guide me in choosing app monetization methods?",
|
||
answer:
|
||
"Yes, we do. The experts at our mobile app development company in India help you in choosing among common monetization methods like in-app ads, in-app purchases, freemium models, and subscription-based models.",
|
||
},
|
||
];
|
||
|
||
// Main Mobile App Development Page Component
|
||
export const MobileAppDevelopmentIndia = () => {
|
||
// Set document title for SEO
|
||
React.useEffect(() => {
|
||
document.title =
|
||
"Mobile App Development Services | WDI - iOS & Android App Development";
|
||
|
||
// Update meta description for SEO
|
||
const metaDescription = document.querySelector('meta[name="description"]');
|
||
if (metaDescription) {
|
||
metaDescription.setAttribute(
|
||
"content",
|
||
"Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.",
|
||
);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen dark bg-background">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<HeroWithCTA />
|
||
|
||
{/* Industries Scroller */}
|
||
<HorizontalTagScroller />
|
||
|
||
{/* Why Choose WDI */}
|
||
<SideBySideContentWithIcons />
|
||
|
||
{/* Service Categories */}
|
||
<TabbedServiceDisplay />
|
||
|
||
{/* Process Steps */}
|
||
<ProcessSection country="India" />
|
||
|
||
{/* Hire Developers */}
|
||
<HireDevelopersSection />
|
||
|
||
{/* Final CTA */}
|
||
<InlineCTA />
|
||
|
||
{/* FAQ Section */}
|
||
<FAQSection faqs={mobileAppFAQs} />
|
||
|
||
{/* <Footer /> */}
|
||
</div>
|
||
);
|
||
};
|