From 14af1fda32aa960ecb38712abb3e20a2d4fcbd3b Mon Sep 17 00:00:00 2001
From: Tejas Patil <tejas.patil@wdimails.com>
Date: Fri, 10 Apr 2026 11:45:20 +0530
Subject: [PATCH] created pages android ios

---
 components/Footer.tsx            |   71 +-
 components/Navigation.tsx        |   27 +-
 pages/IOSAppDevelopmentIndia.tsx | 1141 +++++++++++++++++++++++++++++
 pages/IOSAppDevelopmentUK.tsx    | 1148 +++++++++++++++++++++++++++++
 pages/IOSAppDevelopmentUSA.tsx   | 1150 ++++++++++++++++++++++++++++++
 src/Router.tsx                   |   15 +
 6 files changed, 3510 insertions(+), 42 deletions(-)
 create mode 100644 pages/IOSAppDevelopmentIndia.tsx
 create mode 100644 pages/IOSAppDevelopmentUK.tsx
 create mode 100644 pages/IOSAppDevelopmentUSA.tsx

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 76b756f..c47e7e9 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -128,6 +128,32 @@ const footerNavigation = {
       url: "/dedicated-development-teams",
     },
   ],
+  NewColumn: [
+    {
+      label: "Android App Development India",
+      url: "/services/android-app-development-india",
+    },
+    {
+      label: "Android App Development UK",
+      url: "/services/android-app-development-uk",
+    },
+    {
+      label: "Android App Development USA",
+      url: "/services/android-app-development-usa",
+    },
+    {
+      label: "IOS App Development India",
+      url: "/services/ios-app-development-india",
+    },
+    {
+      label: "IOS App Development UK",
+      url: "/services/ios-app-development-uk",
+    },
+    {
+      label: "IOS App Development USA",
+      url: "/services/ios-app-development-usa",
+    },
+  ],
   Company: [
     {
       label: "About WDI",
@@ -187,7 +213,6 @@ const contactInfo = [
   },
 ];
 
-
 // FooterSection component with useNavigate inside
 const FooterSection = ({
   title,
@@ -208,14 +233,12 @@ const FooterSection = ({
       viewport={{ once: true }}
       className="space-y-4"
     >
-      <h4 className="font-semibold text-white text-lg">
-        {title}
-      </h4>
+      <h4 className="font-semibold text-white text-lg">{title}</h4>
       <ul className="space-y-3">
         {links.map((link) => (
           <li key={link.label}>
             <a
-              href={link.url || '#'}
+              href={link.url || "#"}
               onClick={(e) => {
                 e.preventDefault();
                 navigate(link.url);
@@ -268,9 +291,8 @@ const NewsletterSection = () => {
             Never Miss an Update
           </h3>
           <p className="text-[#CCCCCC] text-lg mb-8 max-w-2xl mx-auto">
-            Get the latest insights on digital product
-            development, AI trends, and startup success stories
-            delivered to your inbox.
+            Get the latest insights on digital product development, AI trends,
+            and startup success stories delivered to your inbox.
           </p>
 
           {isSubscribed ? (
@@ -281,19 +303,14 @@ const NewsletterSection = () => {
             >
               <div className="flex items-center justify-center gap-2 text-green-400">
                 <Mail className="w-5 h-5" />
-                <span className="font-medium">
-                  Successfully subscribed!
-                </span>
+                <span className="font-medium">Successfully subscribed!</span>
               </div>
               <p className="text-green-300 text-sm mt-2">
                 Welcome to our community of innovators.
               </p>
             </motion.div>
           ) : (
-            <form
-              onSubmit={handleSubscribe}
-              className="max-w-md mx-auto"
-            >
+            <form onSubmit={handleSubscribe} className="max-w-md mx-auto">
               <div className="flex gap-3">
                 <Input
                   type="email"
@@ -308,14 +325,11 @@ const NewsletterSection = () => {
                   disabled={isSubmitting}
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-6 shrink-0 disabled:opacity-50"
                 >
-                  {isSubmitting
-                    ? "Subscribing..."
-                    : "Subscribe"}
+                  {isSubmitting ? "Subscribing..." : "Subscribe"}
                 </Button>
               </div>
               <p className="text-[#CCCCCC] text-xs mt-3">
-                No spam, unsubscribe at any time. We respect
-                your privacy.
+                No spam, unsubscribe at any time. We respect your privacy.
               </p>
             </form>
           )}
@@ -335,7 +349,7 @@ export const Footer = () => {
         <div className="relative z-10">
           {/* Main Footer Content */}
           <div className="container mx-auto px-6 lg:px-8 py-16">
-            <div className="grid lg:grid-cols-7 gap-12">
+            <div className="grid lg:grid-cols-8 gap-12">
               {/* Company Info */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -351,7 +365,9 @@ export const Footer = () => {
                 </div>
 
                 <p className="text-[#CCCCCC] leading-relaxed max-w-md">
-                  Website Developers India Pvt. Ltd. - Transforming ideas into scalable digital products. 25+ years of industry expertise, serving founders and CTOs across 15+ countries.
+                  Website Developers India Pvt. Ltd. - Transforming ideas into
+                  scalable digital products. 25+ years of industry expertise,
+                  serving founders and CTOs across 15+ countries.
                 </p>
 
                 {/* India Office Contact Information */}
@@ -367,7 +383,9 @@ export const Footer = () => {
                           key={contact.label}
                           href={contact.url}
                           target={contact.blank ? "_blank" : "_self"}
-                          rel={contact.blank ? "noopener noreferrer" : undefined}
+                          rel={
+                            contact.blank ? "noopener noreferrer" : undefined
+                          }
                           className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
                         >
                           <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
@@ -446,6 +464,11 @@ export const Footer = () => {
                 links={footerNavigation.HireTalent}
                 delay={0.7}
               />
+              <FooterSection
+                title="Countries we serve"
+                links={footerNavigation.NewColumn}
+                delay={0.8}
+              />
             </div>
           </div>
 
@@ -455,4 +478,4 @@ export const Footer = () => {
       </footer>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 7390b78..6ba654d 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -101,22 +101,12 @@ const navigationData = {
       href: "/services/mobile-app-development",
       sub_services: [
         { name: "iOS App Development", href: "/services/ios-app-development" },
+
         {
           name: "Android App Development",
           href: "/services/android-app-development",
         },
-        {
-          name: "Android App Development India",
-          href: "/services/android-app-development-india",
-        },
-           {
-          name: "Android App Development UK",
-          href: "/services/android-app-development-uk",
-        },
-        {
-          name: "Android App Development USA",
-          href: "/services/android-app-development-usa",
-        },
+
         {
           name: "Cross-Platform App Development",
           href: "/services/cross-platform-app-development",
@@ -478,7 +468,7 @@ const navigationData = {
       icon: BookOpen,
       href: "https://www.wdipl.com/blog",
       target: "_blank",
-      rel: "noopener noreferrer"
+      rel: "noopener noreferrer",
     },
     { text: "Portfolio", icon: FileText, href: "/case-studies" },
     {
@@ -925,7 +915,7 @@ export const Navigation = () => {
       cancelClose();
       openMenu(item);
     },
-    [cancelClose, openMenu]
+    [cancelClose, openMenu],
   );
 
   const handleNavItemMouseLeave = useCallback(() => {
@@ -942,7 +932,7 @@ export const Navigation = () => {
         closeMenu();
       }
     },
-    [closeMenu]
+    [closeMenu],
   );
 
   const handleNavMouseEnter = useCallback(() => {
@@ -1042,8 +1032,9 @@ export const Navigation = () => {
                   {item}
                   {hasDropdown(item) && (
                     <ChevronDown
-                      className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
-                        }`}
+                      className={`w-4 h-4 transition-transform duration-200 ${
+                        activeMenu === item ? "rotate-180" : ""
+                      }`}
                     />
                   )}
                 </a>
@@ -1146,4 +1137,4 @@ export const Navigation = () => {
       </AnimatePresence>
     </nav>
   );
-};
\ No newline at end of file
+};
diff --git a/pages/IOSAppDevelopmentIndia.tsx b/pages/IOSAppDevelopmentIndia.tsx
new file mode 100644
index 0000000..54d7ccd
--- /dev/null
+++ b/pages/IOSAppDevelopmentIndia.tsx
@@ -0,0 +1,1141 @@
+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 India | Build Scalable iOS Apps</title>
+        <meta
+          name="description"
+          content="Trusted iOS app development India company delivering scalable apps. 20+ years of experience and global clients."
+        />
+
+        {/* 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 India | Build Scalable iOS Apps"
+        />
+        <meta
+          property="og:description"
+          content="Trusted iOS app development India company delivering scalable apps. 20+ years of experience and global clients."
+        />
+        <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 India | Build Scalable iOS Apps"
+        />
+        <meta
+          name="twitter:description"
+          content="Trusted iOS app development India company delivering scalable apps. 20+ years of experience and global clients."
+        />
+        <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">
+                Get Expert iOS App Development Service in India
+              </h1>
+
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
+                We craft perceptive, high-performance applications for iPhone
+                and iPad that redefine user experience and navigate user
+                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 Show Proven Results
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            Explore how we have assisted businesses to achieve success with
+            remarkable iOS applications that leverage native iOS 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:
+        "In this stage, our expert iOS app developers in India will focus on understanding your vision, target audience, and core app functionality.",
+      icon: Lightbulb,
+    },
+    {
+      title: "UI/UX Design",
+      description:
+        "Thanks to our professional iOS developers, we can develop pixel-perfect designs by following Apple’s Human Interface Guidelines, which develop user experience.",
+      icon: Palette,
+    },
+    {
+      title: "Native iOS Development",
+      description:
+        "Your iOS app will be built using Swift and contemporary iOS frameworks for enhanced performance and smooth platform integration.",
+      icon: Code,
+    },
+    {
+      title: "Rigorous QA & Testing",
+      description:
+        "In this level of iOS app development in India, we conduct comprehensive testing across all iOS devices to ensure impeccable functionality.",
+      icon: Bug,
+    },
+    {
+      title: "App Store Launch & Support",
+      description:
+        "Finally, we help you to submit your iOS app to the App Store and offer optimization options. Furthermore, we are also committed to delivering ongoing maintenance and future updates of the app.",
+      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 Approach to iOS App Development in India
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
+            From the concept phase to launching on the App Store, we guide you
+            through every step of iOS App Development in India, which will help
+            you build your dream iOS app.
+          </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:
+        "While working on iOS app development in India, we provide customized solutions for particular business needs with native iOS performance.",
+      icon: Smartphone,
+    },
+    {
+      title: "iPad App Development",
+      description:
+        "Our specialist iOS app developers can deliver apps for iPads, too. With optimized layouts and features specifically designed for tablet experiences.",
+      icon: Tablet,
+    },
+    {
+      title: "iOS UI/UX Design",
+      description:
+        "The UI/UX design of iOS apps is developed by complying with the Human Interface Guidelines. This makes your business app look more appealing.",
+      icon: Brush,
+    },
+    {
+      title: "WatchOS and tvOS Apps",
+      description:
+        "We can also extend the presence of your indian business app by launching the app across Apple devices like WatchOS and tvOS with companion apps.",
+      icon: Watch,
+    },
+    {
+      title: "iOS App Modernization",
+      description:
+        "We also update the legacy iOS apps and help in delivering modern performances. The features and design standards are also maintained properly.",
+      icon: RefreshCcw,
+    },
+  ];
+
+  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 in India
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            At WDI, we deliver thorough iOS app development services for various
+            iOS devices, from iPhone apps to Apple ecosystem integration.
+          </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">
+            We use the Most Powerful iOS Technologies for iOS App Development in
+            India
+          </h2>
+          <p className="text-xl leading-relaxed text-gray-300">
+            We use advanced iOS frameworks and tools to create extraordinary
+            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:
+        "iOS apps are optimized for Apple hardware. Due to this, the user experience is fluid and highly responsive.",
+    },
+    {
+      icon: Shield,
+      title: "Enhanced Security",
+      description:
+        "Apple mobile devices are known for their robust security architecture. The devices have security features like Hardware Encryption and lockdown mode. Our expert iOS app developers in India leverage these security features to provide 360-degree data protection and user safety.",
+    },
+    {
+      icon: Heart,
+      title: "Premium User Experiences",
+      description:
+        "The Human Interface Guidelines are properly adhered to for the intuitive and accessible design of the iOS applications.",
+    },
+    {
+      icon: Network,
+      title: "Seamless Integration to Apple Ecosystem",
+      description:
+        "The iOS app developers in India focus on seamless integration of iOS apps with the Apple Watch, Apple Pay, Siri, and other ecosystem features.",
+    },
+    {
+      icon: DollarSign,
+      title: "Strong Monetization Potential",
+      description:
+        "The iOS user base in India is typically high value. Therefore, iOS app development in India enables 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 Opt for Native iOS for Your App?
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            iOS app development in India offers unique advantages for your
+            Indian business and creates premium mobile experiences for your
+            users.
+          </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 IOSAppDevelopmentIndia = () => {
+  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="Boost Your Team by Integrating Our iOS App Developers into it"
+        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">
+              Prepared to Develop Your Next iOS App?
+            </h2>
+            <p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
+              Want to invest in developing an iOS app for your business? Partner
+              with us as we have experts who excel at iOS app development for
+              the Indian sectors.
+            </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>
+  );
+};
diff --git a/pages/IOSAppDevelopmentUK.tsx b/pages/IOSAppDevelopmentUK.tsx
new file mode 100644
index 0000000..f173779
--- /dev/null
+++ b/pages/IOSAppDevelopmentUK.tsx
@@ -0,0 +1,1148 @@
+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 UK | Get a Free Consultation</title>
+        <meta
+          name="description"
+          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
+        />
+
+        {/* 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 UK | Get a Free Consultation
+"
+        />
+        <meta
+          property="og:description"
+          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
+        />
+        <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 UK | Get a Free Consultation"
+        />
+        <meta
+          name="twitter:description"
+          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
+        />
+        <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">
+                Access High-quality iOS App Development in the UK
+              </h1>
+
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
+                We build efficient and appealing iOS apps for iPhone and iPad,
+                redefining user experience and driving new engagement for your
+                business.
+              </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">
+            We Build iOS Apps That Bring Results
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            Explore how we have helped businesses succeed with remarkable 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:
+        "This is the discovery phase, where our expert team communicates with you regarding the vision and core functionalities of the app.",
+      icon: Lightbulb,
+    },
+    {
+      title: "UI/UX Design",
+      description:
+        "During the process of iOS app development for UK businesses, UI/UX design plays an important part. By following Apple’s Human Interface Guidelines, we create the best designs for your UK business app. This guarantees increased user experience.",
+      icon: Palette,
+    },
+    {
+      title: "Native iOS Development",
+      description:
+        "In this phase, our specialised developers in the UK build your app using advanced iOS frameworks like Swift and SwiftUI, which helps in maximising the performance and enables effortless integration.",
+      icon: Code,
+    },
+    {
+      title: "Meticulous QA & Testing",
+      description:
+        "QA is a critical process that directly impacts user retention, brand reputation, and App Store approval. Therefore, by conducting QA for your app, we ensure that the app meets all technical, functional, and design standards. Our qualified app testers also conduct intensive testing of the iOS app across different devices.",
+      icon: Bug,
+    },
+    {
+      title:
+        "Launching the iOS App in the App Store and Providing Necessary Support",
+      description:
+        "Finally, we also help you to submit the app to the App Store after proper optimisation. Furthermore, we offer proper maintenance of the app and support future updates of the app.",
+      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 Established Approach of iOS App Development for UK Businesses
+            Like You
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
+            The apps we develop show proven results. We help you to get the best
+            out of your iOS experience, from ideation of the app to launching it
+            in the App Store.
+          </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:
+        "At WDI, we are committed to delivering tailored iOS solutions as per the requirements of our clients. So, you, as the client, get a customised iPhone app for your UK business made by our expert iOS app developers.",
+      icon: Smartphone,
+    },
+    {
+      title: "iPad App Development",
+      description:
+        "We deliver optimised layouts and features that are particularly designed for optimising the tablet experiences.",
+      icon: Tablet,
+    },
+    {
+      title: "iOS UI/UX Design",
+      description:
+        "Our developers develop iOS apps by complying with Human Interface Guidelines, focusing on the standard designs. Therefore, the user interface of the application remains appealing and approachable, attracting more clients for your UK business.",
+      icon: Brush,
+    },
+    {
+      title: "Expanding Your App’s Presence in Companion Apps",
+      description:
+        "Our developers are effective enough to extend your business’s presence across Apple devices with companion apps such as WatchOS & tvOS Apps.",
+      icon: Watch,
+    },
+    {
+      title: "Modernisation of Legacy iOS Apps",
+      description:
+        "We also emphasise updating the legacy iOS apps, which elevates their performance, in-app specifications, and UI standards.",
+      icon: RefreshCcw,
+    },
+    {
+      title: "App Store Optimisation",
+      description:
+        "We make your app more discoverable in the App Store by increasing 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 for UK Businesses
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            From iPhone apps to smooth integration to the Apple ecosystem, we
+            deliver end-to-end iOS app development for UK businesses.
+          </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 use contemporary iOS frameworks and tools to develop exceptional
+            experiences for iPhone and other devices.
+          </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: "Delivering Unmatched Performance",
+      description:
+        "Our iOS App development in the UK focuses on hardware optimisation to ensure an uninterrupted user experience and lightning-fast device responsiveness.",
+    },
+    {
+      icon: Shield,
+      title: "Enhanced Security",
+      description:
+        "We develop your iOS app by leveraging the security features offered by Apple. Apple devices come with high-level security that covers both the software and hardware of the devices.",
+    },
+    {
+      icon: Heart,
+      title: "Offering Premium App Experience",
+      description:
+        "By adhering to Human Interface Guidelines, we deliver intuitive, appealing, and accessible design to the iOS apps.",
+    },
+    {
+      icon: Network,
+      title: "Seamless Integration in Apple Ecosystem",
+      description:
+        "One of the major advantages of developing iOS apps is it can be easily integrated with the Apple ecosystem. Apple uses vertical integration, where it focuses on both the hardware and software. This allows our expert developers to know exactly which processors, memory, and screen specifications their apps will run on and enable high-level optimisation.",
+    },
+    {
+      icon: DollarSign,
+      title: "Strong Monetisation Potential",
+      description:
+        "By developing an iOS app for your UK business, you can target the high-value user base of the UK with increased capability of making in-app purchases because of the premium positioning of the brand.",
+    },
+  ];
+
+  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 Opt for Native iOS for Your App?
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            Developing apps on the iOS platform offers unrivalled advantages for
+            your UK businesses looking to deliver a premium mobile experience to
+            their users. users.
+          </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 IOSAppDevelopmentUK = () => {
+  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="Incorporate Our Talented iOS App Developers in Your Team"
+        description="Develop sleek, high-performance iOS applications by integrating 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 Develop Your iOS App for Your UK Business?
+            </h2>
+            <p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
+              Hire from our expert pool of iOS developers to get exceptional iOS
+              apps that attract 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>
+  );
+};
diff --git a/pages/IOSAppDevelopmentUSA.tsx b/pages/IOSAppDevelopmentUSA.tsx
new file mode 100644
index 0000000..6653de7
--- /dev/null
+++ b/pages/IOSAppDevelopmentUSA.tsx
@@ -0,0 +1,1150 @@
+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 Developers USA | Hire Expert iPhone App Developers
+        </title>
+        <meta
+          name="description"
+          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
+        />
+
+        {/* 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 Developers USA | Hire Expert iPhone App Developers"
+        />
+        <meta
+          property="og:description"
+          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
+        />
+        <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 Developers USA | Hire Expert iPhone App Developers"
+        />
+        <meta
+          name="twitter:description"
+          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
+        />
+        <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">
+                Get Expert iOS App Developers in USA
+              </h1>
+
+              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
+                At WDI, we develop engaging, high-performance iPhone and iPad
+                applications for USA businesses that transform user experience
+                and bring more 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 Show Proven Results
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            Discover how we’ve helped businesses achieve success with
+            exceptional iOS applications that leverage native capabilities and
+            deliver outstanding user experience.
+          </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: "Ideating Strategy & Concept",
+      description:
+        "In this phase, we understand your vision regarding your iOS App. We discuss with you about the features that the app should have, the target audience, and key functionalities. Our seasoned iOS app developers in the USA offer expert consultations for it.",
+      icon: Lightbulb,
+    },
+    {
+      title: "Creating UI/UX Design",
+      description:
+        "Our developers focus on creating an engaging user interface design for your iOS app, following Apple’s Human Interface Guidelines. This contributes to an optimal user experience.",
+      icon: Palette,
+    },
+    {
+      title: "Developing Native iOS",
+      description:
+        "At WDI, our experts use all the latest iOS frameworks, such as Swift, to develop seamless functionality for the application. It helps in maximum performance and platform integrations.",
+      icon: Code,
+    },
+    {
+      title: "Ensuring QA & Testing",
+      description:
+        "Before launching the iOS app in the App Store, our specialized iOS app developers in USA run QA and testing to ensure that the application is running seamlessly. QA identifies performance bottlenecks in the applications. By proper testing, we ensure that the app is functioning correctly across different Apple devices of different screen sizes, resolutions, and software updates.",
+      icon: Bug,
+    },
+    {
+      title: "Launching the App in the App Store and Offering Support",
+      description:
+        "When your app performs brilliantly through testing, it is time to launch it in the App Store. Alongside guiding you to launch your application, we also provide support for ongoing maintenance for the app and provide future 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 Effective Approach to Building iOS Apps for Your USA Business
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
+            From developing the concept and understanding the features to
+            launching your iOS app in the App Store, we are here to 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:
+        "We deliver tailored solutions for your business’ specific needs in the USA, focusing on native iOS performance.",
+      icon: Smartphone,
+    },
+    {
+      title: "iPad App Development",
+      description:
+        "Our experienced iOS app developers in the USA focus on developing optimized layouts and features that are particularly designed for elevating the tablet experience.",
+      icon: Tablet,
+    },
+    {
+      title: "iOS UI/UX Design",
+      description:
+        "Our developers create engaging UI/UX design of the iOS apps, by being fully compliant with the Human Interface Guidelines.",
+      icon: Brush,
+    },
+    {
+      title: "WatchOS & tvOS Apps",
+      description:
+        "We develop companion apps that increase your USA business’ presence across Apple devices. Our experts use frameworks like SwiftUI to build shared views or quickly create native UIs for both WatchOS & tvOS.",
+      icon: Watch,
+    },
+    {
+      title: "Modernization of Old iOS Apps",
+      description:
+        "We work on updating the legacy iOS apps to enhance their performance, features, and design standards.",
+      icon: RefreshCcw,
+    },
+    {
+      title: "App Store Optimization",
+      description:
+        "We implement strategic ASO practices, which help in increasing discoverability and maximizing download rates.",
+      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 for Your USA Business
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            Our end-to-end iOS development service helps your business app to be
+            integrated seamlessly within the Apple Ecosystem.
+          </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">
+            We Develop iOS Apps Using the Most Advanced iOS Technologies
+          </h2>
+          <p className="text-xl leading-relaxed text-gray-300">
+            By utilizing cutting-edge iOS frameworks and tools, we deliver a
+            highly engaging mobile experience while creating your app for your
+            USA business.
+          </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: "Optimal Performance",
+      description:
+        "Our expert iOS app developers in the USA develop optimized iOS apps for Apple Hardware. This ensures smooth user experiences and makes the interface lightning-fast.",
+    },
+    {
+      icon: Shield,
+      title: "Superior Security",
+      description:
+        "We have leveraged the robust security features of Apple for comprehensive data protection and user privacy. Apple uses a privacy-focused architecture, which makes iOS apps secure for every type of business transaction and communication.",
+    },
+    {
+      icon: Heart,
+      title: "User Experiences That Feel Premium",
+      description:
+        "iOS apps have an uncluttered UI and are designed to be easy for anyone to use. Therefore, our iOS app developers in the USA are committed to creating delightful and accessible designs for your apps.",
+    },
+    {
+      icon: Network,
+      title: "Integration to Apple Ecosystem",
+      description:
+        "iOS apps integrate easily into the Apple ecosystem because Apple controls both hardware and software. This ensures a seamless, uniform functionality across different Apple devices like iPhone, Mac, and iPad.",
+    },
+    {
+      icon: DollarSign,
+      title: "Strong Monetization Potential",
+      description:
+        "By developing an iOS app, you will penetrate the market with a 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 Opt for Native iOS for Your App?
+          </h2>
+          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
+            There is nothing better than choosing Native iOS for developing your
+            business app because it offers unparalleled advantages for
+            businesses, delivering a premium mobile experience.
+          </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 IOSAppDevelopmentUSA = () => {
+  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="Incorporate Our Expert Pool of Talented iOS App Developers in Your Team"
+        description="Develop 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">
+              Want to Transform Business Dynamics by Developing an iOS App for
+              Your USA Business?
+            </h2>
+            <p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
+              Collaborate with us to develop exceptional iOS Applications that
+              captivate users and drive business success in the USA.
+            </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>
+  );
+};
diff --git a/src/Router.tsx b/src/Router.tsx
index bd40ab3..6ff11fe 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -33,6 +33,9 @@ import { EcommercePlatforms } from "../pages/EcommercePlatforms";
 import { EnterpriseSoftwareSolutions } from "../pages/EnterpriseSoftwareSolutions";
 import { GenAIIntegrationDigitalProducts } from "../pages/GenAIIntegrationDigitalProducts";
 import { IOSAppDevelopment } from "../pages/iOSAppDevelopment";
+import { IOSAppDevelopmentIndia } from "../pages/IOSAppDevelopmentIndia";
+import { IOSAppDevelopmentUK } from "../pages/IOSAppDevelopmentUK";
+import { IOSAppDevelopmentUSA } from "../pages/IOSAppDevelopmentUSA";
 import { MobileAppDevelopment } from "../pages/MobileAppDevelopment";
 import { NativeAppDevelopment } from "../pages/NativeAppDevelopment";
 import { NLPTextAnalytics } from "../pages/NLPTextAnalytics";
@@ -210,6 +213,18 @@ export const AppRouter = () => (
     <Route
       path="/services/ios-app-development"
       element={<IOSAppDevelopment />}
+    />
+     <Route
+      path="/services/ios-app-development-india"
+      element={<IOSAppDevelopmentIndia />}
+    />
+     <Route
+      path="/services/ios-app-development-uk"
+      element={<IOSAppDevelopmentUK />}
+    />
+     <Route
+      path="/services/ios-app-development-usa"
+      element={<IOSAppDevelopmentUSA />}
     />
     <Route
       path="/services/android-app-development"