All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!

pages/AIAutomationWorkflows.tsx

@@ -45,11 +45,13 @@ 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";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
+import { useNavigate } from "react-router-dom";
 
 // AI Automation & Workflows Hero Section
 const AutomationHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -138,7 +140,7 @@ const AutomationHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Zap className="w-5 h-5 flex-shrink-0" />
@@ -1168,6 +1170,7 @@ const AutomationCaseStudies = () => {
 
 // Mid-Page CTA
 const AutomationInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1206,7 +1209,7 @@ const AutomationInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
@@ -1473,6 +1476,7 @@ const AutomationFAQs = () => {
 
 // Final CTA Section
 const AutomationFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1525,7 +1529,7 @@ const AutomationFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Workflow className="w-6 h-6 flex-shrink-0" />
@@ -1554,7 +1558,7 @@ const AutomationFinalCTA = () => {
 export const AIAutomationWorkflows = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1578,7 +1582,7 @@ export const AIAutomationWorkflows = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <AutomationTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1607,8 +1611,8 @@ export const AIAutomationWorkflows = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIChatbotsVirtualAssistants.tsx

@@ -43,11 +43,13 @@ 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";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
+import { useNavigate } from "react-router-dom";
 
 // AI Chatbots & Virtual Assistants Hero Section
 const ChatbotsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +138,7 @@ const ChatbotsHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Bot className="w-5 h-5 flex-shrink-0" />
@@ -1108,6 +1110,7 @@ const ChatbotCaseStudies = () => {
 
 // Mid-Page CTA
 const ChatbotInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1146,7 +1149,7 @@ const ChatbotInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1413,6 +1416,7 @@ const ChatbotFAQs = () => {
 
 // Final CTA Section
 const ChatbotFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1465,7 +1469,7 @@ const ChatbotFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1494,7 +1498,7 @@ const ChatbotFinalCTA = () => {
 export const AIChatbotsVirtualAssistants = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1518,7 +1522,7 @@ export const AIChatbotsVirtualAssistants = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <ChatbotTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1548,7 +1552,7 @@ export const AIChatbotsVirtualAssistants = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIIntegrationDigitalProducts.tsx

@@ -41,11 +41,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // AI Integration Hero Section
 const AIIntegrationHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -134,7 +136,7 @@ const AIIntegrationHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Sparkles className="w-5 h-5 flex-shrink-0" />
@@ -1166,6 +1168,7 @@ const AIIntegrationCaseStudies = () => {
 
 // Mid-Page CTA
 const AIIntegrationInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1204,7 +1207,7 @@ const AIIntegrationInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Brain className="w-6 h-6 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const AIIntegrationFAQs = () => {
 
 // Final CTA Section
 const AIIntegrationFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const AIIntegrationFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const AIIntegrationFinalCTA = () => {
 export const AIIntegrationDigitalProducts = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1576,7 +1580,7 @@ export const AIIntegrationDigitalProducts = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <AIIntegrationTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1605,8 +1609,8 @@ export const AIIntegrationDigitalProducts = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIModelDeploymentMLOps.tsx

@@ -43,11 +43,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // AI Model Deployment & MLOps Hero Section
 const MLOpsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +138,7 @@ const MLOpsHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Rocket className="w-5 h-5 flex-shrink-0" />
@@ -1130,6 +1132,7 @@ const MLOpsCaseStudies = () => {
 
 // Mid-Page CTA
 const MLOpsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1168,7 +1171,7 @@ const MLOpsInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1435,6 +1438,7 @@ const MLOpsFAQs = () => {
 
 // Final CTA Section
 const MLOpsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1488,7 +1492,7 @@ const MLOpsFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1518,7 +1522,7 @@ const MLOpsFinalCTA = () => {
 export const AIModelDeploymentMLOps = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1542,7 +1546,7 @@ export const AIModelDeploymentMLOps = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <MLOpsTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1572,7 +1576,7 @@ export const AIModelDeploymentMLOps = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AIStrategyConsulting.tsx

@@ -32,11 +32,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // AI Strategy & Consulting Hero Section
 const AIStrategyHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -122,7 +123,7 @@ const AIStrategyHeroWithCTA = () => {
               className="flex flex-col sm:flex-row gap-4"
             >
               <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Brain className="w-5 h-5 flex-shrink-0" />
@@ -782,7 +783,7 @@ const AIStrategyOfferings = () => {
 };
 
 // Target Audience
-const AIStrategyTargetAudience = () => {
+export const AIStrategyTargetAudience = () => {
   const audiences = [
     { title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" },
     { title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" },
@@ -968,6 +969,7 @@ const AIStrategyCaseStudies = () => {
 
 // Mid-Page CTA
 const AIStrategyInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1002,7 +1004,7 @@ const AIStrategyInlineCTA = () => {
             </p>
             
             <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-            onClick={() => navigateTo("/start-a-project")}
+            onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1220,6 +1222,7 @@ const AIStrategyFAQs = () => {
 
 // Final CTA Section
 const AIStrategyFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1268,7 +1271,7 @@ const AIStrategyFinalCTA = () => {
             className="space-y-8"
           >
             <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-            onClick={() => navigateTo("/start-a-project")}
+            onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1297,7 +1300,7 @@ const AIStrategyFinalCTA = () => {
 export const AIStrategyConsulting = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="bg-black">
@@ -1350,8 +1353,8 @@ export const AIStrategyConsulting = () => {
       </section>
       
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/APIBackendDevelopment.tsx

@@ -45,11 +45,12 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import iotDeviceImage from "../src/images/iot-device.webp";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // API & Backend Development Hero Section
 const APIHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -139,7 +140,7 @@ const APIHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Server className="w-5 h-5 flex-shrink-0" />
@@ -1397,6 +1398,7 @@ const APICaseStudies = () => {
 
 // Mid-Page CTA
 const APIInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1435,7 +1437,7 @@ const APIInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1451,6 +1453,7 @@ const APIInlineCTA = () => {
 
 // Hire Backend Developers
 const HireBackendDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Node.js Developers",
@@ -1581,7 +1584,7 @@ const HireBackendDevelopers = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/api-backend-developers")}
+              onClick={() => navigate("/hire-talent/api-backend-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1678,6 +1681,7 @@ const APIFAQs = () => {
 
 // Final CTA Section
 const APIFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1730,7 +1734,7 @@ const APIFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1760,7 +1764,7 @@ const APIFinalCTA = () => {
 export const APIBackendDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1772,6 +1776,11 @@ export const APIBackendDevelopment = () => {
         <APIBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <APICaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <APIProcess />
@@ -1787,15 +1796,10 @@ export const APIBackendDevelopment = () => {
         <APITechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <APICaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <APIInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Developers */}
       <section className="bg-background">
@@ -1803,9 +1807,9 @@ export const APIBackendDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <APIFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1813,8 +1817,8 @@ export const APIBackendDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AboutWDI.tsx

@@ -9,7 +9,6 @@ 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 {
   ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
   Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
@@ -18,9 +17,11 @@ import {
 } from "lucide-react";
 import { Helmet } from "react-helmet-async";
 import { CarouselTestimonials } from "@/components/CarouselTestimonials";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -106,7 +107,7 @@ 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('/services')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/services')}>
                 <div className="inline-flex items-center gap-2">
                   <Briefcase className="w-4 h-4 flex-shrink-0" />
                   <span>Explore Our Services</span>
@@ -116,7 +117,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4 h-auto"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View Our Portfolio</span>
@@ -298,6 +299,7 @@ const ImpactNumbersSection = () => {
 
 // Learn More About WDI Section
 const LearnMoreSection = () => {
+  const navigate = useNavigate();
   const sections = [
     {
       title: "Our History",
@@ -373,7 +375,7 @@ const LearnMoreSection = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(section.link)}
+                onClick={() => navigate(section.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -541,6 +543,7 @@ const MissionSection = () => {
 
 // Updated CTA Section
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -584,8 +587,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("/start-a-project")}
+                // onClick={() => navigate('/contact')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Mail className="w-6 h-6 flex-shrink-0" />
@@ -597,7 +600,7 @@ const InlineCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-xl px-10 py-5 rounded-2xl h-[56px]"
-                onClick={() => navigateTo('/services')}
+                onClick={() => navigate('/services')}
               >
                 <Briefcase className="w-6 h-6 flex-shrink-0" />
                 <span>Explore Our Services</span>
@@ -637,7 +640,7 @@ const aboutWDIFAQs = [
 export const AboutWDI = () => {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* {/* <Navigation /> */}
       <HeroWithCTA />
       <WhyChooseWDISection />
       <ImpactNumbersSection />
@@ -651,7 +654,7 @@ export const AboutWDI = () => {
         subtitle="Get answers to common questions about our company and mission."
         faqs={aboutWDIFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AboutWDIMain.tsx

@@ -5,9 +5,10 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Lightbulb, Users2, Target, TrendingUp, Clock, Award, Briefcase, Heart, Newspaper, Star } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const AboutWDIMain = () => {
+  const navigate = useNavigate();
   const keyHighlights = [
     {
       icon: Lightbulb,
@@ -86,7 +87,7 @@ export const AboutWDIMain = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -204,7 +205,7 @@ export const AboutWDIMain = () => {
           
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {subPages.map((page, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(page.href)}>
+              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigate(page.href)}>
                 <CardContent className="p-6">
                   <page.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">
@@ -323,7 +324,7 @@ export const AboutWDIMain = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AdminPanelsDashboards.tsx

@@ -48,11 +48,12 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import healthcareImage from "../src/images/healthcare.webp";
-import { navigateTo } from "@/App";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Admin Panels & Dashboards Hero Section
 const AdminHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -143,7 +144,7 @@ const AdminHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Monitor className="w-5 h-5 flex-shrink-0" />
@@ -1219,6 +1220,7 @@ const AdminCaseStudies = () => {
 
 // Mid-Page CTA
 const AdminInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1257,7 +1259,7 @@ const AdminInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1273,6 +1275,7 @@ const AdminInlineCTA = () => {
 
 // Hire UI/UX Designers
 const HireDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Frontend Developers (React, Angular, Vue)",
@@ -1373,7 +1376,7 @@ const HireDevelopers = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/admin-panel-developers")}
+              onClick={() => navigate("/hire-talent/admin-panel-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Code className="w-5 h-5 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const AdminFAQs = () => {
 
 // Final CTA Section
 const AdminFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const AdminFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <TrendingUp className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const AdminFinalCTA = () => {
 export const AdminPanelsDashboards = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1564,6 +1568,11 @@ export const AdminPanelsDashboards = () => {
         <AdminBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <AdminCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <AdminProcess />
@@ -1579,15 +1588,10 @@ export const AdminPanelsDashboards = () => {
         <AdminTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <AdminCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AdminInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Designers */}
       <section className="bg-background">
@@ -1595,9 +1599,9 @@ export const AdminPanelsDashboards = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AdminFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1605,8 +1609,8 @@ export const AdminPanelsDashboards = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/AgriTechPlatforms.tsx

@@ -402,7 +402,7 @@ const agriTechFAQs = [
 export const AgriTechPlatforms = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Industrial & Emerging Tech"
@@ -443,7 +443,7 @@ export const AgriTechPlatforms = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AmbleProject.tsx

@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 export const AmbleProject = () => {
+  const navigate = useNavigate();
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -88,7 +89,7 @@ export const AmbleProject = () => {
                 <Button 
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
-                  onClick={() => navigateTo('/start-a-project')}
+                  onClick={() => navigate('/start-a-project')}
                 >
                   Build Your Navigation App
                   <ArrowRight className="w-5 h-5 ml-2" />
@@ -97,7 +98,7 @@ export const AmbleProject = () => {
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10 font-manrope"
-                  onClick={() => navigateTo('/case-studies')}
+                  onClick={() => navigate('/case-studies')}
                 >
                   View More Cases
                 </Button>
@@ -604,7 +605,7 @@ export const AmbleProject = () => {
               <Button 
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 Start Your Project
                 <ArrowRight className="w-5 h-5 ml-2" />
@@ -613,7 +614,7 @@ export const AmbleProject = () => {
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 View More Cases
               </Button>
@@ -622,7 +623,7 @@ export const AmbleProject = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AmozProject.tsx

@@ -5,13 +5,14 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 export const AmozProject = () => {
+  const navigate = useNavigate();
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -88,7 +89,7 @@ export const AmozProject = () => {
                 <Button 
                   size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
-                  onClick={() => navigateTo('/start-a-project')}
+                  onClick={() => navigate('/start-a-project')}
                 >
                   Build Your AI Commerce Platform
                   <ArrowRight className="w-5 h-5 ml-2" />
@@ -97,7 +98,7 @@ export const AmozProject = () => {
                   size="lg"
                   variant="outline"
                   className="border-white/20 text-white hover:bg-white/10 font-manrope"
-                  onClick={() => navigateTo('/case-studies')}
+                  onClick={() => navigate('/case-studies')}
                 >
                   View More Cases
                 </Button>
@@ -610,7 +611,7 @@ export const AmozProject = () => {
               <Button 
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 Start Your Project
                 <ArrowRight className="w-5 h-5 ml-2" />
@@ -619,7 +620,7 @@ export const AmozProject = () => {
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 View More Cases
               </Button>
@@ -628,7 +629,7 @@ export const AmozProject = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AndroidAppDevelopment.tsx

@@ -39,7 +39,7 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import androidVectorImage from "../src/images/android-vector.png";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import ranoutofImage from "../src/images/ranoutof.webp"
 import tradersCircuitImage from "../src/images/traders-circuit.webp";
@@ -49,6 +49,7 @@ import awsLogoImage from "../src/images/aws-logo.png";
 
 // Android Hero Section with Android device mockups and Android vector
 const AndroidHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -169,7 +170,7 @@ const AndroidHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <svg
@@ -782,6 +783,7 @@ const AndroidTechStack = () => {
 
 // Android Case Studies
 const AndroidCaseStudies = () => {
+  const navigate = useNavigate();
   const caseStudies = [
     {
       title: "Household Management Revolution",
@@ -905,7 +907,7 @@ const AndroidCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
-                      onClick={() => navigateTo(study.buttonLink)}
+                      onClick={() => navigate(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY
@@ -925,6 +927,7 @@ const AndroidCaseStudies = () => {
 
 // Mid-Page CTA
 const AndroidInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -969,7 +972,7 @@ const AndroidInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <svg
@@ -997,6 +1000,7 @@ const AndroidInlineCTA = () => {
 
 // Hire Android Developers Section
 const HireAndroidDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Senior Android Developer",
@@ -1115,7 +1119,7 @@ const HireAndroidDevelopers = () => {
         >
           <ShimmerButton
             className="px-8 py-4"
-            onClick={() => navigateTo("/hire-talent/android-app-developers")}
+            onClick={() => navigate("/hire-talent/android-app-developers")}
           >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1213,6 +1217,7 @@ const AndroidFAQs = () => {
 
 // Final CTA Section
 const AndroidFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1277,7 +1282,7 @@ const AndroidFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <svg
@@ -1318,7 +1323,7 @@ const AndroidFinalCTA = () => {
 export const AndroidAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1330,6 +1335,11 @@ export const AndroidAppDevelopment = () => {
         <AndroidKeyBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <AndroidCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <AndroidProcessTimeline />
@@ -1345,15 +1355,10 @@ export const AndroidAppDevelopment = () => {
         <AndroidTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <AndroidCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Android Developers */}
       <section className="bg-background">
@@ -1361,9 +1366,9 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1371,8 +1376,8 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/ArticleDetail.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 // Mock article data - in real implementation, this would come from props or API
 const articleData = {
@@ -116,9 +116,11 @@ export const ArticleDetail = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -126,11 +128,11 @@ export const ArticleDetail = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -297,7 +299,7 @@ export const ArticleDetail = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -323,7 +325,7 @@ export const ArticleDetail = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -341,7 +343,7 @@ export const ArticleDetail = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -368,7 +370,7 @@ export const ArticleDetail = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -377,7 +379,7 @@ export const ArticleDetail = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -387,7 +389,7 @@ export const ArticleDetail = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ArtificialIntelligenceServices.tsx

@@ -15,7 +15,6 @@ import {
   UserPlus,
   Zap,
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { FAQSection } from "../components/FAQSection";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -25,9 +24,11 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -120,8 +121,8 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
-                onClick={() => navigateTo("/start-a-project")}
+                // onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
@@ -132,7 +133,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4 h-auto"
-                onClick={() => navigateTo("/case-studies")}
+                onClick={() => navigate("/case-studies")}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View AI Case Studies</span>
@@ -405,6 +406,7 @@ const SideBySideContentWithIcons = () => {
 
 // Service Categories Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "AI Strategy & Consulting",
@@ -486,7 +488,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(service.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -515,6 +517,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -560,8 +563,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("/start-a-project")}
+                // onClick={() => navigate("/contact/schedule-a-discovery-call")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Bot className="w-6 h-6 flex-shrink-0" />
@@ -701,7 +704,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        // onClick={() => navigateTo(specialist.link)}
+                        // onClick={() => navigate(specialist.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -752,7 +755,7 @@ const aiServicesFAQs = [
 export function ArtificialIntelligenceServices() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -765,7 +768,7 @@ export function ArtificialIntelligenceServices() {
         subtitle="Get answers to common questions about our artificial intelligence services."
         faqs={aiServicesFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/AutomationReshapingBusiness.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "automation-reshaping-business",
@@ -305,9 +305,11 @@ export const AutomationReshapingBusiness = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -315,11 +317,11 @@ export const AutomationReshapingBusiness = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -486,7 +488,7 @@ export const AutomationReshapingBusiness = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -512,7 +514,7 @@ export const AutomationReshapingBusiness = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -530,7 +532,7 @@ export const AutomationReshapingBusiness = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -557,7 +559,7 @@ export const AutomationReshapingBusiness = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Automation Journey
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -566,7 +568,7 @@ export const AutomationReshapingBusiness = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -576,7 +578,7 @@ export const AutomationReshapingBusiness = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/AwardsCertifications.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react";    
 import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
@@ -110,7 +110,7 @@ export const AwardsCertifications = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -285,7 +285,7 @@ export const AwardsCertifications = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/Blog.tsx

@@ -20,8 +20,8 @@ import {
   ArrowRight,
   BookOpen,
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const Blog = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -175,20 +175,21 @@ export const Blog = () => {
 
     return matchesSearch && matchesCategory && matchesTag;
   });
+  const navigate = useNavigate();
 
   const handlePostClick = (post: any) => {
     if (typeof post.id === "string") {
       // Navigate to dedicated article page
-      navigateTo(`/articles/${post.id}`);
+      navigate(`/articles/${post.id}`);
     } else {
       // For placeholder posts, navigate to generic article detail
-      navigateTo("/articles/generic-article");
+      navigate("/articles/generic-article");
     }
   };
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -529,7 +530,7 @@ export const Blog = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/resources/blog")}
+                onClick={() => navigate("/resources/blog")}
               >
                 Explore All Articles
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -538,8 +539,8 @@ export const Blog = () => {
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10"
-                // onClick={() => navigateTo('/contact')}
-                onClick={() => navigateTo("/start-a-project")}
+                // onClick={() => navigate('/contact')}
+                onClick={() => navigate("/start-a-project")}
               >
                 Contact Our Experts
               </Button>
@@ -548,7 +549,7 @@ export const Blog = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/BuildingYourAPIStack.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "building-your-api-stack",
@@ -208,9 +208,11 @@ export const BuildingYourAPIStack = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -218,11 +220,11 @@ export const BuildingYourAPIStack = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Insights
               </button>
               <span>/</span>
@@ -389,7 +391,7 @@ export const BuildingYourAPIStack = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/insights/${article.id}`)}
+                        onClick={() => navigate(`/insights/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -415,7 +417,7 @@ export const BuildingYourAPIStack = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Insights
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -433,7 +435,7 @@ export const BuildingYourAPIStack = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -460,7 +462,7 @@ export const BuildingYourAPIStack = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -469,7 +471,7 @@ export const BuildingYourAPIStack = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Insights
                 </Button>
@@ -479,7 +481,7 @@ export const BuildingYourAPIStack = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/BusinessProcessAutomation.tsx

@@ -41,11 +41,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Business Process Automation Hero Section
 const BusinessProcessAutomationHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +137,7 @@ const BusinessProcessAutomationHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1288,6 +1289,7 @@ const BusinessProcessAutomationCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const BusinessProcessAutomationInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1326,7 +1328,7 @@ const BusinessProcessAutomationInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
@@ -1413,6 +1415,7 @@ const BusinessProcessAutomationFAQs = () => {
 
 // Final CTA Section
 const BusinessProcessAutomationFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1466,7 +1469,7 @@ const BusinessProcessAutomationFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1496,7 +1499,7 @@ const BusinessProcessAutomationFinalCTA = () => {
 export const BusinessProcessAutomation = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1550,7 +1553,7 @@ export const BusinessProcessAutomation = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/Careers.tsx

@@ -166,7 +166,7 @@ Best regards,
                             `}
         </script>
       </Helmet>
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-20 overflow-hidden bg-black">
@@ -373,7 +373,7 @@ Best regards,
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/CaseStudies.tsx

@@ -22,7 +22,6 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -46,6 +45,7 @@ import simplitendCase from "../src/images/simplitendCase.webp";
 import amozCase from "../src/images/amozCase.webp";
 import farmCase from "../src/images/farmCase.webp";
 import leanCase from "../src/images/leanCase.webp";
+import { useNavigate } from "react-router-dom";
 
 
 const caseStudies = [
@@ -231,9 +231,11 @@ export const CaseStudies = () => {
     return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
   });
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-20 overflow-hidden bg-black">
@@ -393,12 +395,12 @@ export const CaseStudies = () => {
                     viewport={{ once: true }}
                     whileHover={{ y: -8, scale: 1.02 }}
                     className="group cursor-pointer"
-                    onClick={() => navigateTo(study.link)}
+                    onClick={() => navigate(study.link)}
                   >
                     <Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full"
                       onClick={(e) => {
                         e.stopPropagation();
-                        navigateTo(study.link);
+                        navigate(study.link);
                       }}
                     >
                       <CardContent className="CardContentOverride p-0 pb-0  h-full">
@@ -465,7 +467,7 @@ export const CaseStudies = () => {
               <Button
                 size="lg"
                 className="bg-accent hover:bg-accent/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Project
                 <ArrowUpRight className="w-4 h-4 ml-2" />
@@ -473,7 +475,7 @@ export const CaseStudies = () => {
               <Button
                 size="lg"
                 variant="outline"
-                onClick={() => navigateTo("/contact-us")}
+                onClick={() => navigate("/contact-us")}
               >
                 Schedule Consultation
                 <ArrowRight className="w-4 h-4 ml-2" />
@@ -483,7 +485,7 @@ export const CaseStudies = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/CaseStudyComingSoon.tsx

@@ -26,12 +26,12 @@ import {
   Database,
   Zap
 } from 'lucide-react';
-import { navigateTo } from '../App';
 import { Navigation } from '@/components/Navigation';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Footer } from '@/components/Footer';
+import { useNavigate } from 'react-router-dom';
 
 interface CaseStudyComingSoonProps {
   projectTitle?: string;
@@ -78,11 +78,13 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
     return icons[industry as keyof typeof icons] || Building2;
   };
 
+  const navigate = useNavigate();
+
   const IconComponent = getIndustryIcon(industry);
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
@@ -300,7 +302,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
                 Join our mailing list to be the first to know when this case study goes live.
               </p>
               <Button 
-                onClick={() => navigateTo('/contact-us')}
+                onClick={() => navigate('/contact-us')}
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
               >
                 Notify Me
@@ -325,7 +327,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
               <Button 
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 View All Case Studies
                 <ArrowRight className="w-5 h-5 ml-2" />
@@ -334,7 +336,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10 font-manrope"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 Start Your Project
               </Button>
@@ -343,7 +345,7 @@ export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ClickablePrototypes.tsx

@@ -42,11 +42,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Clickable Prototypes Hero Section
 const PrototypesHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +137,7 @@ const PrototypesHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <PlayCircle className="w-5 h-5 flex-shrink-0" />
@@ -1031,6 +1032,7 @@ const PrototypingCaseStudies = () => {
 
 // Mid-Page CTA
 const PrototypingInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1069,7 +1071,7 @@ const PrototypingInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageCircle className="w-6 h-6 flex-shrink-0" />
@@ -1085,6 +1087,7 @@ const PrototypingInlineCTA = () => {
 
 // Hire UI/UX Designers for Prototypes
 const HirePrototypeDesigners = () => {
+  const navigate = useNavigate();
   const designerTypes = [
     {
       title: "Prototype Specialists",
@@ -1235,7 +1238,7 @@ const HirePrototypeDesigners = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/clickable-prototypes-developers")}
+              onClick={() => navigate("/hire-talent/clickable-prototypes-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1333,6 +1336,7 @@ const PrototypingFAQs = () => {
 
 // Final CTA Section
 const PrototypingFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1385,7 +1389,7 @@ const PrototypingFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1414,7 +1418,7 @@ const PrototypingFinalCTA = () => {
 export const ClickablePrototypes = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1426,6 +1430,11 @@ export const ClickablePrototypes = () => {
         <PrototypeBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <PrototypingCaseStudies />
+      </section>
+
       {/* Prototyping Process */}
       <section className="bg-card">
         <PrototypingProcess />
@@ -1441,15 +1450,10 @@ export const ClickablePrototypes = () => {
         <PrototypingTools />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <PrototypingCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <PrototypingInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Designers */}
       <section className="bg-background">
@@ -1457,9 +1461,9 @@ export const ClickablePrototypes = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <PrototypingFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1467,8 +1471,8 @@ export const ClickablePrototypes = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/ClientSupport.tsx

@@ -240,7 +240,7 @@ export const ClientSupport = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -776,7 +776,7 @@ export const ClientSupport = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ClientTestimonials.tsx

@@ -23,8 +23,8 @@ import {
   Users,
   Award,
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const ClientTestimonials = () => {
   const [selectedIndustry, setSelectedIndustry] = useState("all");
@@ -387,9 +387,11 @@ export const ClientTestimonials = () => {
     return icons[industry as keyof typeof icons] || Building2;
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -735,7 +737,7 @@ export const ClientTestimonials = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Become Our Next Success Story
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -752,7 +754,7 @@ export const ClientTestimonials = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/Company.tsx

@@ -10,7 +10,6 @@ import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
 import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import { 
   Users, Heart, Shield, Target, Lightbulb, Award, TrendingUp, Clock, 
   Newspaper, ArrowRight, Building, Globe, CheckCircle, Coffee, 
@@ -18,9 +17,11 @@ import {
   ChevronRight
 } from "lucide-react";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -107,7 +108,7 @@ 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('/company/our-history')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/company/our-history')}>
                 <div className="inline-flex items-center gap-2">
                   <Clock className="w-4 h-4 flex-shrink-0" />
                   <span>Our Story</span>
@@ -117,7 +118,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/company/leadership-team')}
+                onClick={() => navigate('/company/leadership-team')}
               >
                 <Users className="w-4 h-4 flex-shrink-0" />
                 <span>Meet Our Leaders</span>
@@ -481,6 +482,7 @@ const SideBySideContentWithIcons = () => {
 
 // Company Sections Grid - Updated to remove About WDI card
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const sections = [
     {
       title: "Our History", 
@@ -556,7 +558,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(section.link)}
+                onClick={() => navigate(section.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -590,6 +592,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-background">
       <div className="container mx-auto px-6 lg:px-8">
@@ -633,7 +636,7 @@ 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('/company/careers')}
+                onClick={() => navigate('/company/careers')}
               >
                 <div className="inline-flex items-center gap-3">
                   <Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -655,6 +658,7 @@ const InlineCTA = () => {
 
 // Press and Recognition Section
 const PressRecognitionSection = () => {
+  const navigate = useNavigate();
   const press = [
     {
       title: "Innovation Leader 2024",
@@ -759,7 +763,7 @@ const PressRecognitionSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton 
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(item.link)}
+                        onClick={() => navigate(item.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <Eye className="w-4 h-4 flex-shrink-0" />
@@ -846,7 +850,7 @@ const FAQSection = () => {
 export function Company() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <AboutWDISection />
       <HorizontalTagScroller />
@@ -855,7 +859,7 @@ export function Company() {
       <InlineCTA />
       <PressRecognitionSection />
       <FAQSection />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/ComplianceReadyFintech.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "compliance-ready-systems-fintech",
@@ -211,7 +211,7 @@ const articleData = {
       id: "automation-reshaping-business",
       title: "5 Ways Automation is Reshaping Business Operations",
       excerpt: "Discover how intelligent automation is transforming modern business processes and operations.",
-      readTime: "10 min read", 
+      readTime: "10 min read",
       image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop&auto=format",
       category: "Automation"
     }
@@ -222,7 +222,7 @@ export const ComplianceReadyFintech = () => {
   const handleShare = (platform: string) => {
     const url = encodeURIComponent(window.location.href);
     const title = encodeURIComponent(articleData.title);
-    
+
     let shareUrl = '';
     switch (platform) {
       case 'linkedin':
@@ -235,27 +235,27 @@ export const ComplianceReadyFintech = () => {
         shareUrl = `https://wa.me/?text=${title} ${url}`;
         break;
     }
-    
+
     if (shareUrl) {
       window.open(shareUrl, '_blank', 'width=600,height=400');
     }
   };
-
+  const navigate = useNavigate();
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
-      
+      {/* <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">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -311,13 +311,13 @@ export const ComplianceReadyFintech = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
-            
+
             {/* Article Content - 70% */}
             <article className="lg:col-span-7">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8 lg:p-12">
                   {/* Article Body */}
-                  <div 
+                  <div
                     className="prose prose-invert prose-lg max-w-none
                       prose-headings:text-white prose-headings:font-semibold
                       prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -412,17 +412,17 @@ export const ComplianceReadyFintech = () => {
 
             {/* Sidebar - 30% */}
             <aside className="lg:col-span-3 space-y-8">
-              
+
               {/* Related Articles */}
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
                   <div className="space-y-6">
                     {articleData.relatedArticles.map((article) => (
-                      <div 
-                        key={article.id} 
+                      <div
+                        key={article.id}
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -442,13 +442,13 @@ export const ComplianceReadyFintech = () => {
                       </div>
                     ))}
                   </div>
-                  
+
                   <Separator className="my-6" />
-                  
-                  <Button 
-                    variant="outline" 
+
+                  <Button
+                    variant="outline"
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -461,12 +461,12 @@ export const ComplianceReadyFintech = () => {
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
                   <p className="text-muted-foreground text-sm leading-relaxed mb-4">
-                    Web Development Institute helps startups and enterprises build scalable, secure digital products. 
+                    Web Development Institute helps startups and enterprises build scalable, secure digital products.
                     With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
                   </p>
-                  <Button 
+                  <Button
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -486,23 +486,23 @@ export const ComplianceReadyFintech = () => {
                 Enjoyed this article? Let's talk.
               </h2>
               <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Ready to build a compliance-ready fintech platform? Our team of experts is here to help you navigate 
+                Ready to build a compliance-ready fintech platform? Our team of experts is here to help you navigate
                 regulatory requirements while delivering innovative financial technology solutions.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button 
-                  size="lg" 
+                <Button
+                  size="lg"
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Fintech Project
                   <ArrowRight className="ml-2 w-4 h-4" />
                 </Button>
-                <Button 
-                  size="lg" 
-                  variant="outline" 
+                <Button
+                  size="lg"
+                  variant="outline"
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -512,7 +512,7 @@ export const ComplianceReadyFintech = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ComplianceReadySystems.tsx

@@ -39,11 +39,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Compliance-Ready Systems Hero Section
 const ComplianceReadySystemsHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -135,7 +136,7 @@ const ComplianceReadySystemsHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1275,6 +1276,7 @@ const ComplianceReadySystemsCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const ComplianceReadySystemsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1312,7 +1314,7 @@ const ComplianceReadySystemsInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
@@ -1405,6 +1407,7 @@ const ComplianceReadySystemsFAQs = () => {
 
 // Final CTA Section
 const ComplianceReadySystemsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1458,7 +1461,7 @@ const ComplianceReadySystemsFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1488,7 +1491,7 @@ const ComplianceReadySystemsFinalCTA = () => {
 export const ComplianceReadySystems = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1542,7 +1545,7 @@ export const ComplianceReadySystems = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/ComputerVisionApplications.tsx

@@ -48,11 +48,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // Computer Vision Applications Hero Section
 const ComputerVisionHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -141,7 +143,7 @@ const ComputerVisionHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Eye className="w-5 h-5 flex-shrink-0" />
@@ -674,14 +676,12 @@ const ComputerVisionProcess = () => {
                   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`}
+                    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">
@@ -981,10 +981,9 @@ const ComputerVisionTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
-                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                    }`}
+                      }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1145,6 +1144,7 @@ const ComputerVisionCaseStudies = () => {
 
 // Mid-Page CTA
 const ComputerVisionInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1182,7 +1182,7 @@ const ComputerVisionInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1448,6 +1448,7 @@ const ComputerVisionFAQs = () => {
 
 // Final CTA Section
 const ComputerVisionFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1500,7 +1501,7 @@ const ComputerVisionFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Scan className="w-6 h-6 flex-shrink-0" />
@@ -1530,7 +1531,7 @@ const ComputerVisionFinalCTA = () => {
 export const ComputerVisionApplications = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1542,6 +1543,11 @@ export const ComputerVisionApplications = () => {
         <ComputerVisionBenefits />
       </section>
 
+      {/* Tech Stack */}
+      <section className="bg-card">
+        <ComputerVisionTechStack />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <ComputerVisionProcess />
@@ -1552,9 +1558,9 @@ export const ComputerVisionApplications = () => {
         <CVApplicationsList />
       </section>
 
-      {/* Tech Stack */}
+      {/* Target Audience */}
       <section className="bg-card">
-        <ComputerVisionTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1584,7 +1590,7 @@ export const ComputerVisionApplications = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/Contact.tsx

@@ -9,7 +9,7 @@ import { Textarea } from "../components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
 import { Checkbox } from "../components/ui/checkbox";
 import { Mail, Phone, MapPin, Clock, Send, ArrowRight, MessageSquare, FileCheck, Calendar, Headphones, UserPlus } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const Contact = () => {
   const [formData, setFormData] = useState({
@@ -53,6 +53,8 @@ export const Contact = () => {
     { icon: UserPlus, title: "Send your CV to HR", description: "Submit your resume for career opportunities", href: "/contact/send-your-cv" }
   ];
 
+  const navigate = useNavigate();
+  
   const handleInputChange = (field: string, value: string | boolean) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
@@ -112,12 +114,12 @@ export const Contact = () => {
     setIsSubmitting(false);
     
     // Redirect to Thank You page
-    navigateTo('/thank-you');
+    navigate('/thank-you');
   };
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
@@ -255,7 +257,7 @@ export const Contact = () => {
                   {contactPages.map((page, index) => {
                     const Icon = page.icon;
                     return (
-                      <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer" onClick={() => navigateTo(page.href)}>
+                      <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer" onClick={() => navigate(page.href)}>
                         <CardContent className="p-4">
                           <div className="flex items-center gap-3">
                             <Icon className="w-5 h-5 text-[#E5195E]" />
@@ -283,10 +285,10 @@ export const Contact = () => {
               <strong>Privacy Statement:</strong> Your information is secure with us. We respect your privacy and will only use your data to respond to your inquiry.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigateTo('/services')}>
+              <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigate('/services')}>
                 Explore our services
               </Button>
-              <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigateTo('/resources/client-testimonials')}>
+              <Button variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigate('/resources/client-testimonials')}>
                 Read our testimonials
               </Button>
             </div>
@@ -294,7 +296,7 @@ export const Contact = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/ContactMain.tsx

@@ -1,29 +1,35 @@
-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 { Input } from "../components/ui/input";
-import { Textarea } from "../components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
-import { Checkbox } from "../components/ui/checkbox";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
-import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
-import { 
-  Mail, FileCheck, Phone, UserPlus, Headphones, MapPin, MessageSquare, 
-  Calendar, ArrowRight, Globe, Clock, Users, Target, Send, 
-  Coffee, Monitor, Shield, Award, Rocket
+import {
+  Calendar,
+  Clock,
+  FileCheck,
+  Globe,
+  Headphones,
+  Mail,
+  MapPin, MessageSquare,
+  Phone,
+  Rocket,
+  Send,
+  Shield,
+  Target,
+  UserPlus,
+  Users
 } from "lucide-react";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { Checkbox } from "../components/ui/checkbox";
+import { Input } from "../components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Textarea } from "../components/ui/textarea";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -64,7 +70,7 @@ 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-form')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('#contact-form')}>
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-4 h-4 flex-shrink-0" />
                   <span>Send a Message</span>
@@ -74,7 +80,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate('/contact/schedule-a-discovery-call')}
               >
                 <Phone className="w-4 h-4 flex-shrink-0" />
                 <span>Schedule a Call</span>
@@ -429,6 +435,7 @@ const ContactFormSection = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -471,7 +478,7 @@ 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={() => navigate('/contact/schedule-a-discovery-call')}
               >
                 <div className="inline-flex items-center gap-3">
                   <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -493,6 +500,7 @@ const InlineCTA = () => {
 
 // Office Locations Section
 const OfficeLocationsSection = () => {
+  const navigate = useNavigate();
   const offices = [
     {
       title: "New York, USA",
@@ -599,7 +607,7 @@ const OfficeLocationsSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton 
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(office.link)}
+                        onClick={() => navigate(office.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <MapPin className="w-4 h-4 flex-shrink-0" />
@@ -645,7 +653,7 @@ const contactFAQs = [
 export function ContactMain() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -657,7 +665,7 @@ export function ContactMain() {
         subtitle="Get answers to common questions about reaching out to WDI."
         faqs={contactFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/CrossPlatformAppDevelopment.tsx

@@ -41,14 +41,16 @@ import {
   TabsList,
   TabsTrigger,
 } from "../components/ui/tabs";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import ranoutofImage from "../src/images/ranoutof.webp"
 import seezunImage from "../src/images/seezun.webp";
 import regroupImage from "../src/images/regroup.webp";
+import awsLogoImage from "../src/images/aws-logo.png";
 
 // Cross-Platform Hero Section
 const CrossPlatformHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -138,7 +140,7 @@ const CrossPlatformHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Share2 className="w-5 h-5 flex-shrink-0" />
@@ -825,6 +827,7 @@ const CrossPlatformServices = () => {
 
 // Cross-Platform Case Studies
 const CrossPlatformCaseStudies = () => {
+  const navigate = useNavigate();
   const caseStudies = [
     {
       title: "Household Management Revolution",
@@ -948,7 +951,7 @@ const CrossPlatformCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
-                      onClick={() => navigateTo(study.buttonLink)}
+                      onClick={() => navigate(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY
@@ -968,6 +971,7 @@ const CrossPlatformCaseStudies = () => {
 
 // Mid-Page CTA
 const CrossPlatformInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1006,7 +1010,7 @@ const CrossPlatformInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Target className="w-6 h-6 flex-shrink-0" />
@@ -1019,9 +1023,98 @@ const CrossPlatformInlineCTA = () => {
     </section>
   );
 };
+// CrossPlatformTechStack
+
+const CrossPlatformTechStack = () => {
+  const technologies = [
+    {
+      name: "React Native",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
+    },
+    {
+      name: "Flutter",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg",
+    },
+    {
+      name: "Xamarin",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xamarin/xamarin-original.svg",
+    },
+    {
+      name: "Ionic",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ionic/ionic-original.svg",
+    },
+    {
+      name: "Firebase",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
+    },
+    {
+      name: "AWS",
+      logo: awsLogoImage,
+    },
+    {
+      name: "GraphQL / Apollo",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg",
+    },
+    {
+      name: "TypeScript",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+            Cross-Platform App Development Technologies
+          </h2>
+          <p className="text-xl text-gray-300 leading-relaxed">
+            We build seamless apps for iOS, Android, and the web using
+            cutting-edge cross-platform frameworks and tools.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+          {technologies.map((tech, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
+              viewport={{ once: true }}
+              whileHover={{ scale: 1.1, y: -5 }}
+              className="flex flex-col items-center group"
+            >
+              <div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
+                <ImageWithFallback
+                  src={tech.logo}
+                  alt={tech.name}
+                  className="w-12 h-12 object-contain"
+                />
+              </div>
+              <span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
+                {tech.name}
+              </span>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CrossPlatformTechStack;
+
 
 // Hire Cross-Platform Developers
 const HireCrossPlatformDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Senior Flutter Developer",
@@ -1128,7 +1221,7 @@ const HireCrossPlatformDevelopers = () => {
           className="flex flex-col sm:flex-row gap-4 justify-center"
         >
           <ShimmerButton className="px-8 py-4"
-            onClick={() => navigateTo("/hire-talent/cross-platform-developers")}
+            onClick={() => navigate("/hire-talent/cross-platform-developers")}
           >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1224,6 +1317,7 @@ const CrossPlatformFAQs = () => {
 
 // Final CTA Section
 const CrossPlatformFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1282,7 +1376,7 @@ const CrossPlatformFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1311,7 +1405,7 @@ const CrossPlatformFinalCTA = () => {
 export const CrossPlatformAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1323,29 +1417,34 @@ export const CrossPlatformAppDevelopment = () => {
         <CrossPlatformBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-black">
+        <CrossPlatformCaseStudies />
+      </section>
+
       {/* Technologies */}
-      <section className="bg-card">
+      <section className="bg-background">
         <CrossPlatformTechnologies />
       </section>
 
       {/* Development Process */}
-      <section className="bg-background">
+      <section className="bg-black">
         <CrossPlatformProcess />
       </section>
 
       {/* Services */}
-      <section className="bg-card">
+      <section className="bg-background">
         <CrossPlatformServices />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <CrossPlatformCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <CrossPlatformInlineCTA />
+      </section> */}
+
+      {/* cross platform tech */}
+      <section className="bg-black">
+        <CrossPlatformTechStack />
       </section>
 
       {/* Hire Developers */}
@@ -1354,18 +1453,18 @@ export const CrossPlatformAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <CrossPlatformFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
-      <section className="bg-background">
+      <section className="bg-black">
         <CrossPlatformFinalCTA />
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/CultureValues.tsx

@@ -70,7 +70,7 @@ export const CultureValues = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -310,7 +310,7 @@ export const CultureValues = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/CustomMLModelDevelopment.tsx

@@ -42,11 +42,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // Custom ML Model Development Hero Section
 const CustomMLHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -135,7 +137,7 @@ const CustomMLHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Brain className="w-5 h-5 flex-shrink-0" />
@@ -1126,6 +1128,7 @@ const CustomMLCaseStudies = () => {
 
 // Mid-Page CTA
 const CustomMLInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1164,7 +1167,7 @@ const CustomMLInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1431,6 +1434,7 @@ const CustomMLFAQs = () => {
 
 // Final CTA Section
 const CustomMLFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1483,7 +1487,7 @@ const CustomMLFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Brain className="w-6 h-6 flex-shrink-0" />
@@ -1513,7 +1517,7 @@ const CustomMLFinalCTA = () => {
 export const CustomMLModelDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1525,6 +1529,11 @@ export const CustomMLModelDevelopment = () => {
         <CustomMLBenefits />
       </section>
 
+      {/* Tech Stack */}
+      <section className="bg-card">
+        <CustomMLTechStack />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <CustomMLDevelopmentProcess />
@@ -1535,9 +1544,9 @@ export const CustomMLModelDevelopment = () => {
         <CustomMLServices />
       </section>
 
-      {/* Tech Stack */}
+      {/* Target Audience */}
       <section className="bg-card">
-        <CustomMLTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1567,7 +1576,7 @@ export const CustomMLModelDevelopment = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/CustomWebAppDevelopment.tsx

@@ -46,11 +46,12 @@ import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import patientManagementPortal from "../src/images/patient-management-portal.webp";
 import awsLogo from "../src/images/aws-logo.png";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Custom Web App Development Hero Section
 const CustomWebAppHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -140,7 +141,7 @@ const CustomWebAppHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1023,6 +1024,7 @@ const WebAppCaseStudies = () => {
 
 // Mid-Page CTA
 const WebAppInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1061,7 +1063,7 @@ const WebAppInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1077,6 +1079,7 @@ const WebAppInlineCTA = () => {
 
 // Hire Web App Developers
 const HireWebDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Frontend Specialists",
@@ -1208,7 +1211,7 @@ const HireWebDevelopers = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/custom-web-app-developers")}
+              onClick={() => navigate("/hire-talent/custom-web-app-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1234,6 +1237,7 @@ const HireWebDevelopers = () => {
 
 // Custom Web App FAQs
 const CustomWebAppFAQs = () => {
+  const navigate = useNavigate();
   const faqs = [
     {
       question: "How long does it take to develop a custom web app?",
@@ -1305,6 +1309,7 @@ const CustomWebAppFAQs = () => {
 
 // Final CTA Section
 const CustomWebAppFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1357,7 +1362,7 @@ const CustomWebAppFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1386,7 +1391,7 @@ const CustomWebAppFinalCTA = () => {
 export const CustomWebAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1398,6 +1403,11 @@ export const CustomWebAppDevelopment = () => {
         <CustomWebAppBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <WebAppCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <CustomWebAppProcess />
@@ -1413,15 +1423,10 @@ export const CustomWebAppDevelopment = () => {
         <WebAppTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <WebAppCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <WebAppInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Developers */}
       <section className="bg-background">
@@ -1429,9 +1434,9 @@ export const CustomWebAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <CustomWebAppFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1440,7 +1445,7 @@ export const CustomWebAppDevelopment = () => {
 
       {/* Footer */}
       <section >
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/DedicatedDevelopmentTeams.tsx

@@ -18,7 +18,7 @@ import {
   Star,
   UsersRound,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { TeamCollaborationVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
@@ -138,9 +138,11 @@ export const DedicatedDevelopmentTeams = () => {
     },
   ];
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -370,7 +372,7 @@ export const DedicatedDevelopmentTeams = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Building Your Team
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -387,7 +389,7 @@ export const DedicatedDevelopmentTeams = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/DedicatedOffshoreODC.tsx

@@ -42,11 +42,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Dedicated Offshore Development Centers Hero Section
 const DedicatedOffshoreODCHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +137,7 @@ const DedicatedOffshoreODCHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1257,6 +1258,7 @@ const DedicatedOffshoreODCCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const DedicatedOffshoreODCInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1295,7 +1297,7 @@ const DedicatedOffshoreODCInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Wand2 className="w-6 h-6 flex-shrink-0" />
@@ -1387,6 +1389,7 @@ const DedicatedOffshoreODCFAQs = () => {
 
 // Final CTA Section
 const DedicatedOffshoreODCFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1440,7 +1443,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1470,7 +1473,7 @@ const DedicatedOffshoreODCFinalCTA = () => {
 export const DedicatedOffshoreODC = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1524,7 +1527,7 @@ export const DedicatedOffshoreODC = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/DesignExperience.tsx

@@ -13,7 +13,6 @@ import {
   UserPlus,
   Users
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { FAQSection } from "../components/FAQSection";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -23,9 +22,11 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -119,7 +120,7 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -129,7 +130,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View Design Portfolio</span>
@@ -360,6 +361,7 @@ const SideBySideContentWithIcons = () => {
 
 // Service Categories Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "UI/UX Design",
@@ -435,7 +437,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(service.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -464,6 +466,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -506,8 +509,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("/start-a-project")}
+                // onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <PenTool className="w-6 h-6 flex-shrink-0" />
@@ -529,6 +532,7 @@ const InlineCTA = () => {
 
 // Design Specialists Section
 const HireDevelopersSection = () => {
+  const navigate = useNavigate();
   const specialists = [
     {
       title: "UI/UX Designers",
@@ -637,7 +641,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(specialist.link)}
+                        onClick={() => navigate(specialist.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -683,7 +687,7 @@ const designExperienceFAQs = [
 export function DesignExperience() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -696,7 +700,7 @@ export function DesignExperience() {
         subtitle="Get answers to common questions about our design and user experience services."
         faqs={designExperienceFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/DesignThinkingWorkshops.tsx

@@ -42,11 +42,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Design Thinking Workshops Hero Section
 const WorkshopsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -137,7 +138,7 @@ const WorkshopsHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -914,6 +915,7 @@ const TargetAudience = () => {
 
 // Workshop Case Studies
 const WorkshopCaseStudies = () => {
+  const navigate = useNavigate();
   const caseStudies = [
     {
       title: "FinTech Product Strategy Workshop",
@@ -1050,6 +1052,7 @@ const WorkshopCaseStudies = () => {
 
 // Mid-Page CTA
 const WorkshopInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1088,7 +1091,7 @@ const WorkshopInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Send className="w-6 h-6 flex-shrink-0" />
@@ -1104,6 +1107,7 @@ const WorkshopInlineCTA = () => {
 
 // Hire Design Thinking Facilitators
 const HireFacilitators = () => {
+  const navigate = useNavigate();
   const facilitatorTypes = [
     {
       title: "Senior UX Strategists",
@@ -1254,7 +1258,7 @@ const HireFacilitators = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/design-thinking-workshops-developers")}
+              onClick={() => navigate("/hire-talent/design-thinking-workshops-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1351,6 +1355,7 @@ const WorkshopFAQs = () => {
 
 // Final CTA Section
 const WorkshopFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1403,7 +1408,7 @@ const WorkshopFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Users className="w-6 h-6 flex-shrink-0" />
@@ -1433,7 +1438,7 @@ const WorkshopFinalCTA = () => {
 export const DesignThinkingWorkshops = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1441,12 +1446,17 @@ export const DesignThinkingWorkshops = () => {
       </section>
 
       {/* Benefits */}
-      <section className="bg-background">
+      <section className="bg-card">
         <WorkshopBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <WorkshopCaseStudies />
+      </section>
+
       {/* Design Thinking Approach */}
-      <section className="bg-card">
+      <section className="bg-background">
         <DesignThinkingApproach />
       </section>
 
@@ -1460,15 +1470,10 @@ export const DesignThinkingWorkshops = () => {
         <TargetAudience />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <WorkshopCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <WorkshopInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Facilitators */}
       <section className="bg-background">
@@ -1476,9 +1481,9 @@ export const DesignThinkingWorkshops = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <WorkshopFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1486,8 +1491,8 @@ export const DesignThinkingWorkshops = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/DigitalProductDevelopment.tsx

@@ -35,11 +35,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Digital Product Development Hero Section
 const DigitalProductDevelopmentHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -129,7 +130,7 @@ const DigitalProductDevelopmentHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1134,6 +1135,7 @@ const DigitalProductCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const DigitalProductInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1171,7 +1173,7 @@ const DigitalProductInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1261,6 +1263,7 @@ const DigitalProductFAQs = () => {
 
 // Final CTA Section
 const DigitalProductFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1313,7 +1316,7 @@ const DigitalProductFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1342,7 +1345,7 @@ const DigitalProductFinalCTA = () => {
 export const DigitalProductDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1396,7 +1399,7 @@ export const DigitalProductDevelopment = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/EcommerceMarketplaces.tsx

@@ -467,7 +467,7 @@ const ecommerceFAQs = [
 export const EcommerceMarketplaces = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Commerce & Consumer"
@@ -508,7 +508,7 @@ export const EcommerceMarketplaces = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/EcommercePlatforms.tsx

@@ -47,11 +47,12 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import multiVendorImage from "../src/images/multifood.webp";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // eCommerce Platforms Hero Section
 const EcommerceHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -141,7 +142,7 @@ const EcommerceHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Store className="w-5 h-5 flex-shrink-0" />
@@ -1192,6 +1193,7 @@ const EcommerceCaseStudies = () => {
 
 // Mid-Page CTA
 const EcommerceInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1230,7 +1232,7 @@ const EcommerceInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1246,6 +1248,7 @@ const EcommerceInlineCTA = () => {
 
 // Hire eCommerce Developers
 const HireEcommerceDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Shopify Experts",
@@ -1374,7 +1377,7 @@ const HireEcommerceDevelopers = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-            onClick={() => navigateTo("/hire-talent/ecommerce-platform-developers")}
+            onClick={() => navigate("/hire-talent/ecommerce-platform-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1471,6 +1474,7 @@ const EcommerceFAQs = () => {
 
 // Final CTA Section
 const EcommerceFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1523,7 +1527,7 @@ const EcommerceFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1552,7 +1556,7 @@ const EcommerceFinalCTA = () => {
 export const EcommercePlatforms = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1564,6 +1568,11 @@ export const EcommercePlatforms = () => {
         <EcommerceBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <EcommerceCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <EcommerceProcess />
@@ -1579,15 +1588,10 @@ export const EcommercePlatforms = () => {
         <EcommerceTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <EcommerceCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <EcommerceInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Developers */}
       <section className="bg-background">
@@ -1595,9 +1599,9 @@ export const EcommercePlatforms = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <EcommerceFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1605,8 +1609,8 @@ export const EcommercePlatforms = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/EdTechPlatforms.tsx

@@ -402,7 +402,7 @@ const edtechFAQs = [
 export const EdTechPlatforms = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Learning & Education"
@@ -443,7 +443,7 @@ export const EdTechPlatforms = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/EngagementModels.tsx

@@ -15,12 +15,13 @@ import {
   CheckCircle,
   Star,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { EngagementModelsVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const EngagementModels = () => {
+  const navigate = useNavigate();
   const models = [
     {
       icon: DollarSign,
@@ -151,7 +152,7 @@ export const EngagementModels = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
         <Helmet>
         {/* Page Title and Meta Description */}
@@ -307,7 +308,7 @@ export const EngagementModels = () => {
                     <div className="flex justify-center lg:justify-end">
                       <Button
                         className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                        onClick={() => navigateTo("/start-a-project")}
+                        onClick={() => navigate("/start-a-project")}
                       >
                         Learn More
                         <ArrowRight className="ml-2 w-4 h-4" />
@@ -525,7 +526,7 @@ export const EngagementModels = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Consultation
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -542,7 +543,7 @@ export const EngagementModels = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/EnterpriseSoftwareSolutions.tsx

@@ -46,11 +46,12 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import awsLogo from "../src/images/aws-logo.png";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Enterprise Software Solutions Hero Section
 const EnterpriseHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -141,7 +142,7 @@ const EnterpriseHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Building2 className="w-5 h-5 flex-shrink-0" />
@@ -1353,6 +1354,7 @@ const EnterpriseCaseStudies = () => {
 
 // Mid-Page CTA
 const EnterpriseInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1391,7 +1393,7 @@ const EnterpriseInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1407,6 +1409,7 @@ const EnterpriseInlineCTA = () => {
 
 // Hire Enterprise Talent
 const HireEnterpriseTalent = () => {
+  const navigate = useNavigate();
   const talentTypes = [
     {
       title: "Enterprise Architects",
@@ -1542,7 +1545,7 @@ const HireEnterpriseTalent = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-              onClick={() => navigateTo("/hire-talent/enterprise-software-developers")}
+              onClick={() => navigate("/hire-talent/enterprise-software-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <Users className="w-5 h-5 flex-shrink-0" />
@@ -1641,6 +1644,7 @@ const EnterpriseFAQs = () => {
 
 // Final CTA Section
 const EnterpriseFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1693,7 +1697,7 @@ const EnterpriseFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1722,7 +1726,7 @@ const EnterpriseFinalCTA = () => {
 export const EnterpriseSoftwareSolutions = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1734,6 +1738,11 @@ export const EnterpriseSoftwareSolutions = () => {
         <EnterpriseBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <EnterpriseCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <EnterpriseProcess />
@@ -1749,15 +1758,10 @@ export const EnterpriseSoftwareSolutions = () => {
         <EnterpriseTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <EnterpriseCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <EnterpriseInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Talent */}
       <section className="bg-background">
@@ -1765,9 +1769,9 @@ export const EnterpriseSoftwareSolutions = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <EnterpriseFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1776,7 +1780,7 @@ export const EnterpriseSoftwareSolutions = () => {
 
       {/* Footer */}
       <section>
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/EventTicketingSolutions.tsx

@@ -470,7 +470,7 @@ const eventTicketingFAQs = [
 export const EventTicketingSolutions = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Commerce & Consumer"
@@ -511,7 +511,7 @@ export const EventTicketingSolutions = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/FAQs.tsx

@@ -19,11 +19,12 @@ import {
   Phone,
   Mail,
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const FAQs = () => {
   const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
 
   const faqCategories = [
     {
@@ -187,7 +188,7 @@ export const FAQs = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -484,7 +485,7 @@ export const FAQs = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Couldn't find your answer? Contact us directly
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -501,7 +502,7 @@ export const FAQs = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/FinTechBankingApps.tsx

@@ -55,11 +55,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // FinTech & Banking Apps Hero Section
 const FinTechBankingAppsHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -150,7 +151,7 @@ const FinTechBankingAppsHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -293,7 +294,7 @@ const FinTechBankingAppsHero = () => {
                         initial={{ opacity: 0, scale: 0 }}
                         animate={{ opacity: 1, scale: 1 }}
                         transition={{ duration: 0.5, delay: 2.0 + i * 0.1 }}
-                        className="text-center"
+                        className="text-center flex-column items-center justify-self-center"
                       >
                         <div
                           className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-2 ${action.color === "blue"
@@ -1382,6 +1383,7 @@ const FinTechBankingAppsAwards = () => {
 
 // Mid-Page Lead Capture CTA
 const FinTechBankingAppsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1422,7 +1424,7 @@ const FinTechBankingAppsInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1519,6 +1521,7 @@ const FinTechBankingAppsFAQs = () => {
 
 // Final CTA Section
 const FinTechBankingAppsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1572,7 +1575,7 @@ const FinTechBankingAppsFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1601,7 +1604,7 @@ const FinTechBankingAppsFinalCTA = () => {
 export const FinTechBankingApps = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1660,7 +1663,7 @@ export const FinTechBankingApps = () => {
 
       {/* Footer */}
       <section className="bg-background">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/FitnessWellnessPlatforms.tsx

@@ -16,11 +16,12 @@ 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 { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Fitness & Wellness Hero Section
 const FitnessWellnessHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -108,7 +109,7 @@ const FitnessWellnessHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -387,7 +388,7 @@ const FitnessWellnessHero = () => {
 export const FitnessWellnessPlatforms = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <section className="bg-black">
         <FitnessWellnessHero />
@@ -396,7 +397,7 @@ export const FitnessWellnessPlatforms = () => {
       {/* Additional sections would go here following the same pattern as other industry pages */}
 
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/FoodOrderingDelivery.tsx

@@ -464,7 +464,7 @@ const foodDeliveryFAQs = [
 export const FoodOrderingDelivery = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Commerce & Consumer"
@@ -505,7 +505,7 @@ export const FoodOrderingDelivery = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/FutureOfAIHealthcare.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "future-of-ai-healthcare",
@@ -161,9 +161,11 @@ export const FutureOfAIHealthcare = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -171,11 +173,11 @@ export const FutureOfAIHealthcare = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -342,7 +344,7 @@ export const FutureOfAIHealthcare = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -368,7 +370,7 @@ export const FutureOfAIHealthcare = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -386,7 +388,7 @@ export const FutureOfAIHealthcare = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -413,7 +415,7 @@ export const FutureOfAIHealthcare = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your AI Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -422,7 +424,7 @@ export const FutureOfAIHealthcare = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -432,7 +434,7 @@ export const FutureOfAIHealthcare = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/GenAIIntegrationDigitalProducts.tsx

@@ -42,11 +42,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // Gen AI Integration Hero Section
 const GenAIIntegrationHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -135,7 +137,7 @@ const GenAIIntegrationHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Sparkles className="w-5 h-5 flex-shrink-0" />
@@ -1173,6 +1175,7 @@ const GenAICaseStudies = () => {
 
 // Mid-Page CTA
 const GenAIInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1211,7 +1214,7 @@ const GenAIInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Lightbulb className="w-6 h-6 flex-shrink-0" />
@@ -1480,6 +1483,7 @@ const GenAIFAQs = () => {
 
 // Final CTA Section
 const GenAIFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1532,7 +1536,7 @@ const GenAIFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Sparkles className="w-6 h-6 flex-shrink-0" />
@@ -1561,7 +1565,7 @@ const GenAIFinalCTA = () => {
 export const GenAIIntegrationDigitalProducts = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1585,7 +1589,7 @@ export const GenAIIntegrationDigitalProducts = () => {
 
       {/* Tech Stack */}
       <section className="bg-card">
-        <GenAITechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1615,7 +1619,7 @@ export const GenAIIntegrationDigitalProducts = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/GoodTimesProject.tsx

@@ -5,10 +5,10 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { GridPattern } from "../components/GridPattern";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
-import { navigateTo } from "../App";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import goodTimesLogo from "../src/images/good-times-logo.webp"; 
+import { useNavigate } from "react-router-dom";
 
 // Technology to icon mapping
 const getTechIcon = (tech: string) => {
@@ -202,9 +202,10 @@ const futureRoadmap = [
 ];
 
 export const GoodTimesProject = () => {
+  const navigate = useNavigate();
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Section 1: Hero with Heading, Subheading, and Image */}
       <section className="relative pt-32 pb-24 bg-background overflow-hidden">
@@ -220,7 +221,7 @@ export const GoodTimesProject = () => {
           >
             <Button
               variant="ghost"
-              onClick={() => navigateTo('/case-studies')}
+              onClick={() => navigate('/case-studies')}
               className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
             >
               <ArrowLeft className="w-4 h-4" />
@@ -1056,7 +1057,7 @@ export const GoodTimesProject = () => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button
                 size="lg"
-                onClick={() => navigateTo('/contact-us')}
+                onClick={() => navigate('/contact-us')}
                 className="bg-accent hover:bg-accent/90 text-accent-foreground"
               >
                 Contact Our Team
@@ -1065,7 +1066,7 @@ export const GoodTimesProject = () => {
               <Button
                 size="lg"
                 variant="outline"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
                 className="border-accent/30 text-accent hover:bg-accent/10"
               >
                 View More Case Studies
@@ -1076,7 +1077,7 @@ export const GoodTimesProject = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HealthTechApplications.tsx

@@ -45,11 +45,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // HealthTech Hero Section
 const HealthTechHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -140,7 +141,7 @@ const HealthTechHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1224,6 +1225,7 @@ const HealthTechTestimonials = () => {
 
 // Mid-Page Lead Capture CTA
 const HealthTechInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1262,7 +1264,7 @@ const HealthTechInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1359,6 +1361,7 @@ const HealthTechFAQs = () => {
 
 // Final CTA Section
 const HealthTechFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1412,7 +1415,7 @@ const HealthTechFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1441,7 +1444,7 @@ const HealthTechFinalCTA = () => {
 export const HealthTechApplications = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1495,7 +1498,7 @@ export const HealthTechApplications = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/HireAPIBackendDevelopers.tsx

@@ -139,7 +139,7 @@ const hireAPIBackendDevelopersData = {
 export function HireAPIBackendDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with BackendVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAPIBackendDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireAdminPanelDevelopers.tsx

@@ -139,7 +139,7 @@ const hireAdminPanelDevelopersData = {
 export function HireAdminPanelDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with DashboardVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAdminPanelDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireAndroidAppDevelopers.tsx

@@ -139,7 +139,7 @@ const hireAndroidAppDevelopersData = {
 export function HireAndroidAppDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with MobileAppVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireAndroidAppDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireBackendDevelopers.tsx

@@ -17,12 +17,13 @@ import {
   Code,
   Users,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { BackendVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireBackendDevelopers = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       category: "Languages & Frameworks",
@@ -215,7 +216,7 @@ export const HireBackendDevelopers = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -494,7 +495,7 @@ export const HireBackendDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -511,7 +512,7 @@ export const HireBackendDevelopers = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireClickablePrototypesDevelopers.tsx

@@ -139,7 +139,7 @@ const hireClickablePrototypesDevelopersData = {
 export function HireClickablePrototypesDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with ProjectTimelineVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireClickablePrototypesDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireCrossPlatformDevelopers.tsx

@@ -139,7 +139,7 @@ const hireCrossPlatformDevelopersData = {
 export function HireCrossPlatformDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with TechStackVisualization */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireCrossPlatformDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireCustomWebAppDevelopers.tsx

@@ -139,7 +139,7 @@ const hireCustomWebAppDevelopersData = {
 export function HireCustomWebAppDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with FrontendVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireCustomWebAppDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireDesignThinkingWorkshopsDevelopers.tsx

@@ -139,7 +139,7 @@ const hireDesignThinkingWorkshopsDevelopersData = {
 export function HireDesignThinkingWorkshopsDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with TeamCollaborationVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireDesignThinkingWorkshopsDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireEcommercePlatformDevelopers.tsx

@@ -139,7 +139,7 @@ const hireEcommercePlatformDevelopersData = {
 export function HireEcommercePlatformDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with FullStackVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireEcommercePlatformDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireEnterpriseSoftwareDevelopers.tsx

@@ -139,7 +139,7 @@ const hireEnterpriseSoftwareDevelopersData = {
 export function HireEnterpriseSoftwareDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with FullStackVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireEnterpriseSoftwareDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireFrontendDevelopers.tsx

@@ -16,12 +16,13 @@ import {
   Star,
   Palette,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { FrontendVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireFrontendDevelopers = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       category: "JavaScript Frameworks",
@@ -148,7 +149,7 @@ export const HireFrontendDevelopers = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -383,7 +384,7 @@ export const HireFrontendDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -400,7 +401,7 @@ export const HireFrontendDevelopers = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireFullStackDevelopers.tsx

@@ -18,12 +18,13 @@ import {
   Star,
   Layers,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 import { DeveloperSkillsVector } from "@/components/vectors";
 
 export const HireFullStackDevelopers = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       category: "Frontend Technologies",
@@ -157,7 +158,7 @@ export const HireFullStackDevelopers = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -434,7 +435,7 @@ export const HireFullStackDevelopers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -451,7 +452,7 @@ export const HireFullStackDevelopers = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireMobileAppDevelopers.tsx

@@ -5,12 +5,13 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 import { MobileAppVector } from "@/components/vectors";
 
 export const HireMobileAppDevelopers = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       icon: Apple,
@@ -115,7 +116,7 @@ export const HireMobileAppDevelopers = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
  <Helmet>
           {/* Page Title and Meta Description */}
           <title>Hire Mobile App Developers | Expert Talent at WDI</title>
@@ -326,7 +327,7 @@ export const HireMobileAppDevelopers = () => {
             </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"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -339,7 +340,7 @@ export const HireMobileAppDevelopers = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireNativeAppDevelopers.tsx

@@ -139,7 +139,7 @@ const hireNativeAppDevelopersData = {
 export function HireNativeAppDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with DeveloperSkillsVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireNativeAppDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HirePWADevelopers.tsx

@@ -139,7 +139,7 @@ const hirePWADevelopersData = {
 export function HirePWADevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with FrontendVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HirePWADevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireProductModernizationDevelopers.tsx

@@ -139,7 +139,7 @@ const hireProductModernizationDevelopersData = {
 export function HireProductModernizationDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with ProjectTimelineVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireProductModernizationDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireQAEngineers.tsx

@@ -17,12 +17,13 @@ import {
   Activity,
   Search,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { QATestingVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireQAEngineers = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       category: "Manual Testing",
@@ -222,7 +223,7 @@ export const HireQAEngineers = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -410,7 +411,7 @@ export const HireQAEngineers = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Quality Assurance
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -427,7 +428,7 @@ export const HireQAEngineers = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireSaaSProductDevelopers.tsx

@@ -139,7 +139,7 @@ const hireSaaSProductDevelopersData = {
 export function HireSaaSProductDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with TechStackVisualization */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireSaaSProductDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireSystemArchitectureDevOpsDevelopers.tsx

@@ -139,7 +139,7 @@ const hireSystemArchitectureDevOpsDevelopersData = {
 export function HireSystemArchitectureDevOpsDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with BackendVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireSystemArchitectureDevOpsDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireTalent.tsx

@@ -5,10 +5,11 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Users, Clock, Target, DollarSign, Shield, Zap, CheckCircle, Smartphone, Code, Monitor, Database, Palette, TestTube } from "lucide-react";
-import { navigateTo } from "../App";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 export const HireTalent = () => {
+  const navigate = useNavigate();
   const talentCategories = [
     {
       title: "Mobile App Developers",
@@ -107,7 +108,7 @@ export const HireTalent = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -180,7 +181,7 @@ export const HireTalent = () => {
               Connecting You with Exceptional Tech Professionals, Effortlessly. In today's fast-paced digital landscape, access to top-tier technical talent is crucial for success.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
                 Tell Us Your Hiring Needs
@@ -249,7 +250,7 @@ export const HireTalent = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {talentCategories.map((category, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(category.href)}>
+              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigate(category.href)}>
                 <CardContent className="p-8">
                   <category.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
 
@@ -358,7 +359,7 @@ export const HireTalent = () => {
             </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"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Hiring Now
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -371,7 +372,7 @@ export const HireTalent = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireThirdPartyIntegrationsDevelopers.tsx

@@ -139,7 +139,7 @@ const hireThirdPartyIntegrationsDevelopersData = {
 export function HireThirdPartyIntegrationsDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with TeamCollaborationVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireThirdPartyIntegrationsDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireUIUXDesigners.tsx

@@ -16,12 +16,13 @@ import {
   MousePointer2,
   TestTube,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { UIUXVector } from "@/components/vectors";
 import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
 
 export const HireUIUXDesigners = () => {
+  const navigate = useNavigate();
   const expertise = [
     {
       category: "User Research & Analysis",
@@ -199,7 +200,7 @@ export const HireUIUXDesigners = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <Helmet>
         {/* Page Title and Meta Description */}
@@ -475,7 +476,7 @@ export const HireUIUXDesigners = () => {
               <Button
                 size="lg"
                 className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start Your Design Journey
                 <ArrowRight className="ml-2 w-4 h-4" />
@@ -492,7 +493,7 @@ export const HireUIUXDesigners = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/HireUserResearchTestingDevelopers.tsx

@@ -139,7 +139,7 @@ const hireUserResearchTestingDevelopersData = {
 export function HireUserResearchTestingDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with DeveloperSkillsVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireUserResearchTestingDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireWearableAppDevelopers.tsx

@@ -139,7 +139,7 @@ const hireWearableAppDevelopersData = {
 export function HireWearableAppDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with TechStackVisualization */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireWearableAppDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/HireiOSAppDevelopers.tsx

@@ -139,7 +139,7 @@ const hireiOSAppDevelopersData = {
 export function HireiOSAppDevelopers() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section with MobileAppVector */}
       <HireTalentHeroBanner
@@ -189,7 +189,7 @@ export function HireiOSAppDevelopers() {
         <SplitCallToAction />
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/Homepage.tsx

@@ -0,0 +1,288 @@
+import { CarouselTestimonials } from "@/components/CarouselTestimonials";
+import { CaseStudyHighlight } from "@/components/CaseStudyHighlight";
+import { Footer } from "@/components/Footer";
+import { HorizontalTagScroller } from "@/components/HorizontalTagScroller";
+import { InlineCTA } from "@/components/InlineCTA";
+import { ProcessSection } from "@/components/ProcessSection";
+import { ResourceCards } from "@/components/ResourceCards";
+import { SplitCallToAction } from "@/components/SplitCallToAction";
+import { WhyChooseWDI } from "@/components/WhyChooseWDI";
+import { ChevronRight } from "lucide-react";
+import { motion } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import { Navigation } from "@/components/Navigation";
+import { HeroSection } from "@/components/HeroSection";
+import { ClientLogos } from "@/components/ClientLogos";
+import { useNavigate } from "react-router-dom";
+
+
+const services = [
+    {
+        title: "Mobile App Development",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+            />
+        ),
+        description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
+        link: "/services/mobile-app-development"
+    },
+    {
+        title: "Web Platforms & SaaS",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+            />
+        ),
+        description: "Scalable, secure, and SEO-optimized web applications built for performance.",
+        link: "/web-cloud"
+    },
+    {
+        title: "AI & ML Solutions",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+            />
+        ),
+        description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
+        link: "/artificial-intelligence"
+    },
+    {
+        title: "DevOps & Cloud",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+            />
+        ),
+        description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
+        link: "/services/system-architecture-devops"
+    },
+    {
+        title: "Product Design & UX",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
+            />
+        ),
+        description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
+        link: "/design-experience"
+    },
+    {
+        title: "Security & Compliance",
+        icon: (
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+            />
+        ),
+        description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
+        link: "/solutions/compliance-ready-systems"
+    }
+];
+
+export const Homepage = () => {
+
+    const navigate = useNavigate();
+
+    return (
+        <div className="dark min-h-screen bg-background">
+            <Helmet>
+                {/* Page Title and Meta Description */}
+                <title>Mobile App Development Services | WDI - iOS & Android App Development</title>
+                <meta
+                    name="description"
+                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
+                />
+
+                {/* Canonical Link */}
+                <link rel="canonical" href="https://www.wdipl.com/" />
+
+                {/* Open Graph Tags (for Facebook, LinkedIn) */}
+                <meta property="og:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
+                <meta
+                    property="og:description"
+                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
+                />
+                <meta property="og:url" content="https://www.wdipl.com/services" />
+                <meta property="og:type" content="website" />
+                <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+                {/* Twitter Card Tags */}
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
+                <meta
+                    name="twitter:description"
+                    content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
+                />
+                <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+                {/* Social Profiles (using JSON-LD Schema) */}
+                <script type="application/ld+json">
+                    {`
+                  {
+                    "@context": "https://schema.org",
+                    "@type": "Organization",
+                    "name": "WDI",
+                    "url": "https://www.wdipl.com",
+                    "sameAs": [
+                      "https://www.facebook.com/wdideas",
+                      "https://www.linkedin.com/in/website-developers-india/",
+                      "https://www.instagram.com/wdipl/"
+                    ]
+                  }
+                `}
+                </script>
+            </Helmet>
+            {/* <Navigation /> */}
+
+            {/* Hero Section - Dark background */}
+            <section className="bg-background">
+                <HeroSection />
+            </section>
+
+            {/* Client Logos - Dark background */}
+            <section className="bg-background">
+                <ClientLogos />
+            </section>
+
+            {/* Services Grid - Dark background */}
+            {/* <section className="bg-background">
+      <ServicesSection />
+    </section> */}
+            <section className="py-20 bg-background">
+                <div className="container mx-auto px-6 lg:px-8">
+                    <motion.div
+                        initial={{ opacity: 0, y: 30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.8 }}
+                        viewport={{ once: true }}
+                        className="text-left mb-20"
+                    >
+                        <div className="text-center">
+                            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
+                            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
+                                End-to-end solutions for every stage of your product lifecycle.
+                            </p>
+                        </div>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 40 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.8, delay: 0.2 }}
+                        viewport={{ once: true }}
+                        className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+                    >
+                        {services.map((service, index) => {
+                            const IconComponent = service.icon;
+                            return (
+                                <motion.div
+                                    key={index}
+                                    initial={{ opacity: 0, y: 20 }}
+                                    whileInView={{ opacity: 1, y: 0 }}
+                                    transition={{ duration: 0.5, delay: index * 0.01 }}
+                                    viewport={{ once: true }}
+                                    whileHover={{ y: -5 }}
+                                    className="group cursor-pointer"
+                                    onClick={() => navigate(service.link)}
+                                >
+                                    <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
+                                        <div className="flex flex-col items-start space-y-6">
+                                            <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                                                {/* <IconComponent className="w-6 h-6 text-accent" /> */}
+                                                <svg
+                                                    className="w-6 h-6 text-accent"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    viewBox="0 0 24 24"
+                                                >
+                                                    {service.icon}
+                                                </svg>
+                                            </div>
+
+                                            <div>
+                                                <h3 className="text-xl font-semibold text-white mb-4">
+                                                    {service.title}
+                                                </h3>
+                                                <p className="text-gray-400 leading-relaxed">
+                                                    {service.description}
+                                                </p>
+                                            </div>
+
+                                            <div className="flex items-center gap-2 text-accent font-medium">
+                                                <span>Explore Services</span>
+                                                <ChevronRight className="w-4 h-4" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </motion.div>
+                            );
+                        })}
+                    </motion.div>
+                </div>
+            </section>
+
+            {/* Why Choose WDI - Dark background */}
+            <section className="bg-background">
+                <WhyChooseWDI />
+            </section>
+
+            {/* Industry Solutions - Dark background */}
+            <section className="bg-background">
+                <HorizontalTagScroller />
+            </section>
+
+            {/* Case Studies - Dark background */}
+            <section className="bg-background">
+                <CaseStudyHighlight />
+            </section>
+
+            {/* Inline CTA - Dark background */}
+            <section className="bg-background">
+                <InlineCTA />
+            </section>
+
+            {/* Process Steps - Dark background */}
+            <section className="bg-background">
+                <ProcessSection />
+            </section>
+
+            {/* Testimonials - Dark background */}
+            <section className="bg-background">
+                <CarouselTestimonials />
+            </section>
+
+            {/* Resources - Dark background */}
+            <section className="bg-background">
+                <ResourceCards />
+            </section>
+
+            {/* Final CTA - Dark background */}
+            <section className="bg-background">
+                <SplitCallToAction />
+            </section>
+
+            {/* Footer - Dark background */}
+            <section className="bg-background">
+                {/* <Footer /> */}
+            </section>
+        </div>
+    );
+};

pages/Industries.tsx

@@ -8,16 +8,17 @@ 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 { navigateTo } from "../App";
 import { 
   DollarSign, Stethoscope, GraduationCap, ShoppingCart, Monitor, 
   Truck, Factory, Users, Star, ArrowRight, ChevronRight, Clock, 
   TrendingUp, Building, Cpu, Calendar, Eye, Target, Zap,
   CheckCircle, Lightbulb, Award, Handshake, Heart
 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -57,7 +58,7 @@ 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={() => navigate('/contact/schedule-a-discovery-call')}>
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Discuss Your Industry</span>
@@ -67,7 +68,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View Success Stories</span>
@@ -117,6 +118,7 @@ const HeroWithCTA = () => {
 
 // Industry Categories Grid
 const IndustryGrid = () => {
+  const navigate = useNavigate();
   const industries = [
     {
       title: "Financial Services",
@@ -228,7 +230,7 @@ const IndustryGrid = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(industry.link)}
+                onClick={() => navigate(industry.link)}
               >
                 <Card className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full overflow-hidden">
                   <CardContent className="p-0 flex flex-col h-full">
@@ -369,6 +371,7 @@ const WhyChooseWDI = () => {
 
 // Updated CTA Section
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-gray-950/50 relative overflow-hidden">
       {/* Add subtle decorative elements matching site theme */}
@@ -412,7 +415,7 @@ const InlineCTA = () => {
             </p>
             
             {/* CTA Button */}
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigate('/contact/schedule-a-discovery-call')}>
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
                 <span>Schedule Industry Consultation</span>
@@ -452,7 +455,7 @@ const industriesFAQs = [
 export function Industries() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <IndustryGrid />
       <WhyChooseWDI />
@@ -463,7 +466,7 @@ export function Industries() {
         subtitle="Get answers to common questions about our industry-specific solutions and expertise."
         faqs={industriesFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/LeadershipTeam.tsx

@@ -4,7 +4,7 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import riteshImage from "../src/images/ritesh-pandey.png";
 import manavImage from "../src/images/manav-sain.png";
 import sudhirImage from "../src/images/sudhir-malya.jpg";
@@ -14,6 +14,7 @@ import tanveerImage from "../src/images/tanveer.jpg";
 import { Helmet } from "react-helmet-async";
 
 export const LeadershipTeam = () => {
+  const navigate = useNavigate();
   const leaders = [
     {
       name: "Ritesh Pandey",
@@ -176,7 +177,7 @@ export const LeadershipTeam = () => {
           `}
         </script>
       </Helmet>
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -372,7 +373,7 @@ export const LeadershipTeam = () => {
                 size="lg"
                 variant="outline"
                 className="border-white/20 text-white hover:bg-white/10"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 Start a Project
               </Button>
@@ -381,7 +382,7 @@ export const LeadershipTeam = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/LegacySystemRebuilds.tsx

@@ -42,11 +42,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Legacy System Rebuilds Hero Section
 const LegacySystemRebuildsHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -137,7 +138,7 @@ const LegacySystemRebuildsHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1249,6 +1250,7 @@ const LegacySystemCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const LegacySystemInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1287,7 +1289,7 @@ const LegacySystemInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
@@ -1375,6 +1377,7 @@ const LegacySystemFAQs = () => {
 
 // Final CTA Section
 const LegacySystemFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1427,7 +1430,7 @@ const LegacySystemFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1456,7 +1459,7 @@ const LegacySystemFinalCTA = () => {
 export const LegacySystemRebuilds = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1510,7 +1513,7 @@ export const LegacySystemRebuilds = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/LegacySystemScaling.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "legacy-system-scaling",
@@ -255,9 +255,11 @@ export const LegacySystemScaling = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -265,11 +267,11 @@ export const LegacySystemScaling = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Blog
               </button>
               <span>/</span>
@@ -437,7 +439,7 @@ export const LegacySystemScaling = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/articles/${article.id}`)}
+                        onClick={() => navigate(`/articles/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -463,7 +465,7 @@ export const LegacySystemScaling = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Articles
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -481,7 +483,7 @@ export const LegacySystemScaling = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -508,7 +510,7 @@ export const LegacySystemScaling = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Modernization Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -517,7 +519,7 @@ export const LegacySystemScaling = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Articles
                 </Button>
@@ -527,7 +529,7 @@ export const LegacySystemScaling = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/MVPStartupLaunchPackages.tsx

@@ -37,11 +37,12 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // MVP & Startup Launch Packages Hero Section
 const MVPStartupLaunchPackagesHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -131,7 +132,7 @@ const MVPStartupLaunchPackagesHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1215,6 +1216,7 @@ const MVPStartupCaseStudies = () => {
 
 // Mid-Page Lead Capture CTA
 const MVPStartupInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1252,7 +1254,7 @@ const MVPStartupInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Target className="w-6 h-6 flex-shrink-0" />
@@ -1339,6 +1341,7 @@ const MVPStartupFAQs = () => {
 
 // Final CTA Section
 const MVPStartupFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1391,7 +1394,7 @@ const MVPStartupFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1420,7 +1423,7 @@ const MVPStartupFinalCTA = () => {
 export const MVPStartupLaunchPackages = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1474,7 +1477,7 @@ export const MVPStartupLaunchPackages = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/MachineLearning.tsx

@@ -13,7 +13,6 @@ import {
   UserPlus,
   Zap
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { FAQSection } from "../components/FAQSection";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -23,9 +22,11 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -113,8 +114,8 @@ const HeroWithCTA = () => {
               className="flex flex-col sm:flex-row gap-4"
             >
               <ShimmerButton className="text-lg px-8 py-4"
-                //  onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
-                onClick={() => navigateTo("/start-a-project")}
+                //  onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
@@ -125,7 +126,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4 h-auto"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <BarChart3 className="w-4 h-4 flex-shrink-0" />
                 <span>View ML Case Studies</span>
@@ -366,6 +367,7 @@ const SideBySideContentWithIcons = () => {
 
 // Service Categories Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "Custom ML Model Development",
@@ -441,7 +443,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(service.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -470,6 +472,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -512,8 +515,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("/start-a-project")}
+                // onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Brain className="w-6 h-6 flex-shrink-0" />
@@ -643,7 +646,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        // onClick={() => navigateTo(specialist.link)}
+                        // onClick={() => navigate(specialist.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -689,7 +692,7 @@ const machineLearningFAQs = [
 export function MachineLearning() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -702,7 +705,7 @@ export function MachineLearning() {
         subtitle="Get answers to common questions about our machine learning services."
         faqs={machineLearningFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

pages/ManufacturingAutomation.tsx

@@ -402,7 +402,7 @@ const manufacturingAutomationFAQs = [
 export const ManufacturingAutomation = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Industrial & Emerging Tech"
@@ -443,7 +443,7 @@ export const ManufacturingAutomation = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/MedicalComplianceSolutions.tsx

@@ -47,11 +47,12 @@ import {
   ScrollText,
   Archive,
 } from "lucide-react";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 
 // Medical Compliance Hero Section
 const MedicalComplianceHero = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -141,7 +142,7 @@ const MedicalComplianceHero = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
@@ -1236,6 +1237,7 @@ const MedicalComplianceTestimonials = () => {
 
 // Mid-Page Lead Capture CTA
 const MedicalComplianceInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1274,7 +1276,7 @@ const MedicalComplianceInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1371,6 +1373,7 @@ const MedicalComplianceFAQs = () => {
 
 // Final CTA Section
 const MedicalComplianceFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1424,7 +1427,7 @@ const MedicalComplianceFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -1453,7 +1456,7 @@ const MedicalComplianceFinalCTA = () => {
 export const MedicalComplianceSolutions = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1507,7 +1510,7 @@ export const MedicalComplianceSolutions = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/MicrolearningApps.tsx

@@ -402,7 +402,7 @@ const microlearningFAQs = [
 export const MicrolearningApps = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Learning & Education"
@@ -443,7 +443,7 @@ export const MicrolearningApps = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/MigratingToLinear101.tsx

@@ -7,8 +7,8 @@ import { Card, CardContent } from "../components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
 import { Separator } from "../components/ui/separator";
 import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
-import { navigateTo } from "../App";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
+import { useNavigate } from "react-router-dom";
 
 const articleData = {
   id: "migrating-to-linear-101",
@@ -169,9 +169,11 @@ export const MigratingToLinear101 = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -179,11 +181,11 @@ export const MigratingToLinear101 = () => {
           <div className="max-w-4xl mx-auto">
             {/* Breadcrumb */}
             <div className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
-              <button onClick={() => navigateTo('/')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/')} className="hover:text-white transition-colors">
                 Home
               </button>
               <span>/</span>
-              <button onClick={() => navigateTo('/resources/blog')} className="hover:text-white transition-colors">
+              <button onClick={() => navigate('/resources/blog')} className="hover:text-white transition-colors">
                 Insights
               </button>
               <span>/</span>
@@ -350,7 +352,7 @@ export const MigratingToLinear101 = () => {
                       <div 
                         key={article.id} 
                         className="group cursor-pointer"
-                        onClick={() => navigateTo(`/insights/${article.id}`)}
+                        onClick={() => navigate(`/insights/${article.id}`)}
                       >
                         <div className="aspect-[16/10] overflow-hidden rounded-lg mb-3">
                           <ImageWithFallback
@@ -376,7 +378,7 @@ export const MigratingToLinear101 = () => {
                   <Button 
                     variant="outline" 
                     className="w-full border-white/20 text-white hover:bg-white/10"
-                    onClick={() => navigateTo('/resources/blog')}
+                    onClick={() => navigate('/resources/blog')}
                   >
                     View All Insights
                     <ArrowRight className="w-4 h-4 ml-2" />
@@ -394,7 +396,7 @@ export const MigratingToLinear101 = () => {
                   </p>
                   <Button 
                     className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                    onClick={() => navigateTo('/contact')}
+                    onClick={() => navigate('/contact')}
                   >
                     Get In Touch
                   </Button>
@@ -421,7 +423,7 @@ export const MigratingToLinear101 = () => {
                 <Button 
                   size="lg" 
                   className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
-                  onClick={() => navigateTo('/contact')}
+                  onClick={() => navigate('/contact')}
                 >
                   Start Your Project
                   <ArrowRight className="ml-2 w-4 h-4" />
@@ -430,7 +432,7 @@ export const MigratingToLinear101 = () => {
                   size="lg" 
                   variant="outline" 
                   className="border-white/20 text-white hover:bg-white/10"
-                  onClick={() => navigateTo('/resources/blog')}
+                  onClick={() => navigate('/resources/blog')}
                 >
                   Read More Insights
                 </Button>
@@ -440,7 +442,7 @@ export const MigratingToLinear101 = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/MobileAppDevelopment.tsx

@@ -24,7 +24,6 @@ import {
   Zap
 } from "lucide-react";
 import React from "react";
-import { navigateTo } from "../App";
 import { FAQSection } from "../components/FAQSection";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -35,10 +34,12 @@ import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import heroMockupImage from '../src/images/mobile-app-banner.webp';
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 
 // Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -136,7 +137,7 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -146,7 +147,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View our work</span>
@@ -430,6 +431,7 @@ const SideBySideContentWithIcons = () => {
 
 // Enhanced Mobile Expertise Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "iOS App Development",
@@ -505,7 +507,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(service.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -534,6 +536,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Banner with ShimmerButton
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -577,7 +580,7 @@ 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('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-3">
                   <Brain className="w-6 h-6 flex-shrink-0" />
@@ -599,6 +602,7 @@ const InlineCTA = () => {
 
 // Updated Hire Developers Section with ShimmerButton
 const HireDevelopersSection = () => {
+  const navigate = useNavigate();
   const developers = [
     {
       title: "iOS Developers",
@@ -707,7 +711,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(developer.link)}
+                        onClick={() => navigate(developer.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -777,7 +781,7 @@ export const MobileAppDevelopment = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <HeroWithCTA />
@@ -803,7 +807,7 @@ export const MobileAppDevelopment = () => {
       {/* FAQ Section */}
       <FAQSection faqs={mobileAppFAQs} />
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/NLPTextAnalytics.tsx

@@ -45,11 +45,13 @@ 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";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // NLP & Text Analytics Hero Section
 const NLPHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -138,7 +140,7 @@ const NLPHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <FileText className="w-5 h-5 flex-shrink-0" />
@@ -709,14 +711,12 @@ const NLPProcess = () => {
                   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`}
+                    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">
@@ -1034,10 +1034,9 @@ const NLPTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
-                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                    }`}
+                      }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1198,6 +1197,7 @@ const NLPCaseStudies = () => {
 
 // Mid-Page CTA
 const NLPInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1236,7 +1236,7 @@ const NLPInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1503,6 +1503,7 @@ const NLPFAQs = () => {
 
 // Final CTA Section
 const NLPFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1556,7 +1557,7 @@ const NLPFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Search className="w-6 h-6 flex-shrink-0" />
@@ -1586,7 +1587,7 @@ const NLPFinalCTA = () => {
 export const NLPTextAnalytics = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1598,6 +1599,11 @@ export const NLPTextAnalytics = () => {
         <NLPBenefits />
       </section>
 
+      {/* Tech Stack */}
+      <section className="bg-card">
+        <NLPTechStack />
+      </section>
+      
       {/* Process */}
       <section className="bg-card">
         <NLPProcess />
@@ -1608,9 +1614,9 @@ export const NLPTextAnalytics = () => {
         <NLPServices />
       </section>
 
-      {/* Tech Stack */}
+      {/* Target Audience */}
       <section className="bg-card">
-        <NLPTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1640,7 +1646,7 @@ export const NLPTextAnalytics = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/NativeAppDevelopment.tsx

@@ -1,4 +1,4 @@
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
   Apple,
@@ -41,9 +41,11 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
 import ranoutofImage from "../src/images/ranoutof.webp"
 import seezunImage from "../src/images/seezun.webp";
 import regroupImage from "../src/images/regroup.webp";
+import awsLogoImage from "../src/images/aws-logo.png";
 
 // Native App Development Hero Section
 const NativeHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -55,7 +57,7 @@ const NativeHeroWithCTA = () => {
         />
 
         {/* Canonical Link */}
-       <link rel="canonical" href="https://www.wdipl.com/services/native-app-development" />
+        <link rel="canonical" href="https://www.wdipl.com/services/native-app-development" />
 
         {/* Open Graph Tags (for Facebook, LinkedIn) */}
         <meta property="og:title" content="Native App Development Services | WDI Expert Solutions" />
@@ -134,7 +136,7 @@ const NativeHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Gauge className="w-5 h-5 flex-shrink-0" />
@@ -787,14 +789,12 @@ const NativeProcess = () => {
                   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`}
+                    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">
@@ -830,7 +830,8 @@ const NativeProcess = () => {
 
 // Native Case Studies
 const NativeCaseStudies = () => {
-   const caseStudies = [
+  const navigate = useNavigate();
+  const caseStudies = [
     {
       title: "Household Management Revolution",
       client: "RanOutOf",
@@ -839,7 +840,7 @@ const NativeCaseStudies = () => {
       image: ranoutofImage,
       results: "3M+ downloads",
       gradient: "from-[#007F33]/20 to-[#007F33]/10",
-      buttonLink: "/projects/ranoutof", 
+      buttonLink: "/projects/ranoutof",
     },
     {
       title: "E-commerce Platform Innovation",
@@ -849,7 +850,7 @@ const NativeCaseStudies = () => {
       image: seezunImage,
       results: "800K+ users",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      buttonLink: "/projects/seezun", 
+      buttonLink: "/projects/seezun",
     },
     {
       title: "Social Networking Platform",
@@ -859,7 +860,7 @@ const NativeCaseStudies = () => {
       image: regroupImage,
       results: "1.5M+ downloads",
       gradient: "from-[#a98453]/20 to-[#a98453]/10",
-      buttonLink: "/projects/regroup", 
+      buttonLink: "/projects/regroup",
     },
   ];
 
@@ -953,7 +954,7 @@ const NativeCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
-                      onClick={() => navigateTo(study.buttonLink)}
+                      onClick={() => navigate(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY
@@ -973,6 +974,7 @@ const NativeCaseStudies = () => {
 
 // Mid-Page CTA
 const NativeInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1011,7 +1013,7 @@ const NativeInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1025,8 +1027,94 @@ const NativeInlineCTA = () => {
   );
 };
 
+// NativeAppTechStack
+
+const NativeAppTechStack = () => {
+  const technologies = [
+    {
+      name: "Swift",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
+    },
+    {
+      name: "Objective-C",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/objectivec/objectivec-plain.svg",
+    },
+    {
+      name: "Xcode",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg",
+    },
+    {
+      name: "UIKit",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_black.svg/512px-Apple_logo_black.svg.png",
+    },
+    {
+      name: "Android (Java/Kotlin)",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
+    },
+    {
+      name: "Android Studio",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-plain.svg",
+    },
+    {
+      name: "Firebase",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
+    },
+    {
+      name: "AWS",
+      logo: awsLogoImage,
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+            Powering Native App Development
+          </h2>
+          <p className="text-xl text-gray-300 leading-relaxed">
+            We leverage native frameworks and tools to deliver high-performance apps for iOS and Android.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+          {technologies.map((tech, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
+              viewport={{ once: true }}
+              whileHover={{ scale: 1.1, y: -5 }}
+              className="flex flex-col items-center group"
+            >
+              <div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
+                <ImageWithFallback
+                  src={tech.logo}
+                  alt={tech.name}
+                  className="w-12 h-12 object-contain"
+                />
+              </div>
+              <span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
+                {tech.name}
+              </span>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
 // Hire Native Developers
 const HireNativeDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Senior iOS Native Developer",
@@ -1150,7 +1238,7 @@ const HireNativeDevelopers = () => {
           className="flex flex-col sm:flex-row gap-4 justify-center"
         >
           <ShimmerButton className="px-8 py-4"
-          onClick={() => navigateTo("/hire-talent/native-app-developers")}
+            onClick={() => navigate("/hire-talent/native-app-developers")}
           >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1248,6 +1336,7 @@ const NativeFAQs = () => {
 
 // Final CTA Section
 const NativeFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1299,7 +1388,7 @@ const NativeFinalCTA = () => {
             className="space-y-8"
           >
             <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-            onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1329,7 +1418,7 @@ const NativeFinalCTA = () => {
 export const NativeAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1341,9 +1430,20 @@ export const NativeAppDevelopment = () => {
         <NativeVsCrossPlatform />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <NativeCaseStudies />
+      </section>
+
       {/* Capabilities */}
-      <section className="bg-card">
+      {/* <section className="bg-black">
         <NativeCapabilities />
+      </section> */}
+
+
+      {/* Development Process */}
+      <section className="bg-card">
+        <NativeProcess />
       </section>
 
       {/* Use Cases */}
@@ -1351,19 +1451,14 @@ export const NativeAppDevelopment = () => {
         <NativeUseCases />
       </section>
 
-      {/* Development Process */}
-      <section className="bg-card">
-        <NativeProcess />
-      </section>
-
-      {/* Case Studies */}
-      <section className="bg-background">
-        <NativeCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <NativeInlineCTA />
+      </section> */}
+
+      {/* NativeAppTechStack */}
+      <section className="bg-card">
+        <NativeAppTechStack />
       </section>
 
       {/* Hire Developers */}
@@ -1372,18 +1467,18 @@ export const NativeAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <NativeFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
-      <section className="bg-background">
+      <section className="bg-card">
         <NativeFinalCTA />
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );

pages/OTTStreamingApps.tsx

@@ -465,7 +465,7 @@ const ottStreamingFAQs = [
 export const OTTStreamingApps = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Media & Community"
@@ -506,7 +506,7 @@ export const OTTStreamingApps = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/OfficeLocations.tsx

@@ -5,7 +5,7 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { MapPin, Phone, Mail, Clock, Navigation2, Globe, Users, ArrowRight } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 export const OfficeLocations = () => {
   const offices = [
@@ -172,9 +172,11 @@ export const OfficeLocations = () => {
     }
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
@@ -427,11 +429,11 @@ export const OfficeLocations = () => {
               Schedule a meeting at any of our offices or connect with us virtually to discuss your project needs.
             </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" onClick={() => navigateTo('/contact')}>
+              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white" onClick={() => navigate('/contact')}>
                 Visit Us
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10" onClick={() => navigate('/contact/schedule-a-discovery-call')}>
                 Get Directions
               </Button>
             </div>
@@ -439,7 +441,7 @@ export const OfficeLocations = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/OilGasMonitoringSystems.tsx

@@ -402,7 +402,7 @@ const oilGasMonitoringFAQs = [
 export const OilGasMonitoringSystems = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Industrial & Emerging Tech"
@@ -443,7 +443,7 @@ export const OilGasMonitoringSystems = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/OnDemandServices.tsx

@@ -402,7 +402,7 @@ const onDemandServicesFAQs = [
 export const OnDemandServices = () => {
   return (
     <div className="min-h-screen bg-[#0E0E0E]">
-      <Navigation />
+      {/* <Navigation /> */}
 
       <HeroBanner
         category="Mobility & Logistics"
@@ -443,7 +443,7 @@ export const OnDemandServices = () => {
         <SplitCallToAction />
       </div>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/OurHistory.tsx

@@ -46,7 +46,7 @@ export const OurHistory = () => {
 
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="relative pt-24 pb-16 overflow-hidden">
@@ -183,7 +183,7 @@ export const OurHistory = () => {
         </div>
       </section>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };

pages/PWADevelopment.tsx

@@ -1,4 +1,4 @@
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
   ArrowRight,
@@ -63,6 +63,7 @@ import HireDeveloperSection from "@/components/HireDeveloperSection";
 
 // PWA Hero Section
 const PWAHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -153,7 +154,7 @@ const PWAHeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Globe className="w-5 h-5 flex-shrink-0" />
@@ -1040,6 +1041,8 @@ const PWASuccessStories = () => {
     return icons[industry as keyof typeof icons] || Building;
   };
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1074,11 +1077,11 @@ const PWASuccessStories = () => {
                 className="group cursor-pointer"
                 onClick={() => {
                   if (study.title === "TradersCircuit") {
-                    navigateTo("/projects/traderscircuit");
+                    navigate("/projects/traderscircuit");
                   } else if (study.title === "Prosperty") {
-                    navigateTo("/projects/prosperty");
+                    navigate("/projects/prosperty");
                   } else if (study.title === "GoodTimes") {
-                    navigateTo("/projects/goodtimes");
+                    navigate("/projects/goodtimes");
                   }
                 }}
               >
@@ -1155,11 +1158,11 @@ const PWASuccessStories = () => {
                         onClick={(e) => {
                           e.stopPropagation();
                           if (study.title === "TradersCircuit") {
-                            navigateTo("/projects/traderscircuit");
+                            navigate("/projects/traderscircuit");
                           } else if (study.title === "Prosperty") {
-                            navigateTo("/projects/prosperty");
+                            navigate("/projects/prosperty");
                           } else if (study.title === "GoodTimes") {
-                            navigateTo("/projects/goodtimes");
+                            navigate("/projects/goodtimes");
                           }
                         }}
                       >
@@ -1180,6 +1183,7 @@ const PWASuccessStories = () => {
 
 // Mid-Page CTA
 const PWAInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1218,7 +1222,7 @@ const PWAInlineCTA = () => {
 
             <ShimmerButton
               className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Eye className="w-6 h-6 flex-shrink-0" />
@@ -1308,6 +1312,7 @@ const PWAFAQs = () => {
 
 // Final CTA Section
 const PWAFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1360,7 +1365,7 @@ const PWAFinalCTA = () => {
           >
             <ShimmerButton
               className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
             >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1389,7 +1394,7 @@ const PWAFinalCTA = () => {
 export const PWADevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1401,11 +1406,16 @@ export const PWADevelopment = () => {
         <PWABenefits />
       </section>
 
-      {/* How PWAs Work */}
+       {/* Case Studies */}
       <section className="bg-card">
-        <HowPWAsWork />
+        <PWASuccessStories />
       </section>
 
+      {/* How PWAs Work */}
+      {/* <section className="bg-card">
+        <HowPWAsWork />
+      </section> */}
+
       {/* Development Process */}
       <section className="bg-background">
         <PWAProcess />
@@ -1421,11 +1431,6 @@ export const PWADevelopment = () => {
         <PWATechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-card">
-        <PWASuccessStories />
-      </section>
-
       <HireDeveloperSection
         title="Augment Your Team with Top PWA Developers"
         description="Build fast, installable, and offline-first Progressive Web Apps that feel like native mobile apps."
@@ -1455,14 +1460,14 @@ export const PWADevelopment = () => {
 
 
       {/* Mid-Page CTA */}
-      <section className="bg-background">
+      {/* <section className="bg-background">
         <PWAInlineCTA />
-      </section>
+      </section> */}
 
       {/* FAQs */}
-      <section className="bg-background">
+      {/* <section className="bg-background">
         <PWAFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-card">
@@ -1471,7 +1476,7 @@ export const PWADevelopment = () => {
 
       {/* Footer */}
       <section className="bg-background">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );