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

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>
   );
 }