diff --git a/components/ProcessSection.tsx b/components/ProcessSection.tsx index 002d112..ac7f32b 100644 --- a/components/ProcessSection.tsx +++ b/components/ProcessSection.tsx @@ -20,7 +20,7 @@ const steps = [ id: "step-1", title: "1. Define Scope", description: - "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.", + "We start by gathering project data and requirements, defining the project goals, creating technical documentation, and aligning these with the client’s expectations.", visual: { type: "icon_or_doc_mockup", style: "minimal_ui", @@ -30,7 +30,7 @@ const steps = [ id: "step-2", title: "2. Design UI/UX", description: - "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.", + "Using Figma, our designers craft user-centric interfaces that feature clickable flows, visual systems, and detailed wireframes for work across all screens.", tags: [ { label: "Wireframes", color: "#6366F1" }, { label: "Prototyping", color: "#10B981" }, @@ -39,9 +39,9 @@ const steps = [ }, { id: "step-3", - title: "3. Develop with Agile Sprints", + title: "3. Development with Agile Sprints", description: - "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.", + "Using Agile sprints, we turn designs into production-ready code that supports continuous integration and weekly builds.", tags: [ { label: "Frontend", color: "#3B82F6" }, { label: "Backend", color: "#0EA5E9" }, @@ -50,9 +50,9 @@ const steps = [ }, { id: "step-4", - title: "4. Test, Launch & Scale", + title: "4. Testing, Launch, and Scale", description: - "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.", + "Once we are through with QA and UAT, we launch the app. Then we monitor, iterate, and scale the app to grow alongside your user base and demand.", chat_simulation: [ { from: "You", text: "Are we ready to go live?" }, { from: "Team", text: "Yes! Final tests passed 🚀" }, @@ -264,8 +264,8 @@ export const ProcessSection = () => { viewport={{ once: true }} className="text-4xl lg:text-5xl font-semibold text-foreground mb-4" > - How We Turn an Idea into a{" "} - Scalable Product + From Ideation to Implementation:{" "} + How We Convert Ideas Into Market-Ready Products { viewport={{ once: true }} className="text-muted-foreground text-xl max-w-2xl mx-auto" > - Our AI‑driven product development process transforms your vision into a scalable web or mobile product through strategic planning, AI‑powered design, and expert engineering at every stage. + As a mobile app development company in the USA, we turn the vision you have for your app into reality through expert planning, innovative design, and intuitive engineering. diff --git a/pages/MobileAppDevelopmentUsa.tsx b/pages/MobileAppDevelopmentUsa.tsx new file mode 100644 index 0000000..1e60cf8 --- /dev/null +++ b/pages/MobileAppDevelopmentUsa.tsx @@ -0,0 +1,828 @@ +import { motion } from "framer-motion"; +import { + Apple, + Award, + Bolt, + BookOpen, + Brain, + Building, + Calendar, + DollarSign, + Eye, + Globe, Layers, + Play, + Rocket, + Settings, + Shield, + ShieldCheck, + ShoppingCart, + Smartphone, + Stethoscope, + Truck, + UserPlus, + Watch, + Zap +} from "lucide-react"; +import React from "react"; +import { FAQSection } from "../components/FAQSection"; +import { Footer } from "../components/Footer"; +import { Navigation } from "../components/Navigation"; +import { ProcessSection } from "../components/ProcessSection"; +import { Badge } from "../components/ui/badge"; +import { Button } from "../components/ui/button"; +import { Card, CardContent } from "../components/ui/card"; +import { ShimmerButton } from "../components/ui/shimmer-button"; +import heroMockupImage from '../src/images/mobile-app-banner.png'; +import { Helmet } from "react-helmet-async"; +import { useNavigate } from "react-router-dom"; + + +// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT +const HeroWithCTA = () => { + const navigate = useNavigate(); + return ( +
+ + {/* Page Title and Meta Description */} + Mobile App Development Services USA | Mobile Application Development Company + + + {/* Canonical Link */} + + {/* Open Graph Tags (for Facebook, LinkedIn) */} + + + + + + + {/* Twitter Card Tags */} + + + + + + {/* Social Profiles (using JSON-LD Schema) */} + + +
+
+ + {/* Mobile App Development Label */} + +
+ + Mobile App Development +
+ + + {/* Main Heading */} + +

+ From Ideation to + App Store + in Just 6 Weeks. +

+ +

+ Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — for the US audience — fast. +

+ + + {/* BULLET POINTS REMOVED - Content flows directly to CTAs */} + + {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */} + + navigate('/start-a-project')} + > +
+ + Book a Discovery Call +
+ + + + + + {/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */} + + {/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */} +
+ {/* Hero Image with comprehensive CSS styling */} + Mobile App Development Services - Fashion, Social, and Fitness Apps + + {/* Alternative background method for enhanced browser support */} +
+
+ +
+
+
+ ); +}; + +// 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 ( +
+ {/* Add subtle decorative elements */} +
+
+
+
+
+ +

+ Seamless Apps for High-Impact US Industries +

+

+ As an app development company in the USA, we deliver mobile apps for industries where user trust, speed, and uptime are key.

+ + + + {/* Gradient overlays for smooth fade effect */} +
+
+ + {/* Marquee container */} +
+ {/* First set of industries */} + {industries.map((industry, index) => { + const IconComponent = industry.icon; + return ( + +
+
+
+ +
+ + {industry.name} + +
+
+ + ); + })} + + {/* Second set for seamless loop */} + {industries.map((industry, index) => { + const IconComponent = industry.icon; + return ( + +
+
+
+ +
+ + {industry.name} + +
+
+ + ); + })} + + {/* Third set for extra smoothness */} + {industries.map((industry, index) => { + const IconComponent = industry.icon; + return ( + +
+
+
+ +
+ + {industry.name} + +
+
+ + ); + })} +
+ +
+
+ ); +}; + +// 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 ( +
+
+ + {/* Main Heading */} +

+ Why WDI is Trusted by Founders and CTOs Alike

+ + {/* Subtext */} +

+ We are not just a dev agency. We are your go-to product partner. +

+ + + {/* Uniform Grid - Title Only Cards */} + + {trustFactors.map((factor, index) => { + const IconComponent = factor.icon; + + return ( + + + + {/* Icon - Clean without background */} +
+ +
+ + {/* Title */} +

+ {factor.title} +

+ + + + ); + })} + +
+
+ ); +}; + +// Enhanced Mobile Expertise Grid +const TabbedServiceDisplay = () => { + const navigate = useNavigate(); + const services = [ + { + title: "iOS App Development", + icon: Smartphone, + description: "Innovative iOS applications optimized for the App Store and built with Swift.", + link: "/services/ios-app-development" + }, + { + title: "Android App Development", + icon: Smartphone, + description: "Google Play optimized high-performance Android apps built using Kotlin.", + link: "/services/android-app-development" + }, + { + title: "Cross-Platform Development", + icon: Layers, + description: + ( + <> + {/* React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase. */} + Efficient{" "} cross-platform app development{" "} + + + solutions delivered using React Native and Flutter. + + ), + link: "/services/cross-platform-app-development" + }, + { + title: "Wearable App Development", + icon: Watch, + description: "Responsive apps for smart watches and wearable devices for health and fitness.", + link: "/services/wearable-device-development" + }, + { + title: "Progressive Web Apps", + icon: Globe, + description: "Seamless web applications that work like native mobile apps across all devices.", + link: "/services/pwa-development" + }, + { + title: "Enterprise Mobile Solutions", + icon: Building, + description: "Secure, scalable mobile solutions that support critical enterprise business needs.", + link: "/services/enterprise-software-solutions" + } + ]; + + return ( +
+
+ +

+ Mobile App Development Services in the USA

+

+ Enjoy comprehensive custom mobile app development in the USA that reshapes your ideas into powerful, user-friendly apps supported across all platforms. +

+ + + + {services.map((service, index) => { + const IconComponent = service.icon; + return ( + navigate(service.link)} + > +
+
+
+ +
+ +
+

+ {service.title} +

+

+ {service.description} +

+
+
+
+ + ); + })} + +
+
+ ); +}; + +// Updated CTA Banner with ShimmerButton +const InlineCTA = () => { + const navigate = useNavigate(); + return ( +
+
+ + + {/* Ready to Launch Badge */} +
+
+
+ + AI-Driven Innovation +
+
+
+ + {/* Main Heading */} +

+ Let’s Impart + Intelligence + Into Your Mobile App +

+ + {/* Subtitle */} +

+ Schedule a discovery call with our team and explore how AI can give your app a strategic edge. +

+ + {/* CTA Button */} +
+ navigate('/start-a-project')} + > +
+ + Book an AI Discovery Call +
+ + + {/* Small benefit text */} +

+ App strategy • AI integration • Technology consultation +

+
+ + +
+
+ ); +}; + +// 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 ( +
+
+ +

+ Get Started With Our + Mobile App Development Experts +

+

+ Get access to top-tier AI app development company experts who can bring your vision to life with AI-powered features and proven expertise. + Ready for an app that works seamlessly across platforms? Get started with our top-tier + mobile app developers + who will bring your ideas to life with cutting-edge technology and proven expertise. +

+ + + + {developers.map((developer, index) => { + const IconComponent = developer.icon; + return ( + + + + {/* Header with icon and title */} +
+
+
+ +
+
+
+ Mobile Development +
+
+
+ +

+ {developer.title} +

+
+ + {/* Skills section */} +
+
+ {developer.skills.map((skill) => ( + + {skill} + + ))} +
+
+ + {/* CTA Buttons - Updated with ShimmerButton */} +
+ navigate(developer.link)} + > +
+ + Hire Now +
+ +
+ + + + ); + })} + +
+
+ ); +}; + +// FAQ data for Mobile App Development +const mobileAppFAQs = [ + { + question: "Can your team develop both iOS and Android apps?", + answer: "Our team is well-versed in developing native iOS apps using Swift and Android apps using Kotlin. Plus, we offer cross-platform solutions using React Native and Flutter for cost-effective, seamless, multi-platform app development." + }, + { + question: "How long does it take your team to develop and deploy a mobile app?", + answer: "The timeline for mobile app development and deployment varies with the project's complexity. For simpler apps, our team can deliver the project within 8 to 12 weeks. However, complex, enterprise apps can take as long as 16 to 24 weeks. Reach out to our US team with your requirements, and we will analyze this and provide a detailed project timeline." + }, + { + question: "How much does custom mobile app development in the USA cost?", + answer: "The app’s features, platforms it needs to support, and design complexity will determine the cost of the project. We always provide transparent estimates along with competitive pricing as per the requirements outlined by the client. Get in touch for a detailed quote." + }, + { + question: "Can your team help with App Store submissions in the USA?", + answer: "Sure, we can! Our team will handle the complete App Store submission process for the USA on both the Google Play Store and the Apple App Store. Our services will include app optimization, compliance, and approval assistance so that your app is submitted and launched with ease." + }, + { + question: "Can your team deliver third-party services and API integration for the app?", + answer: "Our mobile application development services in the USA cover the integration of third-party services that include payment gateways, analytics, maps, push notifications, social media plug-ins, and custom APIs to enhance the app’s functionality." + }, + { + question: "Does your company offer regular app maintenance and updates for launched apps?", + answer: "We offer a comprehensive maintenance service that includes routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimization that keeps you app up-to-date." + }, + { + question: "Will the app designed by your team be compliant with the USA's privacy laws?", + answer: "As a mobile application development company in the USA, our apps are compliant with key US laws and regulations like the Children’s Online Protection and Privacy Act, 1998 (COPPA), Statewise Data Protection Acts (CCPA, VCDPA, CPA, UCPA, CDPA, etc.), and Federal laws and FTC rules. Plus, the apps also follow standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security." + }, + { + question: "Do you offer mobile apps that can operate offline?", + answer: "We develop apps that offer offline functionality using local storage, caching strategies, and data synchronization. This ensures that your app works perfectly even without an internet connection." + } +]; + +// Main Mobile App Development Page Component +export const MobileAppDevelopmentUsa = () => { + // Set document title for SEO + React.useEffect(() => { + document.title = "Mobile App Development Services | WDI - iOS & Android App Development"; + + // Update meta description for SEO + const metaDescription = document.querySelector('meta[name="description"]'); + if (metaDescription) { + metaDescription.setAttribute('content', 'Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.'); + } + }, []); + + return ( +
+ {/* */} + + {/* Hero Section */} + + + {/* Industries Scroller */} + + + {/* Why Choose WDI */} + + + {/* Service Categories */} + + + {/* Process Steps */} + + + {/* Hire Developers */} + + + {/* Final CTA */} + + + {/* FAQ Section */} + + + {/*
+ ); +}; \ No newline at end of file diff --git a/src/Router.tsx b/src/Router.tsx index dad3b3c..a494f96 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -187,6 +187,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { HireMobileAppDevelopersUsa } from "@/pages/HireMobileAppDevelopersUsa"; import { HireMobileAppDevelopersUk } from "@/pages/HireMobileAppDevelopersUk"; import { MobileAppDevelopmentIndia } from "@/pages/MobileAppDevelopmentIndia"; +import { MobileAppDevelopmentUsa } from "@/pages/MobileAppDevelopmentUsa"; export const AppRouter = () => ( @@ -217,19 +218,23 @@ export const AppRouter = () => ( path="/services/mobile-app-development-india" element={} /> + } + /> } /> - } /> - } /> - } />