removed seezuns
This commit is contained in:
aryabenade
@@ -6,7 +6,7 @@ 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 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";
|
||||
@@ -105,7 +105,7 @@ const IOSHeroWithCTA = () => {
|
||||
`}
|
||||
</script>
|
||||
</Helmet>
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 }}
|
||||
@@ -119,18 +119,18 @@ const IOSHeroWithCTA = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-white/70 text-sm font-medium">
|
||||
<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 md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
|
||||
Expert iOS App Development Services
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
<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>
|
||||
@@ -141,15 +141,15 @@ const IOSHeroWithCTA = () => {
|
||||
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"
|
||||
className="flex flex-col gap-4 sm:flex-row"
|
||||
>
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4"
|
||||
className="px-8 py-4 text-lg"
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<svg
|
||||
className="w-6 h-4 flex-shrink-0"
|
||||
className="flex-shrink-0 w-6 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -166,9 +166,9 @@ const IOSHeroWithCTA = () => {
|
||||
</ShimmerButton>
|
||||
<a
|
||||
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"
|
||||
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="w-4 h-4 flex-shrink-0" />
|
||||
<Eye className="flex-shrink-0 w-4 h-4" />
|
||||
<span>See Our iOS Work</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
@@ -217,23 +217,23 @@ const IOSCaseStudies = () => {
|
||||
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: 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",
|
||||
@@ -255,14 +255,14 @@ const IOSCaseStudies = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32" id="portfolio">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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="text-center mb-16"
|
||||
className="mb-16 text-center"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
@@ -272,19 +272,19 @@ const IOSCaseStudies = () => {
|
||||
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">
|
||||
<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-foreground text-base font-medium">
|
||||
<span className="text-base font-medium text-foreground">
|
||||
iOS Success Stories
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
||||
iOS Apps That Drive Results
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
<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.
|
||||
@@ -292,7 +292,7 @@ const IOSCaseStudies = () => {
|
||||
</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">
|
||||
<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;
|
||||
|
||||
@@ -303,7 +303,7 @@ const IOSCaseStudies = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="group h-full"
|
||||
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"
|
||||
@@ -320,11 +320,11 @@ const IOSCaseStudies = () => {
|
||||
<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">
|
||||
<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="max-w-full max-h-full object-contain object-center group-hover:scale-105 transition-transform duration-700 rounded-lg"
|
||||
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",
|
||||
@@ -334,13 +334,13 @@ const IOSCaseStudies = () => {
|
||||
/>
|
||||
|
||||
{/* 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" />
|
||||
<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 bottom-4 left-4 right-4 z-10">
|
||||
<div className="absolute z-10 bottom-4 left-4 right-4">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-black/90 backdrop-blur-md rounded-xl p-4 border border-white/10 shadow-lg"
|
||||
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
|
||||
@@ -359,11 +359,11 @@ const IOSCaseStudies = () => {
|
||||
>
|
||||
<AchievementIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{study.keyAchievement.number}
|
||||
</div>
|
||||
<div className="text-sm text-gray-300 leading-tight">
|
||||
<div className="text-sm leading-tight text-gray-300">
|
||||
{study.keyAchievement.metric}
|
||||
</div>
|
||||
</div>
|
||||
@@ -378,17 +378,17 @@ const IOSCaseStudies = () => {
|
||||
<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">
|
||||
<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="text-accent font-medium text-sm mb-2">
|
||||
<div className="mb-2 text-sm font-medium text-accent">
|
||||
{study.client}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-4">
|
||||
<p className="text-sm leading-relaxed text-muted-foreground line-clamp-4">
|
||||
{study.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -400,7 +400,7 @@ const IOSCaseStudies = () => {
|
||||
<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"
|
||||
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
@@ -416,7 +416,7 @@ const IOSCaseStudies = () => {
|
||||
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"
|
||||
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") {
|
||||
@@ -429,7 +429,7 @@ const IOSCaseStudies = () => {
|
||||
}}
|
||||
>
|
||||
<span>View Full Case Study</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -447,12 +447,12 @@ const IOSCaseStudies = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-16"
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<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"
|
||||
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" />
|
||||
@@ -501,18 +501,18 @@ const IOSProcessTimeline = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 mb-20"
|
||||
className="mb-20 text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||||
Our Proven Approach to Building Your iOS App
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
<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>
|
||||
@@ -541,26 +541,26 @@ const IOSProcessTimeline = () => {
|
||||
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">
|
||||
<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="text-2xl font-semibold text-white mb-4">
|
||||
<h3 className="mb-4 text-2xl font-semibold text-white">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
<p className="leading-relaxed text-gray-300">
|
||||
{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="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>
|
||||
@@ -616,18 +616,18 @@ const IOSServicesGrid = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 mb-20"
|
||||
className="mb-20 text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
||||
Comprehensive iOS App Solutions
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
<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>
|
||||
@@ -638,7 +638,7 @@ const IOSServicesGrid = () => {
|
||||
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"
|
||||
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{services.map((service, index) => {
|
||||
const IconComponent = service.icon;
|
||||
@@ -652,15 +652,15 @@ const IOSServicesGrid = () => {
|
||||
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">
|
||||
<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="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
||||
<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="text-xl font-semibold text-foreground mb-4">
|
||||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
<p className="leading-relaxed text-muted-foreground">
|
||||
{service.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
@@ -714,24 +714,24 @@ const IOSTechStack = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 mb-20"
|
||||
className="mb-20 text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
<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 text-gray-300 leading-relaxed">
|
||||
<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 grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<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}
|
||||
@@ -742,14 +742,14 @@ const IOSTechStack = () => {
|
||||
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">
|
||||
<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="w-12 h-12 object-contain"
|
||||
className="object-contain w-12 h-12"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
|
||||
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
|
||||
{tech.name}
|
||||
</span>
|
||||
</motion.div>
|
||||
@@ -797,18 +797,18 @@ const IOSKeyBenefits = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 mb-16"
|
||||
className="mb-16 text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
||||
Why Choose Native iOS for Your App?
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
<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>
|
||||
@@ -819,7 +819,7 @@ const IOSKeyBenefits = () => {
|
||||
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"
|
||||
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;
|
||||
@@ -833,15 +833,15 @@ const IOSKeyBenefits = () => {
|
||||
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">
|
||||
<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="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<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="text-xl font-semibold text-foreground mb-4">
|
||||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
<p className="leading-relaxed text-muted-foreground">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
@@ -857,7 +857,7 @@ const IOSKeyBenefits = () => {
|
||||
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"
|
||||
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;
|
||||
@@ -871,15 +871,15 @@ const IOSKeyBenefits = () => {
|
||||
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">
|
||||
<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="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<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="text-xl font-semibold text-foreground mb-4">
|
||||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
<p className="leading-relaxed text-muted-foreground">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
@@ -926,18 +926,18 @@ const IOSTechnologies = () => {
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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 mb-20"
|
||||
className="mb-20 text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||||
iOS Development Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
||||
<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>
|
||||
@@ -948,7 +948,7 @@ const IOSTechnologies = () => {
|
||||
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"
|
||||
className="grid max-w-6xl gap-12 mx-auto lg:grid-cols-2"
|
||||
>
|
||||
{technologies.map((tech, index) => {
|
||||
const IconComponent = tech.icon;
|
||||
@@ -962,18 +962,18 @@ const IOSTechnologies = () => {
|
||||
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">
|
||||
<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="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
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="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<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>
|
||||
@@ -981,16 +981,16 @@ const IOSTechnologies = () => {
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="p-8">
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||||
<h3 className="mb-4 text-2xl font-semibold text-white">
|
||||
{tech.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<p className="mb-6 leading-relaxed text-gray-300">
|
||||
{tech.description}
|
||||
</p>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-white mb-3">
|
||||
<h4 className="mb-3 text-sm font-medium text-white">
|
||||
Key Features:
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
@@ -999,7 +999,7 @@ const IOSTechnologies = () => {
|
||||
key={idx}
|
||||
className="flex items-center gap-2 text-sm text-gray-300"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
<CheckCircle className="flex-shrink-0 w-4 h-4 text-accent" />
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -1021,7 +1021,7 @@ const IOSTechnologies = () => {
|
||||
export const IOSAppDevelopment = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<div className="min-h-screen dark">
|
||||
{/* <Navigation /> */}
|
||||
|
||||
<section className="bg-black">
|
||||
@@ -1082,7 +1082,7 @@ export const IOSAppDevelopment = () => {
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="container px-6 mx-auto lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -1090,27 +1090,27 @@ export const IOSAppDevelopment = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
|
||||
Ready to Build Your Next iOS App?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
|
||||
<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 sm:flex-row gap-6 justify-center">
|
||||
<div className="flex flex-col justify-center gap-6 sm:flex-row">
|
||||
<ShimmerButton
|
||||
className="text-lg px-8 py-4 h-auto"
|
||||
className="h-auto px-8 py-4 text-lg"
|
||||
onClick={() => navigate("/start-a-project")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Apple className="w-5 h-5 flex-shrink-0" />
|
||||
<Apple className="flex-shrink-0 w-5 h-5" />
|
||||
<span>Start Your iOS Project</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user