1129 lines
43 KiB
TypeScript
1129 lines
43 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
import { Footer } from "../components/Footer";
|
|
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 "../src/images/ranoutof.webp";
|
|
// import seezunImage from "../src/images/seezun.webp";
|
|
import wokaImage from "../src/images/woka.webp";
|
|
import swiftImage from "../src/images/swift-programming.webp";
|
|
import apllePayImage from "../src/images/apple-pay.png";
|
|
import awsLogo from "../src/images/aws-logo.png";
|
|
|
|
// High-quality iOS development images
|
|
|
|
const swiftuiImage =
|
|
"https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
|
|
|
|
import {
|
|
Apple,
|
|
ArrowRight,
|
|
Brush,
|
|
Bug,
|
|
Calendar,
|
|
CheckCircle,
|
|
Code,
|
|
DollarSign,
|
|
Eye,
|
|
Globe,
|
|
Heart,
|
|
Layers,
|
|
Layout,
|
|
Lightbulb,
|
|
MessageSquare,
|
|
Network,
|
|
Palette,
|
|
RefreshCcw,
|
|
Rocket,
|
|
Shield,
|
|
ShoppingCart,
|
|
Smartphone,
|
|
Star,
|
|
Tablet,
|
|
TrendingUp,
|
|
Users,
|
|
Watch,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Spline from "@splinetool/react-spline";
|
|
import { Helmet } from "react-helmet-async";
|
|
import HireDeveloperSection from "@/components/HireDeveloperSection";
|
|
|
|
// iOS Hero Section with iPhone/iPad mockups
|
|
const IOSHeroWithCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>iOS App Development Services Crafted by WDI Experts</title>
|
|
<meta
|
|
name="description"
|
|
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/services/ios-app-development" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="iOS App Development Services Crafted by WDI Experts" />
|
|
<meta
|
|
property="og:description"
|
|
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="iOS App Development Services Crafted by WDI Experts" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<div className="container px-6 mx-auto lg:px-8">
|
|
<div className="grid lg:grid-cols-2 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"
|
|
>
|
|
{/* iOS Development Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-sm font-medium text-white/70">
|
|
iOS App Development
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
|
|
Expert iOS App Development Services
|
|
</h1>
|
|
|
|
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
|
|
Crafting intuitive, high-performance iPhone and iPad
|
|
applications that define user experience and drive engagement.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col gap-4 sm:flex-row"
|
|
>
|
|
<ShimmerButton
|
|
className="px-8 py-4 text-lg"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<svg
|
|
className="flex-shrink-0 w-6 h-4"
|
|
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="#portfolio"
|
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
|
|
>
|
|
<Eye className="flex-shrink-0 w-4 h-4" />
|
|
<span>See Our iOS Work</span>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* 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 w-full"
|
|
>
|
|
<div className="absolute w-[160px] h-[46px] bg-[#000000] bottom-[3%] right-[1%]"></div>
|
|
<div className="w-full h-[490px] overflow-hidden rounded-xl pointer-events-none">
|
|
{/* {" "} */}
|
|
<Spline
|
|
scene="https://prod.spline.design/3GGwAe3v1Q7oobGU/scene.splinecode"
|
|
// className="w-[40%] h-full"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// iOS Case Studies - Matching Main Case Studies Design
|
|
const IOSCaseStudies = () => {
|
|
const navigate = useNavigate();
|
|
const caseStudies = [
|
|
{
|
|
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,
|
|
},
|
|
// {
|
|
// 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,
|
|
// },
|
|
{
|
|
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 px-6 mx-auto 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="mb-16 text-center"
|
|
>
|
|
<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="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
|
|
<Star className="w-5 h-5 text-accent" />
|
|
<span className="text-base font-medium text-foreground">
|
|
iOS Success Stories
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
|
iOS Apps That Drive Results
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
|
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 items-stretch grid-cols-1 gap-8 lg:grid-cols-3 md:grid-cols-2">
|
|
{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="h-full group"
|
|
>
|
|
<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") {
|
|
navigate("/projects/ranoutof");
|
|
} else if (study.title === "Seezun") {
|
|
navigate("/projects/seezun");
|
|
} else if (study.title === "WOKA") {
|
|
navigate("/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 flex items-center justify-center w-full h-64 p-4 sm:h-72 md:h-64">
|
|
<ImageWithFallback
|
|
src={study.visual}
|
|
alt={`${study.title} - ${study.client} case study`}
|
|
className="object-contain object-center max-w-full max-h-full transition-transform duration-700 rounded-lg group-hover:scale-105"
|
|
style={{
|
|
maxWidth: "100%",
|
|
height: "auto",
|
|
objectFit: "contain",
|
|
objectPosition: "center",
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle overlay for better text contrast */}
|
|
<div className="absolute inset-0 transition-opacity duration-500 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80" />
|
|
|
|
{/* Key Achievement - Overlaid on Visual */}
|
|
<div className="absolute z-10 bottom-4 left-4 right-4">
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="p-4 border shadow-lg bg-black/90 backdrop-blur-md rounded-xl border-white/10"
|
|
>
|
|
<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="flex-1 min-w-0">
|
|
<div className="text-2xl font-bold text-white">
|
|
{study.keyAchievement.number}
|
|
</div>
|
|
<div className="text-sm leading-tight text-gray-300">
|
|
{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 leading-tight transition-colors duration-300 text-foreground group-hover:text-accent line-clamp-2">
|
|
{study.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Client & Description - Consistent Height */}
|
|
<div className="mb-6 min-h-[100px]">
|
|
<div className="mb-2 text-sm font-medium text-accent">
|
|
{study.client}
|
|
</div>
|
|
<p className="text-sm leading-relaxed text-muted-foreground 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 text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
|
|
>
|
|
{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 h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (study.title === "RanOutOf") {
|
|
navigate("/projects/ranoutof");
|
|
} else if (study.title === "Seezun") {
|
|
navigate("/projects/seezun");
|
|
} else if (study.title === "WOKA") {
|
|
navigate("/projects/woka");
|
|
}
|
|
}}
|
|
>
|
|
<span>View Full Case Study</span>
|
|
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
|
|
</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="mt-16 text-center"
|
|
>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="transition-all duration-300 border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50"
|
|
onClick={() => navigate("/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,
|
|
},
|
|
{
|
|
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 px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="mb-20 text-center"
|
|
>
|
|
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
|
Our Proven Approach to Building Your iOS App
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
|
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="p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl hover:border-accent/30 hover:shadow-xl">
|
|
<div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
|
|
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-accent">
|
|
0{index + 1}
|
|
</div>
|
|
</div>
|
|
<h3 className="mb-4 text-2xl font-semibold text-white">
|
|
{step.title}
|
|
</h3>
|
|
<p className="leading-relaxed text-gray-300">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="z-10 hidden w-4 h-4 border-4 border-black rounded-full bg-accent 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,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="mb-20 text-center"
|
|
>
|
|
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
|
Comprehensive iOS App Solutions
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
|
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 gap-8 md:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
{services.map((service, index) => {
|
|
const IconComponent = service.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
|
{service.title}
|
|
</h3>
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{service.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// iOS Tech Stack
|
|
const IOSTechStack = () => {
|
|
const technologies = [
|
|
{
|
|
name: "Swift",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
|
|
},
|
|
{
|
|
name: "SwiftUI",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-plain.svg",
|
|
},
|
|
{
|
|
name: "Xcode",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg",
|
|
},
|
|
{
|
|
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://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
|
|
|
|
},
|
|
{
|
|
name: "AWS",
|
|
logo: awsLogo,
|
|
},
|
|
{
|
|
name: "Apple Pay",
|
|
logo: apllePayImage,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="mb-20 text-center"
|
|
>
|
|
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
|
Building with the Most Powerful iOS Technologies
|
|
</h2>
|
|
<p className="text-xl leading-relaxed text-gray-300">
|
|
We leverage cutting-edge iOS frameworks and tools to create
|
|
exceptional mobile experiences.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
|
|
{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.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ scale: 1.1, y: -5 }}
|
|
className="flex flex-col items-center group"
|
|
>
|
|
<div className="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
|
|
<ImageWithFallback
|
|
src={tech.logo}
|
|
alt={tech.name}
|
|
className="object-contain w-12 h-12"
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
|
|
{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 px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="mb-16 text-center"
|
|
>
|
|
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
|
Why Choose Native iOS for Your App?
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
|
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 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
{benefits.slice(0, 3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with 2 cards centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
|
|
>
|
|
{benefits.slice(3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// iOS Technologies & Frameworks
|
|
const IOSTechnologies = () => {
|
|
const technologies = [
|
|
{
|
|
title: "Swift Programming",
|
|
description:
|
|
"Modern, safe, and fast programming language designed for iOS development.",
|
|
image: swiftImage,
|
|
features: [
|
|
"Type Safety",
|
|
"Memory Management",
|
|
"Performance Optimization",
|
|
"Concurrency Support",
|
|
],
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "SwiftUI Framework",
|
|
description:
|
|
"Declarative UI framework for building beautiful, responsive user interfaces.",
|
|
image: swiftuiImage,
|
|
features: [
|
|
"Declarative Syntax",
|
|
"Live Previews",
|
|
"Cross-Platform",
|
|
"Animation Support",
|
|
],
|
|
icon: Layout,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="mb-20 text-center"
|
|
>
|
|
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
|
iOS Development Technologies
|
|
</h2>
|
|
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
|
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 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid max-w-6xl gap-12 mx-auto lg:grid-cols-2"
|
|
>
|
|
{technologies.map((tech, index) => {
|
|
const IconComponent = tech.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full overflow-hidden transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
|
<CardContent className="p-0">
|
|
{/* Image Section */}
|
|
<div className="relative h-48 overflow-hidden">
|
|
<ImageWithFallback
|
|
src={tech.image}
|
|
alt={tech.title}
|
|
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-transparent to-transparent" />
|
|
<div className="absolute bottom-4 left-4">
|
|
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Section */}
|
|
<div className="p-8">
|
|
<h3 className="mb-4 text-2xl font-semibold text-white">
|
|
{tech.title}
|
|
</h3>
|
|
<p className="mb-6 leading-relaxed text-gray-300">
|
|
{tech.description}
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2">
|
|
<h4 className="mb-3 text-sm font-medium text-white">
|
|
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"
|
|
>
|
|
<CheckCircle className="flex-shrink-0 w-4 h-4 text-accent" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main iOS App Development Page
|
|
export const IOSAppDevelopment = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div className="min-h-screen dark">
|
|
{/* <Navigation /> */}
|
|
|
|
<section className="bg-black">
|
|
<IOSHeroWithCTA />
|
|
</section>
|
|
|
|
<section className="bg-background">
|
|
<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>
|
|
|
|
<HireDeveloperSection
|
|
title="Augment Your Team with Top iOS App Developers"
|
|
description="Build sleek, high-performance iOS applications with our skilled Swift and Objective-C developers."
|
|
buttonText="Hire iOS Developers"
|
|
buttonLink="/hire-talent/ios-app-developers"
|
|
developerTypes={[
|
|
{
|
|
title: "Swift Developer",
|
|
experience: "4+ Years",
|
|
skills: ["Swift", "UIKit", "SwiftUI", "REST APIs"],
|
|
specialties: "Modern iOS UI, Performance Optimization",
|
|
},
|
|
{
|
|
title: "Objective-C Developer",
|
|
experience: "5+ Years",
|
|
skills: ["Objective-C", "Xcode", "Cocoa Touch", "Core Data"],
|
|
specialties: "Legacy App Maintenance, Native Libraries",
|
|
},
|
|
{
|
|
title: "iOS App Architect",
|
|
experience: "6+ Years",
|
|
skills: ["MVVM", "Swift", "App Store Deployment", "CI/CD"],
|
|
specialties: "Scalable Architecture, Release Pipelines",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
|
|
{/* <section className="bg-card">
|
|
<IOSTechnologies />
|
|
</section> */}
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-32">
|
|
<div className="container px-6 mx-auto lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
|
|
Ready to Build Your Next iOS App?
|
|
</h2>
|
|
<p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
|
|
Partner with us to create exceptional iOS applications that
|
|
delight users and drive business success.
|
|
</p>
|
|
<div className="flex flex-col justify-center gap-6 sm:flex-row">
|
|
<ShimmerButton
|
|
className="h-auto px-8 py-4 text-lg"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Apple className="flex-shrink-0 w-5 h-5" />
|
|
<span>Start Your iOS Project</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="h-auto px-8 py-4 text-lg border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
|
|
>
|
|
<Calendar className="w-5 h-5 mr-2" />
|
|
Schedule Consultation
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-background">
|
|
{/* <Footer /> */}
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|