remove button from start a project , pwa complete

2025-07-17 17:45:38 +05:30
parent 03f5a58986
commit 04dcfa19c3
6 changed files with 268 additions and 259 deletions
--- a/pages/PWADevelopment.tsx
+++ b/pages/PWADevelopment.tsx
@@ -1,125 +1,54 @@
+import { navigateTo } from "@/App";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
+  ArrowRight,
+  Bell,
+  Briefcase,
+  Bug,
+  Building,
+  Calendar,
+  Clock,
+  Code,
+  DollarSign,
+  DownloadCloud,
+  Eye,
+  FileText,
+  Globe,
+  Layout,
+  Monitor,
+  Newspaper,
+  Palette,
+  PlusCircle,
+  Repeat,
+  Rocket,
+  Search,
+  Server,
+  Shield,
+  ShoppingBag,
+  Smartphone,
+  Target,
+  TrendingUp,
+  Users,
+  Wifi,
+  WifiOff,
+  Zap
+} from "lucide-react";
+import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
-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,
-  WifiOff,
-  DownloadCloud,
-  Repeat,
-  Server,
-  PhoneCall,
-  MousePointer,
-  PlusCircle,
-  Code2,
-  Store,
-  FileText,
-  ShoppingBag,
-  Newspaper,
-  TicketIcon,
-  Lightbulb as IdeaIcon,
-  TrendingUp as GrowthIcon,
-  HelpCircle,
-  ArrowUpRight,
-} from "lucide-react";
+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 tradersCircuitImage from "../src/images/traders-circuit.webp";
+import goodTimesImage from "../src/images/goodtimes.webp";
+import prospertyImage from "../src/images/prosperty.webp";

 // PWA Hero Section
 const PWAHeroWithCTA = () => {
@@ -944,44 +873,77 @@ const PWATechStack = () => {
  );
 };

-// PWA Case Studies
-const PWACaseStudies = () => {
+// PWA Case Studies Section - SUCCESS STORIES
+const PWASuccessStories = () => {
  const caseStudies = [
    {
-      title: "eCommerce PWA Success",
-      client: "ShopFast",
-      description:
-        "Increased conversion rates by 40% with offline browsing and instant loading capabilities",
-      image:
-        "https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=400&h=300&fit=crop&auto=format",
-      results: "40% higher conversions",
-      gradient: "from-accent/20 to-accent/10",
-      features: "Offline cart, Push notifications, Fast loading",
+      id: 1,
+      title: "TradersCircuit",
+      client: "TradersCircuit",
+      subtitle: "Investment Platform PWA with Real-Time Trading",
+      industry: "FinTech",
+      services: ["PWA Development", "Real-Time Trading", "Service Workers", "Push Notifications"],
+      technologies: ["React", "Service Workers", "WebSocket", "Push API"],
+      image: tradersCircuitImage,
+      results: [
+        "90% faster load times vs native",
+        "Offline trading capabilities",
+        "85% home screen installation rate",
+        "Real-time push notifications"
+      ],
+      description: "Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
+      duration: "8 months",
+      teamSize: "12 experts"
    },
    {
-      title: "News Platform PWA",
-      client: "GlobalNews",
-      description:
-        "Improved user engagement with offline reading and push notifications for breaking news",
-      image:
-        "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&auto=format",
-      results: "60% more engagement",
-      gradient: "from-blue-500/20 to-purple-500/20",
-      features: "Offline articles, Breaking news alerts, Fast navigation",
+      id: 2,
+      title: "Prosperty",
+      client: "Prosperty Infra",
+      subtitle: "Digital Real Estate PWA Platform",
+      industry: "Real Estate",
+      services: ["PWA Development", "Property Listings", "Offline Browsing", "Investment Tools"],
+      technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
+      image: prospertyImage,
+      results: [
+        "73% installation rate success",
+        "38% reduction in bounce rate",
+        "52% increase in property inquiries",
+        "Full offline property browsing"
+      ],
+      description: "Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
+      duration: "6 months",
+      teamSize: "10 experts"
    },
    {
-      title: "Event Ticketing PWA",
-      client: "TicketHub",
-      description:
-        "Streamlined event booking process with offline ticket access and real-time updates",
-      image:
-        "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400&h=300&fit=crop&auto=format",
-      results: "25% faster booking",
-      gradient: "from-green-500/20 to-teal-500/20",
-      features: "Offline tickets, Real-time updates, Easy booking",
-    },
+      id: 3,
+      title: "GoodTimes",
+      client: "GoodTimes Ltd",
+      subtitle: "Event Discovery & Booking PWA Platform",
+      industry: "Events & Lifestyle",
+      services: ["PWA Development", "Event Booking", "Social Features", "Payment Integration"],
+      technologies: ["Angular", "Service Workers", "Web Share API", "Payment Request"],
+      image: goodTimesImage,
+      results: [
+        "92% mobile user engagement",
+        "30-second booking process",
+        "67% increase in repeat users",
+        "Cross-platform compatibility"
+      ],
+      description: "Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
+      duration: "5 months",
+      teamSize: "9 experts"
+    }
  ];

+  const getIndustryIcon = (industry: string) => {
+    const icons = {
+      "FinTech": Building,
+      "Real Estate": Building,
+      "Events & Lifestyle": Calendar
+    };
+    return icons[industry as keyof typeof icons] || Building;
+  };
+
  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
@@ -992,98 +954,115 @@ const PWACaseStudies = () => {
          viewport={{ once: true }}
          className="text-center mb-20"
        >
-          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
+          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Successful Progressive Web Apps by WDI
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Discover how our PWA solutions have transformed businesses across
-            various industries.
+            See how we've transformed businesses with PWA solutions that deliver exceptional user experiences, offline capabilities, and measurable results across industries.
          </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 md:grid-cols-2 lg:grid-cols-3 gap-8"
-        >
-          {caseStudies.map((study, 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-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
-                <CardContent className="p-0 flex flex-col h-full">
-                  <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">
-                        <Globe className="w-6 h-6 text-accent" />
-                      </div>
-                      <div className="flex-1">
-                        <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
-                          {study.client}
-                        </div>
-                        <Badge
-                          variant="secondary"
-                          className="text-xs bg-accent/20 text-accent border-accent/30"
-                        >
-                          {study.results}
-                        </Badge>
-                      </div>
+        
+        <div className="grid lg:grid-cols-3 gap-8">
+          {caseStudies.map((study, index) => {
+            const IndustryIcon = getIndustryIcon(study.industry);
+            return (
+              <motion.div
+                key={study.id}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                whileHover={{ y: -5 }}
+                className="group cursor-pointer"
+                onClick={() => {
+                  if (study.title === 'TradersCircuit') {
+                    navigateTo('/projects/traderscircuit');
+                  } else if (study.title === 'Prosperty') {
+                    navigateTo('/projects/prosperty');
+                  } else if (study.title === 'GoodTimes') {
+                    navigateTo('/projects/goodtimes');
+                  }
+                }}
+              >
+                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
+                  <div className="aspect-video overflow-hidden relative bg-black/20">
+                    <img 
+                      src={study.image} 
+                      alt={study.title}
+                      className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
+                    />
+                  </div>
+                  
+                  <CardContent className="p-6">
+                    <div className="flex items-center gap-2 mb-3">
+                      <IndustryIcon className="w-4 h-4 text-accent" />
+                      <Badge variant="secondary" className="bg-accent/20 text-accent border-none">
+                        {study.industry}
+                      </Badge>
                    </div>
-
-                    <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
+                    
+                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors duration-300">
                      {study.title}
                    </h3>
-                  </div>
-
-                  <div className="px-8 pb-6 flex-1">
-                    <div
-                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
-                    >
-                      <ImageWithFallback
-                        src={study.image}
-                        alt={study.title}
-                        className="w-full h-48 object-cover rounded-lg shadow-lg"
-                      />
+                    
+                    <p className="text-sm text-gray-400 mb-3">{study.client}</p>
+                    <p className="text-gray-300 mb-4 line-clamp-3 text-sm">{study.description}</p>
+                    
+                    <div className="space-y-3 mb-4">
+                      <div className="flex flex-wrap gap-1">
+                        {study.services.slice(0, 3).map((service) => (
+                          <Badge key={service} variant="outline" className="border-gray-600 text-gray-300 text-xs">
+                            {service}
+                          </Badge>
+                        ))}
+                      </div>
                    </div>
-                  </div>
-
-                  <div className="px-8 pb-6">
-                    <p className="text-gray-300 text-sm leading-relaxed mb-4">
-                      {study.description}
-                    </p>
-                    <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                        Key Features:
-                      </h4>
-                      <p className="text-xs text-gray-400">{study.features}</p>
+                    
+                    <div className="space-y-2 mb-4">
+                      {study.results.slice(0, 2).map((result, resultIndex) => (
+                        <div key={resultIndex} className="flex items-center gap-2">
+                          <TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
+                          <p className="text-xs text-gray-400">{result}</p>
+                        </div>
+                      ))}
                    </div>
-                  </div>
-
-                  <div className="p-8 pt-0 mt-auto">
-                    <Button
-                      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"
-                    >
-                      <span className="text-sm font-medium">
-                        VIEW CASE STUDY
-                      </span>
-                      <ArrowRight className="w-4 h-4" />
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            </motion.div>
-          ))}
-        </motion.div>
+                    
+                    <div className="flex items-center justify-between pt-4 border-t border-gray-800">
+                      <div className="flex items-center gap-3 text-xs text-gray-400">
+                        <div className="flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          {study.duration}
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <Users className="w-3 h-3" />
+                          {study.teamSize}
+                        </div>
+                      </div>
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        className="text-accent hover:bg-accent/10 p-0"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (study.title === 'TradersCircuit') {
+                            navigateTo('/projects/traderscircuit');
+                          } else if (study.title === 'Prosperty') {
+                            navigateTo('/projects/prosperty');
+                          } else if (study.title === 'GoodTimes') {
+                            navigateTo('/projects/goodtimes');
+                          }
+                        }}
+                      >
+                        View Details
+                        <ArrowRight className="ml-1 w-3 h-3" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </div>
      </div>
    </section>
  );
@@ -1328,7 +1307,7 @@ export const PWADevelopment = () => {

      {/* Case Studies */}
      <section className="bg-card">
-        <PWACaseStudies />
+        <PWASuccessStories />
      </section>

      {/* Mid-Page CTA */}