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

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