almost all linking done exept underdevelopment pages or not developed

components/FeaturedCaseStudies.tsx

@@ -26,6 +26,13 @@ import {
   PartyPopper,
   PieChart
 } from "lucide-react";
+import ranoutofLocalImage from '../src/images/ranoutof.webp';
+import seezunLocalImage from '../src/images/seezun.webp';
+import simpletendLocalImage from '../src/images/simplitend.webp';
+import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
+import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
+import goodTimesLocalImage from '../src/images/goodtimes.webp';
+import prospertyLocalImage from '../src/images/prosperty.webp';
 
 const FeaturedCaseStudies = () => {
   const caseStudies = [
@@ -39,7 +46,7 @@ const FeaturedCaseStudies = () => {
         metric: "Care Coordination Efficiency",
         icon: Heart
       },
-      visual: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600&h=400&fit=crop&auto=format",
+      visual: simpletendLocalImage,
       tags: ["Mobile App", "Care Management", "Real-Time Alerts", "Scheduling"],
       gradient: "from-blue-500/20 to-cyan-500/20",
       accentColor: "blue",
@@ -55,7 +62,7 @@ const FeaturedCaseStudies = () => {
         metric: "Brand Recognition",
         icon: TrendingUp
       },
-      visual: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop&auto=format",
+      visual: seezunLocalImage,
       tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
       gradient: "from-purple-500/20 to-pink-500/20",
       accentColor: "purple",
@@ -71,7 +78,7 @@ const FeaturedCaseStudies = () => {
         metric: "User Retention",
         icon: Users
       },
-      visual: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=600&h=400&fit=crop&auto=format",
+      visual: wokasideawardLocalImage,
       tags: ["Native App", "Streaming", "Analytics", "Support"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -90,7 +97,7 @@ const FeaturedCaseStudies = () => {
         metric: "User Growth",
         icon: TrendingUp
       },
-      visual: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=600&h=400&fit=crop&auto=format",
+      visual: traderCircuitLocalImage,
       tags: ["FinTech", "Trading Platform", "Indian Market", "Mobile App"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -106,7 +113,7 @@ const FeaturedCaseStudies = () => {
         metric: "Shopping Efficiency",
         icon: ShoppingCart
       },
-      visual: "https://images.unsplash.com/photo-1542838132-92c53300491e?w=600&h=400&fit=crop&auto=format",
+      visual: ranoutofLocalImage,
       tags: ["Mobile App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
       gradient: "from-green-500/20 to-emerald-500/20",
       accentColor: "green",
@@ -122,7 +129,7 @@ const FeaturedCaseStudies = () => {
         metric: "Portfolio Options",
         icon: PieChart
       },
-      visual: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop&auto=format",
+      visual: prospertyLocalImage,
       tags: ["Real Estate", "Investment", "FinTech", "Portfolio"],
       gradient: "from-blue-500/20 to-cyan-500/20",
       accentColor: "blue",
@@ -138,7 +145,7 @@ const FeaturedCaseStudies = () => {
         metric: "Event Discovery",
         icon: PartyPopper
       },
-      visual: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=600&h=400&fit=crop&auto=format",
+      visual: goodTimesLocalImage,
       tags: ["Events", "Booking", "Lifestyle", "Mobile App"],
       gradient: "from-purple-500/20 to-pink-500/20",
       accentColor: "purple",

components/Footer.tsx

@@ -372,7 +372,7 @@ export const Footer = () => {
         <NewsletterSection />
 
         {/* Bottom Bar */}
-        <motion.div
+        {/* <motion.div
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.6, delay: 0.6 }}
@@ -419,7 +419,7 @@ export const Footer = () => {
               </div>
             </div>
           </div>
-        </motion.div>
+        </motion.div> */}
       </div>
     </footer>
   );

components/Navigation.tsx

@@ -469,7 +469,7 @@ const navigationData = {
     // { text: "Press & Media", icon: Newspaper, href: "/company/press-media" },
   ],
   resources: [
-    { text: "Articles", icon: BookOpen, href: "/resources/blog" },
+    { text: "Blogs", icon: BookOpen, href: "/resources/blog" },
     { text: "Case Studies", icon: FileText, href: "/case-studies" },
     {
       text: "Client Testimonials",

pages/AIStrategyConsulting.tsx

@@ -32,6 +32,7 @@ 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 { navigateTo } from "@/App";
 
 // AI Strategy & Consulting Hero Section
 const AIStrategyHeroWithCTA = () => {
@@ -72,7 +73,9 @@ const AIStrategyHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton className="text-lg px-8 py-4"
+              onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Brain className="w-5 h-5 flex-shrink-0" />
                   <span>Develop Your AI Strategy</span>
@@ -950,7 +953,9 @@ const AIStrategyInlineCTA = () => {
               Our AI consultants provide clarity and a strategic direction for your business.
             </p>
             
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+            onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Book a Free AI Strategy Call</span>
@@ -1214,7 +1219,9 @@ const AIStrategyFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+            onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your AI Strategy</span>

pages/AboutWDI.tsx

@@ -66,7 +66,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4 h-[56px]"
+                className="text-lg px-8 py-4 h-auto"
                 onClick={() => navigateTo('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
@@ -533,7 +533,8 @@ const InlineCTA = () => {
             <div className="flex flex-col sm:flex-row items-start gap-4">
               <ShimmerButton 
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact')}
+                // onClick={() => navigateTo('/contact')}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Mail className="w-6 h-6 flex-shrink-0" />

pages/AgriTechPlatforms.tsx

@@ -362,7 +362,8 @@ export const AgriTechPlatforms = () => {
         description="Empower farmers with data-driven insights and smart agriculture solutions that maximize yields, optimize resources, and promote sustainable farming practices."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View AgriTech Case Studies",

pages/AndroidAppDevelopment.tsx

@@ -1072,7 +1072,7 @@ const HireAndroidDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
+            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" />

pages/ArtificialIntelligenceServices.tsx

@@ -1,26 +1,29 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
-import { Footer } from "../components/Footer";
+  Bot,
-import { ProcessSection } from "../components/ProcessSection";
+  Brain,
-import { FAQSection } from "../components/FAQSection";
+  Calendar,
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
+  Cpu,
-import { Button } from "../components/ui/button";
+  Eye,
-import { ShimmerButton } from "../components/ui/shimmer-button";
+  Layers,
-import { Badge } from "../components/ui/badge";
+  Lightbulb,
-import { Card, CardContent } from "../components/ui/card";
+  MessageCircle,
-import { GridPattern } from "../components/GridPattern";
+  Rocket,
-import { navigateTo } from "../App";
+  Settings,
-import { 
+  Sparkles,
-  Bot, Brain, Zap, Target, Settings, Users, Star, 
+  TrendingUp,
-  ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers, 
+  UserPlus,
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
+  Zap,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
-  Cog, Sparkles, Handshake, Eye, Award, UserPlus, Cpu, Database, Server
 } from "lucide-react";
+import { navigateTo } from "../App";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+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";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Artificial Intelligence</span>
+              <span className="text-white/70 text-sm font-medium">
+                Artificial Intelligence
+              </span>
             </motion.div>
 
             {/* Main Heading - Left aligned, reduced font size */}
@@ -50,12 +55,14 @@ const HeroWithCTA = () => {
                 <span className="text-[#E5195E]">Innovation</span>
                 <span className="text-white"> for Modern Business</span>
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Transform your business with cutting-edge artificial intelligence solutions that drive automation, insights, and competitive advantage.
+                Transform your business with cutting-edge artificial
+                intelligence solutions that drive automation, insights, and
+                competitive advantage.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -63,7 +70,11 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>AI Strategy Consultation</span>
@@ -72,15 +83,15 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-auto"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigateTo("/case-studies")}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View AI Case Studies</span>
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with stats */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -95,23 +106,39 @@ const HeroWithCTA = () => {
               className="grid grid-cols-2 gap-8 text-center"
             >
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">100+</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">AI Models Deployed</div>
+                  100+
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  AI Models Deployed
+                </div>
               </div>
-              
+
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">Process Automation</div>
+                  85%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Process Automation
+                </div>
               </div>
-              
+
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">40%</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">Cost Reduction</div>
+                  40%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Cost Reduction
+                </div>
               </div>
-              
+
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">AI Operations</div>
+                  24/7
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  AI Operations
+                </div>
               </div>
             </motion.div>
           </motion.div>
@@ -125,11 +152,19 @@ const HeroWithCTA = () => {
 const HorizontalTagScroller = () => {
   const technologies = [
     { name: "Machine Learning", icon: Brain, color: "text-blue-400" },
-    { name: "Natural Language Processing", icon: MessageCircle, color: "text-green-400" },
+    {
+      name: "Natural Language Processing",
+      icon: MessageCircle,
+      color: "text-green-400",
+    },
     { name: "Computer Vision", icon: Eye, color: "text-purple-400" },
     { name: "Deep Learning", icon: Layers, color: "text-cyan-400" },
-    { name: "Predictive Analytics", icon: TrendingUp, color: "text-orange-400" },
+    {
-    { name: "AI Automation", icon: Bot, color: "text-yellow-400" }
+      name: "Predictive Analytics",
+      icon: TrendingUp,
+      color: "text-orange-400",
+    },
+    { name: "AI Automation", icon: Bot, color: "text-yellow-400" },
   ];
 
   return (
@@ -148,10 +183,11 @@ const HorizontalTagScroller = () => {
             <span className="text-white"> We Master</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Cutting-edge artificial intelligence technologies that power next-generation business solutions.
+            Cutting-edge artificial intelligence technologies that power
+            next-generation business solutions.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +197,7 @@ const HorizontalTagScroller = () => {
         >
           <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
           <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
-          
+
           <div className="flex animate-marquee hover:animate-marquee-paused">
             {/* First set */}
             {technologies.map((tech, index) => {
@@ -177,7 +213,9 @@ const HorizontalTagScroller = () => {
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -188,7 +226,7 @@ const HorizontalTagScroller = () => {
                 </motion.div>
               );
             })}
-            
+
             {/* Second and third sets for seamless loop */}
             {[...technologies, ...technologies].map((tech, index) => {
               const IconComponent = tech.icon;
@@ -197,13 +235,18 @@ const HorizontalTagScroller = () => {
                   key={`loop-${tech.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + technologies.length) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + technologies.length) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +270,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "expertise",
       title: "AI Expertise",
-      icon: Brain
+      icon: Brain,
     },
     {
-      id: "automation", 
+      id: "automation",
       title: "Process Automation",
-      icon: Bot
+      icon: Bot,
     },
     {
       id: "insights",
       title: "Data-Driven Insights",
-      icon: TrendingUp
+      icon: TrendingUp,
     },
     {
       id: "scalable",
       title: "Scalable Solutions",
-      icon: Zap
+      icon: Zap,
     },
     {
       id: "innovation",
       title: "Continuous Innovation",
-      icon: Lightbulb
+      icon: Lightbulb,
-    }
+    },
   ];
 
   return (
@@ -266,7 +309,7 @@ const SideBySideContentWithIcons = () => {
             <span className="text-[#E5195E]">WDI</span>
             <span className="text-white"> for AI Solutions</span>
           </h2>
-          
+
           <p className="text-xl text-gray-300 leading-relaxed">
             Leading AI innovation with proven results and expertise.
           </p>
@@ -297,7 +340,7 @@ const SideBySideContentWithIcons = () => {
                     <div className="mb-6">
                       <IconComponent className="w-10 h-10 text-accent mx-auto" />
                     </div>
-                    
+
                     <h3 className="text-lg font-semibold text-white leading-tight">
                       {advantage.title}
                     </h3>
@@ -318,39 +361,44 @@ const TabbedServiceDisplay = () => {
     {
       title: "AI Strategy & Consulting",
       icon: Lightbulb,
-      description: "Strategic AI roadmaps and implementation guidance for business transformation.",
+      description:
-      link: "/services/ai-strategy-consulting"
+        "Strategic AI roadmaps and implementation guidance for business transformation.",
+      link: "/services/ai-strategy-consulting",
     },
     {
-      title: "AI-Powered Automation & Workflows", 
+      title: "AI-Powered Automation & Workflows",
       icon: Bot,
-      description: "Intelligent automation solutions that streamline business processes.",
+      description:
-      link: "/services/ai-automation-workflows"
+        "Intelligent automation solutions that streamline business processes.",
+      link: "/services/ai-automation-workflows",
     },
     {
       title: "AI Integration into Digital Products",
       icon: Zap,
-      description: "Seamlessly integrate AI capabilities into existing digital products.",
+      description:
-      link: "/services/ai-integration-digital-products"
+        "Seamlessly integrate AI capabilities into existing digital products.",
+      link: "/services/ai-integration-digital-products",
     },
     {
       title: "Gen AI Integration",
       icon: Sparkles,
-      description: "Leverage generative AI for content creation and enhanced user experiences.",
+      description:
-      link: "/services/gen-ai-integration-digital-products"
+        "Leverage generative AI for content creation and enhanced user experiences.",
+      link: "/services/gen-ai-integration-digital-products",
     },
     {
       title: "AI Chatbots & Virtual Assistants",
       icon: MessageCircle,
-      description: "Intelligent conversational AI solutions for customer engagement.",
+      description:
-      link: "/services/ai-chatbots-virtual-assistants"
+        "Intelligent conversational AI solutions for customer engagement.",
+      link: "/services/ai-chatbots-virtual-assistants",
     },
     {
       title: "AI Model Deployment & MLOps",
       icon: Settings,
       description: "End-to-end ML operations for scalable AI model deployment.",
-      link: "/services/ai-model-deployment-mlops"
+      link: "/services/ai-model-deployment-mlops",
-    }
+    },
   ];
 
   return (
@@ -367,10 +415,11 @@ const TabbedServiceDisplay = () => {
             AI Services & Solutions
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
-            Comprehensive artificial intelligence services designed to transform your business operations and drive innovation.
+            Comprehensive artificial intelligence services designed to transform
+            your business operations and drive innovation.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +445,7 @@ const TabbedServiceDisplay = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     <div>
                       <h3 className="text-xl font-semibold text-white mb-4">
                         {service.title}
@@ -440,37 +489,42 @@ const InlineCTA = () => {
               <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                 <div className="flex items-center gap-2">
                   <Rocket className="w-4 h-4 text-[#E5195E]" />
-                  <span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
+                  <span className="text-[#E5195E] text-sm font-medium">
+                    Ready to Launch?
+                  </span>
                 </div>
               </div>
             </div>
-            
+
             {/* Main Heading */}
             <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
               <span className="text-white">Transform Your Business with </span>
               <span className="text-[#E5195E]">AI Innovation</span>
             </h2>
-            
+
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
-              Unlock the power of artificial intelligence to automate processes, gain insights, and drive competitive advantage.
+              Unlock the power of artificial intelligence to automate processes,
+              gain insights, and drive competitive advantage.
             </p>
-            
+
             {/* CTA Button */}
             <div className="flex flex-col items-start gap-4">
-              <ShimmerButton 
+              <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                // onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Bot className="w-6 h-6 flex-shrink-0" />
                   <span>Start Your AI Journey</span>
                 </div>
               </ShimmerButton>
-              
+
               {/* Small benefit text */}
               <p className="text-sm text-gray-400">
-                Strategy consultation • AI readiness assessment • Custom solution design
+                Strategy consultation • AI readiness assessment • Custom
+                solution design
               </p>
             </div>
           </motion.div>
@@ -489,15 +543,15 @@ const HireDevelopersSection = () => {
       skills: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
-      title: "ML Engineers", 
+      title: "ML Engineers",
       icon: Cpu,
       skills: ["Python", "R", "MLOps", "Data Pipeline"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Data Scientists",
@@ -505,7 +559,7 @@ const HireDevelopersSection = () => {
       skills: ["Statistics", "Analytics", "Visualization", "Research"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "AI Consultants",
@@ -513,8 +567,8 @@ const HireDevelopersSection = () => {
       skills: ["Strategy", "Implementation", "Training", "Support"],
       iconBg: "bg-orange-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
-    }
+    },
   ];
 
   return (
@@ -532,10 +586,11 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">AI Specialists</span>
           </h2>
           <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
-            Get access to expert AI professionals who build intelligent solutions that drive business transformation.
+            Get access to expert AI professionals who build intelligent
+            solutions that drive business transformation.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +615,12 @@ const HireDevelopersSection = () => {
                     {/* Header */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
-                        <div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
+                        <div
-                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
+                          className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
+                        >
+                          <IconComponent
+                            className={`w-6 h-6 ${specialist.iconColor}`}
+                          />
                         </div>
                         <div className="flex-1">
                           <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -569,26 +628,30 @@ const HireDevelopersSection = () => {
                           </div>
                         </div>
                       </div>
-                      
+
                       <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
                         {specialist.title}
                       </h3>
                     </div>
-                    
+
                     {/* Skills */}
                     <div className="px-8 pb-6 flex-1">
                       <div className="flex flex-wrap gap-2">
                         {specialist.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-white/10 text-foreground"
+                          >
                             {skill}
                           </Badge>
                         ))}
                       </div>
                     </div>
-                    
+
                     {/* CTA */}
                     <div className="p-8 pt-0 mt-auto space-y-3">
-                      <ShimmerButton 
+                      <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
                         onClick={() => navigateTo(specialist.link)}
                       >
@@ -613,24 +676,29 @@ const HireDevelopersSection = () => {
 const aiServicesFAQs = [
   {
     question: "What types of AI solutions can WDI develop?",
-    answer: "We develop a wide range of AI solutions including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs."
+    answer:
+      "We develop a wide range of AI solutions including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs.",
   },
   {
     question: "How do you ensure AI models are accurate and reliable?",
-    answer: "We follow rigorous testing methodologies, use cross-validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results."
+    answer:
+      "We follow rigorous testing methodologies, use cross-validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results.",
   },
   {
     question: "Can you integrate AI into our existing software systems?",
-    answer: "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack."
+    answer:
+      "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack.",
   },
   {
     question: "What is your approach to data privacy and AI ethics?",
-    answer: "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks."
+    answer:
+      "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks.",
   },
   {
     question: "How long does it take to develop and deploy an AI solution?",
-    answer: "Development timelines vary based on complexity, but typically range from 3-6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery."
+    answer:
-  }
+      "Development timelines vary based on complexity, but typically range from 3-6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery.",
+  },
 ];
 
 export function ArtificialIntelligenceServices() {
@@ -644,7 +712,7 @@ export function ArtificialIntelligenceServices() {
       <ProcessSection />
       <InlineCTA />
       <HireDevelopersSection />
-      <FAQSection 
+      <FAQSection
         title="AI Services Questions"
         subtitle="Get answers to common questions about our artificial intelligence services."
         faqs={aiServicesFAQs}
@@ -652,4 +720,4 @@ export function ArtificialIntelligenceServices() {
       <Footer />
     </div>
   );
-}
+}

pages/Blog.tsx

@@ -5,8 +5,21 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Input } from "../components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import {
-import { Search, Calendar, User, Tag, ArrowRight, BookOpen } from "lucide-react";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import {
+  Search,
+  Calendar,
+  User,
+  Tag,
+  ArrowRight,
+  BookOpen,
+} from "lucide-react";
 import { navigateTo } from "../App";
 
 export const Blog = () => {
@@ -16,12 +29,12 @@ export const Blog = () => {
 
   const categories = [
     "All Categories",
-    "Healthcare AI", 
+    "Healthcare AI",
     "Fintech",
     "Case Study",
     "Automation",
     "Tech Trends",
-    "How-to Guides"
+    "How-to Guides",
   ];
 
   const tags = [
@@ -33,133 +46,159 @@ export const Blog = () => {
     "System Architecture",
     "Business Automation",
     "Digital Transformation",
-    "Performance Optimization"
+    "Performance Optimization",
   ];
 
   const featuredPosts = [
     {
       id: "future-of-ai-healthcare",
-      title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
+      title:
-      excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
+        "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
+      excerpt:
+        "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
+      image:
+        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
       author: "Dr. Sarah Chen",
       date: "January 8, 2025",
       category: "Healthcare AI",
       tags: ["Artificial Intelligence", "Healthcare", "Digital Transformation"],
-      readTime: "12 min read"
+      readTime: "12 min read",
     },
     {
       id: "compliance-ready-systems-fintech",
       title: "Why Compliance-Ready Systems Are Crucial in Fintech Development",
-      excerpt: "Exploring the critical importance of building compliance into fintech systems from day one, ensuring regulatory adherence while maintaining innovation and user experience.",
+      excerpt:
-      image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop&auto=format",
+        "Exploring the critical importance of building compliance into fintech systems from day one, ensuring regulatory adherence while maintaining innovation and user experience.",
+      image:
+        "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop&auto=format",
       author: "Michael Rodriguez",
       date: "January 5, 2025",
       category: "Fintech",
       tags: ["Fintech", "Compliance", "Financial Services"],
-      readTime: "8 min read"
+      readTime: "8 min read",
     },
     {
       id: "legacy-system-scaling",
       title: "How WDI Scaled a Legacy System for 1 Million+ Users",
-      excerpt: "A detailed case study on modernizing and scaling legacy systems for massive user growth, overcoming technical debt while maintaining business continuity.",
+      excerpt:
-      image: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=600&fit=crop&auto=format",
+        "A detailed case study on modernizing and scaling legacy systems for massive user growth, overcoming technical debt while maintaining business continuity.",
+      image:
+        "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=600&fit=crop&auto=format",
       author: "Alex Thompson",
       date: "December 28, 2024",
       category: "Case Study",
       tags: ["System Architecture", "Performance Optimization", "DevOps"],
-      readTime: "15 min read"
+      readTime: "15 min read",
-    }
+    },
   ];
 
   const blogPosts = [
     {
       id: "automation-reshaping-business",
       title: "5 Ways Automation is Reshaping Business Operations",
-      excerpt: "Discover how intelligent automation is transforming modern business processes and operations, driving efficiency and creating new opportunities for growth.",
+      excerpt:
-      image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=400&fit=crop&auto=format",
+        "Discover how intelligent automation is transforming modern business processes and operations, driving efficiency and creating new opportunities for growth.",
+      image:
+        "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=400&fit=crop&auto=format",
       author: "Rachel Kim",
       date: "January 3, 2025",
       category: "Automation",
       tags: ["Business Automation", "Digital Transformation"],
-      readTime: "10 min read"
+      readTime: "10 min read",
     },
     {
       id: 5,
       title: "Mobile-First Design: Creating Exceptional User Experiences",
-      excerpt: "Why mobile-first design is crucial for modern applications and how to implement it effectively.",
+      excerpt:
-      image: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80",
+        "Why mobile-first design is crucial for modern applications and how to implement it effectively.",
+      image:
+        "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=600&q=80",
       author: "Emma Johnson",
       date: "December 8, 2024",
       category: "Tech Trends",
       tags: ["Mobile", "UI/UX", "Design"],
-      readTime: "5 min read"
+      readTime: "5 min read",
     },
     {
       id: 6,
-      title: "Cybersecurity in the Age of Remote Work: Protecting Your Digital Assets",
+      title:
-      excerpt: "Essential cybersecurity practices for protecting your business in an increasingly remote world.",
+        "Cybersecurity in the Age of Remote Work: Protecting Your Digital Assets",
-      image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80",
+      excerpt:
+        "Essential cybersecurity practices for protecting your business in an increasingly remote world.",
+      image:
+        "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=600&q=80",
       author: "James Wilson",
       date: "December 5, 2024",
       category: "Tech Trends",
       tags: ["Cybersecurity", "Remote Work"],
-      readTime: "7 min read"
+      readTime: "7 min read",
     },
     {
       id: 7,
-      title: "Complete Guide to Cloud Migration: Strategies, Challenges, and Solutions",
+      title:
-      excerpt: "A comprehensive guide to successfully migrating your infrastructure to the cloud with minimal disruption.",
+        "Complete Guide to Cloud Migration: Strategies, Challenges, and Solutions",
-      image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80",
+      excerpt:
+        "A comprehensive guide to successfully migrating your infrastructure to the cloud with minimal disruption.",
+      image:
+        "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80",
       author: "David Kumar",
       date: "November 30, 2024",
       category: "How-to Guides",
       tags: ["Cloud", "Digital Transformation"],
-      readTime: "10 min read"
+      readTime: "10 min read",
     },
     {
       id: 8,
-      title: "The Rise of Low-Code Development: Accelerating Digital Innovation",
+      title:
-      excerpt: "How low-code platforms are democratizing software development and accelerating digital transformation.",
+        "The Rise of Low-Code Development: Accelerating Digital Innovation",
-      image: "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&w=600&q=80",
+      excerpt:
+        "How low-code platforms are democratizing software development and accelerating digital transformation.",
+      image:
+        "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&w=600&q=80",
       author: "Lisa Thompson",
       date: "November 28, 2024",
       category: "Tech Trends",
       tags: ["Software Development", "Innovation"],
-      readTime: "6 min read"
+      readTime: "6 min read",
-    }
+    },
   ];
 
-  const filteredPosts = blogPosts.filter(post => {
+  const filteredPosts = blogPosts.filter((post) => {
-    const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    const matchesSearch =
-                         post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
+      post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    const matchesCategory = selectedCategory === "all" || post.category === selectedCategory;
+      post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesTag = selectedTag === "all" || post.tags.some(tag => tag === selectedTag);
+    const matchesCategory =
-    
+      selectedCategory === "all" || post.category === selectedCategory;
+    const matchesTag =
+      selectedTag === "all" || post.tags.some((tag) => tag === selectedTag);
+
     return matchesSearch && matchesCategory && matchesTag;
   });
 
   const handlePostClick = (post: any) => {
-    if (typeof post.id === 'string') {
+    if (typeof post.id === "string") {
       // Navigate to dedicated article page
       navigateTo(`/articles/${post.id}`);
     } else {
       // For placeholder posts, navigate to generic article detail
-      navigateTo('/articles/generic-article');
+      navigateTo("/articles/generic-article");
     }
   };
 
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-2 mb-6">
               <BookOpen className="w-6 h-6 text-[#E5195E]" />
-              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
+              <Badge
+                variant="outline"
+                className="border-[#E5195E]/20 text-[#E5195E]"
+              >
                 WDI Blog
               </Badge>
             </div>
@@ -167,7 +206,11 @@ export const Blog = () => {
               WDI Blog: Insights, Innovation & Industry Trends
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Welcome to the WDI Blog, your go-to source for the latest insights, expert opinions, and thought leadership in software development and digital transformation. We cover a range of topics from cutting-edge technologies to industry best practices, designed to inform, inspire, and empower your digital journey.
+              Welcome to the WDI Blog, your go-to source for the latest
+              insights, expert opinions, and thought leadership in software
+              development and digital transformation. We cover a range of topics
+              from cutting-edge technologies to industry best practices,
+              designed to inform, inspire, and empower your digital journey.
             </p>
           </div>
         </div>
@@ -188,15 +231,24 @@ export const Blog = () => {
                 />
               </div>
             </div>
-            
+
             <div className="flex gap-4">
-              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+              <Select
+                value={selectedCategory}
+                onValueChange={setSelectedCategory}
+              >
                 <SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
-                  <SelectValue placeholder="Select Category" className="text-white" />
+                  <SelectValue
+                    placeholder="Select Category"
+                    className="text-white"
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {categories.map((category) => (
-                    <SelectItem key={category} value={category === "All Categories" ? "all" : category}>
+                    <SelectItem
+                      key={category}
+                      value={category === "All Categories" ? "all" : category}
+                    >
                       {category}
                     </SelectItem>
                   ))}
@@ -205,11 +257,17 @@ export const Blog = () => {
 
               <Select value={selectedTag} onValueChange={setSelectedTag}>
                 <SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
-                  <SelectValue placeholder="Select Tag" className="text-white" />
+                  <SelectValue
+                    placeholder="Select Tag"
+                    className="text-white"
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {tags.map((tag) => (
-                    <SelectItem key={tag} value={tag === "All Tags" ? "all" : tag}>
+                    <SelectItem
+                      key={tag}
+                      value={tag === "All Tags" ? "all" : tag}
+                    >
                       {tag}
                     </SelectItem>
                   ))}
@@ -223,54 +281,69 @@ export const Blog = () => {
       {/* Featured Posts */}
       <section className="py-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
-          <h2 className="text-3xl font-bold text-white mb-12 text-center">Featured Articles</h2>
+          <h2 className="text-3xl font-bold text-white mb-12 text-center">
-          
+            Featured Blogs
+          </h2>
+
           <div className="grid lg:grid-cols-3 gap-8">
             {featuredPosts.map((post) => (
-              <Card 
+              <Card
-                key={post.id} 
+                key={post.id}
                 className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
                 onClick={() => handlePostClick(post)}
               >
                 <div className="aspect-video overflow-hidden">
-                  <img 
+                  <img
-                    src={post.image} 
+                    src={post.image}
                     alt={post.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 </div>
                 <CardContent className="p-6">
                   <div className="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-none">
+                    <Badge
+                      variant="secondary"
+                      className="bg-[#E5195E]/20 text-[#E5195E] border-none"
+                    >
                       {post.category}
                     </Badge>
-                    <span className="text-sm text-muted-foreground">{post.readTime}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {post.readTime}
+                    </span>
                   </div>
-                  
+
                   <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
                     {post.title}
                   </h3>
-                  
+
                   <p className="text-muted-foreground mb-4 line-clamp-3">
                     {post.excerpt}
                   </p>
-                  
+
                   <div className="flex flex-wrap gap-2 mb-4">
                     {post.tags.map((tag) => (
-                      <Badge key={tag} variant="outline" className="border-white/20 text-white/70 text-xs">
+                      <Badge
+                        key={tag}
+                        variant="outline"
+                        className="border-white/20 text-white/70 text-xs"
+                      >
                         {tag}
                       </Badge>
                     ))}
                   </div>
-                  
+
                   <div className="flex items-center justify-between pt-4 border-t border-white/10">
                     <div className="flex items-center gap-2">
                       <User className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.author}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.author}
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Calendar className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.date}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.date}
+                      </span>
                     </div>
                   </div>
                 </CardContent>
@@ -284,68 +357,84 @@ export const Blog = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="flex items-center justify-between mb-12">
-            <h2 className="text-3xl font-bold text-white">Latest Articles</h2>
+            <h2 className="text-3xl font-bold text-white">Latest Blogs</h2>
             <div className="text-sm text-muted-foreground">
-              {filteredPosts.length} article{filteredPosts.length !== 1 ? 's' : ''} found
+              {filteredPosts.length} article
+              {filteredPosts.length !== 1 ? "s" : ""} found
             </div>
           </div>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {filteredPosts.map((post) => (
-              <Card 
+              <Card
-                key={post.id} 
+                key={post.id}
                 className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden"
                 onClick={() => handlePostClick(post)}
               >
                 <div className="aspect-video overflow-hidden">
-                  <img 
+                  <img
-                    src={post.image} 
+                    src={post.image}
                     alt={post.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 </div>
                 <CardContent className="p-6">
                   <div className="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-none">
+                    <Badge
+                      variant="secondary"
+                      className="bg-[#E5195E]/20 text-[#E5195E] border-none"
+                    >
                       {post.category}
                     </Badge>
-                    <span className="text-sm text-muted-foreground">{post.readTime}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {post.readTime}
+                    </span>
                   </div>
-                  
+
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
                     {post.title}
                   </h3>
-                  
+
                   <p className="text-muted-foreground mb-4 line-clamp-3">
                     {post.excerpt}
                   </p>
-                  
+
                   <div className="flex flex-wrap gap-2 mb-4">
                     {post.tags.map((tag) => (
-                      <Badge key={tag} variant="outline" className="border-white/20 text-white/70 text-xs">
+                      <Badge
+                        key={tag}
+                        variant="outline"
+                        className="border-white/20 text-white/70 text-xs"
+                      >
                         {tag}
                       </Badge>
                     ))}
                   </div>
-                  
+
                   <div className="flex items-center justify-between pt-4 border-t border-white/10">
                     <div className="flex items-center gap-2">
                       <User className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.author}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.author}
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Calendar className="w-4 h-4 text-muted-foreground" />
-                      <span className="text-sm text-muted-foreground">{post.date}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {post.date}
+                      </span>
                     </div>
                   </div>
                 </CardContent>
               </Card>
             ))}
           </div>
-          
+
           {filteredPosts.length === 0 && (
             <div className="text-center py-12">
-              <p className="text-muted-foreground">No articles found matching your criteria.</p>
+              <p className="text-muted-foreground">
+                No articles found matching your criteria.
+              </p>
             </div>
           )}
         </div>
@@ -355,14 +444,17 @@ export const Blog = () => {
       <section className="py-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-2xl mx-auto text-center">
-            <h2 className="text-3xl font-bold text-white mb-4">Never Miss an Update</h2>
+            <h2 className="text-3xl font-bold text-white mb-4">
+              Never Miss an Update
+            </h2>
             <p className="text-muted-foreground mb-8">
-              Subscribe to our newsletter for the latest blog posts and insights directly to your inbox.
+              Subscribe to our newsletter for the latest blog posts and insights
+              directly to your inbox.
             </p>
-            
+
             <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
-              <Input 
+              <Input
-                type="email" 
+                type="email"
                 placeholder="Enter your email address"
                 className="flex-1 bg-card/50 border-white/10"
               />
@@ -382,22 +474,24 @@ export const Blog = () => {
               Ready to Transform Your Business?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Get insights from our experts and discover how we can help accelerate your digital transformation.
+              Get insights from our experts and discover how we can help
+              accelerate your digital transformation.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button 
+              <Button
-                size="lg" 
+                size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo('/resources/blog')}
+                onClick={() => navigateTo("/resources/blog")}
               >
                 Explore All Articles
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button 
+              <Button
-                size="lg" 
+                size="lg"
-                variant="outline" 
+                variant="outline"
                 className="border-white/20 text-white hover:bg-white/10"
-                onClick={() => navigateTo('/contact')}
+                // onClick={() => navigateTo('/contact')}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Contact Our Experts
               </Button>
@@ -409,4 +503,4 @@ export const Blog = () => {
       <Footer />
     </div>
   );
-};
+};

pages/ClientTestimonials.tsx

@@ -4,8 +4,25 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import {
-import { Star, Quote, Play, ArrowRight, Building2, Heart, ShoppingCart, GraduationCap, Users, Award } from "lucide-react";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import {
+  Star,
+  Quote,
+  Play,
+  ArrowRight,
+  Building2,
+  Heart,
+  ShoppingCart,
+  GraduationCap,
+  Users,
+  Award,
+} from "lucide-react";
 import { navigateTo } from "../App";
 
 export const ClientTestimonials = () => {
@@ -16,11 +33,11 @@ export const ClientTestimonials = () => {
     "All Industries",
     "Healthcare",
     "FinTech",
-    "E-commerce", 
+    "E-commerce",
     "Education",
     "Manufacturing",
     "Real Estate",
-    "Logistics"
+    "Logistics",
   ];
 
   const services = [
@@ -31,13 +48,14 @@ export const ClientTestimonials = () => {
     "Cloud Solutions",
     "UI/UX Design",
     "DevOps",
-    "Consulting"
+    "Consulting",
   ];
 
   const featuredTestimonials = [
     {
       id: 1,
-      quote: "WDI brought SimpliTend to life with precision. A complex MVP, flawlessly executed and beautifully designed.",
+      quote:
+        "WDI brought SimpliTend to life with precision. A complex MVP, flawlessly executed and beautifully designed.",
       client: "Sayeed Saachi",
       title: "Founder",
       company: "Simply Tend",
@@ -45,11 +63,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "SimpliTend",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 2,
-      quote: "WDI turned a complex, multi-layered vision into a streamlined digital product. A highly capable and responsive team.",
+      quote:
+        "WDI turned a complex, multi-layered vision into a streamlined digital product. A highly capable and responsive team.",
       client: "Aimee Zoho",
       title: "Founder",
       company: "Aimee Zhao",
@@ -57,11 +76,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Lean In World",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 3,
-      quote: "WDI guided us from hybrid frustration to native transformation. Rock-solid delivery, scalable systems, and impressive uptime.",
+      quote:
+        "WDI guided us from hybrid frustration to native transformation. Rock-solid delivery, scalable systems, and impressive uptime.",
       client: "Akarsh K Hebbar",
       title: "Founder",
       company: "WOKA Creations Pvt. Ltd",
@@ -69,11 +89,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "WOKA",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 4,
-      quote: "WDI executed our vision perfectly. The design, user flow, and admin controls are just what we needed.",
+      quote:
+        "WDI executed our vision perfectly. The design, user flow, and admin controls are just what we needed.",
       client: "Al Yusuf-Humaira",
       title: "Founder",
       company: "Safwan Yusuf Shaikh",
@@ -81,11 +102,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "SSA",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 5,
-      quote: "WDI delivered exactly what we needed—a scalable, secure, and smart RFQ engine.",
+      quote:
+        "WDI delivered exactly what we needed—a scalable, secure, and smart RFQ engine.",
       client: "Amol Kasar",
       title: "Manager",
       company: "Dorf Ketal",
@@ -93,11 +115,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Dorf Ketal",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 6,
-      quote: "WDI helped us modernize our digital presence quickly—professional, responsive, and pixel-perfect.",
+      quote:
+        "WDI helped us modernize our digital presence quickly—professional, responsive, and pixel-perfect.",
       client: "Anesh Kavle",
       title: "Founder",
       company: "Dayal Tours & Travel",
@@ -105,11 +128,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Dayal Tours & Travel",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 7,
-      quote: "WDI delivered beyond expectations. Their speed, structure, and collaborative energy made this complex platform a reality.",
+      quote:
+        "WDI delivered beyond expectations. Their speed, structure, and collaborative energy made this complex platform a reality.",
       client: "Edward",
       title: "Founder",
       company: "ReGroup Application Development",
@@ -117,11 +141,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "ReGroup",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 8,
-      quote: "WDI translated a complex financial vision into a user-friendly app. Their execution was on point.",
+      quote:
+        "WDI translated a complex financial vision into a user-friendly app. Their execution was on point.",
       client: "Faisal",
       title: "Founder",
       company: "Tanami Capital",
@@ -129,14 +154,15 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Tanami Capital",
-      hasVideo: false
+      hasVideo: false,
-    }
+    },
   ];
 
   const testimonials = [
     {
       id: 9,
-      quote: "WDI's CRM gave us an exhibition edge—OCR scanning changed the game.",
+      quote:
+        "WDI's CRM gave us an exhibition edge—OCR scanning changed the game.",
       client: "Hiten Dedhia",
       title: "Director",
       company: "Trixie Impex Pvt Ltd",
@@ -144,11 +170,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Exhibition CRM System",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 10,
-      quote: "WDI made fintech frictionless. From onboarding to investment, it flows like a smart conversation.",
+      quote:
+        "WDI made fintech frictionless. From onboarding to investment, it flows like a smart conversation.",
       client: "Rakesh Bunathar",
       title: "Founder",
       company: "SuperMoney Advisor Pvt Ltd",
@@ -156,11 +183,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "SuperMoney Advisor App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 11,
-      quote: "WDI helped us turn complex property cycles into an intuitive digital experience.",
+      quote:
+        "WDI helped us turn complex property cycles into an intuitive digital experience.",
       client: "Team Prosperty",
       title: "Team",
       company: "Prosperty Infra & Reality Pvt. Ltd",
@@ -168,11 +196,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Prosperty Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 12,
-      quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
+      quote:
+        "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
       client: "Mr. Oja Paul",
       title: "Founder",
       company: "Ojo Paul Enterprises",
@@ -180,11 +209,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Angel-Driven Marketplace Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 13,
-      quote: "WDI helped bring Moving Cargo to life—from vision to delivery, the process was smooth and professional.",
+      quote:
+        "WDI helped bring Moving Cargo to life—from vision to delivery, the process was smooth and professional.",
       client: "Mr Nicholas Shaak",
       title: "Founder",
       company: "Moving Cargo",
@@ -192,11 +222,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "Moving Cargo",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 14,
-      quote: "WDI transformed our leadership vision into a smart, scalable platform our teams love.",
+      quote:
+        "WDI transformed our leadership vision into a smart, scalable platform our teams love.",
       client: "KLC",
       title: "Team",
       company: "KLC",
@@ -204,11 +235,12 @@ export const ClientTestimonials = () => {
       service: "Web Development",
       rating: 5,
       projectType: "KLC Learning and Content Management Platform",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 15,
-      quote: "WDI delivered a full-stack health-tech solution with precision and transparency.",
+      quote:
+        "WDI delivered a full-stack health-tech solution with precision and transparency.",
       client: "Priyank Mehta",
       title: "Founder",
       company: "Get Set Fit",
@@ -216,11 +248,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "GSF Mobie App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 16,
-      quote: "WDI built more than an app—they engineered a habit-forming digital solution with beautiful UX and great scalability.",
+      quote:
+        "WDI built more than an app—they engineered a habit-forming digital solution with beautiful UX and great scalability.",
       client: "Rishabh Jain",
       title: "Founder",
       company: "RanOutOf",
@@ -228,11 +261,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Grocery List Mobile Application",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 17,
-      quote: "WDI built more than an app—they digitized our entire feed ecosystem.",
+      quote:
+        "WDI built more than an app—they digitized our entire feed ecosystem.",
       client: "Kevin",
       title: "Founder",
       company: "Farm Feeder",
@@ -240,11 +274,12 @@ export const ClientTestimonials = () => {
       service: "Mobile Development",
       rating: 5,
       projectType: "Farm Feeder App",
-      hasVideo: false
+      hasVideo: false,
     },
     {
       id: 18,
-      quote: "WDI didn't just deliver code—they delivered a digital transformation. Scalable, stable, and beautifully engineered.",
+      quote:
+        "WDI didn't just deliver code—they delivered a digital transformation. Scalable, stable, and beautifully engineered.",
       client: "Jay Ruparel",
       title: "Founder",
       company: "CityCards Global Pvt. Ltd",
@@ -253,11 +288,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Melbourne City Card",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 19,
-      quote: "WDI turned our idea into a highly usable mobile platform—sleek, stable, and scalable.",
+      quote:
+        "WDI turned our idea into a highly usable mobile platform—sleek, stable, and scalable.",
       client: "Shannon",
       title: "Founder",
       company: "Cheers to the Season LLC",
@@ -266,11 +302,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Cheers to the Season Mobile App Redesign",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 20,
-      quote: "WDI gave us a high-performance platform to blend financial learning with fun. Seamless and smart.",
+      quote:
+        "WDI gave us a high-performance platform to blend financial learning with fun. Seamless and smart.",
       client: "Ravi Sharma",
       title: "Founder",
       company: "Bulls Bears Edusys Pvt. Ltd",
@@ -279,11 +316,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Nifty Eleven Fantasy Trading App",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 21,
-      quote: "The new Amble App makes heritage immersive, intuitive, and scalable—exactly what we envisioned.",
+      quote:
+        "The new Amble App makes heritage immersive, intuitive, and scalable—exactly what we envisioned.",
       client: "RPG Foundation",
       title: "Team",
       company: "RPG Foundation",
@@ -292,11 +330,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Amble App - New Version",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 22,
-      quote: "WDI delivered a deeply integrated, future-ready system that cut our admin overheads drastically.",
+      quote:
+        "WDI delivered a deeply integrated, future-ready system that cut our admin overheads drastically.",
       client: "Ravi Bajaj",
       title: "Manager",
       company: "Cnergyis Infotech India Pvt. Ltd. (ZingHR) - Ravi Bajaj",
@@ -305,11 +344,12 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "Travel Portal",
       hasVideo: false,
-      featured: false
+      featured: false,
     },
     {
       id: 23,
-      quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
+      quote:
+        "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
       client: "Matt Weightman",
       title: "Founder",
       company: "MOT & Vehicle Management Portal",
@@ -318,28 +358,30 @@ export const ClientTestimonials = () => {
       rating: 5,
       projectType: "MOT & Vehicle Management Portal",
       hasVideo: false,
-      featured: false
+      featured: false,
-    }
+    },
   ];
 
   const allTestimonials = [...featuredTestimonials, ...testimonials];
 
-  const filteredTestimonials = allTestimonials.filter(testimonial => {
+  const filteredTestimonials = allTestimonials.filter((testimonial) => {
-    const matchesIndustry = selectedIndustry === "all" || testimonial.industry === selectedIndustry;
+    const matchesIndustry =
-    const matchesService = selectedService === "all" || testimonial.service === selectedService;
+      selectedIndustry === "all" || testimonial.industry === selectedIndustry;
-    
+    const matchesService =
+      selectedService === "all" || testimonial.service === selectedService;
+
     return matchesIndustry && matchesService;
   });
 
   const getIndustryIcon = (industry: string) => {
     const icons = {
-      "Healthcare": Heart,
+      Healthcare: Heart,
-      "FinTech": Building2,
+      FinTech: Building2,
       "E-commerce": ShoppingCart,
-      "Education": GraduationCap,
+      Education: GraduationCap,
-      "Manufacturing": Building2,
+      Manufacturing: Building2,
       "Real Estate": Building2,
-      "Logistics": Building2
+      Logistics: Building2,
     };
     return icons[industry as keyof typeof icons] || Building2;
   };
@@ -347,14 +389,17 @@ export const ClientTestimonials = () => {
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-2 mb-6">
               <Star className="w-6 h-6 text-[#E5195E]" />
-              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
+              <Badge
+                variant="outline"
+                className="border-[#E5195E]/20 text-[#E5195E]"
+              >
                 Client Testimonials
               </Badge>
             </div>
@@ -362,7 +407,11 @@ export const ClientTestimonials = () => {
               Client Testimonials: Our Clients' Success, Our Greatest Reward
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Nothing speaks louder than the words of our satisfied clients. At WDI, we're dedicated to building strong partnerships and delivering exceptional results. Read what our clients have to say about their experiences working with our dedicated teams and innovative solutions.
+              Nothing speaks louder than the words of our satisfied clients. At
+              WDI, we're dedicated to building strong partnerships and
+              delivering exceptional results. Read what our clients have to say
+              about their experiences working with our dedicated teams and
+              innovative solutions.
             </p>
           </div>
         </div>
@@ -404,13 +453,19 @@ export const ClientTestimonials = () => {
       <section className="py-8 bg-background border-y border-white/10">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="flex flex-col lg:flex-row gap-4 items-center justify-center">
-            <Select value={selectedIndustry} onValueChange={setSelectedIndustry}>
+            <Select
+              value={selectedIndustry}
+              onValueChange={setSelectedIndustry}
+            >
               <SelectTrigger className="w-48 bg-card/50 border-white/10 text-white">
                 <SelectValue placeholder="Industry" className="text-white" />
               </SelectTrigger>
               <SelectContent>
                 {industries.map((industry) => (
-                  <SelectItem key={industry} value={industry === "All Industries" ? "all" : industry}>
+                  <SelectItem
+                    key={industry}
+                    value={industry === "All Industries" ? "all" : industry}
+                  >
                     {industry}
                   </SelectItem>
                 ))}
@@ -423,124 +478,172 @@ export const ClientTestimonials = () => {
               </SelectTrigger>
               <SelectContent>
                 {services.map((service) => (
-                  <SelectItem key={service} value={service === "All Services" ? "all" : service}>
+                  <SelectItem
+                    key={service}
+                    value={service === "All Services" ? "all" : service}
+                  >
                     {service}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
-          
+
           <div className="text-center mt-4">
             <span className="text-sm text-muted-foreground">
-              {filteredTestimonials.length} testimonial{filteredTestimonials.length !== 1 ? 's' : ''} found
+              {filteredTestimonials.length} testimonial
+              {filteredTestimonials.length !== 1 ? "s" : ""} found
             </span>
           </div>
         </div>
       </section>
 
       {/* Featured Testimonials */}
-      {featuredTestimonials.some(t => filteredTestimonials.includes(t)) && (
+      {featuredTestimonials.some((t) => filteredTestimonials.includes(t)) && (
         <section className="py-16 bg-background">
           <div className="container mx-auto px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-white mb-12 text-center">Client Stories</h2>
+            <h2 className="text-3xl font-bold text-white mb-12 text-center">
-            
+              Client Stories
+            </h2>
+
             <div className="grid lg:grid-cols-3 gap-8">
-              {featuredTestimonials.filter(t => filteredTestimonials.includes(t)).map((testimonial) => {
+              {featuredTestimonials
-                const IndustryIcon = getIndustryIcon(testimonial.industry);
+                .filter((t) => filteredTestimonials.includes(t))
-                return (
+                .map((testimonial) => {
-                  <Card key={testimonial.id} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group relative overflow-hidden">
+                  const IndustryIcon = getIndustryIcon(testimonial.industry);
-                    <CardContent className="p-6">
+                  return (
-                      <div className="flex justify-center gap-1 mb-6">
+                    <Card
-                        {[...Array(testimonial.rating)].map((_, i) => (
+                      key={testimonial.id}
-                          <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group relative overflow-hidden"
-                        ))}
+                    >
-                      </div>
+                      <CardContent className="p-6">
-                      
+                        <div className="flex justify-center gap-1 mb-6">
-                      <div className="relative mb-6">
+                          {[...Array(testimonial.rating)].map((_, i) => (
-                        <Quote className="w-8 h-8 text-[#E5195E] absolute -top-2 -left-2" />
+                            <Star
-                        <blockquote className="text-muted-foreground leading-relaxed italic pl-6">
+                              key={i}
-                          "{testimonial.quote}"
+                              className="w-5 h-5 text-yellow-400 fill-current"
-                        </blockquote>
+                            />
-                      </div>
+                          ))}
-                      
-                      <div className="mb-4 pt-4 border-t border-white/10">
-                        <div className="space-y-2">
-                          <h4 className="text-white font-semibold">{testimonial.client}</h4>
-                          <p className="text-sm text-muted-foreground">{testimonial.title}</p>
-                          <p className="text-sm text-[#E5195E] font-medium">{testimonial.company}</p>
                         </div>
-                      </div>
+
-                      
+                        <div className="relative mb-6">
-                      <div className="flex items-center justify-between pt-4">
+                          <Quote className="w-8 h-8 text-[#E5195E] absolute -top-2 -left-2" />
-                        <div className="flex items-center gap-2">
+                          <blockquote className="text-muted-foreground leading-relaxed italic pl-6">
-                          <IndustryIcon className="w-4 h-4 text-[#E5195E]" />
+                            "{testimonial.quote}"
-                          <span className="text-sm text-muted-foreground font-medium">{testimonial.projectType}</span>
+                          </blockquote>
                         </div>
-                        {testimonial.hasVideo && (
+
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10">
+                        <div className="mb-4 pt-4 border-t border-white/10">
-                            <Play className="w-4 h-4 mr-1" />
+                          <div className="space-y-2">
-                            Watch Video
+                            <h4 className="text-white font-semibold">
-                          </Button>
+                              {testimonial.client}
-                        )}
+                            </h4>
-                      </div>
+                            <p className="text-sm text-muted-foreground">
-                    </CardContent>
+                              {testimonial.title}
-                  </Card>
+                            </p>
-                );
+                            <p className="text-sm text-[#E5195E] font-medium">
-              })}
+                              {testimonial.company}
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center justify-between pt-4">
+                          <div className="flex items-center gap-2">
+                            <IndustryIcon className="w-4 h-4 text-[#E5195E]" />
+                            <span className="text-sm text-muted-foreground font-medium">
+                              {testimonial.projectType}
+                            </span>
+                          </div>
+                          {testimonial.hasVideo && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10"
+                            >
+                              <Play className="w-4 h-4 mr-1" />
+                              Watch Video
+                            </Button>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
             </div>
           </div>
         </section>
       )}
 
       {/* Regular Testimonials */}
-      {testimonials.some(t => filteredTestimonials.includes(t)) && (
+      {testimonials.some((t) => filteredTestimonials.includes(t)) && (
         <section className="py-16 bg-card/50">
           <div className="container mx-auto px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-white mb-12 text-center">More Client Feedback</h2>
+            <h2 className="text-3xl font-bold text-white mb-12 text-center">
-            
+              More Client Feedback
+            </h2>
+
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {testimonials.filter(t => filteredTestimonials.includes(t)).map((testimonial) => {
+              {testimonials
-                const IndustryIcon = getIndustryIcon(testimonial.industry);
+                .filter((t) => filteredTestimonials.includes(t))
-                return (
+                .map((testimonial) => {
-                  <Card key={testimonial.id} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+                  const IndustryIcon = getIndustryIcon(testimonial.industry);
-                    <CardContent className="p-6">
+                  return (
-                      <div className="flex justify-center gap-1 mb-4">
+                    <Card
-                        {[...Array(testimonial.rating)].map((_, i) => (
+                      key={testimonial.id}
-                          <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />
+                      className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
-                        ))}
+                    >
-                      </div>
+                      <CardContent className="p-6">
-                      
+                        <div className="flex justify-center gap-1 mb-4">
-                      <div className="relative mb-4">
+                          {[...Array(testimonial.rating)].map((_, i) => (
-                        <Quote className="w-6 h-6 text-[#E5195E] absolute -top-1 -left-1" />
+                            <Star
-                        <blockquote className="text-muted-foreground text-sm leading-relaxed italic pl-4">
+                              key={i}
-                          "{testimonial.quote}"
+                              className="w-4 h-4 text-yellow-400 fill-current"
-                        </blockquote>
+                            />
-                      </div>
+                          ))}
-                      
-                      <div className="mb-3 pt-3 border-t border-white/10">
-                        <div className="space-y-1">
-                          <h4 className="text-white font-semibold text-sm">{testimonial.client}</h4>
-                          <p className="text-xs text-muted-foreground">{testimonial.title}</p>
-                          <p className="text-xs text-[#E5195E] font-medium">{testimonial.company}</p>
                         </div>
-                      </div>
+
-                      
+                        <div className="relative mb-4">
-                      <div className="flex items-center justify-between pt-3">
+                          <Quote className="w-6 h-6 text-[#E5195E] absolute -top-1 -left-1" />
-                        <div className="flex items-center gap-2">
+                          <blockquote className="text-muted-foreground text-sm leading-relaxed italic pl-4">
-                          <IndustryIcon className="w-3 h-3 text-[#E5195E]" />
+                            "{testimonial.quote}"
-                          <span className="text-xs text-muted-foreground font-medium">{testimonial.projectType}</span>
+                          </blockquote>
                         </div>
-                        {testimonial.hasVideo && (
+
-                          <Button variant="ghost" size="sm" className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1">
+                        <div className="mb-3 pt-3 border-t border-white/10">
-                            <Play className="w-3 h-3" />
+                          <div className="space-y-1">
-                          </Button>
+                            <h4 className="text-white font-semibold text-sm">
-                        )}
+                              {testimonial.client}
-                      </div>
+                            </h4>
-                    </CardContent>
+                            <p className="text-xs text-muted-foreground">
-                  </Card>
+                              {testimonial.title}
-                );
+                            </p>
-              })}
+                            <p className="text-xs text-[#E5195E] font-medium">
+                              {testimonial.company}
+                            </p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center justify-between pt-3">
+                          <div className="flex items-center gap-2">
+                            <IndustryIcon className="w-3 h-3 text-[#E5195E]" />
+                            <span className="text-xs text-muted-foreground font-medium">
+                              {testimonial.projectType}
+                            </span>
+                          </div>
+                          {testimonial.hasVideo && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-[#E5195E] hover:bg-[#E5195E]/10 p-1"
+                            >
+                              <Play className="w-3 h-3" />
+                            </Button>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
             </div>
           </div>
         </section>
@@ -551,9 +654,11 @@ export const ClientTestimonials = () => {
         <section className="py-16 bg-background">
           <div className="container mx-auto px-6 lg:px-8">
             <div className="text-center">
-              <p className="text-muted-foreground mb-4">No testimonials found matching your criteria.</p>
+              <p className="text-muted-foreground mb-4">
-              <Button 
+                No testimonials found matching your criteria.
-                variant="outline" 
+              </p>
+              <Button
+                variant="outline"
                 onClick={() => {
                   setSelectedIndustry("all");
                   setSelectedService("all");
@@ -575,14 +680,23 @@ export const ClientTestimonials = () => {
               Ready to Join Our Success Stories?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Become our next success story. Let's discuss how we can help you achieve exceptional results for your business.
+              Become our next success story. Let's discuss how we can help you
+              achieve exceptional results for your business.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Become Our Next Success Story
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Request a Reference
               </Button>
             </div>
@@ -593,4 +707,4 @@ export const ClientTestimonials = () => {
       <Footer />
     </div>
   );
-};
+};

pages/CrossPlatformAppDevelopment.tsx

@@ -1090,7 +1090,7 @@ const HireCrossPlatformDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
           >
             <span>View Talent Profiles</span>
             <ArrowRight className="ml-2 w-4 h-4" />

pages/CustomWebAppDevelopment.tsx

@@ -1142,7 +1142,7 @@ const HireWebDevelopers = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 h-[56px] border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />

pages/DedicatedDevelopmentTeams.tsx

@@ -4,127 +4,162 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Users, Eye, DollarSign, Zap, Target, Globe, Clock, Shield, CheckCircle, Star } from "lucide-react";
+import {
+  ArrowRight,
+  Users,
+  Eye,
+  DollarSign,
+  Zap,
+  Target,
+  Globe,
+  Clock,
+  Shield,
+  CheckCircle,
+  Star,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const DedicatedDevelopmentTeams = () => {
   const benefits = [
     {
       icon: Eye,
       title: "Full Control & Transparency",
-      description: "Maintain complete oversight of your team, processes, and project progress with direct communication channels."
+      description:
+        "Maintain complete oversight of your team, processes, and project progress with direct communication channels.",
     },
     {
       icon: Target,
       title: "Unwavering Focus",
-      description: "Your dedicated team works exclusively on your project, ensuring maximum commitment and deep understanding of your business goals."
+      description:
+        "Your dedicated team works exclusively on your project, ensuring maximum commitment and deep understanding of your business goals.",
     },
     {
       icon: DollarSign,
       title: "Cost-Effectiveness",
-      description: "Access top-tier talent without the overheads of in-house recruitment, infrastructure, and benefits."
+      description:
+        "Access top-tier talent without the overheads of in-house recruitment, infrastructure, and benefits.",
     },
     {
       icon: Zap,
       title: "Scalability & Flexibility",
-      description: "Easily scale your team up or down based on project demands, adapting quickly to market changes."
+      description:
+        "Easily scale your team up or down based on project demands, adapting quickly to market changes.",
     },
     {
       icon: Globe,
       title: "Access to Diverse Expertise",
-      description: "Leverage a wide pool of specialists in various technologies, frameworks, and methodologies."
+      description:
+        "Leverage a wide pool of specialists in various technologies, frameworks, and methodologies.",
     },
     {
       icon: Clock,
       title: "Reduced Time-to-Market",
-      description: "Accelerate development cycles with a cohesive and experienced team."
+      description:
-    }
+        "Accelerate development cycles with a cohesive and experienced team.",
+    },
   ];
 
   const process = [
     {
       step: "01",
       title: "Define Your Needs",
-      description: "We'll work closely with you to understand your project scope, technical requirements, desired team size, and skill sets."
+      description:
+        "We'll work closely with you to understand your project scope, technical requirements, desired team size, and skill sets.",
     },
     {
       step: "02",
       title: "Team Assembly",
-      description: "WDI recruits and assembles a bespoke team of developers, designers, and QA specialists tailored to your specific needs."
+      description:
+        "WDI recruits and assembles a bespoke team of developers, designers, and QA specialists tailored to your specific needs.",
     },
     {
       step: "03",
       title: "Seamless Integration",
-      description: "The dedicated team integrates with your existing workflows, communication tools, and project management systems."
+      description:
+        "The dedicated team integrates with your existing workflows, communication tools, and project management systems.",
     },
     {
       step: "04",
       title: "Ongoing Collaboration",
-      description: "Enjoy direct communication, regular updates, and continuous feedback loops with your team members."
+      description:
+        "Enjoy direct communication, regular updates, and continuous feedback loops with your team members.",
     },
     {
       step: "05",
       title: "Infrastructure & Support",
-      description: "We provide all necessary infrastructure, tools, and administrative support, allowing your team to focus purely on development."
+      description:
-    }
+        "We provide all necessary infrastructure, tools, and administrative support, allowing your team to focus purely on development.",
+    },
   ];
 
   const idealFor = [
     "Long-term projects with evolving requirements",
     "Companies seeking to expand their R&D capabilities",
     "Startups needing to build an entire product from scratch",
-    "Businesses looking for a stable, high-performance outsourced tech department"
+    "Businesses looking for a stable, high-performance outsourced tech department",
   ];
 
   const testimonials = [
     {
-      quote: "Our dedicated team from WDI has been instrumental in scaling our platform. They feel like true extensions of our in-house team and understand our vision completely.",
+      quote:
+        "Our dedicated team from WDI has been instrumental in scaling our platform. They feel like true extensions of our in-house team and understand our vision completely.",
       author: "Jennifer Park",
       role: "CTO, TechFlow Solutions",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The transparency and control we have with our dedicated team is unmatched. We can adapt quickly to market changes while maintaining consistent quality.",
+      quote:
+        "The transparency and control we have with our dedicated team is unmatched. We can adapt quickly to market changes while maintaining consistent quality.",
       author: "Marcus Chen",
       role: "Head of Product, InnovateCorp",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
-        <div 
+        <div
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
-        
+
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Build Your Remote Tech Hub
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-              Dedicated Development Teams: Your Extended 
+              Dedicated Development Teams: Your Extended
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Tech Arm</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Tech Arm
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Build Your Innovation Hub with a Seamlessly Integrated Dedicated Team. In today's competitive landscape, scaling your tech capabilities rapidly and efficiently is paramount.
+              Build Your Innovation Hub with a Seamlessly Integrated Dedicated
+              Team. In today's competitive landscape, scaling your tech
+              capabilities rapidly and efficiently is paramount.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Build Your Dedicated Team
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
-                Request a Custom Team Proposal
-              </Button>
             </div>
           </div>
         </div>
@@ -135,7 +170,11 @@ export const DedicatedDevelopmentTeams = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              WDI offers Dedicated Development Teams that act as a direct extension of your in-house operations. You gain full control, transparent communication, and a highly skilled team committed solely to your vision, ensuring project success and accelerated growth.
+              WDI offers Dedicated Development Teams that act as a direct
+              extension of your in-house operations. You gain full control,
+              transparent communication, and a highly skilled team committed
+              solely to your vision, ensuring project success and accelerated
+              growth.
             </p>
           </div>
         </div>
@@ -149,13 +188,17 @@ export const DedicatedDevelopmentTeams = () => {
               Why Choose a WDI Dedicated Team?
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Experience the advantages of having a fully committed team working exclusively on your projects
+              Experience the advantages of having a fully committed team working
+              exclusively on your projects
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {benefits.map((benefit, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <benefit.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -182,17 +225,19 @@ export const DedicatedDevelopmentTeams = () => {
               A streamlined process to get your dedicated team up and running
             </p>
           </div>
-          
+
           <div className="max-w-5xl mx-auto">
             <div className="space-y-8">
               {process.map((step, index) => (
                 <div key={index} className="flex items-start gap-6">
                   <div className="flex-shrink-0">
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center shadow-lg">
-                      <span className="text-white font-bold text-lg">{step.step}</span>
+                      <span className="text-white font-bold text-lg">
+                        {step.step}
+                      </span>
                     </div>
                   </div>
-                  
+
                   <div className="flex-1">
                     <Card className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
                       <CardContent className="p-6">
@@ -223,10 +268,13 @@ export const DedicatedDevelopmentTeams = () => {
               Perfect solutions for various business scenarios
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
             {idealFor.map((item, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{item}</span>
               </div>
@@ -280,14 +328,23 @@ export const DedicatedDevelopmentTeams = () => {
               Ready to Build Your Innovation Hub?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Get a dedicated team that works exclusively for you with full transparency and control.
+              Get a dedicated team that works exclusively for you with full
+              transparency and control.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Start Building Your Team
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Schedule Consultation
               </Button>
             </div>
@@ -298,4 +355,4 @@ export const DedicatedDevelopmentTeams = () => {
       <Footer />
     </div>
   );
-};
+};

pages/DesignExperience.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
-import { Footer } from "../components/Footer";
-import { ProcessSection } from "../components/ProcessSection";
-import { FAQSection } from "../components/FAQSection";
-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 { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
-import { 
-  Palette, PenTool, Users, Star, Figma, Eye, 
-  ArrowRight, ChevronRight, Clock, TrendingUp, Heart, Layers, 
-  Target, Layout, Rocket, Monitor, Lightbulb, RefreshCcw, ShieldCheck,
-  MessageSquare, CheckCircle, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
-  Cog, Settings, Sparkles, Handshake, Award, UserPlus, MousePointer, Smile
-} from "lucide-react";
 import UIUXDesignAnimation from "@/components/UIUXDesignAnimation";
+import { motion } from "framer-motion";
+import {
+  Calendar,
+  Eye,
+  Heart, Layers,
+  Layout,
+  Lightbulb,
+  MousePointer,
+  Palette, PenTool,
+  Rocket,
+  TrendingUp,
+  UserPlus,
+  Users
+} from "lucide-react";
+import { navigateTo } from "../App";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+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";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -458,7 +458,8 @@ const InlineCTA = () => {
             <div className="flex flex-col items-center gap-4">
               <ShimmerButton 
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <PenTool className="w-6 h-6 flex-shrink-0" />

pages/DigitalProductDevelopment.tsx

@@ -20,16 +20,22 @@ import {
   Target,
   Users,
   X,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 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 { navigateTo } from "@/App";
 
 // Digital Product Development Hero Section
 const DigitalProductDevelopmentHero = () => {
@@ -49,7 +55,9 @@ const DigitalProductDevelopmentHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -57,12 +65,13 @@ const DigitalProductDevelopmentHero = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Digital Product Development
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Transform your vision into market-ready digital products that captivate users and drive business growth.
+                Transform your vision into market-ready digital products that
+                captivate users and drive business growth.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -70,7 +79,10 @@ const DigitalProductDevelopmentHero = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Get a Free Consultation</span>
@@ -88,7 +100,7 @@ const DigitalProductDevelopmentHero = () => {
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with Digital Product Development Visualization */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -128,9 +140,11 @@ const DigitalProductDevelopmentHero = () => {
                             <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
                             <div className="w-3 h-3 bg-green-400 rounded-full"></div>
                           </div>
-                          <div className="text-gray-400 text-xs">Product Blueprint</div>
+                          <div className="text-gray-400 text-xs">
+                            Product Blueprint
+                          </div>
                         </div>
-                        
+
                         {/* Interface Elements */}
                         <motion.div
                           initial={{ opacity: 0, y: 20 }}
@@ -144,16 +158,16 @@ const DigitalProductDevelopmentHero = () => {
                             <div className="w-12 h-2 bg-purple-400/50 rounded"></div>
                             <div className="w-14 h-2 bg-green-400/50 rounded"></div>
                           </div>
-                          
+
                           {/* Hero Section */}
                           <div className="w-full h-8 bg-gradient-to-r from-blue-400/30 to-purple-400/30 rounded"></div>
-                          
+
                           {/* Content Cards */}
                           <div className="grid grid-cols-2 gap-2">
                             <div className="w-full h-6 bg-gray-600/50 rounded"></div>
                             <div className="w-full h-6 bg-gray-600/50 rounded"></div>
                           </div>
-                          
+
                           {/* Interactive Elements */}
                           <div className="flex justify-between items-center">
                             <div className="w-20 h-3 bg-accent/50 rounded"></div>
@@ -163,7 +177,7 @@ const DigitalProductDevelopmentHero = () => {
                       </div>
                     </motion.div>
                   </div>
-                  
+
                   {/* Development Team Collaboration */}
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
@@ -174,26 +188,34 @@ const DigitalProductDevelopmentHero = () => {
                     <div className="flex items-center justify-between mb-3">
                       <div className="flex items-center gap-2">
                         <Users className="w-4 h-4 text-blue-400" />
-                        <span className="text-blue-400 text-xs font-mono">Team Collaboration</span>
+                        <span className="text-blue-400 text-xs font-mono">
+                          Team Collaboration
+                        </span>
                       </div>
-                      <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                      >
                         Active
                       </Badge>
                     </div>
-                    
+
                     {/* Team Members */}
                     <div className="flex items-center gap-2 mb-3">
                       {[
                         { role: "Designer", color: "bg-purple-400" },
                         { role: "Developer", color: "bg-blue-400" },
                         { role: "PM", color: "bg-green-400" },
-                        { role: "QA", color: "bg-orange-400" }
+                        { role: "QA", color: "bg-orange-400" },
                       ].map((member, index) => (
                         <motion.div
                           key={index}
                           initial={{ opacity: 0, scale: 0 }}
                           animate={{ opacity: 1, scale: 1 }}
-                          transition={{ duration: 0.3, delay: 1.6 + index * 0.1 }}
+                          transition={{
+                            duration: 0.3,
+                            delay: 1.6 + index * 0.1,
+                          }}
                           className={`w-6 h-6 ${member.color} rounded-full flex items-center justify-center`}
                         >
                           <span className="text-white text-xs font-bold">
@@ -202,50 +224,62 @@ const DigitalProductDevelopmentHero = () => {
                         </motion.div>
                       ))}
                     </div>
-                    
+
                     {/* Progress Indicators */}
                     <div className="space-y-2">
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '85%' }}
+                        animate={{ opacity: 1, width: "85%" }}
                         transition={{ duration: 1, delay: 2.0 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                          <span className="text-blue-300 text-xs">Design Phase</span>
+                          <span className="text-blue-300 text-xs">
+                            Design Phase
+                          </span>
                         </div>
-                        <span className="text-blue-300 text-xs font-mono">85%</span>
+                        <span className="text-blue-300 text-xs font-mono">
+                          85%
+                        </span>
                       </motion.div>
-                      
+
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '60%' }}
+                        animate={{ opacity: 1, width: "60%" }}
                         transition={{ duration: 1, delay: 2.2 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                          <span className="text-green-300 text-xs">Development</span>
+                          <span className="text-green-300 text-xs">
+                            Development
+                          </span>
                         </div>
-                        <span className="text-green-300 text-xs font-mono">60%</span>
+                        <span className="text-green-300 text-xs font-mono">
+                          60%
+                        </span>
                       </motion.div>
-                      
+
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '30%' }}
+                        animate={{ opacity: 1, width: "30%" }}
                         transition={{ duration: 1, delay: 2.4 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-orange-400 rounded-full"></div>
-                          <span className="text-orange-300 text-xs">Testing</span>
+                          <span className="text-orange-300 text-xs">
+                            Testing
+                          </span>
                         </div>
-                        <span className="text-orange-300 text-xs font-mono">30%</span>
+                        <span className="text-orange-300 text-xs font-mono">
+                          30%
+                        </span>
                       </motion.div>
                     </div>
                   </motion.div>
-                  
+
                   {/* Success Metrics */}
                   <motion.div
                     initial={{ opacity: 0, y: 10 }}
@@ -254,7 +288,9 @@ const DigitalProductDevelopmentHero = () => {
                     className="grid grid-cols-2 gap-3"
                   >
                     <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
-                      <div className="text-green-400 text-lg font-bold">95%</div>
+                      <div className="text-green-400 text-lg font-bold">
+                        95%
+                      </div>
                       <div className="text-white text-xs">Success Rate</div>
                     </div>
                     <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
@@ -263,7 +299,7 @@ const DigitalProductDevelopmentHero = () => {
                     </div>
                   </motion.div>
                 </motion.div>
-                
+
                 {/* Floating Development Elements */}
                 <motion.div
                   initial={{ opacity: 0, scale: 0.8 }}
@@ -275,7 +311,7 @@ const DigitalProductDevelopmentHero = () => {
                     <Code className="w-6 h-6 text-purple-400" />
                   </div>
                 </motion.div>
-                
+
                 {/* Digital Screens Connection */}
                 <motion.div
                   initial={{ opacity: 0 }}
@@ -305,7 +341,7 @@ const DigitalProductDevelopmentHero = () => {
                     ></motion.div>
                   </div>
                 </motion.div>
-                
+
                 {/* Innovation Badge */}
                 <motion.div
                   initial={{ opacity: 0, scale: 0 }}
@@ -321,7 +357,7 @@ const DigitalProductDevelopmentHero = () => {
                   </div>
                 </motion.div>
               </motion.div>
-              
+
               {/* Product Development Features */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -329,15 +365,24 @@ const DigitalProductDevelopmentHero = () => {
                 transition={{ duration: 0.8, delay: 3.4 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Palette className="w-3 h-3 mr-1" />
                   Design
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Code className="w-3 h-3 mr-1" />
                   Development
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Rocket className="w-3 h-3 mr-1" />
                   Launch
                 </Badge>
@@ -367,7 +412,7 @@ const DigitalProductChallenge = () => {
               From Idea to Impact: Navigating the Product Journey
             </h2>
           </motion.div>
-          
+
           <div className="grid md:grid-cols-2 gap-12 items-center">
             {/* Problem */}
             <motion.div
@@ -382,18 +427,28 @@ const DigitalProductChallenge = () => {
                     <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                       <AlertTriangle className="w-6 h-6 text-red-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">The Problem</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      The Problem
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>Businesses often struggle to bridge the gap between innovative ideas and a successful, user-friendly digital product. This involves complex challenges in:</p>
+                    <p>
+                      Businesses often struggle to bridge the gap between
+                      innovative ideas and a successful, user-friendly digital
+                      product. This involves complex challenges in:
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Design complexity and user experience challenges</span>
+                        <span>
+                          Design complexity and user experience challenges
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Technology selection and scalability concerns</span>
+                        <span>
+                          Technology selection and scalability concerns
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
@@ -422,10 +477,17 @@ const DigitalProductChallenge = () => {
                     <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                       <CheckCircle className="w-6 h-6 text-green-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">Our Solution</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      Our Solution
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>WDI offers end-to-end digital product development, guiding you through every phase from ideation and strategy to design, development, and launch, ensuring your product stands out and delivers real value.</p>
+                    <p>
+                      WDI offers end-to-end digital product development, guiding
+                      you through every phase from ideation and strategy to
+                      design, development, and launch, ensuring your product
+                      stands out and delivers real value.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
@@ -433,15 +495,21 @@ const DigitalProductChallenge = () => {
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>User-centered design and development approach</span>
+                        <span>
+                          User-centered design and development approach
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Scalable architecture and future-proof technology</span>
+                        <span>
+                          Scalable architecture and future-proof technology
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Agile methodology with transparent communication</span>
+                        <span>
+                          Agile methodology with transparent communication
+                        </span>
                       </li>
                     </ul>
                   </div>
@@ -461,33 +529,38 @@ const DigitalProductIncludes = () => {
     {
       icon: Search,
       title: "Discovery & Strategy",
-      description: "Market research, user personas, competitive analysis, feature prioritization."
+      description:
+        "Market research, user personas, competitive analysis, feature prioritization.",
     },
     {
       icon: Palette,
       title: "UI/UX Design",
-      description: "Wireframing, prototyping, user testing, visual design, interaction design."
+      description:
+        "Wireframing, prototyping, user testing, visual design, interaction design.",
     },
     {
       icon: Code,
       title: "Full-Stack Development",
-      description: "Front-end, back-end, database architecture, API integrations."
+      description:
+        "Front-end, back-end, database architecture, API integrations.",
     },
     {
       icon: Shield,
       title: "Quality Assurance",
-      description: "Rigorous testing, bug fixing, performance optimization."
+      description: "Rigorous testing, bug fixing, performance optimization.",
     },
     {
       icon: CloudCog,
       title: "Deployment & Support",
-      description: "Cloud deployment, maintenance, updates, analytics integration."
+      description:
+        "Cloud deployment, maintenance, updates, analytics integration.",
     },
     {
       icon: Users,
       title: "Project Management",
-      description: "Agile methodologies, transparent communication, roadmap planning."
+      description:
-    }
+        "Agile methodologies, transparent communication, roadmap planning.",
+    },
   ];
 
   return (
@@ -504,7 +577,7 @@ const DigitalProductIncludes = () => {
             Comprehensive Digital Product Development Services
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -552,28 +625,33 @@ const DigitalProductBenefits = () => {
     {
       icon: Target,
       title: "Market-Driven Innovation",
-      description: "Develop products precisely tailored to user needs and market demands."
+      description:
+        "Develop products precisely tailored to user needs and market demands.",
     },
     {
       icon: Users,
       title: "Seamless User Experiences",
-      description: "Create intuitive and engaging interfaces that foster user loyalty."
+      description:
+        "Create intuitive and engaging interfaces that foster user loyalty.",
     },
     {
       icon: Building,
       title: "Scalable & Robust Architecture",
-      description: "Future-proof your product with high-performance, maintainable code."
+      description:
+        "Future-proof your product with high-performance, maintainable code.",
     },
     {
       icon: Zap,
       title: "Accelerated Time-to-Market",
-      description: "Efficient processes ensure your product launches on schedule."
+      description:
+        "Efficient processes ensure your product launches on schedule.",
     },
     {
       icon: Shield,
       title: "Reduced Development Risk",
-      description: "Expert guidance and rigorous testing minimize post-launch issues."
+      description:
-    }
+        "Expert guidance and rigorous testing minimize post-launch issues.",
+    },
   ];
 
   return (
@@ -590,7 +668,7 @@ const DigitalProductBenefits = () => {
             Build Products That Succeed with WDI
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -675,34 +753,39 @@ const DigitalProductProcess = () => {
   const steps = [
     {
       title: "Discovery & Planning",
-      description: "Deep dive into your vision, market, and user needs to define product strategy.",
+      description:
-      icon: Search
+        "Deep dive into your vision, market, and user needs to define product strategy.",
+      icon: Search,
     },
     {
-      title: "Design & Prototyping", 
+      title: "Design & Prototyping",
-      description: "Craft compelling UI/UX, create interactive prototypes for validation.",
+      description:
-      icon: Palette
+        "Craft compelling UI/UX, create interactive prototypes for validation.",
+      icon: Palette,
     },
     {
       title: "Development & Iteration",
-      description: "Build features in agile sprints, with continuous feedback cycles.",
+      description:
-      icon: Code
+        "Build features in agile sprints, with continuous feedback cycles.",
+      icon: Code,
     },
     {
       title: "Testing & Quality Assurance",
-      description: "Comprehensive testing to ensure functionality, performance, and security.",
+      description:
-      icon: Shield
+        "Comprehensive testing to ensure functionality, performance, and security.",
+      icon: Shield,
     },
     {
       title: "Deployment & Launch",
-      description: "Strategic rollout and monitoring to ensure a smooth market entry.",
+      description:
-      icon: Rocket
+        "Strategic rollout and monitoring to ensure a smooth market entry.",
+      icon: Rocket,
     },
     {
       title: "Post-Launch Support & Evolution",
       description: "Ongoing maintenance, updates, and feature enhancements.",
-      icon: RefreshCw
+      icon: RefreshCw,
-    }
+    },
   ];
 
   return (
@@ -723,12 +806,12 @@ const DigitalProductProcess = () => {
         <div className="relative">
           {/* Timeline line */}
           <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
-          
+
           <div className="space-y-16">
             {steps.map((step, index) => {
               const IconComponent = step.icon;
               const isEven = index % 2 === 0;
-              
+
               return (
                 <motion.div
                   key={index}
@@ -736,15 +819,23 @@ const DigitalProductProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -754,10 +845,10 @@ const DigitalProductProcess = () => {
                       </p>
                     </div>
                   </div>
-                  
+
                   {/* Timeline dot */}
                   <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
-                  
+
                   <div className="flex-1 hidden lg:block"></div>
                 </motion.div>
               );
@@ -775,23 +866,27 @@ const DigitalProductAudience = () => {
     {
       icon: Rocket,
       title: "Startups",
-      description: "Looking to build their first flagship product and establish market presence."
+      description:
+        "Looking to build their first flagship product and establish market presence.",
     },
     {
       icon: Building,
       title: "Established Businesses",
-      description: "Aiming to launch new digital services or enhance existing ones."
+      description:
+        "Aiming to launch new digital services or enhance existing ones.",
     },
     {
       icon: RefreshCw,
       title: "Companies Digitalizing",
-      description: "Seeking to digitalize internal processes or customer interactions."
+      description:
+        "Seeking to digitalize internal processes or customer interactions.",
     },
     {
       icon: Lightbulb,
       title: "Entrepreneurs",
-      description: "With innovative ideas needing expert execution and market validation."
+      description:
-    }
+        "With innovative ideas needing expert execution and market validation.",
+    },
   ];
 
   return (
@@ -808,7 +903,7 @@ const DigitalProductAudience = () => {
             Ideal For...
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -856,30 +951,36 @@ const DigitalProductCaseStudies = () => {
     {
       title: "FinTech Mobile App Redesign",
       client: "Banking Institution",
-      description: "Helped a banking client launch a new mobile app with enhanced user experience and security features, resulting in 40% increase in daily active users and 50% improvement in customer satisfaction scores.",
+      description:
-      image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+        "Helped a banking client launch a new mobile app with enhanced user experience and security features, resulting in 40% increase in daily active users and 50% improvement in customer satisfaction scores.",
+      image:
+        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
       results: "40% DAU increase, 50% satisfaction improvement",
       engagement: "FinTech transformation success",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "E-learning Platform Development",
       client: "Education Technology Company",
-      description: "Built a comprehensive e-learning system from scratch, supporting 10,000+ simultaneous users with interactive features, video streaming, and progress tracking, achieving 95% user retention rate.",
+      description:
-      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
+        "Built a comprehensive e-learning system from scratch, supporting 10,000+ simultaneous users with interactive features, video streaming, and progress tracking, achieving 95% user retention rate.",
+      image:
+        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
       results: "10K+ concurrent users, 95% retention",
       engagement: "Educational platform innovation",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "Healthcare Management System",
       client: "Healthcare Provider",
-      description: "Developed an integrated healthcare management platform that streamlined patient care workflows, reduced administrative overhead by 60%, and improved patient engagement through digital touchpoints.",
+      description:
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+        "Developed an integrated healthcare management platform that streamlined patient care workflows, reduced administrative overhead by 60%, and improved patient engagement through digital touchpoints.",
+      image:
+        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
       results: "60% admin reduction, enhanced patient care",
       engagement: "Healthcare digital transformation",
-      gradient: "from-purple-500/20 to-pink-500/20"
+      gradient: "from-purple-500/20 to-pink-500/20",
-    }
+    },
   ];
 
   return (
@@ -896,7 +997,7 @@ const DigitalProductCaseStudies = () => {
             Digital Products We've Helped Bring to Life
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -925,19 +1026,24 @@ const DigitalProductCaseStudies = () => {
                         <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">
+                        <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-white mb-4 leading-tight">
                       {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-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -945,7 +1051,7 @@ const DigitalProductCaseStudies = () => {
                       />
                     </div>
                   </div>
-                  
+
                   <div className="px-8 pb-6">
                     <p className="text-gray-300 text-sm leading-relaxed mb-4">
                       {study.description}
@@ -957,14 +1063,16 @@ const DigitalProductCaseStudies = () => {
                       </div>
                     </div>
                   </div>
-                  
+
                   <div className="p-8 pt-0 mt-auto">
-                    <Button 
+                    <Button
-                      variant="ghost" 
+                      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 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -1000,20 +1108,25 @@ const DigitalProductInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Rocket className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Product Development</span>
+                <span className="text-foreground text-base font-medium">
+                  Product Development
+                </span>
               </div>
             </div>
-            
+
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
               Ready to Build Your Next{" "}
               <span className="text-accent">Breakthrough Product?</span>
             </h2>
-            
+
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
               Let's discuss your vision and create a roadmap for success.
             </p>
-            
+
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Product Journey</span>
@@ -1030,21 +1143,28 @@ const DigitalProductInlineCTA = () => {
 const DigitalProductFAQs = () => {
   const faqs = [
     {
-      question: "What is your typical timeline for digital product development?",
+      question:
-      answer: "Our typical timeline varies based on project complexity, but generally ranges from 3-9 months for most digital products. A simple MVP can be delivered in 6-12 weeks, while complex enterprise applications may take 6-12 months. Our process includes: Discovery & Planning (2-3 weeks), Design & Prototyping (3-4 weeks), Development (8-20 weeks depending on features), Testing & QA (2-3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every 2 weeks, so you can see progress and provide feedback throughout the development process. We'll provide a detailed timeline during our initial consultation based on your specific requirements."
+        "What is your typical timeline for digital product development?",
+      answer:
+        "Our typical timeline varies based on project complexity, but generally ranges from 3-9 months for most digital products. A simple MVP can be delivered in 6-12 weeks, while complex enterprise applications may take 6-12 months. Our process includes: Discovery & Planning (2-3 weeks), Design & Prototyping (3-4 weeks), Development (8-20 weeks depending on features), Testing & QA (2-3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every 2 weeks, so you can see progress and provide feedback throughout the development process. We'll provide a detailed timeline during our initial consultation based on your specific requirements.",
     },
     {
-      question: "How do you ensure user feedback is incorporated into the design?",
+      question:
-      answer: "User feedback is central to our design process. We incorporate it through: User research and persona development at the start, interactive prototypes for early validation, usability testing sessions with real users, A/B testing for design decisions, and continuous feedback loops throughout development. We conduct user interviews, surveys, and testing sessions at key milestones. Our design team creates clickable prototypes that allow stakeholders and users to experience the product before development begins. We also implement analytics and feedback systems in the live product to gather ongoing user insights. Regular design reviews ensure user feedback drives iterations and improvements throughout the project lifecycle."
+        "How do you ensure user feedback is incorporated into the design?",
+      answer:
+        "User feedback is central to our design process. We incorporate it through: User research and persona development at the start, interactive prototypes for early validation, usability testing sessions with real users, A/B testing for design decisions, and continuous feedback loops throughout development. We conduct user interviews, surveys, and testing sessions at key milestones. Our design team creates clickable prototypes that allow stakeholders and users to experience the product before development begins. We also implement analytics and feedback systems in the live product to gather ongoing user insights. Regular design reviews ensure user feedback drives iterations and improvements throughout the project lifecycle.",
     },
     {
-      question: "What technologies do you specialize in for product development?",
+      question:
-      answer: "We specialize in modern, scalable technologies including: Frontend - React, Next.js, Vue.js, Angular for web; React Native, Flutter for mobile. Backend - Node.js, Python (Django/Flask), .NET, Java, PHP. Databases - PostgreSQL, MongoDB, MySQL, Redis. Cloud - AWS, Google Cloud, Azure with containerization using Docker and Kubernetes. We also work with headless CMS solutions, API integrations, payment gateways, and emerging technologies like AI/ML integration. Our technology choices are always driven by your specific requirements, scalability needs, and long-term maintenance considerations. We'll recommend the best tech stack during our discovery phase based on your project goals and constraints."
+        "What technologies do you specialize in for product development?",
+      answer:
+        "We specialize in modern, scalable technologies including: Frontend - React, Next.js, Vue.js, Angular for web; React Native, Flutter for mobile. Backend - Node.js, Python (Django/Flask), .NET, Java, PHP. Databases - PostgreSQL, MongoDB, MySQL, Redis. Cloud - AWS, Google Cloud, Azure with containerization using Docker and Kubernetes. We also work with headless CMS solutions, API integrations, payment gateways, and emerging technologies like AI/ML integration. Our technology choices are always driven by your specific requirements, scalability needs, and long-term maintenance considerations. We'll recommend the best tech stack during our discovery phase based on your project goals and constraints.",
     },
     {
       question: "Do you offer post-launch maintenance and support?",
-      answer: "Yes, we provide comprehensive post-launch support including: Technical maintenance (bug fixes, security updates, performance optimization), feature enhancements and new functionality development, 24/7 monitoring and support, regular backups and security audits, analytics and performance reporting, and user support integration. Our support packages range from basic maintenance to full ongoing development partnerships. We offer different service levels including emergency support, planned maintenance windows, and proactive monitoring. We also provide training for your team, documentation, and knowledge transfer to ensure you can manage aspects of the product internally if desired. Our goal is to ensure your product remains secure, performant, and continues to evolve with your business needs."
+      answer:
-    }
+        "Yes, we provide comprehensive post-launch support including: Technical maintenance (bug fixes, security updates, performance optimization), feature enhancements and new functionality development, 24/7 monitoring and support, regular backups and security audits, analytics and performance reporting, and user support integration. Our support packages range from basic maintenance to full ongoing development partnerships. We offer different service levels including emergency support, planned maintenance windows, and proactive monitoring. We also provide training for your team, documentation, and knowledge transfer to ensure you can manage aspects of the product internally if desired. Our goal is to ensure your product remains secure, performant, and continues to evolve with your business needs.",
+    },
   ];
 
   return (
@@ -1061,7 +1181,7 @@ const DigitalProductFAQs = () => {
             Frequently Asked Questions
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -1071,13 +1191,15 @@ const DigitalProductFAQs = () => {
         >
           <Accordion type="single" collapsible className="space-y-8">
             {faqs.map((faq, index) => (
-              <AccordionItem 
+              <AccordionItem
-                key={index} 
+                key={index}
-                value={`item-${index}`} 
+                value={`item-${index}`}
                 className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-foreground">{faq.question}</span>
+                  <span className="font-semibold text-foreground">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1113,7 +1235,9 @@ const DigitalProductFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <Rocket className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">Digital Product Excellence</span>
+                <span className="text-white text-base font-medium">
+                  Digital Product Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1122,7 +1246,7 @@ const DigitalProductFinalCTA = () => {
             Innovate, Design, Develop:{" "}
             <span className="text-accent">Partner with WDI</span>
           </h2>
-          
+
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -1130,7 +1254,8 @@ const DigitalProductFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            From groundbreaking concepts to polished, high-performing products, WDI is your trusted partner for digital product excellence.
+            From groundbreaking concepts to polished, high-performing products,
+            WDI is your trusted partner for digital product excellence.
           </motion.p>
 
           <motion.div
@@ -1140,7 +1265,10 @@ const DigitalProductFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Book Your Discovery Call</span>
@@ -1169,61 +1297,61 @@ export const DigitalProductDevelopment = () => {
   return (
     <div className="dark min-h-screen">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="bg-black">
         <DigitalProductDevelopmentHero />
       </section>
-      
+
       {/* Challenge */}
       <section className="bg-background">
         <DigitalProductChallenge />
       </section>
-      
+
       {/* What's Included */}
       <section className="bg-card">
         <DigitalProductIncludes />
       </section>
-      
+
       {/* Benefits */}
       <section className="bg-background">
         <DigitalProductBenefits />
       </section>
-      
+
       {/* Process */}
       <section className="bg-card">
         <DigitalProductProcess />
       </section>
-      
+
       {/* Target Audience */}
       <section className="bg-background">
         <DigitalProductAudience />
       </section>
-      
+
       {/* Case Studies */}
       <section className="bg-card">
         <DigitalProductCaseStudies />
       </section>
-      
+
       {/* Mid-Page CTA */}
       <section className="bg-background">
         <DigitalProductInlineCTA />
       </section>
-      
+
       {/* FAQs */}
       <section className="bg-card">
         <DigitalProductFAQs />
       </section>
-      
+
       {/* Final CTA */}
       <section className="bg-background">
         <DigitalProductFinalCTA />
       </section>
-      
+
       {/* Footer */}
       <section className="bg-card">
         <Footer />
       </section>
     </div>
   );
-};
+};

pages/EcommerceMarketplaces.tsx

@@ -10,10 +10,22 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
+import {
-  ShoppingCart, CreditCard, Package, Search, 
+  ShoppingCart,
-  Heart, Users, BarChart3, Target, CheckCircle, 
+  CreditCard,
-  Star, Zap, Shield, Globe, Award, Clock
+  Package,
+  Search,
+  Heart,
+  Users,
+  BarChart3,
+  Target,
+  CheckCircle,
+  Star,
+  Zap,
+  Shield,
+  Globe,
+  Award,
+  Clock,
 } from "lucide-react";
 
 // Problem Solution Block Component
@@ -29,10 +41,12 @@ const ProblemSolutionBlock = () => {
           className="max-w-6xl mx-auto"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
-            <span className="text-white">Addressing the Core Challenges of </span>
+            <span className="text-white">
+              Addressing the Core Challenges of{" "}
+            </span>
             <span className="text-[#E5195E]">eCommerce & Marketplaces</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -49,11 +63,17 @@ const ProblemSolutionBlock = () => {
                   The Challenge
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  In a highly competitive digital retail landscape, businesses need more than just an online store; they require platforms that offer seamless user experiences, handle high traffic volumes, integrate complex logistics, and provide robust security for transactions (PCI DSS). Building and scaling multi-vendor marketplaces adds further complexity in managing diverse sellers and customer expectations.
+                  In a highly competitive digital retail landscape, businesses
+                  need more than just an online store; they require platforms
+                  that offer seamless user experiences, handle high traffic
+                  volumes, integrate complex logistics, and provide robust
+                  security for transactions (PCI DSS). Building and scaling
+                  multi-vendor marketplaces adds further complexity in managing
+                  diverse sellers and customer expectations.
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -69,7 +89,12 @@ const ProblemSolutionBlock = () => {
                   Our eCommerce & Marketplace Solution
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  WDI specializes in developing custom eCommerce platforms and dynamic online marketplaces. We create solutions that prioritize user experience, robust backend operations, secure payment processing, and scalable architecture, designed to maximize sales, enhance customer loyalty, and efficiently manage diverse product catalogs and vendors.
+                  WDI specializes in developing custom eCommerce platforms and
+                  dynamic online marketplaces. We create solutions that
+                  prioritize user experience, robust backend operations, secure
+                  payment processing, and scalable architecture, designed to
+                  maximize sales, enhance customer loyalty, and efficiently
+                  manage diverse product catalogs and vendors.
                 </p>
               </div>
             </motion.div>
@@ -86,38 +111,45 @@ const IconWithDescriptionGrid = () => {
     {
       icon: ShoppingCart,
       title: "Custom Online Storefronts",
-      description: "Tailored design and functionality for unique brand experiences, optimizing product discovery and conversion."
+      description:
+        "Tailored design and functionality for unique brand experiences, optimizing product discovery and conversion.",
     },
     {
       icon: Users,
       title: "Multi-Vendor Marketplace Functionality",
-      description: "Comprehensive features for vendor onboarding, individual storefronts, commission management, and order splitting."
+      description:
+        "Comprehensive features for vendor onboarding, individual storefronts, commission management, and order splitting.",
     },
     {
       icon: CreditCard,
       title: "Secure Payment Gateways",
-      description: "Integration with leading payment providers (e.g., Stripe, PayPal, Razorpay) ensuring PCI DSS compliance and diverse payment options."
+      description:
+        "Integration with leading payment providers (e.g., Stripe, PayPal, Razorpay) ensuring PCI DSS compliance and diverse payment options.",
     },
     {
       icon: Package,
       title: "Inventory & Order Management",
-      description: "Real-time stock tracking, automated order processing, fulfillment, and returns management."
+      description:
+        "Real-time stock tracking, automated order processing, fulfillment, and returns management.",
     },
     {
       icon: Heart,
       title: "Customer Personalization & Recommendations",
-      description: "AI-driven product recommendations, personalized content, and dynamic pricing based on user behavior."
+      description:
+        "AI-driven product recommendations, personalized content, and dynamic pricing based on user behavior.",
     },
     {
       icon: Search,
       title: "Search & Filtering Capabilities",
-      description: "Advanced search, faceted navigation, and intelligent filtering to help users find products quickly."
+      description:
+        "Advanced search, faceted navigation, and intelligent filtering to help users find products quickly.",
     },
     {
       icon: BarChart3,
       title: "CRM & Loyalty Program Integration",
-      description: "Seamless connectivity with customer relationship management systems and tools for loyalty programs to boost retention."
+      description:
-    }
+        "Seamless connectivity with customer relationship management systems and tools for loyalty programs to boost retention.",
+    },
   ];
 
   return (
@@ -134,10 +166,11 @@ const IconWithDescriptionGrid = () => {
             Powerful Features for Your eCommerce & Marketplaces
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Comprehensive tools to create compelling online shopping experiences that drive sales and customer loyalty.
+            Comprehensive tools to create compelling online shopping experiences
+            that drive sales and customer loyalty.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -178,23 +211,27 @@ const ThreeColumnFeatureBlock = () => {
     {
       icon: Target,
       title: "Conversion-Driven Design",
-      description: "Our focus is on optimizing user journeys to maximize sales and minimize abandoned carts."
+      description:
+        "Our focus is on optimizing user journeys to maximize sales and minimize abandoned carts.",
     },
     {
       icon: Zap,
       title: "Scalable Architecture",
-      description: "Building platforms ready for massive traffic spikes (e.g., festive sales) and limitless product catalogs."
+      description:
+        "Building platforms ready for massive traffic spikes (e.g., festive sales) and limitless product catalogs.",
     },
     {
       icon: Shield,
       title: "PCI DSS & Security Expertise",
-      description: "Ensuring all payment processing and customer data handling adhere to the highest security standards."
+      description:
+        "Ensuring all payment processing and customer data handling adhere to the highest security standards.",
     },
     {
       icon: Globe,
       title: "Complex Integrations",
-      description: "Seamlessly connecting with ERP, CRM, inventory, shipping, and marketing automation systems."
+      description:
-    }
+        "Seamlessly connecting with ERP, CRM, inventory, shipping, and marketing automation systems.",
+    },
   ];
 
   return (
@@ -211,10 +248,11 @@ const ThreeColumnFeatureBlock = () => {
             Why Partner with WDI for eCommerce & Marketplace Development?
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Leverage our expertise to create online commerce platforms that truly drive business success.
+            Leverage our expertise to create online commerce platforms that
+            truly drive business success.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -250,18 +288,24 @@ const CaseStudyHighlightGrid = () => {
   const caseStudies = [
     {
       title: "Custom Fashion eCommerce Platform with Virtual Try-On",
-      problem: "A fashion brand needed a unique online store that offered advanced product visualization and personalization.",
+      problem:
-      solution: "WDI built a bespoke eCommerce platform integrated with AR virtual try-on features and an AI-powered styling assistant.",
+        "A fashion brand needed a unique online store that offered advanced product visualization and personalization.",
-      results: "Increased online sales by 50% within six months and reduced product returns by 15%.",
+      solution:
-      metrics: ["50% ↑ Sales", "15% ↓ Returns", "AR Integration"]
+        "WDI built a bespoke eCommerce platform integrated with AR virtual try-on features and an AI-powered styling assistant.",
+      results:
+        "Increased online sales by 50% within six months and reduced product returns by 15%.",
+      metrics: ["50% ↑ Sales", "15% ↓ Returns", "AR Integration"],
     },
     {
       title: "B2B Construction Materials Marketplace",
-      problem: "A client sought to create a specialized online marketplace connecting construction material suppliers with contractors.",
+      problem:
-      solution: "Developed a multi-vendor B2B marketplace with advanced search, bulk ordering, quoting features, and integrated logistics.",
+        "A client sought to create a specialized online marketplace connecting construction material suppliers with contractors.",
-      results: "Facilitated transactions totaling $5M+ in its first year, significantly streamlining procurement for contractors.",
+      solution:
-      metrics: ["$5M+ Volume", "B2B Focused", "Multi-Vendor"]
+        "Developed a multi-vendor B2B marketplace with advanced search, bulk ordering, quoting features, and integrated logistics.",
-    }
+      results:
+        "Facilitated transactions totaling $5M+ in its first year, significantly streamlining procurement for contractors.",
+      metrics: ["$5M+ Volume", "B2B Focused", "Multi-Vendor"],
+    },
   ];
 
   return (
@@ -278,10 +322,11 @@ const CaseStudyHighlightGrid = () => {
             eCommerce & Marketplace Success Stories
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Real results from our eCommerce platform implementations that transformed businesses.
+            Real results from our eCommerce platform implementations that
+            transformed businesses.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -295,7 +340,11 @@ const CaseStudyHighlightGrid = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-2 mb-4">
                     {study.metrics.map((metric, i) => (
-                      <Badge key={i} variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30">
+                      <Badge
+                        key={i}
+                        variant="secondary"
+                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
+                      >
                         {metric}
                       </Badge>
                     ))}
@@ -305,15 +354,21 @@ const CaseStudyHighlightGrid = () => {
                   </h3>
                   <div className="space-y-4">
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Problem:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Problem:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.problem}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Solution:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Solution:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.solution}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Results:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Results:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.results}</p>
                     </div>
                   </div>
@@ -330,71 +385,82 @@ const CaseStudyHighlightGrid = () => {
 // FAQ Data
 const ecommerceFAQs = [
   {
-    question: "What eCommerce platforms (e.g., Shopify, Magento, custom builds) do you specialize in?",
+    question:
-    answer: "We work with all major platforms including Shopify, Magento, WooCommerce, and BigCommerce, but we specialize in custom-built solutions using modern technologies like React, Node.js, and cloud-native architectures for maximum flexibility and performance."
+      "What eCommerce platforms (e.g., Shopify, Magento, custom builds) do you specialize in?",
+    answer:
+      "We work with all major platforms including Shopify, Magento, WooCommerce, and BigCommerce, but we specialize in custom-built solutions using modern technologies like React, Node.js, and cloud-native architectures for maximum flexibility and performance.",
   },
   {
-    question: "How do you ensure scalability for high traffic volumes and large product catalogs?",
+    question:
-    answer: "We implement cloud-native architectures with auto-scaling, CDN integration, database optimization, caching strategies, and microservices architecture. Our platforms are designed to handle millions of products and thousands of concurrent users without performance degradation."
+      "How do you ensure scalability for high traffic volumes and large product catalogs?",
+    answer:
+      "We implement cloud-native architectures with auto-scaling, CDN integration, database optimization, caching strategies, and microservices architecture. Our platforms are designed to handle millions of products and thousands of concurrent users without performance degradation.",
   },
   {
-    question: "What security measures do you implement for payment processing (PCI DSS) and customer data?",
+    question:
-    answer: "We ensure full PCI DSS compliance with tokenization, encryption at rest and in transit, secure payment gateway integrations, regular security audits, and implementation of security best practices throughout the development lifecycle."
+      "What security measures do you implement for payment processing (PCI DSS) and customer data?",
+    answer:
+      "We ensure full PCI DSS compliance with tokenization, encryption at rest and in transit, secure payment gateway integrations, regular security audits, and implementation of security best practices throughout the development lifecycle.",
   },
   {
-    question: "Can you integrate with third-party logistics (3PL) providers and ERP systems?",
+    question:
-    answer: "Yes, we have extensive experience integrating with major 3PL providers (FedEx, UPS, DHL), warehouse management systems, and ERP platforms (SAP, Oracle, NetSuite) to create seamless order fulfillment workflows."
+      "Can you integrate with third-party logistics (3PL) providers and ERP systems?",
+    answer:
+      "Yes, we have extensive experience integrating with major 3PL providers (FedEx, UPS, DHL), warehouse management systems, and ERP platforms (SAP, Oracle, NetSuite) to create seamless order fulfillment workflows.",
   },
   {
-    question: "Do you offer solutions for customer personalization and loyalty programs?",
+    question:
-    answer: "Absolutely! We implement AI-driven recommendation engines, personalized shopping experiences, dynamic pricing, and comprehensive loyalty program features including points systems, tier-based rewards, and targeted promotions."
+      "Do you offer solutions for customer personalization and loyalty programs?",
-  }
+    answer:
+      "Absolutely! We implement AI-driven recommendation engines, personalized shopping experiences, dynamic pricing, and comprehensive loyalty program features including points systems, tier-based rewards, and targeted promotions.",
+  },
 ];
 
 export const EcommerceMarketplaces = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
       <Navigation />
-      
+
       <HeroBanner
         category="Commerce & Consumer"
         title="eCommerce & Marketplaces"
         description="Build high-performing, scalable, and conversion-optimized eCommerce websites and multi-vendor marketplaces that drive sales and foster growth."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project",
         }}
         secondaryCTA={{
           text: "View eCommerce Case Studies",
-          href: "/case-studies"
+          href: "/case-studies",
         }}
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="eCommerce & Marketplace FAQs"
           subtitle="Get answers to common questions about our eCommerce and marketplace development services."
           faqs={ecommerceFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <SplitCallToAction />
       </div>
-      
+
       <Footer />
     </div>
   );
-};
+};

pages/EcommercePlatforms.tsx

@@ -1334,7 +1334,7 @@ const HireEcommerceDevelopers = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 h-[56px] border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />

pages/EdTechPlatforms.tsx

@@ -362,7 +362,8 @@ export const EdTechPlatforms = () => {
         description="Transform learning experiences and streamline education management with innovative, engaging, and scalable EdTech platforms."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View EdTech Case Studies",

pages/EngagementModels.tsx

@@ -4,34 +4,78 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, DollarSign, Clock, Users, Target, Zap, Shield, CheckCircle, Star } from "lucide-react";
+import {
+  ArrowRight,
+  DollarSign,
+  Clock,
+  Users,
+  Target,
+  Zap,
+  Shield,
+  CheckCircle,
+  Star,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const EngagementModels = () => {
   const models = [
     {
       icon: DollarSign,
       title: "Fixed Price Model",
-      description: "Ideal for projects with well-defined requirements, scope, and deliverables. We agree on a fixed price and timeline upfront, ensuring budget predictability.",
+      description:
-      bestFor: ["MVPs", "Specific feature development", "Clear scope projects", "Smaller applications"],
+        "Ideal for projects with well-defined requirements, scope, and deliverables. We agree on a fixed price and timeline upfront, ensuring budget predictability.",
-      benefits: ["Predictable costs", "Clearly defined deliverables", "Minimal financial risk"],
+      bestFor: [
-      color: "from-blue-400 to-blue-600"
+        "MVPs",
+        "Specific feature development",
+        "Clear scope projects",
+        "Smaller applications",
+      ],
+      benefits: [
+        "Predictable costs",
+        "Clearly defined deliverables",
+        "Minimal financial risk",
+      ],
+      color: "from-blue-400 to-blue-600",
     },
     {
       icon: Clock,
       title: "Time & Material (T&M) Model",
-      description: "Perfect for projects with evolving requirements, dynamic scope, or long-term development. You pay for the actual time and resources spent, offering maximum flexibility.",
+      description:
-      bestFor: ["Complex projects", "Agile development", "Ongoing support", "R&D initiatives"],
+        "Perfect for projects with evolving requirements, dynamic scope, or long-term development. You pay for the actual time and resources spent, offering maximum flexibility.",
-      benefits: ["High flexibility for changes", "Transparent billing", "Adaptability to market shifts", "Continuous refinement"],
+      bestFor: [
-      color: "from-green-400 to-green-600"
+        "Complex projects",
+        "Agile development",
+        "Ongoing support",
+        "R&D initiatives",
+      ],
+      benefits: [
+        "High flexibility for changes",
+        "Transparent billing",
+        "Adaptability to market shifts",
+        "Continuous refinement",
+      ],
+      color: "from-green-400 to-green-600",
     },
     {
       icon: Users,
       title: "Dedicated Team Model",
-      description: "Gain a fully integrated team of WDI professionals working exclusively on your project. You have direct control over the team, processes, and project direction, similar to an in-house extension.",
+      description:
-      bestFor: ["Long-term projects", "Ongoing product development", "Scaling existing teams", "Building robust, complex solutions"],
+        "Gain a fully integrated team of WDI professionals working exclusively on your project. You have direct control over the team, processes, and project direction, similar to an in-house extension.",
-      benefits: ["Full control", "Seamless integration", "Undivided attention", "Access to diverse skill sets", "Cost-efficiency"],
+      bestFor: [
-      color: "from-[#E5195E] to-[#FF6B9D]"
+        "Long-term projects",
-    }
+        "Ongoing product development",
+        "Scaling existing teams",
+        "Building robust, complex solutions",
+      ],
+      benefits: [
+        "Full control",
+        "Seamless integration",
+        "Undivided attention",
+        "Access to diverse skill sets",
+        "Cost-efficiency",
+      ],
+      color: "from-[#E5195E] to-[#FF6B9D]",
+    },
   ];
 
   const comparisonFeatures = [
@@ -39,84 +83,98 @@ export const EngagementModels = () => {
       feature: "Budget Predictability",
       fixedPrice: "High",
       timeAndMaterial: "Medium",
-      dedicatedTeam: "Medium-High"
+      dedicatedTeam: "Medium-High",
     },
     {
       feature: "Flexibility for Changes",
       fixedPrice: "Low",
       timeAndMaterial: "High",
-      dedicatedTeam: "High"
+      dedicatedTeam: "High",
     },
     {
       feature: "Direct Team Control",
       fixedPrice: "Low",
       timeAndMaterial: "Medium",
-      dedicatedTeam: "High"
+      dedicatedTeam: "High",
     },
     {
       feature: "Best for Long-term Projects",
       fixedPrice: "Low",
       timeAndMaterial: "Medium",
-      dedicatedTeam: "High"
+      dedicatedTeam: "High",
     },
     {
       feature: "Quick Start",
       fixedPrice: "High",
       timeAndMaterial: "Medium",
-      dedicatedTeam: "Medium"
+      dedicatedTeam: "Medium",
-    }
+    },
   ];
 
   const testimonials = [
     {
-      quote: "The Time & Material model was perfect for our evolving startup needs. We could adapt quickly while maintaining transparent costs throughout the development process.",
+      quote:
+        "The Time & Material model was perfect for our evolving startup needs. We could adapt quickly while maintaining transparent costs throughout the development process.",
       author: "Sarah Kim",
       role: "Founder, StartupFlow",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "Fixed Price model gave us exactly what we needed - predictable costs and clear deliverables for our MVP launch. WDI delivered on time and within budget.",
+      quote:
+        "Fixed Price model gave us exactly what we needed - predictable costs and clear deliverables for our MVP launch. WDI delivered on time and within budget.",
       author: "Michael Rodriguez",
       role: "Product Manager, TechVision",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
-        <div 
+        <div
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
-        
+
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Tailored Solutions for Your Business
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-              Engagement Models: Tailored Solutions for Your 
+              Engagement Models: Tailored Solutions for Your
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Project Success</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Project Success
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Choose the Model That Fits Your Project, Budget, and Goals Perfectly. At WDI, we understand that every project is unique, with distinct requirements and budgetary considerations.
+              Choose the Model That Fits Your Project, Budget, and Goals
+              Perfectly. At WDI, we understand that every project is unique,
+              with distinct requirements and budgetary considerations.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Let's Discuss Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 Get a Personalized Proposal
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -127,7 +185,10 @@ export const EngagementModels = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              That's why we offer a range of flexible engagement models designed to provide optimal value, transparency, and control. Whether you have a clearly defined scope or need an agile approach, we have a model to suit your needs.
+              That's why we offer a range of flexible engagement models designed
+              to provide optimal value, transparency, and control. Whether you
+              have a clearly defined scope or need an agile approach, we have a
+              model to suit your needs.
             </p>
           </div>
         </div>
@@ -141,60 +202,83 @@ export const EngagementModels = () => {
               Our Core Engagement Models
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Flexible approaches designed to meet your specific project needs and goals
+              Flexible approaches designed to meet your specific project needs
+              and goals
             </p>
           </div>
-          
+
           <div className="space-y-8">
             {models.map((model, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-8">
                   <div className="grid lg:grid-cols-3 gap-8 items-start">
                     {/* Model Overview */}
                     <div className="lg:col-span-2">
                       <div className="flex items-center gap-4 mb-6">
-                        <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${model.color} flex items-center justify-center`}>
+                        <div
+                          className={`w-12 h-12 rounded-xl bg-gradient-to-br ${model.color} flex items-center justify-center`}
+                        >
                           <model.icon className="w-6 h-6 text-white" />
                         </div>
                         <h3 className="text-2xl font-bold text-white group-hover:text-[#E5195E] transition-colors duration-300">
                           {model.title}
                         </h3>
                       </div>
-                      
+
                       <p className="text-muted-foreground mb-6 leading-relaxed">
                         {model.description}
                       </p>
-                      
+
                       <div className="grid md:grid-cols-2 gap-6">
                         <div>
-                          <h4 className="text-white font-semibold mb-3">Best For:</h4>
+                          <h4 className="text-white font-semibold mb-3">
+                            Best For:
+                          </h4>
                           <ul className="space-y-2">
                             {model.bestFor.map((item, itemIndex) => (
-                              <li key={itemIndex} className="flex items-center gap-2">
+                              <li
+                                key={itemIndex}
+                                className="flex items-center gap-2"
+                              >
                                 <CheckCircle className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
-                                <span className="text-muted-foreground text-sm">{item}</span>
+                                <span className="text-muted-foreground text-sm">
+                                  {item}
+                                </span>
                               </li>
                             ))}
                           </ul>
                         </div>
-                        
+
                         <div>
-                          <h4 className="text-white font-semibold mb-3">Benefits:</h4>
+                          <h4 className="text-white font-semibold mb-3">
+                            Benefits:
+                          </h4>
                           <ul className="space-y-2">
                             {model.benefits.map((benefit, benefitIndex) => (
-                              <li key={benefitIndex} className="flex items-center gap-2">
+                              <li
+                                key={benefitIndex}
+                                className="flex items-center gap-2"
+                              >
                                 <Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
-                                <span className="text-muted-foreground text-sm">{benefit}</span>
+                                <span className="text-muted-foreground text-sm">
+                                  {benefit}
+                                </span>
                               </li>
                             ))}
                           </ul>
                         </div>
                       </div>
                     </div>
-                    
+
                     {/* CTA */}
                     <div className="flex justify-center lg:justify-end">
-                      <Button className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+                      <Button
+                        className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                        onClick={() => navigateTo("/start-a-project")}
+                      >
                         Learn More
                         <ArrowRight className="ml-2 w-4 h-4" />
                       </Button>
@@ -215,10 +299,11 @@ export const EngagementModels = () => {
               Model Comparison
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Compare our engagement models to find the perfect fit for your project
+              Compare our engagement models to find the perfect fit for your
+              project
             </p>
           </div>
-          
+
           <div className="max-w-4xl mx-auto">
             <Card className="bg-background/50 border-white/10 overflow-hidden">
               <CardContent className="p-0">
@@ -226,28 +311,68 @@ export const EngagementModels = () => {
                   <table className="w-full">
                     <thead>
                       <tr className="border-b border-white/10">
-                        <th className="text-left p-6 text-white font-semibold">Feature</th>
+                        <th className="text-left p-6 text-white font-semibold">
-                        <th className="text-center p-6 text-white font-semibold">Fixed Price</th>
+                          Feature
-                        <th className="text-center p-6 text-white font-semibold">Time & Material</th>
+                        </th>
-                        <th className="text-center p-6 text-white font-semibold">Dedicated Team</th>
+                        <th className="text-center p-6 text-white font-semibold">
+                          Fixed Price
+                        </th>
+                        <th className="text-center p-6 text-white font-semibold">
+                          Time & Material
+                        </th>
+                        <th className="text-center p-6 text-white font-semibold">
+                          Dedicated Team
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       {comparisonFeatures.map((feature, index) => (
-                        <tr key={index} className="border-b border-white/5 hover:bg-white/5">
+                        <tr
-                          <td className="p-6 text-muted-foreground">{feature.feature}</td>
+                          key={index}
+                          className="border-b border-white/5 hover:bg-white/5"
+                        >
+                          <td className="p-6 text-muted-foreground">
+                            {feature.feature}
+                          </td>
                           <td className="p-6 text-center">
-                            <Badge variant="outline" className={`border-blue-500/30 text-blue-400 ${feature.fixedPrice === 'High' ? 'bg-blue-500/10' : feature.fixedPrice === 'Medium' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
+                            <Badge
+                              variant="outline"
+                              className={`border-blue-500/30 text-blue-400 ${
+                                feature.fixedPrice === "High"
+                                  ? "bg-blue-500/10"
+                                  : feature.fixedPrice === "Medium"
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
+                              }`}
+                            >
                               {feature.fixedPrice}
                             </Badge>
                           </td>
                           <td className="p-6 text-center">
-                            <Badge variant="outline" className={`border-green-500/30 text-green-400 ${feature.timeAndMaterial === 'High' ? 'bg-green-500/10' : feature.timeAndMaterial === 'Medium' ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
+                            <Badge
+                              variant="outline"
+                              className={`border-green-500/30 text-green-400 ${
+                                feature.timeAndMaterial === "High"
+                                  ? "bg-green-500/10"
+                                  : feature.timeAndMaterial === "Medium"
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
+                              }`}
+                            >
                               {feature.timeAndMaterial}
                             </Badge>
                           </td>
                           <td className="p-6 text-center">
-                            <Badge variant="outline" className={`border-[#E5195E]/30 text-[#E5195E] ${feature.dedicatedTeam === 'High' ? 'bg-[#E5195E]/10' : feature.dedicatedTeam.includes('Medium') ? 'bg-yellow-500/10' : 'bg-red-500/10'}`}>
+                            <Badge
+                              variant="outline"
+                              className={`border-[#E5195E]/30 text-[#E5195E] ${
+                                feature.dedicatedTeam === "High"
+                                  ? "bg-[#E5195E]/10"
+                                  : feature.dedicatedTeam.includes("Medium")
+                                  ? "bg-yellow-500/10"
+                                  : "bg-red-500/10"
+                              }`}
+                            >
                               {feature.dedicatedTeam}
                             </Badge>
                           </td>
@@ -270,9 +395,12 @@ export const EngagementModels = () => {
               Choosing the Right Model
             </h2>
             <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
-              Our experts will consult with you to analyze your project's specific needs, objectives, budget, and desired level of control to recommend the most suitable engagement model for optimal success.
+              Our experts will consult with you to analyze your project's
+              specific needs, objectives, budget, and desired level of control
+              to recommend the most suitable engagement model for optimal
+              success.
             </p>
-            
+
             <Card className="bg-card/50 border-white/10 text-left">
               <CardContent className="p-8">
                 <div className="grid md:grid-cols-3 gap-8">
@@ -280,24 +408,36 @@ export const EngagementModels = () => {
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mx-auto mb-4">
                       <Target className="w-8 h-8 text-white" />
                     </div>
-                    <h3 className="text-white font-semibold mb-2">Project Analysis</h3>
+                    <h3 className="text-white font-semibold mb-2">
-                    <p className="text-muted-foreground text-sm">We assess your requirements, scope, and timeline</p>
+                      Project Analysis
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      We assess your requirements, scope, and timeline
+                    </p>
                   </div>
-                  
+
                   <div className="text-center">
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center mx-auto mb-4">
                       <Users className="w-8 h-8 text-white" />
                     </div>
-                    <h3 className="text-white font-semibold mb-2">Expert Consultation</h3>
+                    <h3 className="text-white font-semibold mb-2">
-                    <p className="text-muted-foreground text-sm">Our team provides personalized recommendations</p>
+                      Expert Consultation
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      Our team provides personalized recommendations
+                    </p>
                   </div>
-                  
+
                   <div className="text-center">
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center mx-auto mb-4">
                       <Zap className="w-8 h-8 text-white" />
                     </div>
-                    <h3 className="text-white font-semibold mb-2">Optimal Success</h3>
+                    <h3 className="text-white font-semibold mb-2">
-                    <p className="text-muted-foreground text-sm">Achieve your goals with the perfect model</p>
+                      Optimal Success
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      Achieve your goals with the perfect model
+                    </p>
                   </div>
                 </div>
               </CardContent>
@@ -351,14 +491,23 @@ export const EngagementModels = () => {
               Ready to Find Your Perfect Model?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Let our experts help you choose the engagement model that best fits your project needs and goals.
+              Let our experts help you choose the engagement model that best
+              fits your project needs and goals.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Start Your Consultation
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Compare Models
               </Button>
             </div>
@@ -369,4 +518,4 @@ export const EngagementModels = () => {
       <Footer />
     </div>
   );
-};
+};

pages/EventTicketingSolutions.tsx

@@ -10,10 +10,22 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
+import {
-  Search, MapPin, CreditCard, Users, Calendar, 
+  Search,
-  QrCode, BarChart3, Target, CheckCircle, Star, 
+  MapPin,
-  Zap, Shield, Globe, Award, Bell
+  CreditCard,
+  Users,
+  Calendar,
+  QrCode,
+  BarChart3,
+  Target,
+  CheckCircle,
+  Star,
+  Zap,
+  Shield,
+  Globe,
+  Award,
+  Bell,
 } from "lucide-react";
 
 // Problem Solution Block Component
@@ -29,10 +41,12 @@ const ProblemSolutionBlock = () => {
           className="max-w-6xl mx-auto"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
-            <span className="text-white">Addressing the Core Challenges of </span>
+            <span className="text-white">
+              Addressing the Core Challenges of{" "}
+            </span>
             <span className="text-[#E5195E]">Event & Ticketing Solutions</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -49,11 +63,16 @@ const ProblemSolutionBlock = () => {
                   The Challenge
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  Managing events and selling tickets efficiently requires platforms that can handle high transaction volumes, provide secure ticketing and access control, and offer intuitive experiences for both organizers and attendees. Challenges include fraud prevention, real-time inventory management, and engaging audiences before, during, and after events.
+                  Managing events and selling tickets efficiently requires
+                  platforms that can handle high transaction volumes, provide
+                  secure ticketing and access control, and offer intuitive
+                  experiences for both organizers and attendees. Challenges
+                  include fraud prevention, real-time inventory management, and
+                  engaging audiences before, during, and after events.
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -69,7 +88,12 @@ const ProblemSolutionBlock = () => {
                   Our Event & Ticketing Solution
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  WDI specializes in building comprehensive event and ticketing platforms. We create solutions for event discovery, secure online ticket sales, attendee registration, and venue management, focusing on user experience, scalability, robust security, and powerful analytics to ensure successful events and satisfied attendees.
+                  WDI specializes in building comprehensive event and ticketing
+                  platforms. We create solutions for event discovery, secure
+                  online ticket sales, attendee registration, and venue
+                  management, focusing on user experience, scalability, robust
+                  security, and powerful analytics to ensure successful events
+                  and satisfied attendees.
                 </p>
               </div>
             </motion.div>
@@ -86,38 +110,45 @@ const IconWithDescriptionGrid = () => {
     {
       icon: Search,
       title: "Event Listing & Discovery",
-      description: "Intuitive search, filtering, and categorization for users to find events by genre, date, location, and popularity."
+      description:
+        "Intuitive search, filtering, and categorization for users to find events by genre, date, location, and popularity.",
     },
     {
       icon: CreditCard,
       title: "Secure Online Ticketing & Sales",
-      description: "Seamless ticket purchase workflows, secure payment gateway integrations, and support for various ticket types (e.g., VIP, early bird)."
+      description:
+        "Seamless ticket purchase workflows, secure payment gateway integrations, and support for various ticket types (e.g., VIP, early bird).",
     },
     {
       icon: Users,
       title: "Attendee Registration & Management",
-      description: "Tools for collecting attendee information, sending confirmations, and managing attendee lists."
+      description:
+        "Tools for collecting attendee information, sending confirmations, and managing attendee lists.",
     },
     {
       icon: MapPin,
       title: "Venue Management & Seating Maps",
-      description: "Interactive seating charts, capacity management, and booking for specific areas within a venue."
+      description:
+        "Interactive seating charts, capacity management, and booking for specific areas within a venue.",
     },
     {
       icon: QrCode,
       title: "Ticket Validation & Access Control",
-      description: "Mobile scanning solutions (QR/barcode), digital check-in, and fraud prevention mechanisms at entry points."
+      description:
+        "Mobile scanning solutions (QR/barcode), digital check-in, and fraud prevention mechanisms at entry points.",
     },
     {
       icon: Bell,
       title: "Event Promotion & Marketing Tools",
-      description: "Integrated features for email campaigns, social media sharing, and tracking marketing effectiveness."
+      description:
+        "Integrated features for email campaigns, social media sharing, and tracking marketing effectiveness.",
     },
     {
       icon: BarChart3,
       title: "Real-time Analytics & Reporting",
-      description: "Dashboards for event organizers to monitor ticket sales, attendance rates, and revenue in real time."
+      description:
-    }
+        "Dashboards for event organizers to monitor ticket sales, attendance rates, and revenue in real time.",
+    },
   ];
 
   return (
@@ -134,10 +165,11 @@ const IconWithDescriptionGrid = () => {
             Powerful Features for Your Event & Ticketing Solutions
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Comprehensive tools to create seamless event experiences that maximize attendance and engagement.
+            Comprehensive tools to create seamless event experiences that
+            maximize attendance and engagement.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -178,23 +210,27 @@ const ThreeColumnFeatureBlock = () => {
     {
       icon: Zap,
       title: "High-Volume Transaction Handling",
-      description: "Building robust systems designed to manage sudden surges in ticket sales without outages."
+      description:
+        "Building robust systems designed to manage sudden surges in ticket sales without outages.",
     },
     {
       icon: Shield,
       title: "Advanced Security & Fraud Prevention",
-      description: "Implementing sophisticated measures to protect against ticket fraud and secure payment data."
+      description:
+        "Implementing sophisticated measures to protect against ticket fraud and secure payment data.",
     },
     {
       icon: Users,
       title: "Seamless Attendee Experience",
-      description: "Focusing on intuitive booking flows, easy digital ticket access, and smooth check-in processes."
+      description:
+        "Focusing on intuitive booking flows, easy digital ticket access, and smooth check-in processes.",
     },
     {
       icon: Globe,
       title: "Customization & Integration",
-      description: "Tailoring platforms to unique event needs and integrating with CRM, marketing, or venue management systems."
+      description:
-    }
+        "Tailoring platforms to unique event needs and integrating with CRM, marketing, or venue management systems.",
+    },
   ];
 
   return (
@@ -211,10 +247,11 @@ const ThreeColumnFeatureBlock = () => {
             Why Partner with WDI for Event & Ticketing Solution Development?
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Leverage our expertise to create event platforms that truly serve organizers and delight attendees.
+            Leverage our expertise to create event platforms that truly serve
+            organizers and delight attendees.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -250,18 +287,28 @@ const CaseStudyHighlightGrid = () => {
   const caseStudies = [
     {
       title: "Large-Scale Music Festival Ticketing Platform",
-      problem: "An event organizer needed a secure and scalable platform to handle millions of ticket sales for a major music festival.",
+      problem:
-      solution: "WDI developed a custom ticketing platform with advanced fraud detection, queue management during peak sales, and mobile check-in.",
+        "An event organizer needed a secure and scalable platform to handle millions of ticket sales for a major music festival.",
-      results: "Successfully managed over 2 million ticket sales with zero security breaches and a smooth check-in process for attendees.",
+      solution:
-      metrics: ["2M+ Tickets", "Zero Breaches", "Music Festival"]
+        "WDI developed a custom ticketing platform with advanced fraud detection, queue management during peak sales, and mobile check-in.",
+      results:
+        "Successfully managed over 2 million ticket sales with zero security breaches and a smooth check-in process for attendees.",
+      metrics: ["2M+ Tickets", "Zero Breaches", "Music Festival"],
     },
     {
       title: "Corporate Event Management & Registration System",
-      problem: "A professional events company struggled with manual registration and attendee management for its numerous corporate conferences.",
+      problem:
-      solution: "Built an integrated event management system featuring online registration, personalized agendas, networking tools, and post-event analytics.",
+        "A professional events company struggled with manual registration and attendee management for its numerous corporate conferences.",
-      results: "Reduced registration time by 50% and improved attendee engagement by 20% through in-app features.",
+      solution:
-      metrics: ["50% ↓ Registration Time", "20% ↑ Engagement", "Corporate Events"]
+        "Built an integrated event management system featuring online registration, personalized agendas, networking tools, and post-event analytics.",
-    }
+      results:
+        "Reduced registration time by 50% and improved attendee engagement by 20% through in-app features.",
+      metrics: [
+        "50% ↓ Registration Time",
+        "20% ↑ Engagement",
+        "Corporate Events",
+      ],
+    },
   ];
 
   return (
@@ -278,10 +325,11 @@ const CaseStudyHighlightGrid = () => {
             Event & Ticketing Solution Success Stories
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Real results from our event platform implementations that transformed event management.
+            Real results from our event platform implementations that
+            transformed event management.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -295,7 +343,11 @@ const CaseStudyHighlightGrid = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-2 mb-4">
                     {study.metrics.map((metric, i) => (
-                      <Badge key={i} variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30">
+                      <Badge
+                        key={i}
+                        variant="secondary"
+                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
+                      >
                         {metric}
                       </Badge>
                     ))}
@@ -305,15 +357,21 @@ const CaseStudyHighlightGrid = () => {
                   </h3>
                   <div className="space-y-4">
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Problem:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Problem:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.problem}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Solution:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Solution:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.solution}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Results:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Results:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.results}</p>
                     </div>
                   </div>
@@ -330,71 +388,82 @@ const CaseStudyHighlightGrid = () => {
 // FAQ Data
 const eventTicketingFAQs = [
   {
-    question: "How do you ensure scalability for high-volume ticket sales for popular events?",
+    question:
-    answer: "We implement cloud-native architectures with auto-scaling, load balancing, queue management systems, and CDN integration. Our platforms are designed to handle millions of concurrent users during peak sales periods without performance degradation."
+      "How do you ensure scalability for high-volume ticket sales for popular events?",
+    answer:
+      "We implement cloud-native architectures with auto-scaling, load balancing, queue management systems, and CDN integration. Our platforms are designed to handle millions of concurrent users during peak sales periods without performance degradation.",
   },
   {
-    question: "What security measures do you implement to prevent ticket fraud and protect payment data?",
+    question:
-    answer: "We implement advanced fraud detection algorithms, blockchain-based ticket authentication, PCI DSS compliant payment processing, encrypted QR/barcode generation, and real-time monitoring systems to prevent fraudulent activities."
+      "What security measures do you implement to prevent ticket fraud and protect payment data?",
+    answer:
+      "We implement advanced fraud detection algorithms, blockchain-based ticket authentication, PCI DSS compliant payment processing, encrypted QR/barcode generation, and real-time monitoring systems to prevent fraudulent activities.",
   },
   {
-    question: "Can you integrate with venue management systems or access control hardware?",
+    question:
-    answer: "Yes, we have extensive experience integrating with venue management systems, turnstile hardware, barcode scanners, RFID readers, and mobile check-in devices. We ensure seamless data flow between platforms and physical access control systems."
+      "Can you integrate with venue management systems or access control hardware?",
+    answer:
+      "Yes, we have extensive experience integrating with venue management systems, turnstile hardware, barcode scanners, RFID readers, and mobile check-in devices. We ensure seamless data flow between platforms and physical access control systems.",
   },
   {
-    question: "Do you offer solutions for virtual or hybrid events in addition to in-person?",
+    question:
-    answer: "Absolutely! We develop comprehensive solutions for virtual events, hybrid experiences, and live streaming integration. Our platforms support virtual networking, online presentations, interactive Q&A, and digital attendance tracking."
+      "Do you offer solutions for virtual or hybrid events in addition to in-person?",
+    answer:
+      "Absolutely! We develop comprehensive solutions for virtual events, hybrid experiences, and live streaming integration. Our platforms support virtual networking, online presentations, interactive Q&A, and digital attendance tracking.",
   },
   {
-    question: "What kind of analytics and reporting do you provide for event organizers?",
+    question:
-    answer: "Our platforms provide real-time dashboards with ticket sales analytics, attendance tracking, revenue reporting, demographic insights, marketing campaign effectiveness, and post-event surveys. All data is presented in intuitive, actionable formats."
+      "What kind of analytics and reporting do you provide for event organizers?",
-  }
+    answer:
+      "Our platforms provide real-time dashboards with ticket sales analytics, attendance tracking, revenue reporting, demographic insights, marketing campaign effectiveness, and post-event surveys. All data is presented in intuitive, actionable formats.",
+  },
 ];
 
 export const EventTicketingSolutions = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
       <Navigation />
-      
+
       <HeroBanner
         category="Commerce & Consumer"
         title="Event & Ticketing Solutions"
         description="Create seamless experiences for event discovery, ticket sales, and attendee management with robust and scalable event and ticketing platforms."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project",
         }}
         secondaryCTA={{
           text: "View EventTech Case Studies",
-          href: "/case-studies"
+          href: "/case-studies",
         }}
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="Event & Ticketing Solution FAQs"
           subtitle="Get answers to common questions about our event and ticketing platform development services."
           faqs={eventTicketingFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <SplitCallToAction />
       </div>
-      
+
       <Footer />
     </div>
   );
-};
+};

pages/FAQs.tsx

@@ -5,8 +5,20 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Input } from "../components/ui/input";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
-import { HelpCircle, Search, ArrowRight, MessageSquare, Phone, Mail } from "lucide-react";
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
+import {
+  HelpCircle,
+  Search,
+  ArrowRight,
+  MessageSquare,
+  Phone,
+  Mail,
+} from "lucide-react";
 import { navigateTo } from "../App";
 
 export const FAQs = () => {
@@ -19,21 +31,25 @@ export const FAQs = () => {
       faqs: [
         {
           question: "What industries does WDI serve?",
-          answer: "WDI serves a diverse range of industries including Healthcare, FinTech, E-commerce, Education, Manufacturing, Real Estate, Logistics, and many more. Our expertise spans across various sectors, allowing us to understand unique industry challenges and deliver tailored solutions that meet specific regulatory requirements and business needs."
+          answer:
+            "WDI serves a diverse range of industries including Healthcare, FinTech, E-commerce, Education, Manufacturing, Real Estate, Logistics, and many more. Our expertise spans across various sectors, allowing us to understand unique industry challenges and deliver tailored solutions that meet specific regulatory requirements and business needs.",
         },
         {
           question: "What makes WDI different from other tech partners?",
-          answer: "We differentiate ourselves through our comprehensive approach that combines technical excellence with deep industry knowledge. Our unique strengths include: 1) End-to-end solution delivery from concept to deployment, 2) Agile methodology with transparent communication, 3) Proven track record with 500+ successful projects, 4) Expert team of 150+ professionals, 5) Focus on long-term partnerships rather than just project completion, and 6) Cutting-edge technology adoption including AI/ML, cloud solutions, and modern development frameworks."
+          answer:
+            "We differentiate ourselves through our comprehensive approach that combines technical excellence with deep industry knowledge. Our unique strengths include: 1) End-to-end solution delivery from concept to deployment, 2) Agile methodology with transparent communication, 3) Proven track record with 500+ successful projects, 4) Expert team of 150+ professionals, 5) Focus on long-term partnerships rather than just project completion, and 6) Cutting-edge technology adoption including AI/ML, cloud solutions, and modern development frameworks.",
         },
         {
           question: "How long has WDI been in business?",
-          answer: "WDI has been pioneering digital transformation solutions for over 6 years. Since our founding, we have successfully delivered 500+ projects, built a team of 150+ expert professionals, and established ourselves as a trusted technology partner for businesses ranging from startups to enterprise organizations."
+          answer:
+            "WDI has been pioneering digital transformation solutions for over 6 years. Since our founding, we have successfully delivered 500+ projects, built a team of 150+ expert professionals, and established ourselves as a trusted technology partner for businesses ranging from startups to enterprise organizations.",
         },
         {
           question: "What is WDI's approach to project management?",
-          answer: "We follow Agile project management methodologies, primarily Scrum and Kanban, but we adapt our approach based on client preferences and project requirements. Our process includes regular sprint planning, daily standups, sprint reviews, and retrospectives. We maintain transparent communication through dedicated project managers, regular status updates, and collaborative tools that keep clients informed throughout the development process."
+          answer:
-        }
+            "We follow Agile project management methodologies, primarily Scrum and Kanban, but we adapt our approach based on client preferences and project requirements. Our process includes regular sprint planning, daily standups, sprint reviews, and retrospectives. We maintain transparent communication through dedicated project managers, regular status updates, and collaborative tools that keep clients informed throughout the development process.",
-      ]
+        },
+      ],
     },
     {
       category: "Services & Solutions",
@@ -41,21 +57,25 @@ export const FAQs = () => {
       faqs: [
         {
           question: "What development methodologies does WDI follow?",
-          answer: "We primarily follow Agile methodologies including Scrum and Kanban, but we can adapt to client preferences such as Waterfall or hybrid approaches. Our Agile process includes sprint planning, daily standups, sprint reviews, and retrospectives. We use modern development practices like continuous integration/continuous deployment (CI/CD), test-driven development (TDD), and code reviews to ensure high-quality deliverables."
+          answer:
+            "We primarily follow Agile methodologies including Scrum and Kanban, but we can adapt to client preferences such as Waterfall or hybrid approaches. Our Agile process includes sprint planning, daily standups, sprint reviews, and retrospectives. We use modern development practices like continuous integration/continuous deployment (CI/CD), test-driven development (TDD), and code reviews to ensure high-quality deliverables.",
         },
         {
           question: "Do you offer post-development support and maintenance?",
-          answer: "Yes, we provide comprehensive post-launch support and maintenance packages that include: 1) 24/7 technical support, 2) Bug fixes and security patches, 3) Performance monitoring and optimization, 4) Feature enhancements and updates, 5) Infrastructure management and scaling, 6) Regular health checks and reporting. Our support packages are customizable based on your specific needs and can include different SLA levels."
+          answer:
+            "Yes, we provide comprehensive post-launch support and maintenance packages that include: 1) 24/7 technical support, 2) Bug fixes and security patches, 3) Performance monitoring and optimization, 4) Feature enhancements and updates, 5) Infrastructure management and scaling, 6) Regular health checks and reporting. Our support packages are customizable based on your specific needs and can include different SLA levels.",
         },
         {
           question: "Can WDI integrate with our existing systems?",
-          answer: "Absolutely! We specialize in third-party integrations and can seamlessly connect new solutions with your existing systems, databases, and applications. Our integration expertise includes APIs, webhooks, middleware solutions, ETL processes, and cloud-to-cloud integrations. We ensure data consistency, security, and minimal disruption to your current operations during the integration process."
+          answer:
+            "Absolutely! We specialize in third-party integrations and can seamlessly connect new solutions with your existing systems, databases, and applications. Our integration expertise includes APIs, webhooks, middleware solutions, ETL processes, and cloud-to-cloud integrations. We ensure data consistency, security, and minimal disruption to your current operations during the integration process.",
         },
         {
           question: "What is your approach to UI/UX design?",
-          answer: "Our UI/UX design process follows a user-centered design approach that includes: 1) User research and persona development, 2) Information architecture and wireframing, 3) Interactive prototyping and user testing, 4) Visual design and style guide creation, 5) Accessibility compliance (WCAG guidelines), 6) Responsive design for all devices, and 7) Continuous iteration based on user feedback. We use design thinking workshops to align stakeholders and ensure optimal user experiences."
+          answer:
-        }
+            "Our UI/UX design process follows a user-centered design approach that includes: 1) User research and persona development, 2) Information architecture and wireframing, 3) Interactive prototyping and user testing, 4) Visual design and style guide creation, 5) Accessibility compliance (WCAG guidelines), 6) Responsive design for all devices, and 7) Continuous iteration based on user feedback. We use design thinking workshops to align stakeholders and ensure optimal user experiences.",
-      ]
+        },
+      ],
     },
     {
       category: "Hiring & Engagement",
@@ -63,43 +83,52 @@ export const FAQs = () => {
       faqs: [
         {
           question: "How does WDI vet its talent?",
-          answer: "Our rigorous vetting process includes: 1) Technical assessments and coding challenges, 2) Multiple rounds of technical interviews, 3) Portfolio and project reviews, 4) Behavioral and cultural fit evaluations, 5) Reference checks from previous employers, 6) Continuous skill assessment and certification programs. We maintain a 95% client satisfaction rate with our talent, and all our professionals undergo regular training to stay updated with the latest technologies and best practices."
+          answer:
+            "Our rigorous vetting process includes: 1) Technical assessments and coding challenges, 2) Multiple rounds of technical interviews, 3) Portfolio and project reviews, 4) Behavioral and cultural fit evaluations, 5) Reference checks from previous employers, 6) Continuous skill assessment and certification programs. We maintain a 95% client satisfaction rate with our talent, and all our professionals undergo regular training to stay updated with the latest technologies and best practices.",
         },
         {
           question: "What are your typical engagement models?",
-          answer: "We offer three primary engagement models: 1) Fixed Price - Best for well-defined projects with clear scope and requirements, 2) Time & Material - Ideal for projects with evolving requirements or ongoing development needs, 3) Dedicated Team - Perfect for long-term partnerships where you need a committed team working exclusively on your projects. We can also create hybrid models that combine elements from different approaches based on your specific needs."
+          answer:
+            "We offer three primary engagement models: 1) Fixed Price - Best for well-defined projects with clear scope and requirements, 2) Time & Material - Ideal for projects with evolving requirements or ongoing development needs, 3) Dedicated Team - Perfect for long-term partnerships where you need a committed team working exclusively on your projects. We can also create hybrid models that combine elements from different approaches based on your specific needs.",
         },
         {
           question: "Can we hire dedicated developers from WDI?",
-          answer: "Yes, we offer dedicated development teams and individual developer hiring options. Our dedicated resources work exclusively on your projects and can be scaled up or down based on your needs. This model provides you with direct access to our talent pool while we handle all HR, administrative, and infrastructure aspects. The dedicated team integrates with your existing processes and becomes an extension of your in-house team."
+          answer:
+            "Yes, we offer dedicated development teams and individual developer hiring options. Our dedicated resources work exclusively on your projects and can be scaled up or down based on your needs. This model provides you with direct access to our talent pool while we handle all HR, administrative, and infrastructure aspects. The dedicated team integrates with your existing processes and becomes an extension of your in-house team.",
         },
         {
           question: "What is the typical timeline for team augmentation?",
-          answer: "Team augmentation timelines depend on the specific skills required and team size. Generally: 1) Standard skill sets: 1-2 weeks, 2) Specialized skills: 2-4 weeks, 3) Large teams (10+ members): 4-6 weeks. Our process includes requirement analysis, talent matching, interviews, onboarding, and integration. We maintain a bench of pre-vetted professionals to accelerate the process for common technology stacks."
+          answer:
-        }
+            "Team augmentation timelines depend on the specific skills required and team size. Generally: 1) Standard skill sets: 1-2 weeks, 2) Specialized skills: 2-4 weeks, 3) Large teams (10+ members): 4-6 weeks. Our process includes requirement analysis, talent matching, interviews, onboarding, and integration. We maintain a bench of pre-vetted professionals to accelerate the process for common technology stacks.",
-      ]
+        },
+      ],
     },
     {
       category: "Technical Questions",
       icon: MessageSquare,
       faqs: [
         {
-          question: "Which programming languages and frameworks do you specialize in?",
+          question:
-          answer: "We specialize in a wide range of modern technologies including: Frontend - React, Angular, Vue.js, Next.js, TypeScript; Backend - Node.js, Python, Java, .NET, PHP; Mobile - React Native, Flutter, iOS (Swift), Android (Kotlin); Cloud - AWS, Azure, Google Cloud; Databases - PostgreSQL, MongoDB, MySQL, Redis; AI/ML - TensorFlow, PyTorch, scikit-learn; DevOps - Docker, Kubernetes, Jenkins, Terraform. We continuously evaluate and adopt emerging technologies to provide cutting-edge solutions."
+            "Which programming languages and frameworks do you specialize in?",
+          answer:
+            "We specialize in a wide range of modern technologies including: Frontend - React, Angular, Vue.js, Next.js, TypeScript; Backend - Node.js, Python, Java, .NET, PHP; Mobile - React Native, Flutter, iOS (Swift), Android (Kotlin); Cloud - AWS, Azure, Google Cloud; Databases - PostgreSQL, MongoDB, MySQL, Redis; AI/ML - TensorFlow, PyTorch, scikit-learn; DevOps - Docker, Kubernetes, Jenkins, Terraform. We continuously evaluate and adopt emerging technologies to provide cutting-edge solutions.",
         },
         {
           question: "How do you ensure data security and privacy?",
-          answer: "We adhere to industry-leading security standards and protocols including: 1) ISO 27001 and SOC 2 compliance, 2) GDPR and other data privacy regulations, 3) End-to-end encryption for data in transit and at rest, 4) Multi-factor authentication and access controls, 5) Regular security audits and penetration testing, 6) Secure coding practices and code reviews, 7) Infrastructure security with VPNs and firewalls, 8) Employee training on security best practices, and 9) Incident response and disaster recovery plans."
+          answer:
+            "We adhere to industry-leading security standards and protocols including: 1) ISO 27001 and SOC 2 compliance, 2) GDPR and other data privacy regulations, 3) End-to-end encryption for data in transit and at rest, 4) Multi-factor authentication and access controls, 5) Regular security audits and penetration testing, 6) Secure coding practices and code reviews, 7) Infrastructure security with VPNs and firewalls, 8) Employee training on security best practices, and 9) Incident response and disaster recovery plans.",
         },
         {
           question: "What cloud platforms do you work with?",
-          answer: "We are certified partners with major cloud platforms including Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). Our cloud services include: 1) Cloud migration and modernization, 2) Infrastructure as Code (IaC), 3) Serverless architecture implementation, 4) Containerization with Docker and Kubernetes, 5) CI/CD pipeline setup, 6) Cloud security implementation, 7) Cost optimization strategies, and 8) 24/7 monitoring and support."
+          answer:
+            "We are certified partners with major cloud platforms including Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). Our cloud services include: 1) Cloud migration and modernization, 2) Infrastructure as Code (IaC), 3) Serverless architecture implementation, 4) Containerization with Docker and Kubernetes, 5) CI/CD pipeline setup, 6) Cloud security implementation, 7) Cost optimization strategies, and 8) 24/7 monitoring and support.",
         },
         {
           question: "Do you provide AI and Machine Learning solutions?",
-          answer: "Yes, we offer comprehensive AI/ML solutions including: 1) AI strategy and consulting, 2) Custom ML model development, 3) Computer vision applications, 4) Natural language processing, 5) Predictive analytics and forecasting, 6) AI chatbots and virtual assistants, 7) Recommendation engines, 8) AI model deployment and MLOps, 9) AI integration into existing applications, and 10) Generative AI solutions. Our AI experts work with frameworks like TensorFlow, PyTorch, and cloud-based AI services."
+          answer:
-        }
+            "Yes, we offer comprehensive AI/ML solutions including: 1) AI strategy and consulting, 2) Custom ML model development, 3) Computer vision applications, 4) Natural language processing, 5) Predictive analytics and forecasting, 6) AI chatbots and virtual assistants, 7) Recommendation engines, 8) AI model deployment and MLOps, 9) AI integration into existing applications, and 10) Generative AI solutions. Our AI experts work with frameworks like TensorFlow, PyTorch, and cloud-based AI services.",
-      ]
+        },
+      ],
     },
     {
       category: "Billing & Contracts",
@@ -107,57 +136,68 @@ export const FAQs = () => {
       faqs: [
         {
           question: "What are your payment terms?",
-          answer: "Our standard payment terms are: 1) Fixed Price projects: 30% advance, 40% at milestone completion, 30% at project delivery, 2) Time & Material: Monthly billing with NET 15-30 payment terms, 3) Dedicated Team: Monthly advance payment for team costs. We accept payments via wire transfer, ACH, or other agreed methods. For long-term partnerships, we can discuss customized payment structures that align with your business cycles and budget planning."
+          answer:
+            "Our standard payment terms are: 1) Fixed Price projects: 30% advance, 40% at milestone completion, 30% at project delivery, 2) Time & Material: Monthly billing with NET 15-30 payment terms, 3) Dedicated Team: Monthly advance payment for team costs. We accept payments via wire transfer, ACH, or other agreed methods. For long-term partnerships, we can discuss customized payment structures that align with your business cycles and budget planning.",
         },
         {
           question: "Can we sign an NDA?",
-          answer: "Absolutely! Confidentiality is paramount to us, and we are happy to sign Non-Disclosure Agreements (NDAs) before any project discussions begin. We have standard mutual NDAs ready, or we can review and sign your NDA format. We maintain strict confidentiality protocols throughout our organization and ensure that all team members working on your project sign appropriate confidentiality agreements."
+          answer:
+            "Absolutely! Confidentiality is paramount to us, and we are happy to sign Non-Disclosure Agreements (NDAs) before any project discussions begin. We have standard mutual NDAs ready, or we can review and sign your NDA format. We maintain strict confidentiality protocols throughout our organization and ensure that all team members working on your project sign appropriate confidentiality agreements.",
         },
         {
           question: "What is included in your project estimates?",
-          answer: "Our project estimates include: 1) Detailed scope of work and deliverables, 2) Development hours breakdown by task/feature, 3) Team composition and hourly rates, 4) Project timeline with milestones, 5) Third-party service costs (if applicable), 6) Testing and quality assurance, 7) Project management overhead, 8) Documentation and knowledge transfer. We provide transparent pricing with no hidden costs and clearly outline any assumptions or exclusions."
+          answer:
+            "Our project estimates include: 1) Detailed scope of work and deliverables, 2) Development hours breakdown by task/feature, 3) Team composition and hourly rates, 4) Project timeline with milestones, 5) Third-party service costs (if applicable), 6) Testing and quality assurance, 7) Project management overhead, 8) Documentation and knowledge transfer. We provide transparent pricing with no hidden costs and clearly outline any assumptions or exclusions.",
         },
         {
           question: "Do you offer different pricing models?",
-          answer: "Yes, we offer flexible pricing models to suit different needs: 1) Fixed Price - Best for projects with well-defined scope, 2) Time & Material - Ideal for evolving requirements, 3) Dedicated Team - Monthly fixed cost for dedicated resources, 4) Outcome-based - Performance-linked pricing for specific results, 5) Hybrid models - Combination of the above based on project phases. We work with you to determine the most cost-effective and suitable pricing structure for your specific situation."
+          answer:
-        }
+            "Yes, we offer flexible pricing models to suit different needs: 1) Fixed Price - Best for projects with well-defined scope, 2) Time & Material - Ideal for evolving requirements, 3) Dedicated Team - Monthly fixed cost for dedicated resources, 4) Outcome-based - Performance-linked pricing for specific results, 5) Hybrid models - Combination of the above based on project phases. We work with you to determine the most cost-effective and suitable pricing structure for your specific situation.",
-      ]
+        },
-    }
+      ],
+    },
   ];
 
-  const allFaqs = faqCategories.flatMap(category => 
+  const allFaqs = faqCategories.flatMap((category) =>
-    category.faqs.map(faq => ({
+    category.faqs.map((faq) => ({
       ...faq,
       category: category.category,
-      icon: category.icon
+      icon: category.icon,
     }))
   );
 
-  const filteredFaqs = allFaqs.filter(faq =>
+  const filteredFaqs = allFaqs.filter(
-    faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (faq) =>
-    faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    faq.category.toLowerCase().includes(searchTerm.toLowerCase())
+      faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      faq.category.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const filteredCategories = faqCategories.map(category => ({
+  const filteredCategories = faqCategories
-    ...category,
+    .map((category) => ({
-    faqs: category.faqs.filter(faq =>
+      ...category,
-      faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      faqs: category.faqs.filter(
-      faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
+        (faq) =>
-    )
+          faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
-  })).filter(category => category.faqs.length > 0);
+          faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
+      ),
+    }))
+    .filter((category) => category.faqs.length > 0);
 
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-2 mb-6">
               <HelpCircle className="w-6 h-6 text-[#E5195E]" />
-              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E]">
+              <Badge
+                variant="outline"
+                className="border-[#E5195E]/20 text-[#E5195E]"
+              >
                 Frequently Asked Questions
               </Badge>
             </div>
@@ -165,7 +205,10 @@ export const FAQs = () => {
               FAQs: Your Questions, Our Answers
             </h1>
             <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
-              Have questions about our services, processes, or how we work? Our Frequently Asked Questions (FAQs) section provides quick and comprehensive answers to common inquiries, helping you find the information you need efficiently.
+              Have questions about our services, processes, or how we work? Our
+              Frequently Asked Questions (FAQs) section provides quick and
+              comprehensive answers to common inquiries, helping you find the
+              information you need efficiently.
             </p>
           </div>
         </div>
@@ -186,7 +229,11 @@ export const FAQs = () => {
             </div>
             <div className="text-center mt-4">
               <span className="text-sm text-muted-foreground">
-                {searchTerm ? `${filteredFaqs.length} result${filteredFaqs.length !== 1 ? 's' : ''} found` : `${allFaqs.length} questions available`}
+                {searchTerm
+                  ? `${filteredFaqs.length} result${
+                      filteredFaqs.length !== 1 ? "s" : ""
+                    } found`
+                  : `${allFaqs.length} questions available`}
               </span>
             </div>
           </div>
@@ -206,9 +253,11 @@ export const FAQs = () => {
                       <div className="w-10 h-10 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
                         <Icon className="w-5 h-5 text-[#E5195E]" />
                       </div>
-                      <h2 className="text-2xl font-bold text-white">{category.category}</h2>
+                      <h2 className="text-2xl font-bold text-white">
+                        {category.category}
+                      </h2>
                     </div>
-                    
+
                     <Accordion type="single" collapsible className="space-y-4">
                       {category.faqs.map((faq, faqIndex) => (
                         <AccordionItem
@@ -217,7 +266,9 @@ export const FAQs = () => {
                           className="border border-white/10 rounded-lg bg-card/30 hover:bg-card/50 transition-colors duration-200"
                         >
                           <AccordionTrigger className="px-6 py-4 text-left hover:no-underline">
-                            <span className="text-white font-medium pr-4">{faq.question}</span>
+                            <span className="text-white font-medium pr-4">
+                              {faq.question}
+                            </span>
                           </AccordionTrigger>
                           <AccordionContent className="px-6 pb-4">
                             <div className="text-muted-foreground leading-relaxed">
@@ -234,12 +285,15 @@ export const FAQs = () => {
           ) : (
             <div className="max-w-2xl mx-auto text-center">
               <HelpCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-              <h3 className="text-xl font-semibold text-white mb-2">No FAQs Found</h3>
+              <h3 className="text-xl font-semibold text-white mb-2">
+                No FAQs Found
+              </h3>
               <p className="text-muted-foreground mb-6">
-                We couldn't find any questions matching your search. Try different keywords or browse all categories.
+                We couldn't find any questions matching your search. Try
+                different keywords or browse all categories.
               </p>
-              <Button 
+              <Button
-                variant="outline" 
+                variant="outline"
                 onClick={() => setSearchTerm("")}
                 className="border-white/20 text-white hover:bg-white/10"
               >
@@ -291,21 +345,27 @@ export const FAQs = () => {
                 Still Have Questions?
               </h2>
               <p className="text-lg text-muted-foreground">
-                Can't find the answer you're looking for? Our team is here to help you with any questions or concerns.
+                Can't find the answer you're looking for? Our team is here to
+                help you with any questions or concerns.
               </p>
             </div>
-            
+
             <div className="grid md:grid-cols-3 gap-8">
               <Card className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 text-center">
                 <CardContent className="p-6">
                   <div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
                     <MessageSquare className="w-6 h-6 text-[#E5195E]" />
                   </div>
-                  <h3 className="text-lg font-semibold text-white mb-2">Live Chat</h3>
+                  <h3 className="text-lg font-semibold text-white mb-2">
+                    Live Chat
+                  </h3>
                   <p className="text-muted-foreground mb-4 text-sm">
                     Get instant answers from our support team
                   </p>
-                  <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
+                  <Button
+                    variant="outline"
+                    className="border-white/20 text-white hover:bg-white/10"
+                  >
                     Start Chat
                   </Button>
                 </CardContent>
@@ -316,11 +376,16 @@ export const FAQs = () => {
                   <div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
                     <Mail className="w-6 h-6 text-[#E5195E]" />
                   </div>
-                  <h3 className="text-lg font-semibold text-white mb-2">Email Support</h3>
+                  <h3 className="text-lg font-semibold text-white mb-2">
+                    Email Support
+                  </h3>
                   <p className="text-muted-foreground mb-4 text-sm">
                     Send us your questions via email
                   </p>
-                  <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
+                  <Button
+                    variant="outline"
+                    className="border-white/20 text-white hover:bg-white/10"
+                  >
                     Send Email
                   </Button>
                 </CardContent>
@@ -331,11 +396,16 @@ export const FAQs = () => {
                   <div className="w-12 h-12 rounded-full bg-[#E5195E]/20 flex items-center justify-center mx-auto mb-4">
                     <Phone className="w-6 h-6 text-[#E5195E]" />
                   </div>
-                  <h3 className="text-lg font-semibold text-white mb-2">Phone Support</h3>
+                  <h3 className="text-lg font-semibold text-white mb-2">
+                    Phone Support
+                  </h3>
                   <p className="text-muted-foreground mb-4 text-sm">
                     Call us for immediate assistance
                   </p>
-                  <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
+                  <Button
+                    variant="outline"
+                    className="border-white/20 text-white hover:bg-white/10"
+                  >
                     Call Now
                   </Button>
                 </CardContent>
@@ -353,14 +423,23 @@ export const FAQs = () => {
               Ready to Get Started?
             </h2>
             <p className="text-lg text-muted-foreground mb-8">
-              Have all your questions answered? Let's discuss your project and explore how we can help you achieve your goals.
+              Have all your questions answered? Let's discuss your project and
+              explore how we can help you achieve your goals.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Couldn't find your answer? Contact us directly
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Schedule a Discovery Call
               </Button>
             </div>
@@ -371,4 +450,4 @@ export const FAQs = () => {
       <Footer />
     </div>
   );
-};
+};

pages/FitnessWellnessPlatforms.tsx

@@ -1,21 +1,22 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
+  Activity,
+  ChevronRight,
+  Clock,
+  Eye,
+  Heart,
+  MessageSquare,
+  Target,
+  Trophy,
+  Users,
+  Zap,
+} from "lucide-react";
 import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Badge } from "../components/ui/badge";
+import { navigateTo } from "@/App";
-import { Card, CardContent } from "../components/ui/card";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
-import { ImageWithFallback } from "../components/figma/ImageWithFallback";
-import { 
-  Heart, Activity, Users, Trophy, Target, Zap, Brain,
-  AlertTriangle, CheckCircle, Search, Code, Network, Rocket,
-  X, ArrowRight, Star, Calendar, MessageSquare, Eye,
-  Settings, BarChart3, FileText, Palette, Clock,
-  ChevronRight, UserCheck, Award, Smartphone, Monitor,
-  Play, Camera, Share, Gift, MapPin, Volume2, Headphones
-} from "lucide-react";
 
 // Fitness & Wellness Hero Section
 const FitnessWellnessHero = () => {
@@ -34,26 +35,33 @@ const FitnessWellnessHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Industries • Healthcare</span>
+              <span className="text-white/70 text-sm font-medium">
+                Industries • Healthcare
+              </span>
             </motion.div>
 
             <div className="space-y-6">
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Fitness & Wellness Platforms
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Inspire healthier living and build thriving communities with engaging, personalized, and data-driven fitness and wellness digital platforms.
+                Inspire healthier living and build thriving communities with
+                engaging, personalized, and data-driven fitness and wellness
+                digital platforms.
               </p>
             </div>
-            
+
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Get a Free Consultation</span>
@@ -71,7 +79,7 @@ const FitnessWellnessHero = () => {
               </Button>
             </motion.div>
           </motion.div>
-          
+
           <motion.div
             initial={{ opacity: 0, x: 50 }}
             animate={{ opacity: 1, x: 0 }}
@@ -98,15 +106,22 @@ const FitnessWellnessHero = () => {
                     className="flex items-center justify-between mb-6"
                   >
                     <div>
-                      <h3 className="text-xl font-semibold text-white">Fitness Dashboard</h3>
+                      <h3 className="text-xl font-semibold text-white">
-                      <p className="text-gray-400 text-sm">Personal wellness tracking</p>
+                        Fitness Dashboard
+                      </h3>
+                      <p className="text-gray-400 text-sm">
+                        Personal wellness tracking
+                      </p>
                     </div>
-                    <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                    <Badge
+                      variant="secondary"
+                      className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                    >
                       <Heart className="w-3 h-3 mr-1" />
                       Active
                     </Badge>
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, scale: 0.8 }}
                     animate={{ opacity: 1, scale: 1 }}
@@ -115,7 +130,9 @@ const FitnessWellnessHero = () => {
                   >
                     <div className="flex items-center justify-between mb-4">
                       <div>
-                        <div className="text-purple-100 text-sm mb-1">Today's Goal Progress</div>
+                        <div className="text-purple-100 text-sm mb-1">
+                          Today's Goal Progress
+                        </div>
                         <motion.div
                           initial={{ opacity: 0 }}
                           animate={{ opacity: 1 }}
@@ -129,7 +146,7 @@ const FitnessWellnessHero = () => {
                         <Activity className="w-6 h-6 text-white" />
                       </div>
                     </div>
-                    
+
                     <div className="flex items-center justify-between text-purple-100 text-sm">
                       <span className="flex items-center gap-1">
                         <Target className="w-4 h-4" />
@@ -138,7 +155,7 @@ const FitnessWellnessHero = () => {
                       <span>84% Complete</span>
                     </div>
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
@@ -146,10 +163,34 @@ const FitnessWellnessHero = () => {
                     className="grid grid-cols-2 gap-4 mb-6"
                   >
                     {[
-                      { name: "Calories Burned", value: "420", unit: "kcal", icon: Zap, color: "orange" },
+                      {
-                      { name: "Workout Time", value: "45", unit: "min", icon: Clock, color: "blue" },
+                        name: "Calories Burned",
-                      { name: "Heart Rate", value: "72", unit: "bpm", icon: Heart, color: "red" },
+                        value: "420",
-                      { name: "Sleep Score", value: "8.5", unit: "/10", icon: Activity, color: "green" }
+                        unit: "kcal",
+                        icon: Zap,
+                        color: "orange",
+                      },
+                      {
+                        name: "Workout Time",
+                        value: "45",
+                        unit: "min",
+                        icon: Clock,
+                        color: "blue",
+                      },
+                      {
+                        name: "Heart Rate",
+                        value: "72",
+                        unit: "bpm",
+                        icon: Heart,
+                        color: "red",
+                      },
+                      {
+                        name: "Sleep Score",
+                        value: "8.5",
+                        unit: "/10",
+                        icon: Activity,
+                        color: "green",
+                      },
                     ].map((metric, i) => (
                       <motion.div
                         key={i}
@@ -159,20 +200,31 @@ const FitnessWellnessHero = () => {
                         className="bg-gray-800/50 rounded-xl p-4"
                       >
                         <div className="flex items-center gap-2 mb-2">
-                          <metric.icon className={`w-4 h-4 ${
+                          <metric.icon
-                            metric.color === 'orange' ? 'text-orange-400' :
+                            className={`w-4 h-4 ${
-                            metric.color === 'blue' ? 'text-blue-400' :
+                              metric.color === "orange"
-                            metric.color === 'red' ? 'text-red-400' :
+                                ? "text-orange-400"
-                            'text-green-400'
+                                : metric.color === "blue"
-                          }`} />
+                                ? "text-blue-400"
-                          <span className="text-white font-medium text-sm">{metric.name}</span>
+                                : metric.color === "red"
+                                ? "text-red-400"
+                                : "text-green-400"
+                            }`}
+                          />
+                          <span className="text-white font-medium text-sm">
+                            {metric.name}
+                          </span>
+                        </div>
+                        <div className="text-gray-300 text-lg font-semibold">
+                          {metric.value}
+                        </div>
+                        <div className="text-gray-400 text-xs">
+                          {metric.unit}
                         </div>
-                        <div className="text-gray-300 text-lg font-semibold">{metric.value}</div>
-                        <div className="text-gray-400 text-xs">{metric.unit}</div>
                       </motion.div>
                     ))}
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
@@ -183,11 +235,29 @@ const FitnessWellnessHero = () => {
                       <span className="font-medium">Recent Activities</span>
                       <ChevronRight className="w-4 h-4 text-gray-400" />
                     </div>
-                    
+
                     {[
-                      { activity: "Morning Yoga", detail: "30 min session completed", time: "2h ago", icon: Heart, color: "purple" },
+                      {
-                      { activity: "Evening Run", detail: "5K distance covered", time: "1 day ago", icon: Activity, color: "green" },
+                        activity: "Morning Yoga",
-                      { activity: "Strength Training", detail: "Upper body workout", time: "2 days ago", icon: Trophy, color: "blue" }
+                        detail: "30 min session completed",
+                        time: "2h ago",
+                        icon: Heart,
+                        color: "purple",
+                      },
+                      {
+                        activity: "Evening Run",
+                        detail: "5K distance covered",
+                        time: "1 day ago",
+                        icon: Activity,
+                        color: "green",
+                      },
+                      {
+                        activity: "Strength Training",
+                        detail: "Upper body workout",
+                        time: "2 days ago",
+                        icon: Trophy,
+                        color: "blue",
+                      },
                     ].map((activity, i) => (
                       <motion.div
                         key={i}
@@ -196,43 +266,66 @@ const FitnessWellnessHero = () => {
                         transition={{ duration: 0.5, delay: 2.8 + i * 0.1 }}
                         className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
                       >
-                        <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                        <div
-                          activity.color === 'purple' ? 'bg-purple-500/20' :
+                          className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                          activity.color === 'green' ? 'bg-green-500/20' :
+                            activity.color === "purple"
-                          'bg-blue-500/20'
+                              ? "bg-purple-500/20"
-                        }`}>
+                              : activity.color === "green"
-                          <activity.icon className={`w-4 h-4 ${
+                              ? "bg-green-500/20"
-                            activity.color === 'purple' ? 'text-purple-400' :
+                              : "bg-blue-500/20"
-                            activity.color === 'green' ? 'text-green-400' :
+                          }`}
-                            'text-blue-400'
+                        >
-                          }`} />
+                          <activity.icon
+                            className={`w-4 h-4 ${
+                              activity.color === "purple"
+                                ? "text-purple-400"
+                                : activity.color === "green"
+                                ? "text-green-400"
+                                : "text-blue-400"
+                            }`}
+                          />
                         </div>
                         <div className="flex-1">
-                          <div className="text-white text-sm">{activity.activity}</div>
+                          <div className="text-white text-sm">
-                          <div className="text-gray-400 text-xs">{activity.detail}</div>
+                            {activity.activity}
+                          </div>
+                          <div className="text-gray-400 text-xs">
+                            {activity.detail}
+                          </div>
+                        </div>
+                        <div className="text-gray-400 text-xs">
+                          {activity.time}
                         </div>
-                        <div className="text-gray-400 text-xs">{activity.time}</div>
                       </motion.div>
                     ))}
                   </motion.div>
                 </motion.div>
               </motion.div>
-              
+
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8, delay: 3.6 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Heart className="w-3 h-3 mr-1" />
                   Personalized
                 </Badge>
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Users className="w-3 h-3 mr-1" />
                   Community
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Trophy className="w-3 h-3 mr-1" />
                   Gamified
                 </Badge>
@@ -250,16 +343,16 @@ export const FitnessWellnessPlatforms = () => {
   return (
     <div className="dark min-h-screen">
       <Navigation />
-      
+
       <section className="bg-black">
         <FitnessWellnessHero />
       </section>
-      
+
       {/* Additional sections would go here following the same pattern as other industry pages */}
-      
+
       <section className="bg-card">
         <Footer />
       </section>
     </div>
   );
-};
+};

pages/FoodOrderingDelivery.tsx

@@ -10,10 +10,21 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
+import {
-  Smartphone, Truck, MapPin, CreditCard, Star, 
+  Smartphone,
-  Bell, BarChart3, Target, CheckCircle, 
+  Truck,
-  Users, Clock, Zap, Globe, Award
+  MapPin,
+  CreditCard,
+  Star,
+  Bell,
+  BarChart3,
+  Target,
+  CheckCircle,
+  Users,
+  Clock,
+  Zap,
+  Globe,
+  Award,
 } from "lucide-react";
 
 // Problem Solution Block Component
@@ -29,10 +40,12 @@ const ProblemSolutionBlock = () => {
           className="max-w-6xl mx-auto"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
-            <span className="text-white">Addressing the Core Challenges of </span>
+            <span className="text-white">
+              Addressing the Core Challenges of{" "}
+            </span>
             <span className="text-[#E5195E]">Food Ordering & Delivery</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -49,11 +62,16 @@ const ProblemSolutionBlock = () => {
                   The Challenge
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  The food ordering and delivery landscape is highly competitive and demands real-time order management, efficient logistics, and intuitive user experiences for both customers and restaurants. Businesses face hurdles with scalability during peak hours, managing diverse menus, and integrating with payment and delivery systems.
+                  The food ordering and delivery landscape is highly competitive
+                  and demands real-time order management, efficient logistics,
+                  and intuitive user experiences for both customers and
+                  restaurants. Businesses face hurdles with scalability during
+                  peak hours, managing diverse menus, and integrating with
+                  payment and delivery systems.
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -69,7 +87,11 @@ const ProblemSolutionBlock = () => {
                   Our Food Ordering & Delivery Solution
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  WDI specializes in building end-to-end food ordering and delivery platforms. We create solutions that encompass customer-facing apps, restaurant management systems, and driver logistics tools, all designed for seamless order flow, real-time tracking, and optimal operational efficiency.
+                  WDI specializes in building end-to-end food ordering and
+                  delivery platforms. We create solutions that encompass
+                  customer-facing apps, restaurant management systems, and
+                  driver logistics tools, all designed for seamless order flow,
+                  real-time tracking, and optimal operational efficiency.
                 </p>
               </div>
             </motion.div>
@@ -86,38 +108,45 @@ const IconWithDescriptionGrid = () => {
     {
       icon: Smartphone,
       title: "Customer Ordering Apps (Web & Mobile)",
-      description: "Intuitive menu browsing, customizable orders, secure payment options, and real-time order tracking."
+      description:
+        "Intuitive menu browsing, customizable orders, secure payment options, and real-time order tracking.",
     },
     {
       icon: BarChart3,
       title: "Restaurant Management Dashboards",
-      description: "Tools for menu updates, order acceptance/rejection, kitchen display systems (KDS), and performance analytics."
+      description:
+        "Tools for menu updates, order acceptance/rejection, kitchen display systems (KDS), and performance analytics.",
     },
     {
       icon: Truck,
       title: "Driver/Delivery Partner Apps",
-      description: "Route optimization, real-time pick-up/delivery notifications, earning tracking, and customer communication features."
+      description:
+        "Route optimization, real-time pick-up/delivery notifications, earning tracking, and customer communication features.",
     },
     {
       icon: MapPin,
       title: "Real-time GPS Tracking",
-      description: "Live tracking of orders from preparation to delivery, enhancing customer satisfaction and transparency."
+      description:
+        "Live tracking of orders from preparation to delivery, enhancing customer satisfaction and transparency.",
     },
     {
       icon: CreditCard,
       title: "Secure Payment Integrations",
-      description: "Support for various payment methods including credit cards, digital wallets, and loyalty points."
+      description:
+        "Support for various payment methods including credit cards, digital wallets, and loyalty points.",
     },
     {
       icon: Star,
       title: "Personalized Recommendations",
-      description: "AI-driven suggestions for dishes, restaurants, and promotions based on user preferences and order history."
+      description:
+        "AI-driven suggestions for dishes, restaurants, and promotions based on user preferences and order history.",
     },
     {
       icon: Bell,
       title: "Loyalty Programs & Promotions",
-      description: "Built-in features for discounts, coupon codes, and loyalty points to drive repeat business."
+      description:
-    }
+        "Built-in features for discounts, coupon codes, and loyalty points to drive repeat business.",
+    },
   ];
 
   return (
@@ -134,10 +163,11 @@ const IconWithDescriptionGrid = () => {
             Powerful Features for Your Food Ordering & Delivery Platforms
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Comprehensive tools to create seamless food delivery experiences that satisfy customers and optimize operations.
+            Comprehensive tools to create seamless food delivery experiences
+            that satisfy customers and optimize operations.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -178,23 +208,27 @@ const ThreeColumnFeatureBlock = () => {
     {
       icon: Users,
       title: "End-to-End Ecosystem Expertise",
-      description: "Developing seamless solutions for customers, restaurants, and delivery fleets from a single partner."
+      description:
+        "Developing seamless solutions for customers, restaurants, and delivery fleets from a single partner.",
     },
     {
       icon: Zap,
       title: "Scalability for Peak Demand",
-      description: "Building platforms designed to handle massive order volumes during lunch rushes or dinner times without issues."
+      description:
+        "Building platforms designed to handle massive order volumes during lunch rushes or dinner times without issues.",
     },
     {
       icon: MapPin,
       title: "Real-time Location Intelligence",
-      description: "Expert integration of mapping, GPS, and routing algorithms for efficient delivery."
+      description:
+        "Expert integration of mapping, GPS, and routing algorithms for efficient delivery.",
     },
     {
       icon: Smartphone,
       title: "Intuitive UX for All Users",
-      description: "Creating user-friendly interfaces for diverse user groups, from busy restaurant staff to hungry customers."
+      description:
-    }
+        "Creating user-friendly interfaces for diverse user groups, from busy restaurant staff to hungry customers.",
+    },
   ];
 
   return (
@@ -211,10 +245,11 @@ const ThreeColumnFeatureBlock = () => {
             Why Partner with WDI for Food Ordering & Delivery Development?
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Leverage our expertise to create food delivery platforms that truly satisfy all stakeholders.
+            Leverage our expertise to create food delivery platforms that truly
+            satisfy all stakeholders.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -250,18 +285,24 @@ const CaseStudyHighlightGrid = () => {
   const caseStudies = [
     {
       title: "Hyperlocal Multi-Restaurant Delivery Platform",
-      problem: "A startup aimed to launch a fast, reliable hyperlocal food delivery service connecting multiple restaurants with customers.",
+      problem:
-      solution: "WDI built a comprehensive platform comprising customer, restaurant, and driver apps with real-time tracking, dynamic pricing, and diverse payment options.",
+        "A startup aimed to launch a fast, reliable hyperlocal food delivery service connecting multiple restaurants with customers.",
-      results: "Facilitated over 5,000 orders per day within the first year of operation, achieving a 98% on-time delivery rate.",
+      solution:
-      metrics: ["5K+ Orders/Day", "98% On-Time", "Multi-Restaurant"]
+        "WDI built a comprehensive platform comprising customer, restaurant, and driver apps with real-time tracking, dynamic pricing, and diverse payment options.",
+      results:
+        "Facilitated over 5,000 orders per day within the first year of operation, achieving a 98% on-time delivery rate.",
+      metrics: ["5K+ Orders/Day", "98% On-Time", "Multi-Restaurant"],
     },
     {
       title: "Restaurant Chain's Custom Online Ordering System",
-      problem: "A large restaurant chain needed to reduce reliance on third-party aggregators and build its own branded online ordering system.",
+      problem:
-      solution: "Developed a custom web and mobile ordering system integrated directly with their kitchen display systems and loyalty program.",
+        "A large restaurant chain needed to reduce reliance on third-party aggregators and build its own branded online ordering system.",
-      results: "Increased direct online orders by 40% and reduced commission fees by 20%, boosting profitability.",
+      solution:
-      metrics: ["40% ↑ Orders", "20% ↓ Fees", "Direct Sales"]
+        "Developed a custom web and mobile ordering system integrated directly with their kitchen display systems and loyalty program.",
-    }
+      results:
+        "Increased direct online orders by 40% and reduced commission fees by 20%, boosting profitability.",
+      metrics: ["40% ↑ Orders", "20% ↓ Fees", "Direct Sales"],
+    },
   ];
 
   return (
@@ -278,10 +319,11 @@ const CaseStudyHighlightGrid = () => {
             Food Ordering & Delivery Success Stories
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Real results from our food delivery platform implementations that transformed businesses.
+            Real results from our food delivery platform implementations that
+            transformed businesses.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -295,7 +337,11 @@ const CaseStudyHighlightGrid = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-2 mb-4">
                     {study.metrics.map((metric, i) => (
-                      <Badge key={i} variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30">
+                      <Badge
+                        key={i}
+                        variant="secondary"
+                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
+                      >
                         {metric}
                       </Badge>
                     ))}
@@ -305,15 +351,21 @@ const CaseStudyHighlightGrid = () => {
                   </h3>
                   <div className="space-y-4">
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Problem:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Problem:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.problem}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Solution:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Solution:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.solution}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Results:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Results:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.results}</p>
                     </div>
                   </div>
@@ -330,71 +382,82 @@ const CaseStudyHighlightGrid = () => {
 // FAQ Data
 const foodDeliveryFAQs = [
   {
-    question: "How do you ensure real-time order tracking and delivery updates?",
+    question:
-    answer: "We implement GPS-based tracking systems with real-time updates sent via push notifications and SMS. Our platforms integrate with mapping services to provide accurate delivery estimates and live location sharing between customers, restaurants, and delivery partners."
+      "How do you ensure real-time order tracking and delivery updates?",
+    answer:
+      "We implement GPS-based tracking systems with real-time updates sent via push notifications and SMS. Our platforms integrate with mapping services to provide accurate delivery estimates and live location sharing between customers, restaurants, and delivery partners.",
   },
   {
-    question: "What are your strategies for scalability during peak hours (e.g., lunch, dinner)?",
+    question:
-    answer: "We design cloud-native architectures with auto-scaling capabilities, implement load balancing, use CDNs for faster content delivery, and optimize database queries. Our systems can handle 10x traffic spikes without performance degradation."
+      "What are your strategies for scalability during peak hours (e.g., lunch, dinner)?",
+    answer:
+      "We design cloud-native architectures with auto-scaling capabilities, implement load balancing, use CDNs for faster content delivery, and optimize database queries. Our systems can handle 10x traffic spikes without performance degradation.",
   },
   {
-    question: "Can you integrate with existing POS (Point of Sale) systems and kitchen displays?",
+    question:
-    answer: "Yes, we have extensive experience integrating with major POS systems like Square, Toast, Clover, and custom solutions. We also support kitchen display system (KDS) integrations for seamless order management workflows."
+      "Can you integrate with existing POS (Point of Sale) systems and kitchen displays?",
+    answer:
+      "Yes, we have extensive experience integrating with major POS systems like Square, Toast, Clover, and custom solutions. We also support kitchen display system (KDS) integrations for seamless order management workflows.",
   },
   {
-    question: "What payment gateway integrations do you offer for food ordering apps?",
+    question:
-    answer: "We integrate with all major payment gateways including Stripe, PayPal, Razorpay, Square, and local payment providers. We also support digital wallets, loyalty points, and split payment options for enhanced user convenience."
+      "What payment gateway integrations do you offer for food ordering apps?",
+    answer:
+      "We integrate with all major payment gateways including Stripe, PayPal, Razorpay, Square, and local payment providers. We also support digital wallets, loyalty points, and split payment options for enhanced user convenience.",
   },
   {
-    question: "Do you develop solutions for multi-restaurant aggregators or single-restaurant chains?",
+    question:
-    answer: "We develop both! Our flexible platform architecture supports single-restaurant branded apps with custom features, as well as multi-vendor marketplace platforms with vendor management, commission tracking, and order routing capabilities."
+      "Do you develop solutions for multi-restaurant aggregators or single-restaurant chains?",
-  }
+    answer:
+      "We develop both! Our flexible platform architecture supports single-restaurant branded apps with custom features, as well as multi-vendor marketplace platforms with vendor management, commission tracking, and order routing capabilities.",
+  },
 ];
 
 export const FoodOrderingDelivery = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
       <Navigation />
-      
+
       <HeroBanner
         category="Commerce & Consumer"
         title="Food Ordering & Delivery"
         description="Launch or optimize your food business with seamless, intuitive, and efficient online ordering and delivery platforms for restaurants, aggregators, and dark kitchens."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project",
         }}
         secondaryCTA={{
           text: "View FoodTech Case Studies",
-          href: "/case-studies"
+          href: "/case-studies",
         }}
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="Food Ordering & Delivery FAQs"
           subtitle="Get answers to common questions about our food delivery platform development services."
           faqs={foodDeliveryFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <SplitCallToAction />
       </div>
-      
+
       <Footer />
     </div>
   );
-};
+};

pages/HireBackendDevelopers.tsx

@@ -463,6 +463,7 @@ export const HireBackendDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />

pages/HireFrontendDevelopers.tsx

@@ -353,6 +353,7 @@ export const HireFrontendDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />

pages/HireFullStackDevelopers.tsx

@@ -402,6 +402,7 @@ export const HireFullStackDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />

pages/HireQAEngineers.tsx

@@ -380,6 +380,7 @@ export const HireQAEngineers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Start Quality Assurance
                 <ArrowRight className="ml-2 w-4 h-4" />

pages/HireUIUXDesigners.tsx

@@ -445,6 +445,7 @@ export const HireUIUXDesigners = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
               >
                 Start Your Design Journey
                 <ArrowRight className="ml-2 w-4 h-4" />

pages/LegacySystemRebuilds.tsx

@@ -8,7 +8,8 @@ import {
   CheckCircle,
   Cloud,
   CloudCog,
-  Code, Database,
+  Code,
+  Database,
   DollarSign,
   Eye,
   Gauge,
@@ -26,16 +27,22 @@ import {
   Target,
   TrendingUp,
   Users,
-  X
+  X,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 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 { navigateTo } from "@/App";
 
 // Legacy System Rebuilds Hero Section
 const LegacySystemRebuildsHero = () => {
@@ -55,7 +62,9 @@ const LegacySystemRebuildsHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -63,12 +72,14 @@ const LegacySystemRebuildsHero = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Legacy System Rebuilds
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Modernize your core business operations by transforming outdated, inefficient systems into powerful, scalable, and future-ready solutions.
+                Modernize your core business operations by transforming
+                outdated, inefficient systems into powerful, scalable, and
+                future-ready solutions.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -76,7 +87,10 @@ const LegacySystemRebuildsHero = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Get a Free Consultation</span>
@@ -89,12 +103,12 @@ const LegacySystemRebuildsHero = () => {
               >
                 <div className="inline-flex items-center gap-2">
                   <Eye className="w-5 h-5 flex-shrink-0" />
-                  <span>Explore Our Modernization Projects</span>
+                  <span>Explore Modernization Projects</span>
                 </div>
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with Before/After System Visualization */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -126,18 +140,26 @@ const LegacySystemRebuildsHero = () => {
                       transition={{ duration: 0.8, delay: 1.0 }}
                       className="text-center mb-6"
                     >
-                      <h3 className="text-xl font-semibold text-white mb-2">System Transformation</h3>
+                      <h3 className="text-xl font-semibold text-white mb-2">
+                        System Transformation
+                      </h3>
                       <div className="flex items-center justify-center gap-4">
-                        <Badge variant="secondary" className="bg-red-500/20 text-red-300 border-red-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-red-500/20 text-red-300 border-red-500/30 text-xs"
+                        >
                           Legacy
                         </Badge>
                         <ArrowRight className="w-4 h-4 text-accent" />
-                        <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                        <Badge
+                          variant="secondary"
+                          className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                        >
                           Modern
                         </Badge>
                       </div>
                     </motion.div>
-                    
+
                     {/* Before/After Systems */}
                     <motion.div
                       initial={{ opacity: 0, y: 20 }}
@@ -155,7 +177,9 @@ const LegacySystemRebuildsHero = () => {
                           >
                             <Laptop className="w-8 h-8 text-red-400" />
                           </motion.div>
-                          <div className="text-red-300 text-xs font-medium">Legacy System</div>
+                          <div className="text-red-300 text-xs font-medium">
+                            Legacy System
+                          </div>
                           <div className="space-y-1">
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-red-400 rounded-full"></div>
@@ -163,16 +187,20 @@ const LegacySystemRebuildsHero = () => {
                             </div>
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-red-400 rounded-full"></div>
-                              <span className="text-red-300 text-xs">Insecure</span>
+                              <span className="text-red-300 text-xs">
+                                Insecure
+                              </span>
                             </div>
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-red-400 rounded-full"></div>
-                              <span className="text-red-300 text-xs">Costly</span>
+                              <span className="text-red-300 text-xs">
+                                Costly
+                              </span>
                             </div>
                           </div>
                         </div>
                       </div>
-                      
+
                       {/* Modern System */}
                       <div className="bg-green-500/10 rounded-lg p-4 border border-green-500/30">
                         <div className="flex flex-col items-center text-center space-y-2">
@@ -183,26 +211,34 @@ const LegacySystemRebuildsHero = () => {
                           >
                             <Cloud className="w-8 h-8 text-green-400" />
                           </motion.div>
-                          <div className="text-green-300 text-xs font-medium">Modern Platform</div>
+                          <div className="text-green-300 text-xs font-medium">
+                            Modern Platform
+                          </div>
                           <div className="space-y-1">
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-green-400 rounded-full"></div>
-                              <span className="text-green-300 text-xs">Fast</span>
+                              <span className="text-green-300 text-xs">
+                                Fast
+                              </span>
                             </div>
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-green-400 rounded-full"></div>
-                              <span className="text-green-300 text-xs">Secure</span>
+                              <span className="text-green-300 text-xs">
+                                Secure
+                              </span>
                             </div>
                             <div className="flex items-center gap-1">
                               <div className="w-1 h-1 bg-green-400 rounded-full"></div>
-                              <span className="text-green-300 text-xs">Scalable</span>
+                              <span className="text-green-300 text-xs">
+                                Scalable
+                              </span>
                             </div>
                           </div>
                         </div>
                       </div>
                     </motion.div>
                   </div>
-                  
+
                   {/* Modernization Progress */}
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
@@ -213,56 +249,73 @@ const LegacySystemRebuildsHero = () => {
                     <div className="flex items-center justify-between mb-3">
                       <div className="flex items-center gap-2">
                         <RefreshCw className="w-4 h-4 text-blue-400" />
-                        <span className="text-blue-400 text-xs font-mono">Modernization Progress</span>
+                        <span className="text-blue-400 text-xs font-mono">
+                          Modernization Progress
+                        </span>
                       </div>
-                      <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
+                      >
                         In Progress
                       </Badge>
                     </div>
-                    
+
                     {/* Modernization Phases */}
                     <div className="space-y-2">
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '100%' }}
+                        animate={{ opacity: 1, width: "100%" }}
                         transition={{ duration: 1, delay: 2.0 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                          <span className="text-green-300 text-xs">System Audit</span>
+                          <span className="text-green-300 text-xs">
+                            System Audit
+                          </span>
                         </div>
-                        <span className="text-green-300 text-xs font-mono">Complete</span>
+                        <span className="text-green-300 text-xs font-mono">
+                          Complete
+                        </span>
                       </motion.div>
-                      
+
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '75%' }}
+                        animate={{ opacity: 1, width: "75%" }}
                         transition={{ duration: 1, delay: 2.2 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
-                          <span className="text-blue-300 text-xs">Re-architecture</span>
+                          <span className="text-blue-300 text-xs">
+                            Re-architecture
+                          </span>
                         </div>
-                        <span className="text-blue-300 text-xs font-mono">75%</span>
+                        <span className="text-blue-300 text-xs font-mono">
+                          75%
+                        </span>
                       </motion.div>
-                      
+
                       <motion.div
                         initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: '40%' }}
+                        animate={{ opacity: 1, width: "40%" }}
                         transition={{ duration: 1, delay: 2.4 }}
                         className="flex items-center justify-between"
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-2 h-2 bg-orange-400 rounded-full"></div>
-                          <span className="text-orange-300 text-xs">Data Migration</span>
+                          <span className="text-orange-300 text-xs">
+                            Data Migration
+                          </span>
                         </div>
-                        <span className="text-orange-300 text-xs font-mono">40%</span>
+                        <span className="text-orange-300 text-xs font-mono">
+                          40%
+                        </span>
                       </motion.div>
                     </div>
                   </motion.div>
-                  
+
                   {/* Performance Improvements */}
                   <motion.div
                     initial={{ opacity: 0, y: 10 }}
@@ -271,7 +324,9 @@ const LegacySystemRebuildsHero = () => {
                     className="grid grid-cols-2 gap-3"
                   >
                     <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
-                      <div className="text-green-400 text-lg font-bold">80%</div>
+                      <div className="text-green-400 text-lg font-bold">
+                        80%
+                      </div>
                       <div className="text-white text-xs">Faster</div>
                     </div>
                     <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
@@ -280,7 +335,7 @@ const LegacySystemRebuildsHero = () => {
                     </div>
                   </motion.div>
                 </motion.div>
-                
+
                 {/* Floating Modernization Elements */}
                 <motion.div
                   initial={{ opacity: 0, scale: 0.8 }}
@@ -292,7 +347,7 @@ const LegacySystemRebuildsHero = () => {
                     <Database className="w-6 h-6 text-blue-400" />
                   </div>
                 </motion.div>
-                
+
                 {/* Security Enhancement Indicator */}
                 <motion.div
                   initial={{ opacity: 0 }}
@@ -322,7 +377,7 @@ const LegacySystemRebuildsHero = () => {
                     ></motion.div>
                   </div>
                 </motion.div>
-                
+
                 {/* Modernization Status Badge */}
                 <motion.div
                   initial={{ opacity: 0, scale: 0 }}
@@ -338,7 +393,7 @@ const LegacySystemRebuildsHero = () => {
                   </div>
                 </motion.div>
               </motion.div>
-              
+
               {/* Legacy Modernization Features */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -346,15 +401,24 @@ const LegacySystemRebuildsHero = () => {
                 transition={{ duration: 0.8, delay: 3.4 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <RefreshCw className="w-3 h-3 mr-1" />
                   Modernize
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   Scale
                 </Badge>
@@ -384,7 +448,7 @@ const LegacySystemChallenge = () => {
               Breaking Free from Legacy Limitations
             </h2>
           </motion.div>
-          
+
           <div className="grid md:grid-cols-2 gap-12 items-center">
             {/* Problem */}
             <motion.div
@@ -399,10 +463,17 @@ const LegacySystemChallenge = () => {
                     <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                       <AlertTriangle className="w-6 h-6 text-red-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">The Problem</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      The Problem
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>Outdated legacy systems often hinder innovation, increase operational costs, pose security risks, and struggle to integrate with modern technologies, slowing down business growth and agility.</p>
+                    <p>
+                      Outdated legacy systems often hinder innovation, increase
+                      operational costs, pose security risks, and struggle to
+                      integrate with modern technologies, slowing down business
+                      growth and agility.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
@@ -410,7 +481,9 @@ const LegacySystemChallenge = () => {
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
-                        <span>Security vulnerabilities and compliance issues</span>
+                        <span>
+                          Security vulnerabilities and compliance issues
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
@@ -439,14 +512,24 @@ const LegacySystemChallenge = () => {
                     <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                       <CheckCircle className="w-6 h-6 text-green-400" />
                     </div>
-                    <h3 className="text-2xl font-semibold text-foreground">Our Solution</h3>
+                    <h3 className="text-2xl font-semibold text-foreground">
+                      Our Solution
+                    </h3>
                   </div>
                   <div className="space-y-4 text-muted-foreground">
-                    <p>WDI specializes in strategically rebuilding and modernizing legacy systems. We help you migrate to robust, scalable, and secure platforms that improve performance, reduce technical debt, and unlock new business capabilities.</p>
+                    <p>
+                      WDI specializes in strategically rebuilding and
+                      modernizing legacy systems. We help you migrate to robust,
+                      scalable, and secure platforms that improve performance,
+                      reduce technical debt, and unlock new business
+                      capabilities.
+                    </p>
                     <ul className="space-y-2">
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
-                        <span>Strategic modernization with minimal disruption</span>
+                        <span>
+                          Strategic modernization with minimal disruption
+                        </span>
                       </li>
                       <li className="flex items-start gap-2">
                         <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
@@ -478,38 +561,42 @@ const LegacySystemIncludes = () => {
     {
       icon: Search,
       title: "System Audit & Assessment",
-      description: "In-depth analysis of existing system, code, and infrastructure."
+      description:
+        "In-depth analysis of existing system, code, and infrastructure.",
     },
     {
       icon: CloudCog,
       title: "Re-platforming & Migration",
-      description: "Moving applications to new platforms (cloud, modern OS)."
+      description: "Moving applications to new platforms (cloud, modern OS).",
     },
     {
       icon: Code,
       title: "Code Refactoring & Optimization",
-      description: "Cleaning and improving existing codebases for efficiency."
+      description: "Cleaning and improving existing codebases for efficiency.",
     },
     {
       icon: Database,
       title: "Database Modernization",
-      description: "Upgrading or migrating databases for better performance and scalability."
+      description:
+        "Upgrading or migrating databases for better performance and scalability.",
     },
     {
       icon: Network,
       title: "API Development",
-      description: "Creating robust APIs for seamless integration with other systems."
+      description:
+        "Creating robust APIs for seamless integration with other systems.",
     },
     {
       icon: Palette,
       title: "UI/UX Revitalization",
-      description: "Designing modern, intuitive user interfaces for enhanced usability."
+      description:
+        "Designing modern, intuitive user interfaces for enhanced usability.",
     },
     {
       icon: ArrowUpDown,
       title: "Data Migration Strategy",
-      description: "Secure and accurate transfer of historical data."
+      description: "Secure and accurate transfer of historical data.",
-    }
+    },
   ];
 
   return (
@@ -526,7 +613,7 @@ const LegacySystemIncludes = () => {
             Our Comprehensive Legacy Modernization Services
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -606,28 +693,31 @@ const LegacySystemBenefits = () => {
     {
       icon: Gauge,
       title: "Enhanced Performance",
-      description: "Drastically improve speed, reliability, and responsiveness."
+      description:
+        "Drastically improve speed, reliability, and responsiveness.",
     },
     {
       icon: DollarSign,
       title: "Reduced Operational Costs",
-      description: "Lower maintenance, energy, and resource expenditure."
+      description: "Lower maintenance, energy, and resource expenditure.",
     },
     {
       icon: Shield,
       title: "Improved Security",
-      description: "Address vulnerabilities and meet current security standards."
+      description:
+        "Address vulnerabilities and meet current security standards.",
     },
     {
       icon: Scale,
       title: "Increased Agility & Scalability",
-      description: "Adapt quickly to market changes and scale operations effortlessly."
+      description:
+        "Adapt quickly to market changes and scale operations effortlessly.",
     },
     {
       icon: Network,
       title: "Seamless Integrations",
-      description: "Connect with modern tools and third-party services."
+      description: "Connect with modern tools and third-party services.",
-    }
+    },
   ];
 
   return (
@@ -644,7 +734,7 @@ const LegacySystemBenefits = () => {
             Unlock New Potential with Modernized Systems
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -729,39 +819,46 @@ const LegacySystemProcess = () => {
   const steps = [
     {
       title: "Discovery & Assessment",
-      description: "Comprehensive analysis of the existing system, business needs, and future goals.",
+      description:
-      icon: Search
+        "Comprehensive analysis of the existing system, business needs, and future goals.",
+      icon: Search,
     },
     {
-      title: "Strategy & Roadmap", 
+      title: "Strategy & Roadmap",
-      description: "Define the modernization approach (rebuild, re-platform, re-architect) and create a detailed plan.",
+      description:
-      icon: Target
+        "Define the modernization approach (rebuild, re-platform, re-architect) and create a detailed plan.",
+      icon: Target,
     },
     {
       title: "Architecture & Design",
-      description: "Design the new system's architecture, UI/UX, and data models.",
+      description:
-      icon: Building
+        "Design the new system's architecture, UI/UX, and data models.",
+      icon: Building,
     },
     {
       title: "Phased Development",
-      description: "Iterative development and migration, minimizing disruption to current operations.",
+      description:
-      icon: GitBranch
+        "Iterative development and migration, minimizing disruption to current operations.",
+      icon: GitBranch,
     },
     {
       title: "Rigorous Testing",
-      description: "Comprehensive testing to ensure functionality, performance, and data integrity.",
+      description:
-      icon: Shield
+        "Comprehensive testing to ensure functionality, performance, and data integrity.",
+      icon: Shield,
     },
     {
       title: "Deployment & Cutover",
-      description: "Seamless transition to the new system with minimal downtime.",
+      description:
-      icon: Rocket
+        "Seamless transition to the new system with minimal downtime.",
+      icon: Rocket,
     },
     {
       title: "Post-Modernization Support",
-      description: "Ongoing maintenance, optimization, and future enhancements.",
+      description:
-      icon: Headphones
+        "Ongoing maintenance, optimization, and future enhancements.",
-    }
+      icon: Headphones,
+    },
   ];
 
   return (
@@ -782,12 +879,12 @@ const LegacySystemProcess = () => {
         <div className="relative">
           {/* Timeline line */}
           <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
-          
+
           <div className="space-y-16">
             {steps.map((step, index) => {
               const IconComponent = step.icon;
               const isEven = index % 2 === 0;
-              
+
               return (
                 <motion.div
                   key={index}
@@ -795,15 +892,23 @@ const LegacySystemProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-white mb-4">
                         {step.title}
@@ -813,10 +918,10 @@ const LegacySystemProcess = () => {
                       </p>
                     </div>
                   </div>
-                  
+
                   {/* Timeline dot */}
                   <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
-                  
+
                   <div className="flex-1 hidden lg:block"></div>
                 </motion.div>
               );
@@ -834,28 +939,31 @@ const LegacySystemAudience = () => {
     {
       icon: Building,
       title: "Enterprises",
-      description: "Burdened by outdated software and high maintenance costs."
+      description: "Burdened by outdated software and high maintenance costs.",
     },
     {
       icon: Shield,
       title: "Organizations with Security Risks",
-      description: "Facing security risks due to unpatched or unsupported systems."
+      description:
+        "Facing security risks due to unpatched or unsupported systems.",
     },
     {
       icon: Network,
       title: "Companies with Integration Issues",
-      description: "Struggling with integration issues between legacy and modern applications."
+      description:
+        "Struggling with integration issues between legacy and modern applications.",
     },
     {
       icon: TrendingUp,
       title: "Scaling Businesses",
-      description: "Seeking to scale but limited by current infrastructure."
+      description: "Seeking to scale but limited by current infrastructure.",
     },
     {
       icon: Users,
       title: "IT Departments",
-      description: "Looking to reduce technical debt and improve developer productivity."
+      description:
-    }
+        "Looking to reduce technical debt and improve developer productivity.",
+    },
   ];
 
   return (
@@ -872,7 +980,7 @@ const LegacySystemAudience = () => {
             Ideal For...
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -958,30 +1066,36 @@ const LegacySystemCaseStudies = () => {
     {
       title: "Manufacturing ERP Modernization",
       client: "Manufacturing Company",
-      description: "Rebuilt a core ERP system from legacy mainframe to modern cloud architecture, reducing processing time by 60% and improving data accuracy while maintaining 99.9% uptime during the transition process.",
+      description:
-      image: "https://images.unsplash.com/photo-1565514158740-3011dbf5b2ed?w=400&h=300&fit=crop&auto=format",
+        "Rebuilt a core ERP system from legacy mainframe to modern cloud architecture, reducing processing time by 60% and improving data accuracy while maintaining 99.9% uptime during the transition process.",
+      image:
+        "https://images.unsplash.com/photo-1565514158740-3011dbf5b2ed?w=400&h=300&fit=crop&auto=format",
       results: "60% faster processing, improved accuracy",
       engagement: "Complete ERP transformation",
-      gradient: "from-blue-500/20 to-cyan-500/20"
+      gradient: "from-blue-500/20 to-cyan-500/20",
     },
     {
       title: "Financial Services Platform Re-platform",
       client: "Financial Institution",
-      description: "Migrated an outdated financial platform to cloud infrastructure, achieving 99.9% uptime and enabling new service offerings while reducing operational costs by 40% and improving security compliance.",
+      description:
-      image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+        "Migrated an outdated financial platform to cloud infrastructure, achieving 99.9% uptime and enabling new service offerings while reducing operational costs by 40% and improving security compliance.",
+      image:
+        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
       results: "99.9% uptime, 40% cost reduction",
       engagement: "Financial platform modernization",
-      gradient: "from-green-500/20 to-emerald-500/20"
+      gradient: "from-green-500/20 to-emerald-500/20",
     },
     {
       title: "Healthcare System Integration",
       client: "Healthcare Provider",
-      description: "Modernized legacy patient management system with cloud-based architecture, enabling real-time data access, improving patient care coordination, and achieving HIPAA compliance with enhanced security.",
+      description:
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+        "Modernized legacy patient management system with cloud-based architecture, enabling real-time data access, improving patient care coordination, and achieving HIPAA compliance with enhanced security.",
+      image:
+        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
       results: "Real-time access, HIPAA compliant",
       engagement: "Healthcare system overhaul",
-      gradient: "from-purple-500/20 to-pink-500/20"
+      gradient: "from-purple-500/20 to-pink-500/20",
-    }
+    },
   ];
 
   return (
@@ -998,7 +1112,7 @@ const LegacySystemCaseStudies = () => {
             Businesses Reimagined with Modern Systems
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -1027,19 +1141,24 @@ const LegacySystemCaseStudies = () => {
                         <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">
+                        <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-white mb-4 leading-tight">
                       {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-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -1047,7 +1166,7 @@ const LegacySystemCaseStudies = () => {
                       />
                     </div>
                   </div>
-                  
+
                   <div className="px-8 pb-6">
                     <p className="text-gray-300 text-sm leading-relaxed mb-4">
                       {study.description}
@@ -1059,14 +1178,16 @@ const LegacySystemCaseStudies = () => {
                       </div>
                     </div>
                   </div>
-                  
+
                   <div className="p-8 pt-0 mt-auto">
-                    <Button 
+                    <Button
-                      variant="ghost" 
+                      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 h-auto py-3"
                     >
-                      <span className="text-sm font-medium">VIEW FULL CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW FULL CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -1102,20 +1223,26 @@ const LegacySystemInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <RefreshCw className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">System Modernization</span>
+                <span className="text-foreground text-base font-medium">
+                  System Modernization
+                </span>
               </div>
             </div>
-            
+
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
               Ready to Future-Proof Your{" "}
               <span className="text-accent">Business Operations?</span>
             </h2>
-            
+
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Unlock efficiency, security, and scalability with our expert modernization services.
+              Unlock efficiency, security, and scalability with our expert
+              modernization services.
             </p>
-            
+
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
                 <span>Get Your System Audit</span>
@@ -1133,20 +1260,25 @@ const LegacySystemFAQs = () => {
   const faqs = [
     {
       question: "How long does a typical legacy system rebuild take?",
-      answer: "The timeline for legacy system rebuilds varies significantly based on system complexity, scope, and business requirements. Simple system modernizations typically take 4-8 months, while complex enterprise-wide transformations can take 12-24 months. Our approach includes: Assessment and planning (4-6 weeks), phased development and migration (8-16 months), testing and validation (4-8 weeks), and deployment with support (2-4 weeks). We use agile methodologies and phased rollouts to minimize business disruption and deliver value incrementally throughout the project lifecycle."
+      answer:
+        "The timeline for legacy system rebuilds varies significantly based on system complexity, scope, and business requirements. Simple system modernizations typically take 4-8 months, while complex enterprise-wide transformations can take 12-24 months. Our approach includes: Assessment and planning (4-6 weeks), phased development and migration (8-16 months), testing and validation (4-8 weeks), and deployment with support (2-4 weeks). We use agile methodologies and phased rollouts to minimize business disruption and deliver value incrementally throughout the project lifecycle.",
     },
     {
-      question: "What are the common risks associated with modernization projects?",
+      question:
-      answer: "Legacy modernization projects carry several risks that we actively mitigate: Data loss or corruption during migration (addressed through comprehensive backup and validation strategies), business disruption and downtime (minimized via phased rollouts and parallel systems), cost overruns and timeline delays (managed through detailed planning and agile execution), user adoption challenges (solved with training and change management), and integration failures with existing systems (prevented through thorough testing and compatibility analysis). We employ risk mitigation strategies including pilot programs, rollback plans, comprehensive testing, stakeholder communication, and experienced project management to ensure successful outcomes."
+        "What are the common risks associated with modernization projects?",
+      answer:
+        "Legacy modernization projects carry several risks that we actively mitigate: Data loss or corruption during migration (addressed through comprehensive backup and validation strategies), business disruption and downtime (minimized via phased rollouts and parallel systems), cost overruns and timeline delays (managed through detailed planning and agile execution), user adoption challenges (solved with training and change management), and integration failures with existing systems (prevented through thorough testing and compatibility analysis). We employ risk mitigation strategies including pilot programs, rollback plans, comprehensive testing, stakeholder communication, and experienced project management to ensure successful outcomes.",
     },
     {
       question: "Do you support data migration from older databases?",
-      answer: "Yes, we provide comprehensive data migration services for all major legacy database systems including: Mainframe databases (IBM DB2, IMS), legacy SQL systems (older versions of Oracle, SQL Server, MySQL), flat file systems and custom databases, cloud migration from on-premise to AWS/Azure/GCP, and cross-platform migrations between different database technologies. Our migration process includes: data assessment and mapping, migration strategy development, data cleansing and transformation, validation and integrity checking, performance optimization, and rollback planning. We ensure zero data loss and maintain data integrity throughout the migration process with comprehensive testing and validation procedures."
+      answer:
+        "Yes, we provide comprehensive data migration services for all major legacy database systems including: Mainframe databases (IBM DB2, IMS), legacy SQL systems (older versions of Oracle, SQL Server, MySQL), flat file systems and custom databases, cloud migration from on-premise to AWS/Azure/GCP, and cross-platform migrations between different database technologies. Our migration process includes: data assessment and mapping, migration strategy development, data cleansing and transformation, validation and integrity checking, performance optimization, and rollback planning. We ensure zero data loss and maintain data integrity throughout the migration process with comprehensive testing and validation procedures.",
     },
     {
       question: "What technologies do you use for rebuilding legacy systems?",
-      answer: "We use modern, enterprise-grade technologies based on your specific requirements: Cloud platforms (AWS, Azure, Google Cloud), containerization (Docker, Kubernetes), microservices architecture, modern programming languages (Java, C#, Python, Node.js), database technologies (PostgreSQL, MongoDB, Redis), API technologies (REST, GraphQL), and CI/CD pipelines for automated deployment. Frontend technologies include React, Angular, Vue.js for web applications and React Native, Flutter for mobile. We select technologies based on factors like scalability requirements, performance needs, integration requirements, security standards, maintenance considerations, and your team's expertise. Our architects design future-proof solutions that can evolve with your business needs."
+      answer:
-    }
+        "We use modern, enterprise-grade technologies based on your specific requirements: Cloud platforms (AWS, Azure, Google Cloud), containerization (Docker, Kubernetes), microservices architecture, modern programming languages (Java, C#, Python, Node.js), database technologies (PostgreSQL, MongoDB, Redis), API technologies (REST, GraphQL), and CI/CD pipelines for automated deployment. Frontend technologies include React, Angular, Vue.js for web applications and React Native, Flutter for mobile. We select technologies based on factors like scalability requirements, performance needs, integration requirements, security standards, maintenance considerations, and your team's expertise. Our architects design future-proof solutions that can evolve with your business needs.",
+    },
   ];
 
   return (
@@ -1163,7 +1295,7 @@ const LegacySystemFAQs = () => {
             Frequently Asked Questions
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -1173,13 +1305,15 @@ const LegacySystemFAQs = () => {
         >
           <Accordion type="single" collapsible className="space-y-8">
             {faqs.map((faq, index) => (
-              <AccordionItem 
+              <AccordionItem
-                key={index} 
+                key={index}
-                value={`item-${index}`} 
+                value={`item-${index}`}
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1215,7 +1349,9 @@ const LegacySystemFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <RefreshCw className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Modernization Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  Modernization Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1224,7 +1360,7 @@ const LegacySystemFinalCTA = () => {
             Evolve Your Enterprise with{" "}
             <span className="text-accent">WDI's Modernization Expertise</span>
           </h2>
-          
+
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -1232,7 +1368,8 @@ const LegacySystemFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Don't let old technology hold you back. WDI helps you leap forward with robust, high-performing, and sustainable digital solutions.
+            Don't let old technology hold you back. WDI helps you leap forward
+            with robust, high-performing, and sustainable digital solutions.
           </motion.p>
 
           <motion.div
@@ -1242,7 +1379,10 @@ const LegacySystemFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Schedule a Consultation</span>
@@ -1271,61 +1411,61 @@ export const LegacySystemRebuilds = () => {
   return (
     <div className="dark min-h-screen">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="bg-black">
         <LegacySystemRebuildsHero />
       </section>
-      
+
       {/* Challenge */}
       <section className="bg-background">
         <LegacySystemChallenge />
       </section>
-      
+
       {/* What's Included */}
       <section className="bg-card">
         <LegacySystemIncludes />
       </section>
-      
+
       {/* Benefits */}
       <section className="bg-background">
         <LegacySystemBenefits />
       </section>
-      
+
       {/* Process */}
       <section className="bg-card">
         <LegacySystemProcess />
       </section>
-      
+
       {/* Target Audience */}
       <section className="bg-background">
         <LegacySystemAudience />
       </section>
-      
+
       {/* Case Studies */}
       <section className="bg-card">
         <LegacySystemCaseStudies />
       </section>
-      
+
       {/* Mid-Page CTA */}
       <section className="bg-background">
         <LegacySystemInlineCTA />
       </section>
-      
+
       {/* FAQs */}
       <section className="bg-card">
         <LegacySystemFAQs />
       </section>
-      
+
       {/* Final CTA */}
       <section className="bg-background">
         <LegacySystemFinalCTA />
       </section>
-      
+
       {/* Footer */}
       <section className="bg-card">
         <Footer />
       </section>
     </div>
   );
-};
+};

pages/MachineLearning.tsx

@@ -1,26 +1,27 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
-import { Footer } from "../components/Footer";
+  BarChart3,
-import { ProcessSection } from "../components/ProcessSection";
+  Brain,
-import { FAQSection } from "../components/FAQSection";
+  Calendar,
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
+  Eye,
-import { Button } from "../components/ui/button";
+  Lightbulb,
-import { ShimmerButton } from "../components/ui/shimmer-button";
+  MessageSquare,
-import { Badge } from "../components/ui/badge";
+  Rocket,
-import { Card, CardContent } from "../components/ui/card";
+  Settings,
-import { GridPattern } from "../components/GridPattern";
+  Target,
-import { navigateTo } from "../App";
+  TrendingUp,
-import { 
+  UserPlus,
-  Brain, Target, BarChart3, Eye, MessageSquare, Zap, Star, 
+  Zap
-  ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers, 
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
-  Heart, CheckCircle, Lightbulb, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video,
-  Cog, Settings, Sparkles, Handshake, Award, UserPlus, Cpu, Database, Server, Users
 } from "lucide-react";
+import { navigateTo } from "../App";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+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";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -63,7 +64,10 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton className="text-lg px-8 py-4"
+              //  onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+               onClick={() => navigateTo("/start-a-project")}
+               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>ML Strategy Session</span>
@@ -72,7 +76,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-auto"
                 onClick={() => navigateTo('/case-studies')}
               >
                 <BarChart3 className="w-4 h-4 flex-shrink-0" />
@@ -460,7 +464,8 @@ const InlineCTA = () => {
             <div className="flex flex-col items-start gap-4">
               <ShimmerButton 
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Brain className="w-6 h-6 flex-shrink-0" />

pages/ManufacturingAutomation.tsx

@@ -362,7 +362,8 @@ export const ManufacturingAutomation = () => {
         description="Transform your production lines and factory operations with intelligent, interconnected, and highly efficient Manufacturing Automation software solutions."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Manufacturing Case Studies",

pages/MicrolearningApps.tsx

@@ -362,7 +362,8 @@ export const MicrolearningApps = () => {
         description="Deliver bite-sized, engaging, and highly effective learning content on-the-go with custom microlearning mobile applications."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Microlearning Case Studies",

pages/NativeAppDevelopment.tsx

@@ -1190,7 +1190,7 @@ const HireNativeDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white text-white hover:bg-white/10 hover:text-white px-8 py-4 rounded-lg transition-all duration-300 h-[56px]"
+            className="border-white text-white hover:bg-white/10 hover:text-white px-8 py-4 rounded-lg transition-all duration-300 h-auto"
             style={{ color: "white" }}
           >
             <span>Get a Consultation</span>

pages/OTTStreamingApps.tsx

@@ -10,10 +10,21 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
+import {
-  Play, Monitor, Users, Shield, Star, 
+  Play,
-  Database, Smartphone, Target, CheckCircle, 
+  Monitor,
-  Zap, Globe, Clock, Award, Brain
+  Users,
+  Shield,
+  Star,
+  Database,
+  Smartphone,
+  Target,
+  CheckCircle,
+  Zap,
+  Globe,
+  Clock,
+  Award,
+  Brain,
 } from "lucide-react";
 
 // Problem Solution Block Component
@@ -29,10 +40,12 @@ const ProblemSolutionBlock = () => {
           className="max-w-6xl mx-auto"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
-            <span className="text-white">Addressing the Core Challenges of </span>
+            <span className="text-white">
+              Addressing the Core Challenges of{" "}
+            </span>
             <span className="text-[#E5195E]">OTT & Streaming Apps</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -49,11 +62,16 @@ const ProblemSolutionBlock = () => {
                   The Challenge
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  Building a successful streaming platform requires more than just content; it demands flawless video delivery, scalable infrastructure, effective content monetization, and robust digital rights management (DRM). Challenges include handling high concurrent viewership, ensuring cross-device compatibility, and delivering personalized user experiences.
+                  Building a successful streaming platform requires more than
+                  just content; it demands flawless video delivery, scalable
+                  infrastructure, effective content monetization, and robust
+                  digital rights management (DRM). Challenges include handling
+                  high concurrent viewership, ensuring cross-device
+                  compatibility, and delivering personalized user experiences.
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -69,7 +87,12 @@ const ProblemSolutionBlock = () => {
                   Our OTT & Streaming App Solution
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  WDI specializes in developing end-to-end OTT and streaming applications. We create platforms for live video, on-demand content, secure content delivery networks (CDN), and subscriber management, focusing on superior streaming quality, diverse monetization models, and intuitive user interfaces to maximize audience engagement and revenue.
+                  WDI specializes in developing end-to-end OTT and streaming
+                  applications. We create platforms for live video, on-demand
+                  content, secure content delivery networks (CDN), and
+                  subscriber management, focusing on superior streaming quality,
+                  diverse monetization models, and intuitive user interfaces to
+                  maximize audience engagement and revenue.
                 </p>
               </div>
             </motion.div>
@@ -86,38 +109,45 @@ const IconWithDescriptionGrid = () => {
     {
       icon: Play,
       title: "Live & On-Demand Video Streaming",
-      description: "High-quality, low-latency streaming for live events and extensive libraries of on-demand content."
+      description:
+        "High-quality, low-latency streaming for live events and extensive libraries of on-demand content.",
     },
     {
       icon: Monitor,
       title: "Multi-Device Compatibility",
-      description: "Seamless streaming experience across web, mobile (iOS/Android), smart TVs, and gaming consoles."
+      description:
+        "Seamless streaming experience across web, mobile (iOS/Android), smart TVs, and gaming consoles.",
     },
     {
       icon: Database,
       title: "Content Management System (CMS)",
-      description: "Robust backend for uploading, organizing, categorizing, and publishing video content efficiently."
+      description:
+        "Robust backend for uploading, organizing, categorizing, and publishing video content efficiently.",
     },
     {
       icon: Users,
       title: "User Authentication & Profiles",
-      description: "Secure user registration, personalized profiles, watch history, and watchlists."
+      description:
+        "Secure user registration, personalized profiles, watch history, and watchlists.",
     },
     {
       icon: Star,
       title: "Monetization Models",
-      description: "Integration of various revenue models including Subscription Video On Demand (SVOD), Advertising Video On Demand (AVOD), and Transactional Video On Demand (TVOD)."
+      description:
+        "Integration of various revenue models including Subscription Video On Demand (SVOD), Advertising Video On Demand (AVOD), and Transactional Video On Demand (TVOD).",
     },
     {
       icon: Shield,
       title: "Digital Rights Management (DRM)",
-      description: "Secure content protection against unauthorized access and piracy."
+      description:
+        "Secure content protection against unauthorized access and piracy.",
     },
     {
       icon: Brain,
       title: "Personalized Recommendations & AI",
-      description: "AI-driven algorithms for suggesting content based on viewing habits, enhancing discovery and engagement."
+      description:
-    }
+        "AI-driven algorithms for suggesting content based on viewing habits, enhancing discovery and engagement.",
+    },
   ];
 
   return (
@@ -134,10 +164,11 @@ const IconWithDescriptionGrid = () => {
             Powerful Features for Your OTT & Streaming Apps
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Comprehensive tools to create captivating streaming experiences that engage audiences and maximize revenue.
+            Comprehensive tools to create captivating streaming experiences that
+            engage audiences and maximize revenue.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -178,23 +209,27 @@ const ThreeColumnFeatureBlock = () => {
     {
       icon: Zap,
       title: "Scalable Video Delivery",
-      description: "Expertise in building infrastructure that handles millions of concurrent viewers and massive content libraries."
+      description:
+        "Expertise in building infrastructure that handles millions of concurrent viewers and massive content libraries.",
     },
     {
       icon: Star,
       title: "Comprehensive Monetization",
-      description: "Implementing diverse revenue strategies to maximize your content's financial potential."
+      description:
+        "Implementing diverse revenue strategies to maximize your content's financial potential.",
     },
     {
       icon: Shield,
       title: "Robust DRM & Security",
-      description: "Protecting your valuable content with advanced digital rights management and anti-piracy measures."
+      description:
+        "Protecting your valuable content with advanced digital rights management and anti-piracy measures.",
     },
     {
       icon: Smartphone,
       title: "Superior User Experience",
-      description: "Designing intuitive interfaces and seamless playback across all devices for ultimate viewer satisfaction."
+      description:
-    }
+        "Designing intuitive interfaces and seamless playback across all devices for ultimate viewer satisfaction.",
+    },
   ];
 
   return (
@@ -211,10 +246,11 @@ const ThreeColumnFeatureBlock = () => {
             Why Partner with WDI for OTT & Streaming App Development?
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Leverage our expertise to create streaming platforms that truly captivate and engage your audience.
+            Leverage our expertise to create streaming platforms that truly
+            captivate and engage your audience.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -250,18 +286,24 @@ const CaseStudyHighlightGrid = () => {
   const caseStudies = [
     {
       title: "Niche Sports League Streaming Platform",
-      problem: "A sports league wanted a direct-to-consumer streaming platform to broadcast live games and offer exclusive on-demand content.",
+      problem:
-      solution: "WDI built a comprehensive OTT platform with live streaming capabilities, multi-camera views, real-time stats integration, and subscription management.",
+        "A sports league wanted a direct-to-consumer streaming platform to broadcast live games and offer exclusive on-demand content.",
-      results: "Attracted over 500,000 subscribers in the first year and significantly increased fan engagement for the league.",
+      solution:
-      metrics: ["500K+ Subscribers", "Live Streaming", "Sports League"]
+        "WDI built a comprehensive OTT platform with live streaming capabilities, multi-camera views, real-time stats integration, and subscription management.",
+      results:
+        "Attracted over 500,000 subscribers in the first year and significantly increased fan engagement for the league.",
+      metrics: ["500K+ Subscribers", "Live Streaming", "Sports League"],
     },
     {
       title: "Educational Content Subscription Service",
-      problem: "An educational publisher aimed to transition its content library into a subscription-based video streaming service.",
+      problem:
-      solution: "Developed an SVOD platform with a robust CMS, personalized learning paths, and cross-device compatibility.",
+        "An educational publisher aimed to transition its content library into a subscription-based video streaming service.",
-      results: "Achieved a 30% month-over-month subscriber growth and became a leading platform in its educational niche.",
+      solution:
-      metrics: ["30% MoM Growth", "Educational Content", "SVOD Platform"]
+        "Developed an SVOD platform with a robust CMS, personalized learning paths, and cross-device compatibility.",
-    }
+      results:
+        "Achieved a 30% month-over-month subscriber growth and became a leading platform in its educational niche.",
+      metrics: ["30% MoM Growth", "Educational Content", "SVOD Platform"],
+    },
   ];
 
   return (
@@ -278,10 +320,11 @@ const CaseStudyHighlightGrid = () => {
             OTT & Streaming App Success Stories
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Real results from our streaming platform implementations that transformed content delivery.
+            Real results from our streaming platform implementations that
+            transformed content delivery.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -295,7 +338,11 @@ const CaseStudyHighlightGrid = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-2 mb-4">
                     {study.metrics.map((metric, i) => (
-                      <Badge key={i} variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30">
+                      <Badge
+                        key={i}
+                        variant="secondary"
+                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
+                      >
                         {metric}
                       </Badge>
                     ))}
@@ -305,15 +352,21 @@ const CaseStudyHighlightGrid = () => {
                   </h3>
                   <div className="space-y-4">
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Problem:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Problem:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.problem}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Solution:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Solution:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.solution}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Results:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Results:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.results}</p>
                     </div>
                   </div>
@@ -330,71 +383,82 @@ const CaseStudyHighlightGrid = () => {
 // FAQ Data
 const ottStreamingFAQs = [
   {
-    question: "How do you ensure high-quality video streaming and low latency for live events?",
+    question:
-    answer: "We implement adaptive bitrate streaming, global CDN networks, edge computing, and advanced video compression technologies. Our platforms use protocols like HLS and DASH to ensure optimal streaming quality across varying network conditions."
+      "How do you ensure high-quality video streaming and low latency for live events?",
+    answer:
+      "We implement adaptive bitrate streaming, global CDN networks, edge computing, and advanced video compression technologies. Our platforms use protocols like HLS and DASH to ensure optimal streaming quality across varying network conditions.",
   },
   {
-    question: "What monetization models (SVOD, AVOD, TVOD) can you integrate into streaming platforms?",
+    question:
-    answer: "We support all major monetization models: Subscription Video On Demand (SVOD), Advertising Video On Demand (AVOD), Transactional Video On Demand (TVOD), and hybrid models. We can also implement freemium tiers and pay-per-view options."
+      "What monetization models (SVOD, AVOD, TVOD) can you integrate into streaming platforms?",
+    answer:
+      "We support all major monetization models: Subscription Video On Demand (SVOD), Advertising Video On Demand (AVOD), Transactional Video On Demand (TVOD), and hybrid models. We can also implement freemium tiers and pay-per-view options.",
   },
   {
-    question: "How do you handle Digital Rights Management (DRM) and content security?",
+    question:
-    answer: "We implement industry-standard DRM solutions including Widevine, PlayReady, and FairPlay. Our platforms include watermarking, token-based authentication, geo-blocking, and anti-piracy measures to protect valuable content assets."
+      "How do you handle Digital Rights Management (DRM) and content security?",
+    answer:
+      "We implement industry-standard DRM solutions including Widevine, PlayReady, and FairPlay. Our platforms include watermarking, token-based authentication, geo-blocking, and anti-piracy measures to protect valuable content assets.",
   },
   {
-    question: "What is your experience with multi-device compatibility (Smart TVs, mobile, web)?",
+    question:
-    answer: "We develop native applications for iOS, Android, Apple TV, Android TV, Roku, Fire TV, and web browsers. Our solutions ensure consistent user experience and feature parity across all platforms with responsive design principles."
+      "What is your experience with multi-device compatibility (Smart TVs, mobile, web)?",
+    answer:
+      "We develop native applications for iOS, Android, Apple TV, Android TV, Roku, Fire TV, and web browsers. Our solutions ensure consistent user experience and feature parity across all platforms with responsive design principles.",
   },
   {
-    question: "Do you offer solutions for content recommendation engines and personalization?",
+    question:
-    answer: "Yes, we build AI-powered recommendation systems using machine learning algorithms that analyze viewing patterns, user preferences, and content metadata to deliver personalized content suggestions and improve user engagement."
+      "Do you offer solutions for content recommendation engines and personalization?",
-  }
+    answer:
+      "Yes, we build AI-powered recommendation systems using machine learning algorithms that analyze viewing patterns, user preferences, and content metadata to deliver personalized content suggestions and improve user engagement.",
+  },
 ];
 
 export const OTTStreamingApps = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
       <Navigation />
-      
+
       <HeroBanner
         category="Media & Community"
         title="OTT & Streaming Apps"
         description="Deliver captivating content directly to your audience with high-performance, secure, and engaging Over-The-Top (OTT) and streaming applications."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project",
         }}
         secondaryCTA={{
           text: "View Streaming Case Studies",
-          href: "/case-studies"
+          href: "/case-studies",
         }}
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="OTT & Streaming App FAQs"
           subtitle="Get answers to common questions about our streaming platform development services."
           faqs={ottStreamingFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <SplitCallToAction />
       </div>
-      
+
       <Footer />
     </div>
   );
-};
+};

pages/OilGasMonitoringSystems.tsx

@@ -362,7 +362,8 @@ export const OilGasMonitoringSystems = () => {
         description="Ensure operational safety, environmental compliance, and maximum efficiency with comprehensive monitoring solutions for upstream, midstream, and downstream operations."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Oil & Gas Case Studies",

pages/OnDemandServices.tsx

@@ -362,7 +362,8 @@ export const OnDemandServices = () => {
         description="Connect customers with service providers instantly through intelligent, scalable, and user-friendly on-demand service platforms that transform how services are delivered."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View On-Demand Case Studies",

pages/RanOutOfProject.tsx

@@ -19,6 +19,7 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
+import ranOutOfImage from "../src/images/ranoutof.webp"; 
 
 const projectMetrics = [
   {
@@ -41,8 +42,6 @@ const projectMetrics = [
   },
 ];
 
-const ranoutofImage =
-  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
 
 const keyFeatures = [
   {
@@ -205,7 +204,7 @@ export const RanOutOfProject = () => {
               className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2"
             >
               <ImageWithFallback
-                src={ranoutofImage}
+                src={ranOutOfImage}
                 alt="RanOutOf smart grocery planning app showcasing barcode scanning, voice commands, shopping lists, and pantry management features"
                 className="w-full h-full object-contain object-center rounded-[10px]"
               />

pages/RegroupProject.tsx

@@ -6,9 +6,7 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
-// import regroupImage from 'figma:asset/92c9546d073e10bfa567559041d8b7e5b0d84ce7.png';
+import regroupImage from "../src/images/regroup.webp";
-const regroupImage =
-  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
 
 const projectMetrics = [
   { 

pages/SeezunProject.tsx

@@ -6,10 +6,7 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
-// import seezunImage from 'figma:asset/06e3cfb0c62c4da1116eaa2ecf65c8d2c54cf50a.png';
+import seezunImage from "../src/images/seezun.webp";
-
-const seezunImage =
-  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
 
 const projectMetrics = [
   { 

pages/SocialPlatformsNetworks.tsx

@@ -362,7 +362,8 @@ export const SocialPlatformsNetworks = () => {
         description="Build engaging, scalable, and safe social platforms that connect people, foster communities, and drive meaningful interactions across digital spaces."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Social Platform Case Studies",

pages/SoftwareEngineering.tsx

@@ -82,7 +82,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4 h-[56px]"
+                className="text-lg px-8 py-4 h-auto"
                 onClick={() => navigateTo("/case-studies")}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />

pages/SportsFanEngagement.tsx

@@ -362,7 +362,8 @@ export const SportsFanEngagement = () => {
         description="Create immersive sports experiences and build passionate fan communities with comprehensive platforms for live streaming, fantasy sports, and fan interaction."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Sports Platform Case Studies",

pages/SupplyChainFleetManagement.tsx

@@ -362,7 +362,8 @@ export const SupplyChainFleetManagement = () => {
         description="Optimize your logistics operations and achieve end-to-end supply chain visibility with intelligent, integrated, and scalable management solutions."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Supply Chain Case Studies",

pages/TanamiProject.tsx

@@ -6,7 +6,7 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
-// import tanamiImage from 'figma:asset/299b700a63c03206afc0281d0a16b76f903195f0.png';
+import tanamiImage from "../src/images/tanami.webp";
 
 const projectMetrics = [
   { 
@@ -171,11 +171,11 @@ export const TanamiProject = () => {
               transition={{ duration: 0.8, delay: 0.2 }}
               className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2"
             >
-              {/* <ImageWithFallback
+              <ImageWithFallback
                 src={tanamiImage}
                 alt="Tanami Capital mobile app interface showing wallet balance, portfolio value, and investment tracking with financial market data visualization"
                 className="w-full h-full object-contain object-center rounded-[10px]"
-              /> */}
+              />
             </motion.div>
           </div>
         </div>

pages/TeamAugmentationServices.tsx

@@ -4,63 +4,91 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Zap, Target, DollarSign, Users, Shield, Cog, CheckCircle, Star, Smartphone, Code, Monitor, Database, Palette, TestTube, Settings } from "lucide-react";
+import {
+  ArrowRight,
+  Zap,
+  Target,
+  DollarSign,
+  Users,
+  Shield,
+  Cog,
+  CheckCircle,
+  Star,
+  Smartphone,
+  Code,
+  Monitor,
+  Database,
+  Palette,
+  TestTube,
+  Settings,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const TeamAugmentationServices = () => {
   const benefits = [
     {
       icon: Zap,
       title: "Rapid Scaling",
-      description: "Quickly onboard specialized talent to meet urgent project needs or seasonal demands."
+      description:
+        "Quickly onboard specialized talent to meet urgent project needs or seasonal demands.",
     },
     {
       icon: Target,
       title: "Fill Skill Gaps",
-      description: "Access experts in niche technologies or specific domains your in-house team might lack."
+      description:
+        "Access experts in niche technologies or specific domains your in-house team might lack.",
     },
     {
       icon: DollarSign,
       title: "Cost-Effective Hiring",
-      description: "Avoid the lengthy and expensive process of recruiting permanent employees."
+      description:
+        "Avoid the lengthy and expensive process of recruiting permanent employees.",
     },
     {
       icon: Users,
       title: "Seamless Integration",
-      description: "Our professionals adapt quickly to your company culture, workflows, and communication tools."
+      description:
+        "Our professionals adapt quickly to your company culture, workflows, and communication tools.",
     },
     {
       icon: Shield,
       title: "Flexibility",
-      description: "Hire individuals or small groups for short-term projects or ongoing support, scaling up or down as required."
+      description:
+        "Hire individuals or small groups for short-term projects or ongoing support, scaling up or down as required.",
     },
     {
       icon: Cog,
       title: "Focus on Core Business",
-      description: "Free up your internal resources to concentrate on strategic initiatives while we handle specialized tasks."
+      description:
-    }
+        "Free up your internal resources to concentrate on strategic initiatives while we handle specialized tasks.",
+    },
   ];
 
   const process = [
     {
       step: "01",
       title: "Identify Your Needs",
-      description: "You specify the roles, skill sets, experience levels, and duration required."
+      description:
+        "You specify the roles, skill sets, experience levels, and duration required.",
     },
     {
       step: "02",
       title: "Candidate Selection",
-      description: "We present you with pre-vetted candidates who perfectly match your requirements."
+      description:
+        "We present you with pre-vetted candidates who perfectly match your requirements.",
     },
     {
       step: "03",
       title: "Integration",
-      description: "The chosen WDI professionals integrate directly into your team, reporting to your project managers and adhering to your processes."
+      description:
+        "The chosen WDI professionals integrate directly into your team, reporting to your project managers and adhering to your processes.",
     },
     {
       step: "04",
       title: "Ongoing Support",
-      description: "WDI provides administrative support, ensuring the augmented talent remains productive and aligned with your goals."
+      description:
-    }
+        "WDI provides administrative support, ensuring the augmented talent remains productive and aligned with your goals.",
+    },
   ];
 
   const roles = [
@@ -68,50 +96,62 @@ export const TeamAugmentationServices = () => {
       icon: Smartphone,
       title: "Mobile App Developers",
       subtitle: "(iOS, Android, Cross-platform)",
-      skills: ["Swift", "Kotlin", "React Native", "Flutter", "Xamarin"]
+      skills: ["Swift", "Kotlin", "React Native", "Flutter", "Xamarin"],
     },
     {
       icon: Monitor,
       title: "Frontend Developers",
       subtitle: "(React, Angular, Vue.js)",
-      skills: ["React.js", "Angular", "Vue.js", "TypeScript", "CSS3"]
+      skills: ["React.js", "Angular", "Vue.js", "TypeScript", "CSS3"],
     },
     {
       icon: Database,
       title: "Backend Developers",
       subtitle: "(Node.js, Python, Java, PHP)",
-      skills: ["Node.js", "Python", "Java", "PHP", "PostgreSQL"]
+      skills: ["Node.js", "Python", "Java", "PHP", "PostgreSQL"],
     },
     {
       icon: Code,
       title: "Full Stack Developers",
       subtitle: "",
-      skills: ["MERN", "MEAN", "Django", "Laravel", "Spring Boot"]
+      skills: ["MERN", "MEAN", "Django", "Laravel", "Spring Boot"],
     },
     {
       icon: Palette,
       title: "UI/UX Designers",
       subtitle: "",
-      skills: ["Figma", "Sketch", "User Research", "Prototyping", "Design Systems"]
+      skills: [
+        "Figma",
+        "Sketch",
+        "User Research",
+        "Prototyping",
+        "Design Systems",
+      ],
     },
     {
       icon: TestTube,
       title: "QA Engineers",
       subtitle: "(Manual, Automation)",
-      skills: ["Selenium", "Cypress", "Jest", "API Testing", "Performance Testing"]
+      skills: [
+        "Selenium",
+        "Cypress",
+        "Jest",
+        "API Testing",
+        "Performance Testing",
+      ],
     },
     {
       icon: Settings,
       title: "DevOps Engineers",
       subtitle: "",
-      skills: ["AWS", "Docker", "Kubernetes", "CI/CD", "Terraform"]
+      skills: ["AWS", "Docker", "Kubernetes", "CI/CD", "Terraform"],
     },
     {
       icon: Users,
       title: "Project Managers / Scrum Masters",
       subtitle: "",
-      skills: ["Agile", "Scrum", "Kanban", "Jira", "Risk Management"]
+      skills: ["Agile", "Scrum", "Kanban", "Jira", "Risk Management"],
-    }
+    },
   ];
 
   const idealFor = [
@@ -119,59 +159,71 @@ export const TeamAugmentationServices = () => {
     "Bringing in specialized expertise for specific project phases",
     "Managing fluctuating workloads",
     "Reducing recruitment overheads",
-    "Covering temporary leaves or increased demands"
+    "Covering temporary leaves or increased demands",
   ];
 
   const testimonials = [
     {
-      quote: "Team augmentation with WDI was a game-changer. We quickly added React specialists to our team and delivered our project 3 weeks ahead of schedule.",
+      quote:
+        "Team augmentation with WDI was a game-changer. We quickly added React specialists to our team and delivered our project 3 weeks ahead of schedule.",
       author: "Alexandra Wang",
       role: "Engineering Manager, FastTrack Solutions",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The DevOps engineer we got through team augmentation seamlessly integrated with our existing processes and dramatically improved our deployment pipeline.",
+      quote:
+        "The DevOps engineer we got through team augmentation seamlessly integrated with our existing processes and dramatically improved our deployment pipeline.",
       author: "Carlos Lopez",
       role: "CTO, CloudScale Inc.",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
-        <div 
+        <div
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
-        
+
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Scale Your Development Capacity
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
-              Team Augmentation Services: Seamlessly Scale Your 
+              Team Augmentation Services: Seamlessly Scale Your
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Development Capacity</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Development Capacity
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Instantly Boost Your Team's Expertise and Accelerate Project Delivery. Facing skill gaps, fluctuating project demands, or tight deadlines? WDI's Team Augmentation Services provide the perfect solution.
+              Instantly Boost Your Team's Expertise and Accelerate Project
+              Delivery. Facing skill gaps, fluctuating project demands, or tight
+              deadlines? WDI's Team Augmentation Services provide the perfect
+              solution.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Augment Your Team Today
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
-                Find the Right Talent for Your Project
-              </Button>
             </div>
           </div>
         </div>
@@ -182,7 +234,10 @@ export const TeamAugmentationServices = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              We integrate highly skilled developers, designers, and QA engineers directly into your existing team, empowering you to scale your capabilities quickly, efficiently, and without the complexities of traditional hiring.
+              We integrate highly skilled developers, designers, and QA
+              engineers directly into your existing team, empowering you to
+              scale your capabilities quickly, efficiently, and without the
+              complexities of traditional hiring.
             </p>
           </div>
         </div>
@@ -196,13 +251,17 @@ export const TeamAugmentationServices = () => {
               Why Choose WDI for Team Augmentation?
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Experience the advantages of professional team augmentation services
+              Experience the advantages of professional team augmentation
+              services
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {benefits.map((benefit, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <benefit.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -226,27 +285,30 @@ export const TeamAugmentationServices = () => {
               How Team Augmentation Works
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              A simple 4-step process to integrate skilled professionals into your team
+              A simple 4-step process to integrate skilled professionals into
+              your team
             </p>
           </div>
-          
+
           <div className="max-w-5xl mx-auto">
             <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
               {process.map((step, index) => (
                 <div key={index} className="text-center">
                   <div className="relative mb-6">
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center mx-auto shadow-lg">
-                      <span className="text-white font-bold text-lg">{step.step}</span>
+                      <span className="text-white font-bold text-lg">
+                        {step.step}
+                      </span>
                     </div>
                     {index < process.length - 1 && (
                       <div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-gradient-to-r from-[#E5195E]/50 to-transparent" />
                     )}
                   </div>
-                  
+
                   <h3 className="text-lg font-semibold text-white mb-3">
                     {step.title}
                   </h3>
-                  
+
                   <p className="text-muted-foreground text-sm leading-relaxed">
                     {step.description}
                   </p>
@@ -268,26 +330,33 @@ export const TeamAugmentationServices = () => {
               Expert professionals across all major technology domains
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {roles.map((role, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <role.icon className="w-8 h-8 text-[#E5195E] mb-4 group-hover:scale-110 transition-transform duration-300" />
-                  
+
                   <h3 className="text-lg font-semibold text-white mb-1 group-hover:text-[#E5195E] transition-colors duration-300">
                     {role.title}
                   </h3>
-                  
+
                   {role.subtitle && (
-                    <p className="text-muted-foreground text-sm mb-4">{role.subtitle}</p>
+                    <p className="text-muted-foreground text-sm mb-4">
+                      {role.subtitle}
+                    </p>
                   )}
-                  
+
                   <div className="space-y-1">
                     {role.skills.slice(0, 3).map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex items-center gap-2">
                         <div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-xs">{skill}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {skill}
+                        </span>
                       </div>
                     ))}
                     {role.skills.length > 3 && (
@@ -314,10 +383,13 @@ export const TeamAugmentationServices = () => {
               Perfect solutions for various business scenarios and challenges
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
             {idealFor.map((item, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{item}</span>
               </div>
@@ -334,10 +406,11 @@ export const TeamAugmentationServices = () => {
               Team Augmentation vs Traditional Hiring
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              See why team augmentation is the smarter choice for scaling your team
+              See why team augmentation is the smarter choice for scaling your
+              team
             </p>
           </div>
-          
+
           <div className="max-w-4xl mx-auto">
             <div className="grid md:grid-cols-2 gap-8">
               <Card className="bg-card/50 border-white/10">
@@ -346,9 +419,11 @@ export const TeamAugmentationServices = () => {
                     <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center mx-auto mb-4">
                       <Zap className="w-8 h-8 text-white" />
                     </div>
-                    <h3 className="text-xl font-bold text-white">Team Augmentation</h3>
+                    <h3 className="text-xl font-bold text-white">
+                      Team Augmentation
+                    </h3>
                   </div>
-                  
+
                   <ul className="space-y-3">
                     {[
                       "Quick onboarding (1-2 weeks)",
@@ -356,26 +431,30 @@ export const TeamAugmentationServices = () => {
                       "Flexible duration",
                       "Pre-vetted professionals",
                       "Immediate productivity",
-                      "No long-term commitments"
+                      "No long-term commitments",
                     ].map((benefit, index) => (
                       <li key={index} className="flex items-center gap-3">
                         <CheckCircle className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
-                        <span className="text-muted-foreground text-sm">{benefit}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {benefit}
+                        </span>
                       </li>
                     ))}
                   </ul>
                 </CardContent>
               </Card>
-              
+
               <Card className="bg-card/50 border-white/10 opacity-75">
                 <CardContent className="p-8">
                   <div className="text-center mb-6">
                     <div className="w-16 h-16 rounded-full bg-gray-500 flex items-center justify-center mx-auto mb-4">
                       <Users className="w-8 h-8 text-white" />
                     </div>
-                    <h3 className="text-xl font-bold text-white">Traditional Hiring</h3>
+                    <h3 className="text-xl font-bold text-white">
+                      Traditional Hiring
+                    </h3>
                   </div>
-                  
+
                   <ul className="space-y-3">
                     {[
                       "Long hiring process (8-12 weeks)",
@@ -383,11 +462,13 @@ export const TeamAugmentationServices = () => {
                       "Long-term commitment",
                       "Uncertain candidate quality",
                       "Extended onboarding period",
-                      "Employment obligations"
+                      "Employment obligations",
                     ].map((drawback, index) => (
                       <li key={index} className="flex items-center gap-3">
                         <div className="w-4 h-4 rounded-full border-2 border-gray-500 flex-shrink-0" />
-                        <span className="text-muted-foreground text-sm">{drawback}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {drawback}
+                        </span>
                       </li>
                     ))}
                   </ul>
@@ -443,14 +524,23 @@ export const TeamAugmentationServices = () => {
               Ready to Scale Your Team?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Get the skilled professionals you need to accelerate your projects and fill critical skill gaps.
+              Get the skilled professionals you need to accelerate your projects
+              and fill critical skill gaps.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Start Team Augmentation
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Discuss Your Needs
               </Button>
             </div>
@@ -461,4 +551,4 @@ export const TeamAugmentationServices = () => {
       <Footer />
     </div>
   );
-};
+};

pages/ThankYou.tsx

@@ -170,10 +170,10 @@ export const ThankYou = () => {
               <p className="text-sm text-muted-foreground/70">
                 Expected response time: 24-48 hours • Need immediate assistance? Contact us at{" "}
                 <a 
-                  href="mailto:hello@wdipl.com" 
+                  href="mailto:ideas@wdipl.com" 
                   className="text-accent hover:text-accent/80 transition-colors duration-200"
                 >
-                  hello@wdipl.com
+                  ideas@wdipl.com
                 </a>
               </p>
             </motion.div>

pages/TradersCircuitProject.tsx

@@ -6,6 +6,7 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
+import tradersCircuitImage from "../src/images/traders-circuit.webp"; 
 
 const projectMetrics = [
   { 
@@ -171,7 +172,7 @@ export const TradersCircuitProject = () => {
               className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2"
             >
               <ImageWithFallback
-                src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=800&h=600&fit=crop&crop=center"
+                src={tradersCircuitImage}
                 alt="TradersCircuit mobile app showcasing personalized investment dashboard with Indian market data and social trading features"
                 className="w-full h-full object-contain object-center rounded-[10px]"
               />

pages/TransportationApps.tsx

@@ -362,7 +362,8 @@ export const TransportationApps = () => {
         description="Revolutionize mobility experiences with intelligent, efficient, and user-centric transportation applications for ride-sharing, fleet management, and logistics."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View Transportation Case Studies",

pages/TravelBookingSystems.tsx

@@ -10,10 +10,21 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
 import { Card, CardContent } from "../components/ui/card";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
-import { 
+import {
-  Search, MapPin, CreditCard, Users, Calendar, 
+  Search,
-  Globe, Shield, Target, CheckCircle, Star, 
+  MapPin,
-  Zap, Database, Clock, Award
+  CreditCard,
+  Users,
+  Calendar,
+  Globe,
+  Shield,
+  Target,
+  CheckCircle,
+  Star,
+  Zap,
+  Database,
+  Clock,
+  Award,
 } from "lucide-react";
 
 // Problem Solution Block Component
@@ -29,10 +40,12 @@ const ProblemSolutionBlock = () => {
           className="max-w-6xl mx-auto"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
-            <span className="text-white">Addressing the Core Challenges of </span>
+            <span className="text-white">
+              Addressing the Core Challenges of{" "}
+            </span>
             <span className="text-[#E5195E]">Travel & Booking Systems</span>
           </h2>
-          
+
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <motion.div
               initial={{ opacity: 0, x: -30 }}
@@ -49,11 +62,16 @@ const ProblemSolutionBlock = () => {
                   The Challenge
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  The travel industry demands complex systems that can manage vast inventories (flights, hotels, activities), offer real-time availability, handle secure payments, and provide a seamless, personalized booking experience. Challenges include integrating with diverse global distribution systems (GDS), ensuring data accuracy, and managing fluctuating demand.
+                  The travel industry demands complex systems that can manage
+                  vast inventories (flights, hotels, activities), offer
+                  real-time availability, handle secure payments, and provide a
+                  seamless, personalized booking experience. Challenges include
+                  integrating with diverse global distribution systems (GDS),
+                  ensuring data accuracy, and managing fluctuating demand.
                 </p>
               </div>
             </motion.div>
-            
+
             <motion.div
               initial={{ opacity: 0, x: 30 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -69,7 +87,13 @@ const ProblemSolutionBlock = () => {
                   Our Travel & Booking System Solution
                 </h3>
                 <p className="text-gray-300 leading-relaxed">
-                  WDI specializes in developing robust and user-centric travel and booking platforms. We create solutions for flight, hotel, and tour reservations, car rentals, and package holiday bookings, focusing on powerful search capabilities, secure payment processing, seamless integrations, and intuitive user experiences to maximize conversions and operational efficiency.
+                  WDI specializes in developing robust and user-centric travel
+                  and booking platforms. We create solutions for flight, hotel,
+                  and tour reservations, car rentals, and package holiday
+                  bookings, focusing on powerful search capabilities, secure
+                  payment processing, seamless integrations, and intuitive user
+                  experiences to maximize conversions and operational
+                  efficiency.
                 </p>
               </div>
             </motion.div>
@@ -86,38 +110,45 @@ const IconWithDescriptionGrid = () => {
     {
       icon: Search,
       title: "Comprehensive Search & Filtering",
-      description: "Advanced search engines for flights, hotels, tours, and more, with granular filtering options."
+      description:
+        "Advanced search engines for flights, hotels, tours, and more, with granular filtering options.",
     },
     {
       icon: Clock,
       title: "Real-time Availability & Pricing",
-      description: "Live updates on inventory and dynamic pricing from various suppliers and GDSs."
+      description:
+        "Live updates on inventory and dynamic pricing from various suppliers and GDSs.",
     },
     {
       icon: CreditCard,
       title: "Secure Booking & Payment Gateway",
-      description: "Seamless and secure checkout processes with integration of diverse payment methods (credit cards, digital wallets)."
+      description:
+        "Seamless and secure checkout processes with integration of diverse payment methods (credit cards, digital wallets).",
     },
     {
       icon: Users,
       title: "User Accounts & Booking Management",
-      description: "Personalized dashboards for users to view, manage, and modify their bookings."
+      description:
+        "Personalized dashboards for users to view, manage, and modify their bookings.",
     },
     {
       icon: Star,
       title: "Personalized Recommendations",
-      description: "AI-driven suggestions for destinations, hotels, and activities based on user preferences and past travel."
+      description:
+        "AI-driven suggestions for destinations, hotels, and activities based on user preferences and past travel.",
     },
     {
       icon: Globe,
       title: "Multi-Currency & Multi-Language Support",
-      description: "Global readiness with support for various currencies and languages to cater to diverse users."
+      description:
+        "Global readiness with support for various currencies and languages to cater to diverse users.",
     },
     {
       icon: Database,
       title: "Integrations with GDS/APIs",
-      description: "Seamless connectivity with Global Distribution Systems (Amadeus, Sabre), hotel APIs, and other travel service providers."
+      description:
-    }
+        "Seamless connectivity with Global Distribution Systems (Amadeus, Sabre), hotel APIs, and other travel service providers.",
+    },
   ];
 
   return (
@@ -134,10 +165,11 @@ const IconWithDescriptionGrid = () => {
             Powerful Features for Your Travel & Booking Systems
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Comprehensive tools to create seamless travel booking experiences that maximize conversions and customer satisfaction.
+            Comprehensive tools to create seamless travel booking experiences
+            that maximize conversions and customer satisfaction.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
@@ -178,23 +210,27 @@ const ThreeColumnFeatureBlock = () => {
     {
       icon: Globe,
       title: "Deep TravelTech Expertise",
-      description: "Years of experience navigating the complexities of GDS, APIs, and the unique demands of the travel sector."
+      description:
+        "Years of experience navigating the complexities of GDS, APIs, and the unique demands of the travel sector.",
     },
     {
       icon: Zap,
       title: "Performance & Scalability",
-      description: "Building highly optimized systems that can handle millions of searches and bookings without compromising speed."
+      description:
+        "Building highly optimized systems that can handle millions of searches and bookings without compromising speed.",
     },
     {
       icon: Shield,
       title: "Robust Security for Payments",
-      description: "Ensuring PCI DSS compliance and advanced fraud detection for all financial transactions."
+      description:
+        "Ensuring PCI DSS compliance and advanced fraud detection for all financial transactions.",
     },
     {
       icon: Users,
       title: "Intuitive User Experience",
-      description: "Designing user-friendly interfaces that simplify complex booking processes, enhancing customer satisfaction and loyalty."
+      description:
-    }
+        "Designing user-friendly interfaces that simplify complex booking processes, enhancing customer satisfaction and loyalty.",
+    },
   ];
 
   return (
@@ -211,10 +247,11 @@ const ThreeColumnFeatureBlock = () => {
             Why Partner with WDI for Travel & Booking System Development?
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Leverage our expertise to create travel platforms that truly serve modern travelers' needs.
+            Leverage our expertise to create travel platforms that truly serve
+            modern travelers' needs.
           </p>
         </motion.div>
-        
+
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
           {advantages.map((advantage, index) => {
             const IconComponent = advantage.icon;
@@ -250,18 +287,24 @@ const CaseStudyHighlightGrid = () => {
   const caseStudies = [
     {
       title: "Flight & Hotel Booking Aggregator Platform",
-      problem: "A travel startup aimed to create a comprehensive platform aggregating flights and hotels from multiple providers with competitive pricing.",
+      problem:
-      solution: "WDI developed a robust booking engine with advanced search, real-time comparison, and seamless GDS integrations.",
+        "A travel startup aimed to create a comprehensive platform aggregating flights and hotels from multiple providers with competitive pricing.",
-      results: "Processed over 1 million bookings in its first year, establishing the client as a competitive online travel agency.",
+      solution:
-      metrics: ["1M+ Bookings", "GDS Integration", "Multi-Provider"]
+        "WDI developed a robust booking engine with advanced search, real-time comparison, and seamless GDS integrations.",
+      results:
+        "Processed over 1 million bookings in its first year, establishing the client as a competitive online travel agency.",
+      metrics: ["1M+ Bookings", "GDS Integration", "Multi-Provider"],
     },
     {
       title: "Custom Tour & Activity Booking System",
-      problem: "A tour operator needed an intuitive online system for customers to browse, book, and manage adventure tours and activities.",
+      problem:
-      solution: "Built a custom booking platform with interactive itinerary builders, dynamic pricing, and secure payment processing.",
+        "A tour operator needed an intuitive online system for customers to browse, book, and manage adventure tours and activities.",
-      results: "Increased direct bookings by 30% and reduced manual booking effort by 25%.",
+      solution:
-      metrics: ["30% ↑ Bookings", "25% ↓ Manual Work", "Tour Operator"]
+        "Built a custom booking platform with interactive itinerary builders, dynamic pricing, and secure payment processing.",
-    }
+      results:
+        "Increased direct bookings by 30% and reduced manual booking effort by 25%.",
+      metrics: ["30% ↑ Bookings", "25% ↓ Manual Work", "Tour Operator"],
+    },
   ];
 
   return (
@@ -278,10 +321,11 @@ const CaseStudyHighlightGrid = () => {
             Travel & Booking System Success Stories
           </h2>
           <p className="text-lg text-gray-400 max-w-3xl mx-auto">
-            Real results from our travel booking platform implementations that transformed travel businesses.
+            Real results from our travel booking platform implementations that
+            transformed travel businesses.
           </p>
         </motion.div>
-        
+
         <div className="grid lg:grid-cols-2 gap-8">
           {caseStudies.map((study, index) => (
             <motion.div
@@ -295,7 +339,11 @@ const CaseStudyHighlightGrid = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-2 mb-4">
                     {study.metrics.map((metric, i) => (
-                      <Badge key={i} variant="secondary" className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30">
+                      <Badge
+                        key={i}
+                        variant="secondary"
+                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
+                      >
                         {metric}
                       </Badge>
                     ))}
@@ -305,15 +353,21 @@ const CaseStudyHighlightGrid = () => {
                   </h3>
                   <div className="space-y-4">
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Problem:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Problem:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.problem}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Solution:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Solution:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.solution}</p>
                     </div>
                     <div>
-                      <h4 className="font-medium text-gray-300 mb-2">Results:</h4>
+                      <h4 className="font-medium text-gray-300 mb-2">
+                        Results:
+                      </h4>
                       <p className="text-gray-400 text-sm">{study.results}</p>
                     </div>
                   </div>
@@ -330,71 +384,82 @@ const CaseStudyHighlightGrid = () => {
 // FAQ Data
 const travelBookingFAQs = [
   {
-    question: "What are your capabilities for integrating with GDS (Global Distribution Systems) like Amadeus or Sabre?",
+    question:
-    answer: "We have extensive experience integrating with major GDS platforms including Amadeus, Sabre, and Travelport. Our team handles complex API integrations, real-time inventory management, and seamless data synchronization to ensure accurate availability and pricing information."
+      "What are your capabilities for integrating with GDS (Global Distribution Systems) like Amadeus or Sabre?",
+    answer:
+      "We have extensive experience integrating with major GDS platforms including Amadeus, Sabre, and Travelport. Our team handles complex API integrations, real-time inventory management, and seamless data synchronization to ensure accurate availability and pricing information.",
   },
   {
-    question: "How do you ensure real-time availability and dynamic pricing for bookings?",
+    question:
-    answer: "We implement robust caching strategies, real-time API connections with suppliers, and intelligent data management systems. Our platforms handle millions of price and availability checks while maintaining sub-second response times through optimized database queries and CDN integration."
+      "How do you ensure real-time availability and dynamic pricing for bookings?",
+    answer:
+      "We implement robust caching strategies, real-time API connections with suppliers, and intelligent data management systems. Our platforms handle millions of price and availability checks while maintaining sub-second response times through optimized database queries and CDN integration.",
   },
   {
-    question: "What security measures do you implement for online payments and sensitive customer data?",
+    question:
-    answer: "We ensure full PCI DSS compliance with end-to-end encryption, tokenization, secure API communications, and regular security audits. All customer data is protected with industry-standard security protocols and compliance frameworks."
+      "What security measures do you implement for online payments and sensitive customer data?",
+    answer:
+      "We ensure full PCI DSS compliance with end-to-end encryption, tokenization, secure API communications, and regular security audits. All customer data is protected with industry-standard security protocols and compliance frameworks.",
   },
   {
-    question: "Can you develop solutions for specific travel niches (e.g., corporate travel, adventure tours, cruises)?",
+    question:
-    answer: "Absolutely! We specialize in creating tailored solutions for various travel verticals including corporate travel management, adventure tourism, cruise bookings, luxury travel, and group travel. Each solution is customized to meet specific industry requirements and user behaviors."
+      "Can you develop solutions for specific travel niches (e.g., corporate travel, adventure tours, cruises)?",
+    answer:
+      "Absolutely! We specialize in creating tailored solutions for various travel verticals including corporate travel management, adventure tourism, cruise bookings, luxury travel, and group travel. Each solution is customized to meet specific industry requirements and user behaviors.",
   },
   {
-    question: "Do you offer post-booking management features like itinerary changes and cancellations?",
+    question:
-    answer: "Yes, our platforms include comprehensive post-booking management with features for itinerary modifications, cancellations, refund processing, travel insurance integration, and automated customer communications. We also provide mobile-friendly booking management interfaces."
+      "Do you offer post-booking management features like itinerary changes and cancellations?",
-  }
+    answer:
+      "Yes, our platforms include comprehensive post-booking management with features for itinerary modifications, cancellations, refund processing, travel insurance integration, and automated customer communications. We also provide mobile-friendly booking management interfaces.",
+  },
 ];
 
 export const TravelBookingSystems = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
       <Navigation />
-      
+
       <HeroBanner
         category="Commerce & Consumer"
         title="Travel & Booking Systems"
         description="Revolutionize travel experiences and streamline reservations with intuitive, secure, and highly efficient booking platforms for flights, hotels, tours, and more."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project",
         }}
         secondaryCTA={{
           text: "View TravelTech Case Studies",
-          href: "/case-studies"
+          href: "/case-studies",
         }}
       />
 
       <ProblemSolutionBlock />
-      
+
       <IconWithDescriptionGrid />
-      
+
       <ThreeColumnFeatureBlock />
-      
+
       <div className="bg-[#0E0E0E]">
         <ProcessSection />
       </div>
-      
+
       <CaseStudyHighlightGrid />
-      
+
       <div className="bg-[#0E0E0E]">
-        <FAQSection 
+        <FAQSection
           title="Travel & Booking System FAQs"
           subtitle="Get answers to common questions about our travel booking platform development services."
           faqs={travelBookingFAQs}
         />
       </div>
-      
+
       <div className="bg-black">
         <SplitCallToAction />
       </div>
-      
+
       <Footer />
     </div>
   );
-};
+};

pages/UIUXDesign.tsx

@@ -19,20 +19,27 @@ import {
   Rocket,
   Search,
   Shield,
-  Smartphone, Tablet,
+  Smartphone,
+  Tablet,
   Target,
   TestTube,
   TrendingUp,
-  Users
+  Users,
 } from "lucide-react";
 import FeaturedCaseStudies from "../components/FeaturedCaseStudies";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 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 { navigateTo } from "@/App";
 
 // UI/UX Design Hero Section
 const UIUXHeroWithCTA = () => {
@@ -52,7 +59,9 @@ const UIUXHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Design & Experience</span>
+              <span className="text-white/70 text-sm font-medium">
+                Design & Experience
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -60,12 +69,13 @@ const UIUXHeroWithCTA = () => {
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                 Intuitive UI/UX Design Services
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Crafting visually stunning and highly intuitive user interfaces and experiences that engage users and drive business objectives.
+                Crafting visually stunning and highly intuitive user interfaces
+                and experiences that engage users and drive business objectives.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -73,7 +83,10 @@ const UIUXHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Palette className="w-5 h-5 flex-shrink-0" />
                   <span>Design Your Next Product</span>
@@ -88,7 +101,7 @@ const UIUXHeroWithCTA = () => {
               </a>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with Design Transformation visualization */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -114,17 +127,20 @@ const UIUXHeroWithCTA = () => {
                     className="space-y-4"
                   >
                     <div className="text-center mb-2">
-                      <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
+                      >
                         MOBILE
                       </Badge>
                     </div>
-                    
+
                     {/* Mobile Interface */}
                     <div className="bg-gradient-to-br from-accent/20 to-blue-500/20 rounded-xl border border-accent/30 p-3 space-y-2 shadow-lg relative">
                       <div className="w-full h-2 bg-gray-800 rounded-full flex items-center justify-center">
                         <div className="w-6 h-1 bg-gray-600 rounded-full"></div>
                       </div>
-                      
+
                       {/* App Interface */}
                       <div className="space-y-2">
                         <div className="h-8 bg-gradient-to-r from-accent to-purple-500 rounded-lg flex items-center px-2">
@@ -140,13 +156,13 @@ const UIUXHeroWithCTA = () => {
                           <div className="h-6 bg-gradient-to-r from-orange-400 to-red-400 rounded"></div>
                         </div>
                       </div>
-                      
+
                       <div className="flex items-center justify-center">
                         <Smartphone className="w-3 h-3 text-accent/60" />
                       </div>
                     </div>
                   </motion.div>
-                  
+
                   {/* Tablet Design */}
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
@@ -155,16 +171,19 @@ const UIUXHeroWithCTA = () => {
                     className="space-y-4"
                   >
                     <div className="text-center mb-2">
-                      <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
+                      >
                         TABLET
                       </Badge>
                     </div>
-                    
+
                     {/* Tablet Interface */}
                     <div className="bg-gradient-to-br from-green-500/20 to-blue-500/20 rounded-xl border border-green-500/30 p-4 space-y-3 shadow-lg">
                       {/* Header */}
                       <div className="h-4 bg-gradient-to-r from-green-400 to-blue-400 rounded-lg"></div>
-                      
+
                       {/* Content Grid */}
                       <div className="grid grid-cols-2 gap-2">
                         <div className="space-y-1">
@@ -174,20 +193,20 @@ const UIUXHeroWithCTA = () => {
                         </div>
                         <div className="h-12 bg-gradient-to-br from-purple-400/20 to-pink-400/20 rounded border border-purple-400/30"></div>
                       </div>
-                      
+
                       {/* Navigation */}
                       <div className="flex gap-1">
                         <div className="flex-1 h-2 bg-gradient-to-r from-accent to-purple-500 rounded"></div>
                         <div className="w-6 h-2 bg-gray-400/30 rounded"></div>
                         <div className="w-6 h-2 bg-gray-400/30 rounded"></div>
                       </div>
-                      
+
                       <div className="flex items-center justify-center">
                         <Tablet className="w-3 h-3 text-green-400/60" />
                       </div>
                     </div>
                   </motion.div>
-                  
+
                   {/* Desktop Design */}
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
@@ -196,11 +215,14 @@ const UIUXHeroWithCTA = () => {
                     className="space-y-4"
                   >
                     <div className="text-center mb-2">
-                      <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
+                      <Badge
+                        variant="secondary"
+                        className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
+                      >
                         DESKTOP
                       </Badge>
                     </div>
-                    
+
                     {/* Desktop Interface */}
                     <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl border border-purple-500/30 p-4 space-y-3 shadow-lg">
                       {/* Browser Bar */}
@@ -210,10 +232,10 @@ const UIUXHeroWithCTA = () => {
                         <div className="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
                         <div className="flex-1 h-1 bg-gray-400/30 rounded ml-2"></div>
                       </div>
-                      
+
                       {/* Header */}
                       <div className="h-4 bg-gradient-to-r from-purple-400 to-pink-400 rounded"></div>
-                      
+
                       {/* Content Layout */}
                       <div className="flex gap-2">
                         <div className="w-1/3 space-y-1">
@@ -223,14 +245,14 @@ const UIUXHeroWithCTA = () => {
                         </div>
                         <div className="flex-1 h-8 bg-gradient-to-br from-accent/20 to-blue-500/20 rounded border border-accent/30"></div>
                       </div>
-                      
+
                       <div className="flex items-center justify-center">
                         <Monitor className="w-3 h-3 text-purple-400/60" />
                       </div>
                     </div>
                   </motion.div>
                 </div>
-                
+
                 {/* Wireframe to Design Transformation */}
                 <motion.div
                   initial={{ opacity: 0, scale: 0.8 }}
@@ -238,8 +260,10 @@ const UIUXHeroWithCTA = () => {
                   transition={{ duration: 0.8, delay: 1.2 }}
                   className="relative bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-6 mb-8"
                 >
-                  <h3 className="text-white text-center mb-4 font-medium">Design Process Transformation</h3>
+                  <h3 className="text-white text-center mb-4 font-medium">
-                  
+                    Design Process Transformation
+                  </h3>
+
                   <div className="grid grid-cols-3 gap-4 items-center">
                     {/* Wireframe */}
                     <div className="text-center space-y-2">
@@ -254,12 +278,12 @@ const UIUXHeroWithCTA = () => {
                       </div>
                       <span className="text-xs text-gray-400">Wireframes</span>
                     </div>
-                    
+
                     {/* Arrow */}
                     <div className="flex justify-center">
                       <ArrowRight className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     {/* Final Design */}
                     <div className="text-center space-y-2">
                       <div className="bg-gradient-to-br from-accent/20 to-blue-500/20 rounded-lg p-3 space-y-2 border border-accent/30">
@@ -271,11 +295,13 @@ const UIUXHeroWithCTA = () => {
                         <div className="h-1 bg-gradient-to-r from-green-400 to-blue-400 rounded w-3/4"></div>
                         <div className="h-1 bg-gradient-to-r from-orange-400 to-red-400 rounded w-1/2"></div>
                       </div>
-                      <span className="text-xs text-gray-300">Final Design</span>
+                      <span className="text-xs text-gray-300">
+                        Final Design
+                      </span>
                     </div>
                   </div>
                 </motion.div>
-                
+
                 {/* Design Tools Icons */}
                 <div className="grid grid-cols-4 gap-4">
                   <motion.div
@@ -289,7 +315,7 @@ const UIUXHeroWithCTA = () => {
                     </div>
                     <span className="text-xs text-gray-300">Figma</span>
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
@@ -301,7 +327,7 @@ const UIUXHeroWithCTA = () => {
                     </div>
                     <span className="text-xs text-gray-300">Sketch</span>
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
@@ -313,7 +339,7 @@ const UIUXHeroWithCTA = () => {
                     </div>
                     <span className="text-xs text-gray-300">Adobe XD</span>
                   </motion.div>
-                  
+
                   <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
@@ -327,7 +353,7 @@ const UIUXHeroWithCTA = () => {
                   </motion.div>
                 </div>
               </motion.div>
-              
+
               {/* Feature Badges */}
               <motion.div
                 initial={{ opacity: 0, y: 30 }}
@@ -335,15 +361,24 @@ const UIUXHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.8 }}
                 className="flex justify-center gap-4 flex-wrap mt-8"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Eye className="w-3 h-3 mr-1" />
                   User-Focused
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Palette className="w-3 h-3 mr-1" />
                   Beautiful
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Smartphone className="w-3 h-3 mr-1" />
                   Responsive
                 </Badge>
@@ -362,33 +397,33 @@ const UIUXBenefits = () => {
     {
       icon: Users,
       title: "Increased User Engagement",
-      description: "Delightful experiences keep users coming back."
+      description: "Delightful experiences keep users coming back.",
     },
     {
       icon: TrendingUp,
       title: "Higher Conversion Rates",
-      description: "Intuitive flows guide users to desired actions."
+      description: "Intuitive flows guide users to desired actions.",
     },
     {
       icon: DollarSign,
       title: "Reduced Development Costs",
-      description: "Clear designs minimize reworks and errors."
+      description: "Clear designs minimize reworks and errors.",
     },
     {
       icon: Shield,
       title: "Stronger Brand Identity",
-      description: "Consistent, professional design builds trust."
+      description: "Consistent, professional design builds trust.",
     },
     {
       icon: Heart,
       title: "Improved User Satisfaction",
-      description: "Seamless interactions lead to positive sentiment."
+      description: "Seamless interactions lead to positive sentiment.",
     },
     {
       icon: Target,
       title: "Competitive Advantage",
-      description: "Superior design differentiates your product."
+      description: "Superior design differentiates your product.",
-    }
+    },
   ];
 
   return (
@@ -405,7 +440,7 @@ const UIUXBenefits = () => {
             Why User-Centric Design Matters
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -452,29 +487,34 @@ const UIUXDesignProcess = () => {
   const steps = [
     {
       title: "User Research & Discovery",
-      description: "Deep dive into user behaviors, needs, pain points, and goals through interviews, surveys, analytics, and competitive analysis to inform design decisions.",
+      description:
-      icon: Search
+        "Deep dive into user behaviors, needs, pain points, and goals through interviews, surveys, analytics, and competitive analysis to inform design decisions.",
+      icon: Search,
     },
     {
       title: "Information Architecture & Wireframing",
-      description: "Structuring content hierarchy, user flows, and navigation patterns with low-fidelity wireframes to establish the foundation of user experience.",
+      description:
-      icon: Grid
+        "Structuring content hierarchy, user flows, and navigation patterns with low-fidelity wireframes to establish the foundation of user experience.",
+      icon: Grid,
     },
     {
       title: "UI Design & Prototyping",
-      description: "Creating high-fidelity visual designs with interactive prototypes that bring the user interface to life for testing and stakeholder feedback.",
+      description:
-      icon: Palette
+        "Creating high-fidelity visual designs with interactive prototypes that bring the user interface to life for testing and stakeholder feedback.",
+      icon: Palette,
     },
     {
       title: "Usability Testing & Iteration",
-      description: "Validating design solutions with real users through testing sessions, gathering feedback, and iterating on designs to optimize user experience.",
+      description:
-      icon: TestTube
+        "Validating design solutions with real users through testing sessions, gathering feedback, and iterating on designs to optimize user experience.",
+      icon: TestTube,
     },
     {
       title: "Handoff & Design System Creation",
-      description: "Delivering production-ready designs with comprehensive design systems, style guides, and developer documentation for seamless implementation.",
+      description:
-      icon: FileText
+        "Delivering production-ready designs with comprehensive design systems, style guides, and developer documentation for seamless implementation.",
-    }
+      icon: FileText,
+    },
   ];
 
   return (
@@ -495,12 +535,12 @@ const UIUXDesignProcess = () => {
         <div className="relative">
           {/* Timeline line */}
           <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
-          
+
           <div className="space-y-16">
             {steps.map((step, index) => {
               const IconComponent = step.icon;
               const isEven = index % 2 === 0;
-              
+
               return (
                 <motion.div
                   key={index}
@@ -508,15 +548,23 @@ const UIUXDesignProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "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">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -526,10 +574,10 @@ const UIUXDesignProcess = () => {
                       </p>
                     </div>
                   </div>
-                  
+
                   {/* Timeline dot */}
                   <div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
-                  
+
                   <div className="flex-1 hidden lg:block"></div>
                 </motion.div>
               );
@@ -548,50 +596,86 @@ const UIUXDesignServices = () => {
       title: "User Research & Analysis",
       description: "Understanding user needs and behaviors.",
       icon: Search,
-      features: ["User Interviews", "Surveys & Analytics", "Persona Development", "Journey Mapping"]
+      features: [
+        "User Interviews",
+        "Surveys & Analytics",
+        "Persona Development",
+        "Journey Mapping",
+      ],
     },
     {
       title: "Wireframing & Information Architecture",
       description: "Structuring content and user flows.",
       icon: Grid,
-      features: ["User Flow Diagrams", "Site Maps", "Low-fi Wireframes", "Content Strategy"]
+      features: [
+        "User Flow Diagrams",
+        "Site Maps",
+        "Low-fi Wireframes",
+        "Content Strategy",
+      ],
     },
     {
       title: "Interactive Prototyping",
       description: "Bringing designs to life for testing and feedback.",
       icon: MousePointer2,
-      features: ["Clickable Prototypes", "Micro-interactions", "Animation Design", "User Testing"]
+      features: [
+        "Clickable Prototypes",
+        "Micro-interactions",
+        "Animation Design",
+        "User Testing",
+      ],
     },
     {
       title: "User Interface (UI) Design",
       description: "Crafting visual elements, typography, and color palettes.",
       icon: Palette,
-      features: ["Visual Design", "Typography", "Color Systems", "Iconography"]
+      features: ["Visual Design", "Typography", "Color Systems", "Iconography"],
     },
     {
       title: "User Experience (UX) Strategy",
       description: "Defining the overall user journey and interactions.",
       icon: Target,
-      features: ["Experience Strategy", "Interaction Design", "Usability Optimization", "Conversion Design"]
+      features: [
+        "Experience Strategy",
+        "Interaction Design",
+        "Usability Optimization",
+        "Conversion Design",
+      ],
     },
     {
       title: "Design System Development",
-      description: "Creating reusable components for consistency and efficiency.",
+      description:
+        "Creating reusable components for consistency and efficiency.",
       icon: Component,
-      features: ["Component Libraries", "Style Guides", "Design Tokens", "Documentation"]
+      features: [
+        "Component Libraries",
+        "Style Guides",
+        "Design Tokens",
+        "Documentation",
+      ],
     },
     {
       title: "Usability Testing & Optimization",
       description: "Validating designs with real users and iterating.",
       icon: TestTube,
-      features: ["User Testing", "A/B Testing", "Heuristic Evaluation", "Performance Analysis"]
+      features: [
+        "User Testing",
+        "A/B Testing",
+        "Heuristic Evaluation",
+        "Performance Analysis",
+      ],
     },
     {
       title: "Mobile-First & Responsive Design",
       description: "Ensuring optimal experiences across all devices.",
       icon: Smartphone,
-      features: ["Mobile Design", "Responsive Layouts", "Cross-platform", "Device Optimization"]
+      features: [
-    }
+        "Mobile Design",
+        "Responsive Layouts",
+        "Cross-platform",
+        "Device Optimization",
+      ],
+    },
   ];
 
   return (
@@ -608,7 +692,7 @@ const UIUXDesignServices = () => {
             Our Comprehensive UI/UX Design Capabilities
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -640,10 +724,16 @@ const UIUXDesignServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -688,10 +778,16 @@ const UIUXDesignServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -713,17 +809,26 @@ const DesignToolsMethodologies = () => {
   const designTools = [
     { name: "Figma", icon: Figma, category: "Design Tool", color: "orange" },
     { name: "Sketch", icon: PenTool, category: "Design Tool", color: "blue" },
-    { name: "Adobe XD", icon: Palette, category: "Design Tool", color: "purple" },
+    {
+      name: "Adobe XD",
+      icon: Palette,
+      category: "Design Tool",
+      color: "purple",
+    },
     { name: "Miro", icon: Grid, category: "Collaboration", color: "yellow" },
     { name: "Maze", icon: Target, category: "User Testing", color: "green" },
-    { name: "Hotjar", icon: Eye, category: "Analytics", color: "red" }
+    { name: "Hotjar", icon: Eye, category: "Analytics", color: "red" },
   ];
 
   const methodologies = [
     { name: "Design Thinking", icon: Lightbulb, category: "Methodology" },
     { name: "Atomic Design", icon: Component, category: "System Design" },
     { name: "Material Design", icon: Layers, category: "Design System" },
-    { name: "Human Interface Guidelines", icon: Apple, category: "Design System" }
+    {
+      name: "Human Interface Guidelines",
+      icon: Apple,
+      category: "Design System",
+    },
   ];
 
   return (
@@ -740,7 +845,8 @@ const DesignToolsMethodologies = () => {
             Design Tools & Methodologies
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Leveraging industry-standard tools and methodologies for impactful design.
+            Leveraging industry-standard tools and methodologies for impactful
+            design.
           </p>
         </motion.div>
 
@@ -752,7 +858,9 @@ const DesignToolsMethodologies = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Design Tools</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Design Tools
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
             {designTools.map((tool, index) => {
               const IconComponent = tool.icon;
@@ -762,9 +870,9 @@ const DesignToolsMethodologies = () => {
                 purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
                 yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
                 green: "bg-green-500/20 text-green-400 border-green-500/30",
-                red: "bg-red-500/20 text-red-400 border-red-500/30"
+                red: "bg-red-500/20 text-red-400 border-red-500/30",
               };
-              
+
               return (
                 <motion.div
                   key={index}
@@ -776,11 +884,20 @@ const DesignToolsMethodologies = () => {
                   className="group"
                 >
                   <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 p-6 text-center">
-                    <div className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4 ${colorClasses[tool.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}>
+                    <div
+                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4 ${
+                        colorClasses[tool.color as keyof typeof colorClasses] ||
+                        "bg-accent/20 text-accent border-accent/30"
+                      }`}
+                    >
                       <IconComponent className="w-6 h-6" />
                     </div>
-                    <h4 className="font-semibold text-foreground text-sm mb-1">{tool.name}</h4>
+                    <h4 className="font-semibold text-foreground text-sm mb-1">
-                    <p className="text-xs text-muted-foreground">{tool.category}</p>
+                      {tool.name}
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                      {tool.category}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -795,7 +912,9 @@ const DesignToolsMethodologies = () => {
           transition={{ duration: 0.8, delay: 0.4 }}
           viewport={{ once: true }}
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Design Methodologies</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Design Methodologies
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
             {methodologies.map((methodology, index) => {
               const IconComponent = methodology.icon;
@@ -813,8 +932,12 @@ const DesignToolsMethodologies = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground text-sm mb-1">{methodology.name}</h4>
+                    <h4 className="font-semibold text-foreground text-sm mb-1">
-                    <p className="text-xs text-muted-foreground">{methodology.category}</p>
+                      {methodology.name}
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                      {methodology.category}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -848,20 +971,26 @@ const UIUXInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Palette className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">UI/UX Design</span>
+                <span className="text-foreground text-base font-medium">
+                  UI/UX Design
+                </span>
               </div>
             </div>
-            
+
             <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
               Ready to Elevate Your{" "}
               <span className="text-accent">Product's User Experience?</span>
             </h2>
-            
+
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Let our design experts create an interface that truly connects with your audience.
+              Let our design experts create an interface that truly connects
+              with your audience.
             </p>
-            
+
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageCircle className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Design Consultation</span>
@@ -881,38 +1010,58 @@ const HireUIUXDesigners = () => {
       title: "Senior UI/UX Designers",
       description: "Experienced designers with full-stack design capabilities",
       icon: Palette,
-      skills: ["User Research", "Visual Design", "Prototyping", "Usability Testing"]
+      skills: [
+        "User Research",
+        "Visual Design",
+        "Prototyping",
+        "Usability Testing",
+      ],
     },
     {
       title: "UX Researchers",
       description: "Specialists in user behavior and research methodologies",
       icon: Search,
-      skills: ["User Interviews", "Usability Testing", "Data Analysis", "Persona Development"]
+      skills: [
+        "User Interviews",
+        "Usability Testing",
+        "Data Analysis",
+        "Persona Development",
+      ],
     },
     {
       title: "Visual/UI Designers",
       description: "Experts in creating beautiful and functional interfaces",
       icon: PenTool,
-      skills: ["Visual Design", "Typography", "Color Theory", "Design Systems"]
+      skills: ["Visual Design", "Typography", "Color Theory", "Design Systems"],
     },
     {
       title: "Interaction Designers",
       description: "Specialists in crafting engaging user interactions",
       icon: MousePointer2,
-      skills: ["Micro-interactions", "Animation", "Prototyping", "User Flows"]
+      skills: ["Micro-interactions", "Animation", "Prototyping", "User Flows"],
     },
     {
       title: "Product Designers",
       description: "Strategic designers who understand business goals",
       icon: Target,
-      skills: ["Product Strategy", "Design Thinking", "Cross-functional Collaboration", "MVP Design"]
+      skills: [
+        "Product Strategy",
+        "Design Thinking",
+        "Cross-functional Collaboration",
+        "MVP Design",
+      ],
     },
     {
       title: "Design System Specialists",
       description: "Experts in creating scalable design systems",
       icon: Component,
-      skills: ["Component Libraries", "Design Tokens", "Documentation", "Style Guides"]
+      skills: [
-    }
+        "Component Libraries",
+        "Design Tokens",
+        "Documentation",
+        "Style Guides",
+      ],
+    },
   ];
 
   return (
@@ -929,10 +1078,11 @@ const HireUIUXDesigners = () => {
             Hire World-Class UI/UX Designers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our pool of talented designers specializing in intuitive interfaces, user research, and strategic UX.
+            Access our pool of talented designers specializing in intuitive
+            interfaces, user research, and strategic UX.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -964,10 +1114,16 @@ const HireUIUXDesigners = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -997,7 +1153,7 @@ const HireUIUXDesigners = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <Eye className="w-5 h-5 flex-shrink-0" />
@@ -1016,20 +1172,24 @@ const UIUXFAQs = () => {
   const faqs = [
     {
       question: "What is the difference between UI and UX?",
-      answer: "UI (User Interface) focuses on the visual elements users interact with - buttons, menus, typography, colors, and layout. UX (User Experience) encompasses the entire user journey, including research, strategy, information architecture, usability, and how users feel when interacting with your product. UI is about how it looks, UX is about how it works and feels. Both are essential for creating successful digital products."
+      answer:
+        "UI (User Interface) focuses on the visual elements users interact with - buttons, menus, typography, colors, and layout. UX (User Experience) encompasses the entire user journey, including research, strategy, information architecture, usability, and how users feel when interacting with your product. UI is about how it looks, UX is about how it works and feels. Both are essential for creating successful digital products.",
     },
     {
       question: "How important is user research in the design process?",
-      answer: "User research is fundamental to successful design. It helps us understand your target audience's needs, behaviors, pain points, and goals before we start designing. This research-driven approach reduces the risk of creating interfaces that don't resonate with users, saves development time and costs, and ensures higher user satisfaction and conversion rates. We conduct user interviews, surveys, usability testing, and competitive analysis to inform our design decisions."
+      answer:
+        "User research is fundamental to successful design. It helps us understand your target audience's needs, behaviors, pain points, and goals before we start designing. This research-driven approach reduces the risk of creating interfaces that don't resonate with users, saves development time and costs, and ensures higher user satisfaction and conversion rates. We conduct user interviews, surveys, usability testing, and competitive analysis to inform our design decisions.",
     },
     {
       question: "Do you provide design systems for future development?",
-      answer: "Yes, we create comprehensive design systems that include component libraries, style guides, design tokens, and detailed documentation. These systems ensure consistency across your product, speed up future development, maintain brand integrity, and make it easier for your team to scale and maintain the design. We provide assets in formats that work seamlessly with development workflows, including design handoff tools and code snippets."
+      answer:
+        "Yes, we create comprehensive design systems that include component libraries, style guides, design tokens, and detailed documentation. These systems ensure consistency across your product, speed up future development, maintain brand integrity, and make it easier for your team to scale and maintain the design. We provide assets in formats that work seamlessly with development workflows, including design handoff tools and code snippets.",
     },
     {
       question: "Can you redesign an existing product's UI/UX?",
-      answer: "Absolutely. We specialize in redesigning existing products to improve user experience, modernize visual design, increase conversions, and align with current best practices. Our process includes auditing your current design, analyzing user feedback and analytics, identifying pain points and opportunities, and creating a redesign strategy that improves user satisfaction while maintaining familiar elements that users already know and trust."
+      answer:
-    }
+        "Absolutely. We specialize in redesigning existing products to improve user experience, modernize visual design, increase conversions, and align with current best practices. Our process includes auditing your current design, analyzing user feedback and analytics, identifying pain points and opportunities, and creating a redesign strategy that improves user satisfaction while maintaining familiar elements that users already know and trust.",
+    },
   ];
 
   return (
@@ -1046,7 +1206,7 @@ const UIUXFAQs = () => {
             Frequently Asked Questions
           </h2>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -1056,13 +1216,15 @@ const UIUXFAQs = () => {
         >
           <Accordion type="single" collapsible className="space-y-8">
             {faqs.map((faq, index) => (
-              <AccordionItem 
+              <AccordionItem
-                key={index} 
+                key={index}
-                value={`item-${index}`} 
+                value={`item-${index}`}
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1098,7 +1260,9 @@ const UIUXFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Palette className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">UI/UX Design</span>
+                <span className="text-foreground text-base font-medium">
+                  UI/UX Design
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1107,7 +1271,7 @@ const UIUXFinalCTA = () => {
             Design Digital Products That{" "}
             <span className="text-accent">Users Love</span>
           </h2>
-          
+
           <motion.p
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -1115,7 +1279,8 @@ const UIUXFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with WDI for compelling UI/UX design that captures attention and drives meaningful interactions.
+            Partner with WDI for compelling UI/UX design that captures attention
+            and drives meaningful interactions.
           </motion.p>
 
           <motion.div
@@ -1125,7 +1290,10 @@ const UIUXFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Design Project</span>
@@ -1154,61 +1322,61 @@ export const UIUXDesign = () => {
   return (
     <div className="dark min-h-screen">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="bg-black">
         <UIUXHeroWithCTA />
       </section>
-      
+
       {/* Benefits */}
       <section className="bg-background">
         <UIUXBenefits />
       </section>
-      
+
       {/* Design Process */}
       <section className="bg-card">
         <UIUXDesignProcess />
       </section>
-      
+
       {/* Services */}
       <section className="bg-background">
         <UIUXDesignServices />
       </section>
-      
+
       {/* Tools & Methodologies */}
       <section className="bg-card">
         <DesignToolsMethodologies />
       </section>
-      
+
       {/* Featured Case Studies - NEW SECTION */}
       <section id="case-studies" className="bg-background">
         <FeaturedCaseStudies />
       </section>
-      
+
       {/* Mid-Page CTA */}
       <section className="bg-card">
         <UIUXInlineCTA />
       </section>
-      
+
       {/* Hire Designers */}
       <section className="bg-background">
         <HireUIUXDesigners />
       </section>
-      
+
       {/* FAQs */}
       <section className="bg-card">
         <UIUXFAQs />
       </section>
-      
+
       {/* Final CTA */}
       <section className="bg-background">
         <UIUXFinalCTA />
       </section>
-      
+
       {/* Footer */}
       <section className="bg-card">
         <Footer />
       </section>
     </div>
   );
-};
+};

pages/UserResearchTesting.tsx

@@ -37,6 +37,7 @@ 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 { navigateTo } from "@/App";
 
 // User Research & Testing Hero Section
 const ResearchHeroWithCTA = () => {
@@ -77,7 +78,9 @@ const ResearchHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton className="text-lg px-8 py-4"
+              onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Users className="w-5 h-5 flex-shrink-0" />
                   <span>Understand Your Users</span>
@@ -86,7 +89,7 @@ const ResearchHeroWithCTA = () => {
               <Button
                 variant="outline"
                 size="lg"
-                className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+                className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
               >
                 <div className="inline-flex items-center gap-2">
                   <FileText className="w-5 h-5 flex-shrink-0" />
@@ -869,7 +872,9 @@ const ResearchInlineCTA = () => {
               Let's design a research plan that reveals invaluable insights for your product.
             </p>
             
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+            onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageCircle className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free User Research Consultation</span>
@@ -1005,7 +1010,7 @@ const HireResearchers = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
+              className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
             >
               <div className="inline-flex items-center gap-2">
                 <Eye className="w-5 h-5 flex-shrink-0" />
@@ -1133,7 +1138,9 @@ const ResearchFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+            onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your User Research</span>

pages/VirtualClassroomsLMS.tsx

@@ -362,7 +362,8 @@ export const VirtualClassroomsLMS = () => {
         description="Deliver engaging online learning and streamline educational management with robust, interactive, and scalable Virtual Classrooms and Learning Management Systems."
         primaryCTA={{
           text: "Get a Free Consultation",
-          href: "/contact/schedule-a-discovery-call"
+          // href: "/contact/schedule-a-discovery-call"
+          href: "/start-a-project"
         }}
         secondaryCTA={{
           text: "View LMS Case Studies",

pages/WokaProject.tsx

@@ -6,10 +6,8 @@ import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { navigateTo } from "../App";
-// import wokaImage from 'figma:asset/6e0cd179a2535c0a97f7dcdbcfedaa90806426b6.png';
+import wokaImage from "../src/images/woka-side-award.webp"
 
-const wokaImage =
-  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
 
 const projectMetrics = [
   { 

pages/iOSAppDevelopment.tsx

@@ -1012,7 +1012,7 @@ export const IOSAppDevelopment = () => {
             </p>
             <div className="flex flex-col sm:flex-row gap-6 justify-center">
               <ShimmerButton
-                className="text-lg px-8 py-4 h-[56px]"
+                className="text-lg px-8 py-4 h-auto"
                 onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
@@ -1023,7 +1023,7 @@ export const IOSAppDevelopment = () => {
               <Button
                 variant="outline"
                 size="lg"
-                className="text-lg px-8 py-4 h-[56px] border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
+                className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
               >
                 <Calendar className="w-5 h-5 mr-2" />
                 Schedule Consultation