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>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -5,26 +5,49 @@ import { Navigation } from "../components/Navigation";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import ranoutofImage from "../assets/images/ranoutof.webp";
|
||||
import seezunImage from "../assets/images/seezun.webp";
|
||||
import wokaImage from "../assets/images/woka.webp";
|
||||
|
||||
// High-quality iOS development images
|
||||
const swiftImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftuiImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftImage =
|
||||
"https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftuiImage =
|
||||
"https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
|
||||
|
||||
import {
|
||||
Apple,
|
||||
ArrowRight,
|
||||
Brush,
|
||||
Bug,
|
||||
CheckCircle,
|
||||
Code,
|
||||
DollarSign,
|
||||
Globe, Layers,
|
||||
Eye,
|
||||
Globe,
|
||||
Heart,
|
||||
Layers,
|
||||
Layout,
|
||||
Lightbulb,
|
||||
MessageSquare,
|
||||
Network,
|
||||
Palette,
|
||||
RefreshCcw,
|
||||
Rocket,
|
||||
Shield,
|
||||
ShoppingCart,
|
||||
Smartphone,
|
||||
Star,
|
||||
Tablet,
|
||||
TrendingUp,
|
||||
Zap
|
||||
Users,
|
||||
Watch,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { navigateTo } from "@/App";
|
||||
|
||||
// iOS App Development Hero Section
|
||||
// iOS Hero Section with iPhone/iPad mockups
|
||||
const IOSHeroWithCTA = () => {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
@@ -36,7 +59,7 @@ const IOSHeroWithCTA = () => {
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* iOS Label */}
|
||||
{/* iOS Development Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@@ -48,11 +71,11 @@ const IOSHeroWithCTA = () => {
|
||||
{/* Main Heading */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
Premium iOS App Development Services
|
||||
Expert iOS App Development Services
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
Create stunning, high-performance iOS applications that captivate users and drive business growth with our expert development team.
|
||||
Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -65,84 +88,85 @@ const IOSHeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Apple className="w-5 h-5 flex-shrink-0" />
|
||||
<span>Start iOS Project</span>
|
||||
<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>
|
||||
<span>Get a Free Consultation</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
<a
|
||||
href="#consultation"
|
||||
href="#portfolio"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Schedule Consultation</span>
|
||||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||||
<span>See Our iOS Work</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side with iOS development showcase */}
|
||||
{/* Right side with iOS device mockups */}
|
||||
<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"
|
||||
>
|
||||
{/* iOS Development Showcase */}
|
||||
{/* iOS Device Mockups */}
|
||||
<div className="relative w-full max-w-lg mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="relative mb-8"
|
||||
className="relative h-[400px] w-full mb-8 flex items-center justify-center"
|
||||
>
|
||||
{/* Central iPhone Mockup */}
|
||||
<div className="relative mx-auto w-64 h-96 bg-gradient-to-b from-gray-800 to-gray-900 rounded-[3rem] border-8 border-gray-700 shadow-2xl">
|
||||
<div className="w-full h-full bg-gradient-to-br from-accent to-purple-600 rounded-[2rem] p-4 flex items-center justify-center">
|
||||
<div className="w-full h-full bg-white/10 rounded-2xl flex items-center justify-center">
|
||||
<Apple className="w-16 h-16 text-white" />
|
||||
{/* iPhone and iPad mockup representation */}
|
||||
<div className="relative">
|
||||
<div className="absolute -right-16 top-8 w-24 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl transform rotate-12">
|
||||
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
|
||||
<div className="w-8 h-1 bg-gray-600 rounded-full"></div>
|
||||
</div>
|
||||
<div className="p-2 space-y-1">
|
||||
<div className="h-2 bg-accent/60 rounded"></div>
|
||||
<div className="h-1 bg-gray-600 rounded w-3/4"></div>
|
||||
<div className="h-1 bg-gray-600 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* iPhone Details */}
|
||||
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 w-16 h-6 bg-black rounded-full"></div>
|
||||
<div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/30 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* Tech Stack Icons */}
|
||||
<div className="absolute -top-8 -left-8 w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl border border-blue-400/30 shadow-lg flex items-center justify-center">
|
||||
<Code className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-4 -right-12 w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl border border-purple-400/30 shadow-lg flex items-center justify-center">
|
||||
<Layers className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 -right-8 w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg border border-green-400/30 shadow-lg flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-12 -left-6 w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg border border-orange-400/30 shadow-lg flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-white" />
|
||||
<div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
|
||||
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
|
||||
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="h-3 bg-accent rounded"></div>
|
||||
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
|
||||
<div className="h-2 bg-gray-600 rounded w-3/5"></div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||||
</div>
|
||||
<div className="h-12 bg-accent/20 rounded-lg mt-4 flex items-center justify-center">
|
||||
<Apple className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* iOS Features */}
|
||||
{/* iOS Technology Badges */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="flex justify-center gap-4 flex-wrap"
|
||||
>
|
||||
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
|
||||
<Apple className="w-3 h-3 mr-1" />
|
||||
Swift & SwiftUI
|
||||
Swift
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
|
||||
<Smartphone className="w-3 h-3 mr-1" />
|
||||
Native Performance
|
||||
<Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
|
||||
SwiftUI
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
App Store Ready
|
||||
<Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
|
||||
Xcode
|
||||
</Badge>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -153,34 +177,424 @@ const IOSHeroWithCTA = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Key Benefits of iOS Development
|
||||
const IOSBenefits = () => {
|
||||
const benefits = [
|
||||
// iOS Case Studies - Matching Main Case Studies Design
|
||||
const IOSCaseStudies = () => {
|
||||
const caseStudies = [
|
||||
{
|
||||
icon: Apple,
|
||||
title: "Premium User Experience",
|
||||
description: "Native iOS apps deliver the smooth, polished experience Apple users expect."
|
||||
id: 1,
|
||||
title: "RanOutOf",
|
||||
client: "Global Ease Solutions",
|
||||
description:
|
||||
"WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions.",
|
||||
keyAchievement: {
|
||||
number: "75%",
|
||||
metric: "Shopping Efficiency",
|
||||
icon: ShoppingCart,
|
||||
},
|
||||
visual: ranoutofImage,
|
||||
tags: ["iOS App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
|
||||
gradient: "from-green-500/20 to-emerald-500/20",
|
||||
accentColor: "green",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Higher Revenue Potential",
|
||||
description: "iOS users typically spend more on apps and in-app purchases."
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
client: "Seezun",
|
||||
description:
|
||||
"Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
|
||||
keyAchievement: {
|
||||
number: "85%",
|
||||
metric: "Brand Recognition",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
visual: seezunImage,
|
||||
tags: ["iOS App", "P2P Marketplace", "Fashion", "E-commerce"],
|
||||
gradient: "from-purple-500/20 to-pink-500/20",
|
||||
accentColor: "purple",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enhanced Security",
|
||||
description: "iOS provides robust security features and App Store verification."
|
||||
id: 3,
|
||||
title: "WOKA",
|
||||
client: "WOKA Creations Pvt. Ltd",
|
||||
description:
|
||||
"WDI transformed WOKA's hybrid app into a high-performance native iOS platform featuring seamless streaming, deep analytics, and robust monthly support.",
|
||||
keyAchievement: {
|
||||
number: "300%",
|
||||
metric: "User Retention",
|
||||
icon: Users,
|
||||
},
|
||||
visual: wokaImage,
|
||||
tags: ["Native iOS", "Streaming", "Analytics", "Entertainment"],
|
||||
gradient: "from-green-500/20 to-emerald-500/20",
|
||||
accentColor: "green",
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32" id="portfolio">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<Star className="w-5 h-5 text-accent" />
|
||||
<span className="text-foreground text-base font-medium">
|
||||
iOS Success Stories
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
iOS Apps That Drive Results
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
Discover how we've helped businesses succeed with exceptional iOS
|
||||
applications that leverage native capabilities and deliver
|
||||
outstanding user experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Case Studies Grid - Matching Main Case Studies Layout */}
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8 items-stretch">
|
||||
{caseStudies.map((study, index) => {
|
||||
const AchievementIcon = study.keyAchievement.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={study.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="group h-full"
|
||||
>
|
||||
<Card
|
||||
className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
|
||||
onClick={() => {
|
||||
if (study.title === "RanOutOf") {
|
||||
navigateTo("/projects/ranoutof");
|
||||
} else if (study.title === "Seezun") {
|
||||
navigateTo("/projects/seezun");
|
||||
} else if (study.title === "WOKA") {
|
||||
navigateTo("/projects/woka");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-0 flex flex-col h-full min-h-[650px]">
|
||||
{/* Visual Section - Fixed Height with Responsive Container */}
|
||||
<div className="relative overflow-hidden bg-gray-900/50 rounded-t-2xl">
|
||||
<div className="relative h-64 sm:h-72 md:h-64 w-full flex items-center justify-center p-4">
|
||||
<ImageWithFallback
|
||||
src={study.visual}
|
||||
alt={`${study.title} - ${study.client} case study`}
|
||||
className="max-w-full max-h-full object-contain object-center group-hover:scale-105 transition-transform duration-700 rounded-lg"
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
height: "auto",
|
||||
objectFit: "contain",
|
||||
objectPosition: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle overlay for better text contrast */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-500" />
|
||||
|
||||
{/* Key Achievement - Overlaid on Visual */}
|
||||
<div className="absolute bottom-4 left-4 right-4 z-10">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-black/90 backdrop-blur-md rounded-xl p-4 border border-white/10 shadow-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
|
||||
study.accentColor === "blue"
|
||||
? "from-blue-500 to-cyan-500"
|
||||
: study.accentColor === "green"
|
||||
? "from-green-500 to-emerald-500"
|
||||
: study.accentColor === "purple"
|
||||
? "from-purple-500 to-pink-500"
|
||||
: study.accentColor === "cyan"
|
||||
? "from-cyan-500 to-blue-500"
|
||||
: study.accentColor === "orange"
|
||||
? "from-orange-500 to-red-500"
|
||||
: "from-emerald-500 to-teal-500"
|
||||
} flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<AchievementIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{study.keyAchievement.number}
|
||||
</div>
|
||||
<div className="text-sm text-gray-300 leading-tight">
|
||||
{study.keyAchievement.metric}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section - Flexible Height with Consistent Spacing */}
|
||||
<div className="p-6 flex-1 flex flex-col justify-between min-h-[350px]">
|
||||
<div className="flex-1">
|
||||
{/* Project Title - Consistent Height */}
|
||||
<div className="mb-4 min-h-[60px] flex items-start">
|
||||
<h3 className="text-xl font-semibold text-foreground leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
|
||||
{study.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Client & Description - Consistent Height */}
|
||||
<div className="mb-6 min-h-[100px]">
|
||||
<div className="text-accent font-medium text-sm mb-2">
|
||||
{study.client}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-4">
|
||||
{study.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tags - Consistent Height */}
|
||||
<div className="mb-6 min-h-[32px]">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{study.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button - Fixed at Bottom */}
|
||||
<div className="mt-auto">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (study.title === "RanOutOf") {
|
||||
navigateTo("/projects/ranoutof");
|
||||
} else if (study.title === "Seezun") {
|
||||
navigateTo("/projects/seezun");
|
||||
} else if (study.title === "WOKA") {
|
||||
navigateTo("/projects/woka");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>View Full Case Study</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-16"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50 transition-all duration-300"
|
||||
onClick={() => navigateTo("/case-studies")}
|
||||
>
|
||||
<Eye className="w-5 h-5 mr-2" />
|
||||
View All Case Studies
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Development Process Timeline
|
||||
const IOSProcessTimeline = () => {
|
||||
const steps = [
|
||||
{
|
||||
title: "Strategy & Concept",
|
||||
description:
|
||||
"Define your iOS app vision, target audience, and core functionality with our expert consultation.",
|
||||
icon: Lightbulb,
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Market Reach",
|
||||
description: "Access to millions of iOS users worldwide through the App Store."
|
||||
title: "UI/UX Design",
|
||||
description:
|
||||
"Create pixel-perfect designs following Apple's Human Interface Guidelines for optimal user experience.",
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
title: "Native iOS Development",
|
||||
description:
|
||||
"Build your app using Swift and modern iOS frameworks for maximum performance and platform integration.",
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
title: "Rigorous QA & Testing",
|
||||
description:
|
||||
"Comprehensive testing across all iOS devices and versions to ensure flawless functionality.",
|
||||
icon: Bug,
|
||||
},
|
||||
{
|
||||
title: "App Store Launch & Support",
|
||||
description:
|
||||
"Handle App Store submission, optimization, and provide ongoing maintenance and updates.",
|
||||
icon: Rocket,
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
Our Proven Approach to Building Your iOS App
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
From concept to App Store success, we guide you through every step
|
||||
of the iOS development journey.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Timeline line */}
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||||
|
||||
<div className="space-y-16">
|
||||
{steps.map((step, index) => {
|
||||
const IconComponent = step.icon;
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className={`flex items-center ${
|
||||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
} flex-col lg:gap-16 gap-8`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 ${
|
||||
isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||||
<IconComponent className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">
|
||||
0{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline dot */}
|
||||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||||
|
||||
<div className="flex-1 hidden lg:block"></div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Specific Services
|
||||
const IOSServicesGrid = () => {
|
||||
const services = [
|
||||
{
|
||||
title: "Custom iPhone App Development",
|
||||
description:
|
||||
"Tailored solutions for specific business needs with native iOS performance.",
|
||||
icon: Smartphone,
|
||||
},
|
||||
{
|
||||
title: "iPad App Development",
|
||||
description:
|
||||
"Optimized layouts and features specifically designed for tablet experiences.",
|
||||
icon: Tablet,
|
||||
},
|
||||
{
|
||||
title: "iOS UI/UX Design",
|
||||
description:
|
||||
"Human Interface Guidelines-compliant, delightful user interfaces that users love.",
|
||||
icon: Brush,
|
||||
},
|
||||
{
|
||||
title: "WatchOS & tvOS Apps",
|
||||
description:
|
||||
"Extending your presence across Apple devices with companion apps.",
|
||||
icon: Watch,
|
||||
},
|
||||
{
|
||||
title: "iOS App Modernization",
|
||||
description:
|
||||
"Updating legacy iOS apps for modern performance, features, and design standards.",
|
||||
icon: RefreshCcw,
|
||||
},
|
||||
{
|
||||
title: "App Store Optimization",
|
||||
description:
|
||||
"Maximizing discoverability and downloads through strategic ASO practices.",
|
||||
icon: TrendingUp,
|
||||
title: "Performance Excellence",
|
||||
description: "Optimized for Apple's hardware delivering superior performance."
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -194,10 +608,182 @@ const IOSBenefits = () => {
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
Why Choose iOS App Development?
|
||||
Comprehensive iOS App Solutions
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
From iPhone apps to Apple ecosystem integration, we provide
|
||||
end-to-end iOS development services.
|
||||
</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 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{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.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group"
|
||||
>
|
||||
<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 h-full">
|
||||
<CardContent className="p-8">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||||
<IconComponent className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Tech Stack
|
||||
const IOSTechStack = () => {
|
||||
const technologies = [
|
||||
{ name: "Swift", logo: swiftImage },
|
||||
{ name: "SwiftUI", logo: swiftuiImage },
|
||||
{
|
||||
name: "Xcode",
|
||||
logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "UIKit",
|
||||
logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Core Data",
|
||||
logo: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Firebase",
|
||||
logo: "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "AWS",
|
||||
logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Apple Pay",
|
||||
logo: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
Building with the Most Powerful iOS Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed">
|
||||
We leverage cutting-edge iOS frameworks and tools to create
|
||||
exceptional mobile experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
{technologies.map((tech, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
className="flex flex-col items-center group"
|
||||
>
|
||||
<div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
|
||||
<ImageWithFallback
|
||||
src={tech.logo}
|
||||
alt={tech.name}
|
||||
className="w-12 h-12 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
|
||||
{tech.name}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Key Benefits of iOS Development
|
||||
const IOSKeyBenefits = () => {
|
||||
const benefits = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Unmatched Performance",
|
||||
description: "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Superior Security",
|
||||
description: "Leveraging Apple's robust security features for comprehensive data protection and user privacy."
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Premium User Experience",
|
||||
description: "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design."
|
||||
},
|
||||
{
|
||||
icon: Network,
|
||||
title: "Apple Ecosystem Integration",
|
||||
description: "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features."
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Strong Monetization Potential",
|
||||
description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
|
||||
}
|
||||
];
|
||||
|
||||
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-16"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
Why Choose Native iOS for Your App?
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
iOS development offers unparalleled advantages for businesses looking to create premium mobile experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -282,18 +868,30 @@ const IOSTechnologies = () => {
|
||||
const technologies = [
|
||||
{
|
||||
title: "Swift Programming",
|
||||
description: "Modern, safe, and fast programming language designed for iOS development.",
|
||||
description:
|
||||
"Modern, safe, and fast programming language designed for iOS development.",
|
||||
image: swiftImage,
|
||||
features: ["Type Safety", "Memory Management", "Performance Optimization", "Concurrency Support"],
|
||||
icon: Code
|
||||
features: [
|
||||
"Type Safety",
|
||||
"Memory Management",
|
||||
"Performance Optimization",
|
||||
"Concurrency Support",
|
||||
],
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
title: "SwiftUI Framework",
|
||||
description: "Declarative UI framework for building beautiful, responsive user interfaces.",
|
||||
description:
|
||||
"Declarative UI framework for building beautiful, responsive user interfaces.",
|
||||
image: swiftuiImage,
|
||||
features: ["Declarative Syntax", "Live Previews", "Cross-Platform", "Animation Support"],
|
||||
icon: Layout
|
||||
}
|
||||
features: [
|
||||
"Declarative Syntax",
|
||||
"Live Previews",
|
||||
"Cross-Platform",
|
||||
"Animation Support",
|
||||
],
|
||||
icon: Layout,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -310,10 +908,11 @@ const IOSTechnologies = () => {
|
||||
iOS Development Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
||||
We leverage the latest iOS technologies and frameworks to build exceptional apps.
|
||||
We leverage the latest iOS technologies and frameworks to build
|
||||
exceptional apps.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -349,7 +948,7 @@ const IOSTechnologies = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="p-8">
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||||
@@ -358,13 +957,18 @@ const IOSTechnologies = () => {
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
{tech.description}
|
||||
</p>
|
||||
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-white mb-3">Key Features:</h4>
|
||||
<h4 className="text-sm font-medium text-white mb-3">
|
||||
Key Features:
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{tech.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-gray-300">
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 text-sm text-gray-300"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
@@ -394,7 +998,23 @@ export const IOSAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
<section className="bg-background">
|
||||
<IOSBenefits />
|
||||
<IOSKeyBenefits />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSCaseStudies />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSProcessTimeline />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSServicesGrid />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSTechStack />
|
||||
</section>
|
||||
|
||||
<section className="bg-card">
|
||||
|
||||
Reference in New Issue
Block a user