remove button from start a project , pwa complete

components/HeroSection.tsx

@@ -5,23 +5,25 @@ import { navigateTo } from "../App";
 import { motion } from "framer-motion";
 import Spline from "@splinetool/react-spline";
 
-
 export function HeroSection() {
   return (
-    <section id="hero" className="relative lg:min-h-[85vh] flex items-center pt-20">
+    <section
+      id="hero"
+      className="relative lg:min-h-[85vh] flex items-center pt-20"
+    >
       <GridPattern />
-      
+
       <div className="container mx-auto px-6 lg:px-8">
         <div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full py-24 relative z-10">
           {/* Left Content */}
-          <motion.div 
+          <motion.div
             className="w-full lg:w-1/2"
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8 }}
           >
             {/* Animated Badge */}
-            <motion.div 
+            <motion.div
               className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
@@ -30,14 +32,18 @@ export function HeroSection() {
               <span
                 className="absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]"
                 style={{
-                  WebkitMask: "linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)",
+                  WebkitMask:
+                    "linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)",
                   WebkitMaskComposite: "destination-out",
                   maskComposite: "subtract",
                 }}
               />
               <span className="relative z-10 flex items-center text-sm font-medium">
                 🎉
-                <span aria-hidden="true" className="mx-2 h-4 w-px shrink-0 bg-neutral-500" />
+                <span
+                  aria-hidden="true"
+                  className="mx-2 h-4 w-px shrink-0 bg-neutral-500"
+                />
                 <span className="bg-clip-text text-transparent bg-[linear-gradient(90deg,#ffaa40_0%,#9c40ff_50%,#ffaa40_100%)] bg-[length:200%_100%] animate-[gradientMove_6s_ease_infinite]">
                   25+ Years Of Industry Expertise
                 </span>
@@ -47,12 +53,17 @@ export function HeroSection() {
                   stroke="currentColor"
                   viewBox="0 0 24 24"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </span>
             </motion.div>
 
-            <motion.h1 
+            <motion.h1
               className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
@@ -61,27 +72,37 @@ export function HeroSection() {
               Architecting Digital Success for Startups &amp; Enterprises
             </motion.h1>
 
-            <motion.p 
+            <motion.p
               className="mt-6 max-w-2xl text-lg text-gray-400"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.4 }}
             >
-              We design and build secure, AI-powered apps and software tailored for scale, speed, and user engagement.
+              We design and build secure, AI-powered apps and software tailored
+              for scale, speed, and user engagement.
             </motion.p>
 
-            <motion.div 
+            <motion.div
               className="mt-10 flex flex-col sm:flex-row gap-3"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.5 }}
             >
-              <Button size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/start-a-project')}>
+              <Button
+                size="lg"
+                className="whitespace-nowrap"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <Calendar className="w-4 h-4" />
                 Book a Free Consultation
               </Button>
-              
+
-              <Button variant="secondary" size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/services')}>
+              <Button
+                variant="secondary"
+                size="lg"
+                className="whitespace-nowrap"
+                onClick={() => navigateTo("/services")}
+              >
                 <Briefcase className="w-4 h-4" />
                 Explore Services
               </Button>
@@ -89,31 +110,40 @@ export function HeroSection() {
           </motion.div>
 
           {/* Right Side - Animated Gradient Background */}
-         <motion.div 
+          <motion.div
-  className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
+            className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
-  initial={{ opacity: 0, x: 50 }}
+            initial={{ opacity: 0, x: 50 }}
-  animate={{ opacity: 1, x: 0 }}
+            animate={{ opacity: 1, x: 0 }}
-  transition={{ duration: 0.8, delay: 0.2 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
->
+          >
-  <div className="w-full h-full overflow-hidden rounded-2xl">
+            <div className="w-full h-full overflow-hidden rounded-2xl">
-    <Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
+              <Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
-  </div>
+            </div>
-</motion.div>
+          </motion.div>
-
         </div>
 
         {/* Floating scroll indicator */}
-        <motion.div 
+        <motion.div
           className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 1.0 }}
         >
-          <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+            className="w-6 h-6 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 14l-7 7m0 0l-7-7m7 7V3"
+            />
           </svg>
         </motion.div>
       </div>
     </section>
   );
-}
+}

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 { Navigation } from "../components/Navigation";
-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 tradersCircuitImage from "../src/images/traders-circuit.webp";
-  Watch,
+import goodTimesImage from "../src/images/goodtimes.webp";
-  Code,
+import prospertyImage from "../src/images/prosperty.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,
-  WifiOff,
-  DownloadCloud,
-  Repeat,
-  Server,
-  PhoneCall,
-  MousePointer,
-  PlusCircle,
-  Code2,
-  Store,
-  FileText,
-  ShoppingBag,
-  Newspaper,
-  TicketIcon,
-  Lightbulb as IdeaIcon,
-  TrendingUp as GrowthIcon,
-  HelpCircle,
-  ArrowUpRight,
-} from "lucide-react";
 
 // PWA Hero Section
 const PWAHeroWithCTA = () => {
@@ -944,44 +873,77 @@ const PWATechStack = () => {
   );
 };
 
-// PWA Case Studies
+// PWA Case Studies Section - SUCCESS STORIES
-const PWACaseStudies = () => {
+const PWASuccessStories = () => {
   const caseStudies = [
     {
-      title: "eCommerce PWA Success",
+      id: 1,
-      client: "ShopFast",
+      title: "TradersCircuit",
-      description:
+      client: "TradersCircuit",
-        "Increased conversion rates by 40% with offline browsing and instant loading capabilities",
+      subtitle: "Investment Platform PWA with Real-Time Trading",
-      image:
+      industry: "FinTech",
-        "https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=400&h=300&fit=crop&auto=format",
+      services: ["PWA Development", "Real-Time Trading", "Service Workers", "Push Notifications"],
-      results: "40% higher conversions",
+      technologies: ["React", "Service Workers", "WebSocket", "Push API"],
-      gradient: "from-accent/20 to-accent/10",
+      image: tradersCircuitImage,
-      features: "Offline cart, Push notifications, Fast loading",
+      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",
+      id: 2,
-      client: "GlobalNews",
+      title: "Prosperty",
-      description:
+      client: "Prosperty Infra",
-        "Improved user engagement with offline reading and push notifications for breaking news",
+      subtitle: "Digital Real Estate PWA Platform",
-      image:
+      industry: "Real Estate",
-        "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&auto=format",
+      services: ["PWA Development", "Property Listings", "Offline Browsing", "Investment Tools"],
-      results: "60% more engagement",
+      technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
-      gradient: "from-blue-500/20 to-purple-500/20",
+      image: prospertyImage,
-      features: "Offline articles, Breaking news alerts, Fast navigation",
+      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",
+      id: 3,
-      client: "TicketHub",
+      title: "GoodTimes",
-      description:
+      client: "GoodTimes Ltd",
-        "Streamlined event booking process with offline ticket access and real-time updates",
+      subtitle: "Event Discovery & Booking PWA Platform",
-      image:
+      industry: "Events & Lifestyle",
-        "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400&h=300&fit=crop&auto=format",
+      services: ["PWA Development", "Event Booking", "Social Features", "Payment Integration"],
-      results: "25% faster booking",
+      technologies: ["Angular", "Service Workers", "Web Share API", "Payment Request"],
-      gradient: "from-green-500/20 to-teal-500/20",
+      image: goodTimesImage,
-      features: "Offline tickets, Real-time updates, Easy booking",
+      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
+            See how we've transformed businesses with PWA solutions that deliver exceptional user experiences, offline capabilities, and measurable results across industries.
-            various industries.
           </p>
         </motion.div>
-
+        
-        <motion.div
+        <div className="grid lg:grid-cols-3 gap-8">
-          initial={{ opacity: 0, y: 40 }}
+          {caseStudies.map((study, index) => {
-          whileInView={{ opacity: 1, y: 0 }}
+            const IndustryIcon = getIndustryIcon(study.industry);
-          transition={{ duration: 0.8, delay: 0.2 }}
+            return (
-          viewport={{ once: true }}
+              <motion.div
-          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+                key={study.id}
-        >
+                initial={{ opacity: 0, y: 30 }}
-          {caseStudies.map((study, index) => (
+                whileInView={{ opacity: 1, y: 0 }}
-            <motion.div
+                transition={{ duration: 0.6, delay: index * 0.1 }}
-              key={index}
+                viewport={{ once: true }}
-              initial={{ opacity: 0, y: 20 }}
+                whileHover={{ y: -5 }}
-              whileInView={{ opacity: 1, y: 0 }}
+                className="group cursor-pointer"
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+                onClick={() => {
-              viewport={{ once: true }}
+                  if (study.title === 'TradersCircuit') {
-              whileHover={{ y: -8, scale: 1.02 }}
+                    navigateTo('/projects/traderscircuit');
-              className="group cursor-pointer"
+                  } else if (study.title === 'Prosperty') {
-            >
+                    navigateTo('/projects/prosperty');
-              <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">
+                  } else if (study.title === 'GoodTimes') {
-                <CardContent className="p-0 flex flex-col h-full">
+                    navigateTo('/projects/goodtimes');
-                  <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" />
+                <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>
+                  <div className="aspect-video overflow-hidden relative bg-black/20">
-                      <div className="flex-1">
+                    <img 
-                        <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
+                      src={study.image} 
-                          {study.client}
+                      alt={study.title}
-                        </div>
+                      className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
-                        <Badge
+                    />
-                          variant="secondary"
+                  </div>
-                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                  
-                        >
+                  <CardContent className="p-6">
-                          {study.results}
+                    <div className="flex items-center gap-2 mb-3">
-                        </Badge>
+                      <IndustryIcon className="w-4 h-4 text-accent" />
-                      </div>
+                      <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>
+                    
-
+                    <p className="text-sm text-gray-400 mb-3">{study.client}</p>
-                  <div className="px-8 pb-6 flex-1">
+                    <p className="text-gray-300 mb-4 line-clamp-3 text-sm">{study.description}</p>
-                    <div
+                    
-                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    <div className="space-y-3 mb-4">
-                    >
+                      <div className="flex flex-wrap gap-1">
-                      <ImageWithFallback
+                        {study.services.slice(0, 3).map((service) => (
-                        src={study.image}
+                          <Badge key={service} variant="outline" className="border-gray-600 text-gray-300 text-xs">
-                        alt={study.title}
+                            {service}
-                        className="w-full h-48 object-cover rounded-lg shadow-lg"
+                          </Badge>
-                      />
+                        ))}
+                      </div>
                     </div>
-                  </div>
+                    
-
+                    <div className="space-y-2 mb-4">
-                  <div className="px-8 pb-6">
+                      {study.results.slice(0, 2).map((result, resultIndex) => (
-                    <p className="text-gray-300 text-sm leading-relaxed mb-4">
+                        <div key={resultIndex} className="flex items-center gap-2">
-                      {study.description}
+                          <TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
-                    </p>
+                          <p className="text-xs text-gray-400">{result}</p>
-                    <div className="space-y-2">
+                        </div>
-                      <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>
-                  </div>
+                    
-
+                    <div className="flex items-center justify-between pt-4 border-t border-gray-800">
-                  <div className="p-8 pt-0 mt-auto">
+                      <div className="flex items-center gap-3 text-xs text-gray-400">
-                    <Button
+                        <div className="flex items-center gap-1">
-                      variant="ghost"
+                          <Clock className="w-3 h-3" />
-                      size="sm"
+                          {study.duration}
-                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
+                        </div>
-                    >
+                        <div className="flex items-center gap-1">
-                      <span className="text-sm font-medium">
+                          <Users className="w-3 h-3" />
-                        VIEW CASE STUDY
+                          {study.teamSize}
-                      </span>
+                        </div>
-                      <ArrowRight className="w-4 h-4" />
+                      </div>
-                    </Button>
+                      <Button 
-                  </div>
+                        variant="ghost" 
-                </CardContent>
+                        size="sm" 
-              </Card>
+                        className="text-accent hover:bg-accent/10 p-0"
-            </motion.div>
+                        onClick={(e) => {
-          ))}
+                          e.stopPropagation();
-        </motion.div>
+                          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 */}

pages/StartAProject.tsx

@@ -92,7 +92,7 @@ const HeroSection = () => {
           </div>
 
           {/* Contact Options */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          {/* <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               variant="secondary"
               size="lg"
@@ -102,7 +102,7 @@ const HeroSection = () => {
               <Calendar className="w-5 h-5 mr-2" />
               <span>Book Appointment</span>
             </Button>
-          </div>
+          </div> */}
         </motion.div>
       </div>
     </section>