413 lines
17 KiB
TypeScript
413 lines
17 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";
|
||
|
|
|
||
|
|
// 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";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Apple,
|
||
|
|
CheckCircle,
|
||
|
|
Code,
|
||
|
|
DollarSign,
|
||
|
|
Globe, Layers,
|
||
|
|
Layout,
|
||
|
|
MessageSquare,
|
||
|
|
Shield,
|
||
|
|
Smartphone,
|
||
|
|
TrendingUp,
|
||
|
|
Zap
|
||
|
|
} from "lucide-react";
|
||
|
|
|
||
|
|
// iOS App Development Hero Section
|
||
|
|
const iOSHeroWithCTA = () => {
|
||
|
|
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]">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: -50 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
className="space-y-8"
|
||
|
|
>
|
||
|
|
{/* iOS Label */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6 }}
|
||
|
|
>
|
||
|
|
<span className="text-white/70 text-sm font-medium">iOS App Development</span>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 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
|
||
|
|
</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.
|
||
|
|
</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 sm:flex-row gap-4"
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</ShimmerButton>
|
||
|
|
<a
|
||
|
|
href="#consultation"
|
||
|
|
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>
|
||
|
|
</a>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Right side with iOS development showcase */}
|
||
|
|
<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 */}
|
||
|
|
<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"
|
||
|
|
>
|
||
|
|
{/* 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" />
|
||
|
|
</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>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* iOS Features */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
||
|
|
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
|
||
|
|
</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>
|
||
|
|
<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>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Key Benefits of iOS Development
|
||
|
|
const iOSBenefits = () => {
|
||
|
|
const benefits = [
|
||
|
|
{
|
||
|
|
icon: Apple,
|
||
|
|
title: "Premium User Experience",
|
||
|
|
description: "Native iOS apps deliver the smooth, polished experience Apple users expect."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: DollarSign,
|
||
|
|
title: "Higher Revenue Potential",
|
||
|
|
description: "iOS users typically spend more on apps and in-app purchases."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Shield,
|
||
|
|
title: "Enhanced Security",
|
||
|
|
description: "iOS provides robust security features and App Store verification."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Globe,
|
||
|
|
title: "Global Market Reach",
|
||
|
|
description: "Access to millions of iOS users worldwide through the App Store."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: TrendingUp,
|
||
|
|
title: "Performance Excellence",
|
||
|
|
description: "Optimized for Apple's hardware delivering superior performance."
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
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-6">
|
||
|
|
Why Choose iOS App Development?
|
||
|
|
</h2>
|
||
|
|
</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 max-w-6xl mx-auto"
|
||
|
|
>
|
||
|
|
{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.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 text-center">
|
||
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
|
|
{benefit.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground leading-relaxed">
|
||
|
|
{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 md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
|
||
|
|
>
|
||
|
|
{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="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 text-center">
|
||
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
|
|
{benefit.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground leading-relaxed">
|
||
|
|
{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 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">
|
||
|
|
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.
|
||
|
|
</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 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
|
||
|
|
>
|
||
|
|
{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="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||
|
|
<CardContent className="p-0">
|
||
|
|
{/* Image Section */}
|
||
|
|
<div className="relative h-48 overflow-hidden">
|
||
|
|
<ImageWithFallback
|
||
|
|
src={tech.image}
|
||
|
|
alt={tech.title}
|
||
|
|
className="w-full h-full object-cover 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="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content Section */}
|
||
|
|
<div className="p-8">
|
||
|
|
<h3 className="text-2xl font-semibold text-white mb-4">
|
||
|
|
{tech.title}
|
||
|
|
</h3>
|
||
|
|
<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>
|
||
|
|
<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="w-4 h-4 text-accent flex-shrink-0" />
|
||
|
|
<span>{feature}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Main iOS App Development Page
|
||
|
|
export const IOSAppDevelopment = () => {
|
||
|
|
return (
|
||
|
|
<div className="dark min-h-screen">
|
||
|
|
<Navigation />
|
||
|
|
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section className="bg-black">
|
||
|
|
{/* <iOSHeroWithCTA /> */}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Benefits */}
|
||
|
|
<section className="bg-background">
|
||
|
|
{/* <iOSBenefits /> */}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Technologies */}
|
||
|
|
<section className="bg-card">
|
||
|
|
{/* <iOSTechnologies /> */}
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<Footer />
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|