ios changes pending
This commit is contained in:
priyanshuvish
@@ -1,16 +1,15 @@
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Apple,
|
||||
ArrowRight,
|
||||
Award,
|
||||
Bolt,
|
||||
BookOpen,
|
||||
Brush,
|
||||
Bug,
|
||||
Database,
|
||||
Brain,
|
||||
Building,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Eye,
|
||||
Layers,
|
||||
Globe, Layers,
|
||||
Play,
|
||||
Rocket,
|
||||
Settings,
|
||||
@@ -19,38 +18,35 @@ import {
|
||||
ShoppingCart,
|
||||
Smartphone,
|
||||
Stethoscope,
|
||||
Tablet,
|
||||
Truck,
|
||||
Tv,
|
||||
UserPlus,
|
||||
Watch,
|
||||
Wifi,
|
||||
Zap
|
||||
} from "lucide-react";
|
||||
import React from "react";
|
||||
import { navigateTo } from "../App";
|
||||
import { FAQSection } from "../components/FAQSection";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { ProcessSection } from "../components/ProcessSection";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
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 Group1597880681 from "../assets/Group1597880681";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import heroMockupImage from '../assets/images/mobile-app-banner.webp';
|
||||
|
||||
// Enhanced Hero Section with compact mockup and integrated stats
|
||||
|
||||
// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
|
||||
const HeroWithCTA = () => {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||||
<div className="container mx-auto px-6 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="space-y-8"
|
||||
className="space-y-8 z-10"
|
||||
>
|
||||
{/* Mobile App Development Label */}
|
||||
<motion.div
|
||||
@@ -58,91 +54,99 @@ const HeroWithCTA = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-white/70 text-sm font-medium">Mobile App Development</span>
|
||||
<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-white/90 text-sm font-medium">Mobile App Development</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading - Updated Content */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
Expert Mobile App Development Services
|
||||
{/* 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 md:text-5xl lg:text-6xl font-semibold leading-tight">
|
||||
<span className="text-white">Expert </span>
|
||||
<span className="text-[#E5195E]">Mobile App Development</span>
|
||||
<span className="text-white"> Services</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — fast.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
|
||||
|
||||
{/* Updated CTAs - Using provided code structure */}
|
||||
{/* 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.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex flex-col sm:flex-row gap-4 pt-4"
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact')}>
|
||||
<ShimmerButton
|
||||
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<svg className="w-6 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<Calendar className="w-5 h-5 flex-shrink-0" />
|
||||
<span>Book a Discovery Call</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="text-lg px-8 py-4"
|
||||
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||||
<span>View our work</span>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side with compact phone mockups and integrated stats */}
|
||||
{/* 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 flex-col items-center"
|
||||
className="relative flex items-center justify-center order-first lg:order-last"
|
||||
>
|
||||
{/* Compact Phone Mockups with Integrated Stats Layout */}
|
||||
<div className="relative w-full max-w-lg mx-auto">
|
||||
{/* Phone Mockups Component - Reduced Size */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="relative h-[350px] w-full mb-8 scale-75 origin-top"
|
||||
>
|
||||
<Group1597880681 />
|
||||
</motion.div>
|
||||
{/* 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 hover:scale-105"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'center',
|
||||
maxWidth: '100%',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Integrated Statistics - Positioned to align with phones */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="grid grid-cols-3 gap-8 text-center -mt-12 relative z-10"
|
||||
>
|
||||
{/* Left Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">75+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App Developed</div>
|
||||
</div>
|
||||
|
||||
{/* Center Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">25+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App Deployed</div>
|
||||
</div>
|
||||
|
||||
{/* Right Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">3M+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App downloads</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* 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>
|
||||
@@ -383,37 +387,43 @@ const TabbedServiceDisplay = () => {
|
||||
{
|
||||
title: "iOS App Development",
|
||||
icon: Smartphone,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "Native iOS applications built with Swift and optimized for App Store success.",
|
||||
link: "/services/ios-app-development"
|
||||
},
|
||||
{
|
||||
title: "Android App Development",
|
||||
icon: Smartphone,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "High-performance Android apps using Kotlin with Google Play optimization.",
|
||||
link: "/services/android-app-development"
|
||||
},
|
||||
{
|
||||
title: "Cross-Platform Development",
|
||||
icon: Layers,
|
||||
description: "Efficient cross-platform solutions using React Native and Flutter.",
|
||||
link: "/services/cross-platform-app-development"
|
||||
},
|
||||
{
|
||||
title: "Wearable App Development",
|
||||
icon: Watch,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "Smart watch and wearable device applications for health and fitness.",
|
||||
link: "/services/wearable-device-development"
|
||||
},
|
||||
{
|
||||
title: "Tablet",
|
||||
icon: Tablet,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
title: "Progressive Web Apps",
|
||||
icon: Globe,
|
||||
description: "Web applications that work like native mobile apps across all devices.",
|
||||
link: "/services/pwa-development"
|
||||
},
|
||||
{
|
||||
title: "TV",
|
||||
icon: Tv,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
},
|
||||
{
|
||||
title: "IoT",
|
||||
icon: Database,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
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-black">
|
||||
<section className="py-32 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -423,10 +433,10 @@ const TabbedServiceDisplay = () => {
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
Innovating Mobility, Empowering Connectivity
|
||||
Mobile App Development Services
|
||||
</h2>
|
||||
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
|
||||
Where creativity meets technology! We are a leading app development company committed to transforming your ideas into powerful, user-friendly, and cutting-edge mobile applications.
|
||||
Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -447,7 +457,8 @@ const TabbedServiceDisplay = () => {
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group"
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(service.link)}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||||
<div className="flex flex-col items-start space-y-6">
|
||||
@@ -477,14 +488,8 @@ const TabbedServiceDisplay = () => {
|
||||
// Updated CTA Banner with ShimmerButton
|
||||
const InlineCTA = () => {
|
||||
return (
|
||||
<section className="py-20 bg-gray-950/50 relative overflow-hidden">
|
||||
{/* Add subtle decorative elements matching site theme */}
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none">
|
||||
<div className="absolute top-10 right-10 w-24 h-24 bg-accent/5 rounded-full blur-xl"></div>
|
||||
<div className="absolute bottom-10 left-10 w-32 h-32 bg-purple-500/5 rounded-full blur-xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-blue-500/3 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -499,19 +504,21 @@ const InlineCTA = () => {
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* Badge with black background and gradient border */}
|
||||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-purple-500 to-blue-500">
|
||||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<Rocket className="w-5 h-5 text-white" />
|
||||
<span className="text-white text-base font-medium">AI-Driven Innovation</span>
|
||||
{/* 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 lg:text-5xl font-semibold text-foreground leading-tight">
|
||||
Let's Architect{" "}
|
||||
<span className="text-accent">Intelligence</span>{" "}
|
||||
Into Your App
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
|
||||
<span className="text-foreground">Let's Architect </span>
|
||||
<span className="text-[#E5195E]">Intelligence</span>
|
||||
<span className="text-foreground"> Into Your App</span>
|
||||
</h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
@@ -519,15 +526,23 @@ const InlineCTA = () => {
|
||||
Schedule a discovery call to explore how AI can give you a strategic edge.
|
||||
</p>
|
||||
|
||||
{/* Updated CTA Button with ShimmerButton */}
|
||||
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigateTo('/contact')}>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
<span>Book an AI Discovery Call</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
{/* 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={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<Brain className="w-6 h-6 flex-shrink-0" />
|
||||
<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>
|
||||
@@ -539,39 +554,36 @@ const InlineCTA = () => {
|
||||
const HireDevelopersSection = () => {
|
||||
const developers = [
|
||||
{
|
||||
title: "Hire iOS Developers",
|
||||
title: "iOS Developers",
|
||||
icon: Apple,
|
||||
skills: ["Swift", "Objective-C"],
|
||||
skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
|
||||
iconBg: "bg-gray-800",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Android Developers",
|
||||
title: "Android Developers",
|
||||
icon: Smartphone,
|
||||
skills: ["Kotlin", "Java"],
|
||||
skills: ["Kotlin", "Java", "Jetpack Compose"],
|
||||
iconBg: "bg-green-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Flutter / React Native Developers",
|
||||
title: "Cross-Platform Developers",
|
||||
icon: Layers,
|
||||
skills: ["Flutter", "React Native"],
|
||||
skills: ["React Native", "Flutter", "Xamarin"],
|
||||
iconBg: "bg-blue-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Mobile QA Testers",
|
||||
icon: Bug,
|
||||
skills: ["Mobile Testing", "Automation"],
|
||||
iconBg: "bg-red-500",
|
||||
iconColor: "text-white"
|
||||
},
|
||||
{
|
||||
title: "Hire UI/UX Designers",
|
||||
icon: Brush,
|
||||
skills: ["Mobile-first", "User Experience"],
|
||||
title: "Mobile QA Engineers",
|
||||
icon: ShieldCheck,
|
||||
skills: ["Mobile Testing", "Automation", "Performance"],
|
||||
iconBg: "bg-purple-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/qa-engineers"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -585,8 +597,9 @@ const HireDevelopersSection = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
Need Talent? Hire Our Top App Developers
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold mb-8">
|
||||
<span className="text-foreground">Hire Our </span>
|
||||
<span className="text-[#E5195E]">Mobile App Experts</span>
|
||||
</h2>
|
||||
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise.
|
||||
@@ -645,21 +658,15 @@ const HireDevelopersSection = () => {
|
||||
|
||||
{/* CTA Buttons - Updated with ShimmerButton */}
|
||||
<div className="p-8 pt-0 mt-auto space-y-3">
|
||||
<ShimmerButton className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl" onClick={() => navigateTo('/contact')}>
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo(developer.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 01-2 2H10a2 2 0 01-2-2V6" />
|
||||
</svg>
|
||||
<span className="font-medium">Start Hiring</span>
|
||||
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
||||
<span className="font-medium">Hire Now</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-foreground hover:bg-white/10 py-3 text-sm rounded-xl transition-all duration-300"
|
||||
>
|
||||
<span className="font-medium">Request Profiles</span>
|
||||
<UserPlus className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -672,378 +679,84 @@ const HireDevelopersSection = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced Case Study Highlight - Updated to match reference design
|
||||
const CaseStudyHighlight = () => {
|
||||
const projects = [
|
||||
{
|
||||
title: "Automated management of IoT networks",
|
||||
brand: "RAK",
|
||||
icon: Wifi,
|
||||
description: "Comprehensive IoT device management and monitoring platform",
|
||||
image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-blue-500/20 to-cyan-500/20"
|
||||
},
|
||||
{
|
||||
title: "HIPAA-compliant app for healthcare digitization",
|
||||
brand: "HealthVue",
|
||||
icon: Stethoscope,
|
||||
description: "Secure healthcare management system with patient data protection",
|
||||
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-green-500/20 to-emerald-500/20"
|
||||
},
|
||||
{
|
||||
title: "SaaS transportation management system",
|
||||
brand: "FleetOps",
|
||||
icon: Truck,
|
||||
description: "Advanced fleet tracking and logistics optimization platform",
|
||||
image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-orange-500/20 to-yellow-500/20"
|
||||
},
|
||||
{
|
||||
title: "Industry-agnostic cybersecurity system",
|
||||
brand: "SecureNet",
|
||||
icon: Shield,
|
||||
description: "Enterprise-grade security monitoring and threat detection",
|
||||
image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-purple-500/20 to-indigo-500/20"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<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-foreground mb-8">
|
||||
See What We've Built
|
||||
</h2>
|
||||
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
From IoT platforms to healthcare systems, our solutions drive real business impact across industries.
|
||||
</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 md:grid-cols-2 xl:grid-cols-4 gap-8"
|
||||
>
|
||||
{projects.map((project, index) => {
|
||||
const IconComponent = project.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -8, scale: 1.02 }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||||
<CardContent className="p-0 flex flex-col h-full">
|
||||
{/* Header with title and brand */}
|
||||
<div className="p-8 pb-6">
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<IconComponent className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
||||
{project.brand}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* App screenshot/mockup */}
|
||||
<div className="px-8 pb-6 flex-1">
|
||||
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${project.bgGradient} p-4 border border-white/10`}>
|
||||
<ImageWithFallback
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button - Keep as secondary action */}
|
||||
<div className="p-8 pt-0 mt-auto">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
||||
>
|
||||
<span className="text-sm font-medium">SEE FULL CASE STUDY</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Tech Marquee Component
|
||||
const TechMarquee = () => {
|
||||
const logos = [
|
||||
"Swift", "Kotlin", "Flutter", "React Native", "Firebase",
|
||||
"AWS", "PostgreSQL", "GraphQL", "Jest", "Figma"
|
||||
];
|
||||
|
||||
const techImages = [
|
||||
"https://images.unsplash.com/photo-1621839673705-6617adf9e890?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1609921212029-bb5a28e60960?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1609921212029-bb5a28e60960?w=80&h=80&fit=crop&auto=format"
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<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"
|
||||
>
|
||||
<p className="text-2xl text-muted-foreground leading-relaxed">
|
||||
Tools & Tech We Use Daily
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="flex gap-8 animate-scroll">
|
||||
{logos.concat(logos).map((logo, index) => (
|
||||
<motion.div
|
||||
key={`${logo}-${index}`}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: (index % logos.length) * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
className="flex-shrink-0 group"
|
||||
>
|
||||
<div className="w-24 h-24 bg-card/20 backdrop-blur-md rounded-2xl flex items-center justify-center border border-white/10 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl">
|
||||
<ImageWithFallback
|
||||
src={techImages[index % techImages.length]}
|
||||
alt={logo}
|
||||
className="w-16 h-16 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-center text-sm text-muted-foreground mt-3 group-hover:text-foreground transition-colors duration-300">
|
||||
{logo}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced FAQ Accordion
|
||||
const AccordionFAQs = () => {
|
||||
const items = [
|
||||
{
|
||||
question: "Do you help with app store publishing?",
|
||||
answer: "Yes. We help you publish, optimize, and comply with Apple & Google guidelines."
|
||||
},
|
||||
{
|
||||
question: "Can you build MVPs quickly?",
|
||||
answer: "Absolutely. Most MVPs are shipped in 4–6 weeks using cross-platform stacks."
|
||||
},
|
||||
{
|
||||
question: "How do you handle security?",
|
||||
answer: "From secure APIs to encrypted storage, our apps are built with enterprise-grade security in mind."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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">
|
||||
{items.map((item, index) => (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
value={`item-${index}`}
|
||||
className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
|
||||
>
|
||||
<AccordionTrigger className="text-left hover:no-underline py-10 text-2xl">
|
||||
<span className="font-semibold text-foreground">{item.question}</span>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground pb-10 text-xl leading-relaxed">
|
||||
{item.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Updated Large Call to Action with ShimmerButton
|
||||
const LargeCallToAction = () => {
|
||||
return (
|
||||
<section className="py-20 bg-black relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center max-w-4xl mx-auto"
|
||||
>
|
||||
{/* Badge with black background and gradient border */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-purple-500 to-blue-500">
|
||||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<Rocket className="w-5 h-5 text-white" />
|
||||
<span className="text-white text-base font-medium">Ready to Launch Your App?</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-4xl lg:text-5xl font-semibold text-white mb-6 leading-tight"
|
||||
>
|
||||
Build Your Next Mobile App with{" "}
|
||||
<span className="text-accent">WDI</span>
|
||||
</motion.h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
Join the companies who trust us to bring their app ideas to life with cutting-edge technology and expert craftsmanship.
|
||||
</motion.p>
|
||||
|
||||
{/* CTA Section - Updated with ShimmerButton */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* Main CTA Button with ShimmerButton */}
|
||||
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" onClick={() => navigateTo('/contact')}>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
|
||||
</svg>
|
||||
<span>Get Started</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
|
||||
{/* Secondary CTA */}
|
||||
<p className="text-gray-400 text-sm">
|
||||
Free consultation • No commitment • Quick turnaround
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Background Decorative Elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
||||
{/* Subtle gradient orbs */}
|
||||
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Main Mobile App Development Page
|
||||
// FAQ data for Mobile App Development
|
||||
const mobileAppFAQs = [
|
||||
{
|
||||
question: "What platforms do you develop mobile apps for?",
|
||||
answer: "We develop mobile apps for iOS, Android, and cross-platform solutions using technologies like React Native and Flutter. Our team has expertise in native development as well as hybrid approaches to ensure optimal performance and user experience."
|
||||
question: "Do you develop both iOS and Android apps?",
|
||||
answer: "Yes, we develop native iOS apps using Swift and Android apps using Kotlin. We also offer cross-platform solutions using React Native and Flutter for cost-effective multi-platform deployment."
|
||||
},
|
||||
{
|
||||
question: "How long does it take to develop a mobile app?",
|
||||
answer: "The development timeline varies based on app complexity, features, and platform requirements. Simple apps typically take 8-12 weeks, while complex enterprise applications can take 4-6 months. We provide detailed project timelines during the planning phase."
|
||||
question: "What is the typical timeline for mobile app development?",
|
||||
answer: "Timeline varies based on complexity. Simple apps take 8-12 weeks, while complex enterprise apps can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
|
||||
},
|
||||
{
|
||||
question: "Do you provide app store submission and approval support?",
|
||||
answer: "Yes, we handle the complete app store submission process for both Apple App Store and Google Play Store. Our team ensures your app meets all guidelines and requirements, and we provide ongoing support for app updates and maintenance."
|
||||
question: "How much does mobile app development cost?",
|
||||
answer: "Costs depend on features, platforms, and complexity. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
|
||||
},
|
||||
{
|
||||
question: "Can you integrate AI and machine learning features into mobile apps?",
|
||||
answer: "Absolutely! We specialize in integrating AI and ML capabilities including chatbots, recommendation engines, image recognition, natural language processing, and predictive analytics to enhance user engagement and app functionality."
|
||||
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 app optimization, compliance, and approval assistance."
|
||||
},
|
||||
{
|
||||
question: "What is your approach to mobile app security?",
|
||||
answer: "We implement comprehensive security measures including data encryption, secure API connections, authentication systems, and compliance with industry standards like GDPR and HIPAA. Security is built into every layer of our development process."
|
||||
question: "Can you integrate third-party services and APIs?",
|
||||
answer: "Absolutely! We integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance app functionality."
|
||||
},
|
||||
{
|
||||
question: "Do you provide app maintenance and updates?",
|
||||
answer: "Yes, we offer comprehensive maintenance services including bug fixes, OS updates, security patches, 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."
|
||||
},
|
||||
{
|
||||
question: "Can you develop offline-capable mobile apps?",
|
||||
answer: "Yes, we can develop apps with offline functionality using local storage, caching strategies, and data synchronization to ensure your app works even without internet connectivity."
|
||||
}
|
||||
];
|
||||
|
||||
export function MobileAppDevelopment() {
|
||||
// Main Mobile App Development Page Component
|
||||
export const MobileAppDevelopment = () => {
|
||||
// Set document title for SEO
|
||||
React.useEffect(() => {
|
||||
document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
|
||||
|
||||
// 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="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<HeroWithCTA />
|
||||
<HorizontalTagScroller />
|
||||
|
||||
{/* Industries Scroller */}
|
||||
<HorizontalTagScroller />
|
||||
|
||||
{/* Why Choose WDI */}
|
||||
<SideBySideContentWithIcons />
|
||||
|
||||
{/* Service Categories */}
|
||||
<TabbedServiceDisplay />
|
||||
|
||||
{/* Process Steps */}
|
||||
<ProcessSection />
|
||||
<InlineCTA />
|
||||
|
||||
{/* Hire Developers */}
|
||||
<HireDevelopersSection />
|
||||
<FAQSection
|
||||
title="Mobile App Development Questions"
|
||||
subtitle="Get answers to common questions about our mobile app development services and process."
|
||||
faqs={mobileAppFAQs}
|
||||
/>
|
||||
|
||||
{/* Final CTA */}
|
||||
<InlineCTA />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQSection faqs={mobileAppFAQs} />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user