ios changes pending
This commit is contained in:
priyanshuvish
@@ -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