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

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