fix case study in mobile dev

components/GlobalOffices.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Phone, Mail } from "lucide-react";
+import { motion } from "framer-motion";
+
+const offices = [
+  {
+    region: "Asia Pacific",
+    address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
+  },
+  {
+    region: "America",
+    address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
+  },
+  {
+    region: "Europe",
+    address: `2, Frederick Street, Kings Cross,\nLondon, WC1X 0ND, England, UK.\nCRN-14194669, UK`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
+  },
+  {
+    region: "Middle East",
+    address: `Perth, WA 6000`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
+  },
+];
+
+export default function GlobalOffices() {
+  return (
+      <section className="bg-wdi-grey text-white py-16 lg:px-8 container mx-auto">
+      {/* Section Heading */}
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
+      >
+        <span className="text-white">We serve customers </span>
+        <span className="text-[#E5195E]">globally</span>
+      </motion.h2>
+
+      {/* Office Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
+        {offices.map((office, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            viewport={{ once: true }}
+            className="group relative p-6 rounded-xl overflow-hidden min-h-[250px] flex flex-col justify-between backdrop-blur-sm border border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300"
+          >
+            {/* Background Image with Scale on Hover */}
+            <div
+              className="absolute inset-0 bg-cover bg-center opacity-20 transform transition-transform duration-500 group-hover:scale-105"
+              style={{ backgroundImage: `url(${office.image})` }}
+            ></div>
+
+            {/* Foreground Content */}
+            <div className="relative z-10 flex flex-col justify-between h-full">
+              {/* Top Content */}
+              <div>
+                <h3 className="text-2xl font-semibold text-[#E5195E] mb-2">
+                  {office.region}
+                </h3>
+                <p className="text-sm whitespace-pre-line leading-relaxed">
+                  {office.address}
+                </p>
+              </div>
+
+              {/* Bottom Contact Info */}
+              <div className="mt-4 space-y-2 text-sm">
+                <div className="flex items-center gap-2">
+                  <Phone size={16} />
+                  <span>(+91) 7700900039</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Mail size={16} />
+                  <span>ideas@wdipl.com</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

components/HireDeveloperSection.tsx

@@ -0,0 +1,126 @@
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { UserPlus, ArrowRight } from "lucide-react";
+import { navigateTo } from "@/App";
+import { ShimmerButton } from "./ui/shimmer-button";
+
+const HireDeveloperSection = ({
+  title,
+  description,
+  developerTypes,
+  buttonText,
+  buttonLink,
+}) => {
+  return (
+    <section className="py-32 bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
+            {title}
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+            {description}
+          </p>
+        </motion.div>
+
+        {/* Developer Cards */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"
+        >
+          {developerTypes.map((dev, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              whileHover={{ y: -8, scale: 1.02 }}
+              className="group cursor-pointer"
+            >
+              <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
+                <CardContent className="p-8">
+                  <div className="flex items-center gap-4 mb-6">
+                    <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
+                      {/* Sample SVG or icon can be customized */}
+                      <svg
+                        className="w-6 h-6 text-accent"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
+                        <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
+                      </svg>
+                    </div>
+                    <Badge
+                      variant="secondary"
+                      className="text-xs bg-accent/20 text-accent border-accent/30"
+                    >
+                      {dev.experience}
+                    </Badge>
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-foreground mb-4">
+                    {dev.title}
+                  </h3>
+
+                  <p className="text-muted-foreground text-sm mb-4">
+                    {dev.specialties}
+                  </p>
+
+                  <div className="flex flex-wrap gap-2">
+                    {dev.skills.map((skill) => (
+                      <Badge
+                        key={skill}
+                        variant="secondary"
+                        className="text-xs bg-white/10 text-foreground"
+                      >
+                        {skill}
+                      </Badge>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Call-to-action */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="flex flex-col sm:flex-row gap-4 justify-center"
+        >
+          <ShimmerButton className="px-8 py-4" onClick={() => navigateTo(buttonLink)}>
+            <div className="inline-flex items-center gap-2">
+              <UserPlus className="w-5 h-5 flex-shrink-0" />
+              <span>{buttonText}</span>
+            </div>
+          </ShimmerButton>
+          <Button
+            variant="outline"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
+          >
+            <span>Request Profiles</span>
+            <ArrowRight className="ml-2 w-4 h-4" />
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HireDeveloperSection;

components/InlineCTA.tsx

@@ -183,7 +183,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.7 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">15min</div>
+              <div className="text-2xl font-bold text-foreground">45min</div>
               <div className="text-sm text-muted-foreground">Quick Discovery Call</div>
             </motion.div>
             
@@ -193,7 +193,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.8 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">24hrs</div>
+              <div className="text-2xl font-bold text-foreground">48hrs</div>
               <div className="text-sm text-muted-foreground">Detailed Proposal</div>
             </motion.div>
             
@@ -203,7 +203,7 @@ export const InlineCTA = () => {
               transition={{ duration: 0.5, delay: 0.9 }}
               viewport={{ once: true }}
             >
-              <div className="text-2xl font-bold text-foreground">48hrs</div>
+              <div className="text-2xl font-bold text-foreground">72hrs</div>
               <div className="text-sm text-muted-foreground">Project Kickoff</div>
             </motion.div>
           </motion.div>

components/Navigation.tsx

@@ -470,7 +470,7 @@ const navigationData = {
   ],
   resources: [
     { text: "Blogs", icon: BookOpen, href: "/resources/blog" },
-    { text: "Case Studies", icon: FileText, href: "/case-studies" },
+    { text: "Portfolio", icon: FileText, href: "/case-studies" },
     {
       text: "Client Testimonials",
       icon: Star,

pages/AboutWDI.tsx

@@ -242,10 +242,10 @@ const WhyChooseWDISection = () => {
 // Our Impact in Numbers Section
 const ImpactNumbersSection = () => {
   const stats = [
-    { number: "500+", label: "Projects Delivered" },
+    { number: "200+", label: "Projects Delivered" },
-    { number: "150+", label: "Expert Professionals" },
+    { number: "100+", label: "Expert Professionals" },
-    { number: "50+", label: "Global Clients" },
+    { number: "500+", label: "Global Clients" },
-    { number: "6+", label: "Years of Excellence" }
+    { number: "24+", label: "Years of Excellence" }
   ];
 
   return (

pages/AndroidAppDevelopment.tsx

@@ -41,6 +41,9 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
 import androidVectorImage from "../src/images/android-vector.png";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import ranoutofImage from "../src/images/ranoutof.webp"
+import tradersCircuitImage from "../src/images/traders-circuit.webp";
+import prospertyImage from "../src/images/prosperty.webp";
 
 // Android Hero Section with Android device mockups and Android vector
 const AndroidHeroWithCTA = () => {
@@ -779,34 +782,34 @@ const AndroidTechStack = () => {
 const AndroidCaseStudies = () => {
   const caseStudies = [
     {
-      title: "E-Commerce Android App with Google Pay",
+      title: "Household Management Revolution",
-      client: "ShopNow",
+      client: "RanOutOf",
       description:
-        "Comprehensive shopping platform with Google services integration",
+        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
-      image:
+      image: ranoutofImage,
-        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
       results: "3M+ downloads",
-      gradient: "from-accent/20 to-accent/10",
+      gradient: "from-[#007F33]/20 to-[#007F33]/10",
+      buttonLink: "/projects/ranoutof", 
     },
     {
-      title: "Fitness Tracking Android App",
+      title: "Financial Trading Platform",
-      client: "FitAndroid Pro",
+      client: "Traders Circuit",
       description:
-        "Advanced fitness tracking with Google Fit integration and wearable support",
+        "Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
-      image:
+      image: tradersCircuitImage,
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
       results: "800K+ users",
       gradient: "from-blue-500/20 to-cyan-500/20",
+      buttonLink: "/projects/traderscircuit", 
     },
     {
-      title: "Business Productivity Android Suite",
+      title: "Real Estate Investment Platform",
-      client: "WorkFlow",
+      client: "Prosperty",
       description:
-        "Enterprise-grade productivity app with Google Workspace integration",
+        "Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
-      image:
+      image: prospertyImage,
-        "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop&auto=format",
       results: "1.5M+ downloads",
-      gradient: "from-purple-500/20 to-pink-500/20",
+      gradient: "from-[#a98453]/20 to-[#a98453]/10",
+      buttonLink: "/projects/prosperty", 
     },
   ];
 
@@ -872,7 +875,7 @@ const AndroidCaseStudies = () => {
                       </div>
                     </div>
 
-                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
+                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
                       {study.title}
                     </h3>
                   </div>
@@ -900,6 +903,7 @@ const AndroidCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
+                      onClick={() => navigateTo(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY

pages/CrossPlatformAppDevelopment.tsx

@@ -43,6 +43,9 @@ import {
 } from "../components/ui/tabs";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import ranoutofImage from "../src/images/ranoutof.webp"
+import seezunImage from "../src/images/seezun.webp";
+import regroupImage from "../src/images/regroup.webp";
 
 // Cross-Platform Hero Section
 const CrossPlatformHeroWithCTA = () => {
@@ -824,37 +827,34 @@ const CrossPlatformServices = () => {
 const CrossPlatformCaseStudies = () => {
   const caseStudies = [
     {
-      title: "FinTech Cross-Platform App with Flutter",
+      title: "Household Management Revolution",
-      client: "PayUnify",
+      client: "RanOutOf",
       description:
-        "Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
+        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
-      image:
+      image: ranoutofImage,
-        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+      results: "3M+ downloads",
-      results: "40% faster delivery",
+      gradient: "from-[#007F33]/20 to-[#007F33]/10",
-      gradient: "from-accent/20 to-accent/10",
+      buttonLink: "/projects/ranoutof",
-      framework: "Flutter",
     },
     {
-      title: "E-Learning Platform with React Native",
+      title: "E-commerce Platform Innovation",
-      client: "EduCross",
+      client: "Seezun",
       description:
-        "Educational platform serving millions of students across platforms with consistent UX",
+        "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
-      image:
+      image: seezunImage,
-        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
+      results: "800K+ users",
-      results: "2M+ students",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      framework: "React Native",
+      buttonLink: "/projects/seezun",
     },
     {
-      title: "Healthcare Management with Flutter",
+      title: "Social Networking Platform",
-      client: "MediSync",
+      client: "Regroup",
       description:
-        "Cross-platform healthcare app connecting patients and providers with real-time sync",
+        "Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
-      image:
+      image: regroupImage,
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      results: "1.5M+ downloads",
-      results: "60% cost savings",
+      gradient: "from-[#a98453]/20 to-[#a98453]/10",
-      gradient: "from-purple-500/20 to-pink-500/20",
+      buttonLink: "/projects/regroup",
-      framework: "Flutter",
     },
   ];
 
@@ -869,11 +869,11 @@ const CrossPlatformCaseStudies = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
-            Cross-Platform Apps That Deliver Unified Experiences
+            Android Apps That Define Industries
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Discover how businesses achieve greater reach and efficiency with
+            Discover how we've helped businesses succeed with powerful Android
-            our cross-platform solutions.
+            applications that leverage the platform's capabilities.
           </p>
         </motion.div>
 
@@ -899,30 +899,28 @@ const CrossPlatformCaseStudies = () => {
                   <div className="p-8 pb-6">
                     <div className="flex items-start gap-4 mb-6">
                       <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
-                        <GitMerge className="w-6 h-6 text-accent" />
+                        <svg
+                          className="w-6 h-6 text-accent"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                        >
+                          <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
+                        </svg>
                       </div>
                       <div className="flex-1">
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <div className="flex gap-2">
+                        <Badge
-                          <Badge
+                          variant="secondary"
-                            variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
-                            className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
-                          >
+                          {study.results}
-                            {study.results}
+                        </Badge>
-                          </Badge>
-                          <Badge
-                            variant="secondary"
-                            className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
-                          >
-                            {study.framework}
-                          </Badge>
-                        </div>
                       </div>
                     </div>
 
-                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
+                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
                       {study.title}
                     </h3>
                   </div>
@@ -950,6 +948,7 @@ const CrossPlatformCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
+                      onClick={() => navigateTo(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY

pages/HireFullStackDevelopers.tsx

@@ -24,7 +24,7 @@ export const HireFullStackDevelopers = () => {
   const expertise = [
     {
       category: "Frontend Technologies",
-      skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"],
+      skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js", "Next.js"],
     },
     {
       category: "Backend Technologies",

pages/NativeAppDevelopment.tsx

@@ -1,112 +1,46 @@
-import React, { useState } from "react";
+import { navigateTo } from "@/App";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
+  Apple,
+  ArrowRight,
+  Brush,
+  Bug,
+  Building,
+  Code,
+  Cpu,
+  Fingerprint,
+  Gamepad,
+  Gauge,
+  Layers,
+  Maximize,
+  MessageSquare,
+  Palette,
+  RefreshCcw,
+  Rocket,
+  Shield,
+  Smartphone,
+  Target,
+  TrendingUp,
+  UserPlus,
+  Zap
+} from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
+import { Navigation } from "../components/Navigation";
-import { Button } from "../components/ui/button";
-import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Badge } from "../components/ui/badge";
-import { Card, CardContent } from "../components/ui/card";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../components/ui/accordion";
-import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { Badge } from "../components/ui/badge";
-import {
+import { Button } from "../components/ui/button";
-  CheckCircle,
+import { Card, CardContent } from "../components/ui/card";
-  Smartphone,
+import { ShimmerButton } from "../components/ui/shimmer-button";
-  Tablet,
+import ranoutofImage from "../src/images/ranoutof.webp"
-  Watch,
+import seezunImage from "../src/images/seezun.webp";
-  Code,
+import regroupImage from "../src/images/regroup.webp";
-  Shield,
-  Zap,
-  Users,
-  Star,
-  ArrowRight,
-  ChevronRight,
-  Clock,
-  TrendingUp,
-  Database,
-  Globe,
-  Layers,
-  Target,
-  Layout,
-  Rocket,
-  Bug,
-  Brush,
-  Lock,
-  RefreshCcw,
-  ShieldCheck,
-  MessageSquare,
-  Heart,
-  GraduationCap,
-  ShoppingCart,
-  Truck,
-  Bolt,
-  Palette,
-  Tv,
-  DollarSign,
-  Stethoscope,
-  BookOpen,
-  Play,
-  Package,
-  Wifi,
-  Activity,
-  Map,
-  Network,
-  UserPlus,
-  Award,
-  Cpu,
-  Settings,
-  Sparkles,
-  Lightbulb,
-  Handshake,
-  Monitor,
-  Download,
-  Coffee,
-  Calendar,
-  Camera,
-  Music,
-  Gamepad2,
-  CreditCard,
-  Bell,
-  Mail,
-  Search,
-  Home,
-  MapPin,
-  Eye,
-  Github,
-  Slack,
-  Figma,
-  Chrome,
-  Zap as ZapIcon,
-  Video,
-  MessageCircle,
-  Brain,
-  Cog,
-  Layers3,
-  Hexagon,
-  Wallet,
-  CreditCard as PaymentIcon,
-  Users2,
-  Merge,
-  Share2,
-  Wrench,
-  BarChart3,
-  GitMerge,
-  Apple,
-  Gauge,
-  Maximize,
-  Fingerprint,
-  Gamepad,
-  Building,
-  Briefcase,
-  Microscope,
-} from "lucide-react";
-import { navigateTo } from "@/App";
-import { Helmet } from "react-helmet-async";
 
 // Native App Development Hero Section
 const NativeHeroWithCTA = () => {
@@ -896,42 +830,36 @@ const NativeProcess = () => {
 
 // Native Case Studies
 const NativeCaseStudies = () => {
-  const caseStudies = [
+   const caseStudies = [
     {
-      title: "High-Performance FinTech iOS App",
+      title: "Household Management Revolution",
-      client: "SecureBank Pro",
+      client: "RanOutOf",
       description:
-        "Native iOS banking app with advanced security features and real-time trading capabilities",
+        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
-      image:
+      image: ranoutofImage,
-        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+      results: "3M+ downloads",
-      results: "300% faster transactions",
+      gradient: "from-[#007F33]/20 to-[#007F33]/10",
-      gradient: "from-accent/20 to-accent/10",
+      buttonLink: "/projects/ranoutof", 
-      platform: "iOS Native",
-      benefits: "Biometric security, real-time data, smooth animations",
     },
     {
-      title: "Complex AR Android Solution",
+      title: "E-commerce Platform Innovation",
-      client: "ARchitect Pro",
+      client: "Seezun",
       description:
-        "Advanced AR application for architecture visualization with complex 3D rendering and spatial tracking",
+        "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
-      image:
+      image: seezunImage,
-        "https://images.unsplash.com/photo-1592478411213-6153e4ebc696?w=400&h=300&fit=crop&auto=format",
+      results: "800K+ users",
-      results: "Industry-leading AR performance",
+      gradient: "from-blue-500/20 to-cyan-500/20",
-      gradient: "from-purple-500/20 to-blue-500/20",
+      buttonLink: "/projects/seezun", 
-      platform: "Android Native",
-      benefits: "ARCore integration, hardware acceleration, precise tracking",
     },
     {
-      title: "Healthcare Compliance Platform",
+      title: "Social Networking Platform",
-      client: "MedSecure",
+      client: "Regroup",
       description:
-        "HIPAA-compliant healthcare platform with end-to-end encryption and native device integration",
+        "Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
-      image:
+      image: regroupImage,
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+      results: "1.5M+ downloads",
-      results: "100% compliance achieved",
+      gradient: "from-[#a98453]/20 to-[#a98453]/10",
-      gradient: "from-green-500/20 to-teal-500/20",
+      buttonLink: "/projects/regroup", 
-      platform: "Cross-Platform Native",
-      benefits: "Advanced security, device sensors, offline capability",
     },
   ];
 
@@ -946,11 +874,11 @@ const NativeCaseStudies = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
-            Impactful Native Apps We've Built
+            Android Apps That Define Industries
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Discover how native development delivered superior performance,
+            Discover how we've helped businesses succeed with powerful Android
-            security, and user experience for our clients.
+            applications that leverage the platform's capabilities.
           </p>
         </motion.div>
 
@@ -976,30 +904,28 @@ const NativeCaseStudies = () => {
                   <div className="p-8 pb-6">
                     <div className="flex items-start gap-4 mb-6">
                       <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
-                        <Gauge className="w-6 h-6 text-accent" />
+                        <svg
+                          className="w-6 h-6 text-accent"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                        >
+                          <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
+                        </svg>
                       </div>
                       <div className="flex-1">
                         <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <div className="flex gap-2 flex-wrap">
+                        <Badge
-                          <Badge
+                          variant="secondary"
-                            variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
-                            className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
-                          >
+                          {study.results}
-                            {study.results}
+                        </Badge>
-                          </Badge>
-                          <Badge
-                            variant="secondary"
-                            className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
-                          >
-                            {study.platform}
-                          </Badge>
-                        </div>
                       </div>
                     </div>
 
-                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
+                    <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
                       {study.title}
                     </h3>
                   </div>
@@ -1017,17 +943,9 @@ const NativeCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6">
-                    <p className="text-muted-foreground text-sm leading-relaxed mb-4">
+                    <p className="text-muted-foreground text-sm leading-relaxed">
                       {study.description}
                     </p>
-                    <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-foreground uppercase tracking-wider">
-                        Key Benefits:
-                      </h4>
-                      <p className="text-xs text-muted-foreground">
-                        {study.benefits}
-                      </p>
-                    </div>
                   </div>
 
                   <div className="p-8 pt-0 mt-auto">
@@ -1035,6 +953,7 @@ const NativeCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
+                      onClick={() => navigateTo(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY

pages/PWADevelopment.tsx

@@ -50,6 +50,7 @@ import tradersCircuitImage from "../src/images/traders-circuit.webp";
 import goodTimesImage from "../src/images/goodtimes.webp";
 import prospertyImage from "../src/images/prosperty.webp";
 import { Helmet } from "react-helmet-async";
+import HireDeveloperSection from "@/components/HireDeveloperSection";
 
 // PWA Hero Section
 const PWAHeroWithCTA = () => {
@@ -1402,6 +1403,34 @@ export const PWADevelopment = () => {
         <PWASuccessStories />
       </section>
 
+      <HireDeveloperSection
+        title="Augment Your Team with Top PWA Developers"
+        description="Build fast, installable, and offline-first Progressive Web Apps that feel like native mobile apps."
+        buttonText="Hire PWA Developers"
+        buttonLink="/start-a-project"
+        developerTypes={[
+          {
+            title: "Frontend PWA Developer",
+            experience: "4+ Years",
+            skills: ["React.js", "Next.js", "Service Workers", "Lighthouse"],
+            specialties: "Responsive UI, App-like Interactions",
+          },
+          {
+            title: "Backend for PWA",
+            experience: "5+ Years",
+            skills: ["Node.js", "Express", "MongoDB", "Firebase"],
+            specialties: "API Optimization, Offline Support",
+          },
+          {
+            title: "PWA Architect",
+            experience: "6+ Years",
+            skills: ["Workbox", "Webpack", "Web App Manifest", "CI/CD"],
+            specialties: "PWA Strategy, Cross-Browser Support",
+          },
+        ]}
+      />
+
+
       {/* Mid-Page CTA */}
       <section className="bg-background">
         <PWAInlineCTA />

pages/StartAProject.tsx

@@ -50,6 +50,7 @@ import {
   Headphones,
   Shield,
 } from "lucide-react";
+import GlobalOffices from "@/components/GlobalOffices";
 
 
 
@@ -1298,6 +1299,7 @@ export const StartAProject = () => {
       <WhyPartnerSection />
       <JoinWDISection />
       <ContactInfoSection />
+      <GlobalOffices />
       <Footer />
     </div>
   );

pages/WearableDeviceDevelopment.tsx

@@ -41,6 +41,7 @@ import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import HireDeveloperSection from "@/components/HireDeveloperSection";
 
 // Wearable & Device App Development Hero Section
 const WearableHeroWithCTA = () => {
@@ -711,14 +712,12 @@ const WearableProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                    } flex-col lg:gap-16 gap-8`}
-                  } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
-                      isEven ? "lg:text-right" : "lg:text-left"
+                      } text-center lg:text-left`}
-                    } text-center lg:text-left`}
                   >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1482,9 +1481,37 @@ export const WearableDeviceDevelopment = () => {
       </section>
 
       {/* Case Studies */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <WearableCaseStudies />
-      </section>
+      </section> */}
+
+      <HireDeveloperSection
+        title="Augment Your Team with Top Wearable App Developers"
+        description="Develop seamless, real-time apps for smartwatches and wearable devices tailored for fitness, healthcare, and lifestyle industries."
+        buttonText="Hire Wearable Developers"
+        buttonLink="/start-a-project"
+        developerTypes={[
+          {
+            title: "WearOS Developer",
+            experience: "4+ Years",
+            skills: ["Kotlin", "Jetpack Compose", "WearOS SDK", "Bluetooth LE"],
+            specialties: "Smartwatch UIs, Health Data Integration",
+          },
+          {
+            title: "watchOS Developer",
+            experience: "5+ Years",
+            skills: ["Swift", "WatchKit", "HealthKit", "Core Motion"],
+            specialties: "Apple Watch Integration, Fitness Tracking",
+          },
+          {
+            title: "Cross-Platform Wearable Developer",
+            experience: "6+ Years",
+            skills: ["Flutter", "React Native", "Firebase", "Sensor APIs"],
+            specialties: "Hybrid Wearable Apps, Real-Time Sync",
+          },
+        ]}
+      />
+
 
       {/* Mid-Page CTA */}
       <section className="bg-background">

pages/iOSAppDevelopment.tsx

@@ -8,10 +8,10 @@ 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";
 
 // High-quality iOS development images
-const swiftImage =
+
-  "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
 const swiftuiImage =
   "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
 
@@ -49,6 +49,7 @@ import { Button } from "@/components/ui/button";
 import { navigateTo } from "@/App";
 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 = () => {
@@ -671,7 +672,10 @@ const IOSServicesGrid = () => {
 // iOS Tech Stack
 const IOSTechStack = () => {
   const technologies = [
-    { name: "Swift", logo: swiftImage },
+    {
+      name: "Swift",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
+    },
     { name: "SwiftUI", logo: swiftuiImage },
     {
       name: "Xcode",
@@ -1034,6 +1038,34 @@ export const IOSAppDevelopment = () => {
         <IOSTechStack />
       </section>
 
+      <HireDeveloperSection
+        title="Augment Your Team with Top iOS App Developers"
+        description="Build sleek, high-performance iOS applications with our skilled Swift and Objective-C developers."
+        buttonText="Hire iOS Developers"
+        buttonLink="/start-a-project"
+        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>