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

pages/SoftwareEngineering.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>
@@ -119,8 +120,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" />
@@ -131,7 +132,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 Case Studies</span>
@@ -444,6 +445,8 @@ const TabbedServiceDisplay = () => {
     },
   ];
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32 bg-background">
       <div className="container mx-auto px-6 lg:px-8">
@@ -481,7 +484,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">
@@ -510,6 +513,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">
@@ -557,8 +561,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">
                   <Code className="w-6 h-6 flex-shrink-0" />
@@ -616,6 +620,8 @@ const HireDevelopersSection = () => {
     },
   ];
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32 bg-background">
       <div className="container mx-auto px-6 lg:px-8">
@@ -698,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" />
@@ -749,7 +755,7 @@ const softwareEngineeringFAQs = [
 export function SoftwareEngineering() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -762,7 +768,7 @@ export function SoftwareEngineering() {
         subtitle="Get answers to common questions about our software engineering services."
         faqs={softwareEngineeringFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }