fix case study in mobile dev

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 { 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 { Navigation } from "../components/Navigation";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../components/ui/accordion";
-import { ImageWithFallback } from "../components/figma/ImageWithFallback";
-import {
-  CheckCircle,
-  Smartphone,
-  Tablet,
-  Watch,
-  Code,
-  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";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+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 regroupImage from "../src/images/regroup.webp";
 
 // 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",
-      client: "SecureBank Pro",
+      title: "Household Management Revolution",
+      client: "RanOutOf",
       description:
-        "Native iOS banking app with advanced security features and real-time trading capabilities",
-      image:
-        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
-      results: "300% faster transactions",
-      gradient: "from-accent/20 to-accent/10",
-      platform: "iOS Native",
-      benefits: "Biometric security, real-time data, smooth animations",
+        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
+      image: ranoutofImage,
+      results: "3M+ downloads",
+      gradient: "from-[#007F33]/20 to-[#007F33]/10",
+      buttonLink: "/projects/ranoutof", 
     },
     {
-      title: "Complex AR Android Solution",
-      client: "ARchitect Pro",
+      title: "E-commerce Platform Innovation",
+      client: "Seezun",
       description:
-        "Advanced AR application for architecture visualization with complex 3D rendering and spatial tracking",
-      image:
-        "https://images.unsplash.com/photo-1592478411213-6153e4ebc696?w=400&h=300&fit=crop&auto=format",
-      results: "Industry-leading AR performance",
-      gradient: "from-purple-500/20 to-blue-500/20",
-      platform: "Android Native",
-      benefits: "ARCore integration, hardware acceleration, precise tracking",
+        "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
+      image: seezunImage,
+      results: "800K+ users",
+      gradient: "from-blue-500/20 to-cyan-500/20",
+      buttonLink: "/projects/seezun", 
     },
     {
-      title: "Healthcare Compliance Platform",
-      client: "MedSecure",
+      title: "Social Networking Platform",
+      client: "Regroup",
       description:
-        "HIPAA-compliant healthcare platform with end-to-end encryption and native device integration",
-      image:
-        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
-      results: "100% compliance achieved",
-      gradient: "from-green-500/20 to-teal-500/20",
-      platform: "Cross-Platform Native",
-      benefits: "Advanced security, device sensors, offline capability",
+        "Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
+      image: regroupImage,
+      results: "1.5M+ downloads",
+      gradient: "from-[#a98453]/20 to-[#a98453]/10",
+      buttonLink: "/projects/regroup", 
     },
   ];
 
@@ -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,
-            security, and user experience for our clients.
+            Discover how we've helped businesses succeed with powerful Android
+            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
-                            variant="secondary"
-                            className="text-xs bg-accent/20 text-accent border-accent/30"
-                          >
-                            {study.results}
-                          </Badge>
-                          <Badge
-                            variant="secondary"
-                            className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
-                          >
-                            {study.platform}
-                          </Badge>
-                        </div>
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
+                          {study.results}
+                        </Badge>
                       </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