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

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