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

pages/PWADevelopment.tsx

@@ -1,4 +1,4 @@
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
   ArrowRight,
@@ -63,6 +63,7 @@ import HireDeveloperSection from "@/components/HireDeveloperSection";
 
 // PWA Hero Section
 const PWAHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -153,7 +154,7 @@ const PWAHeroWithCTA = () => {
             >
               <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">
                   <Globe className="w-5 h-5 flex-shrink-0" />
@@ -1040,6 +1041,8 @@ const PWASuccessStories = () => {
     return icons[industry as keyof typeof icons] || Building;
   };
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1074,11 +1077,11 @@ const PWASuccessStories = () => {
                 className="group cursor-pointer"
                 onClick={() => {
                   if (study.title === "TradersCircuit") {
-                    navigateTo("/projects/traderscircuit");
+                    navigate("/projects/traderscircuit");
                   } else if (study.title === "Prosperty") {
-                    navigateTo("/projects/prosperty");
+                    navigate("/projects/prosperty");
                   } else if (study.title === "GoodTimes") {
-                    navigateTo("/projects/goodtimes");
+                    navigate("/projects/goodtimes");
                   }
                 }}
               >
@@ -1155,11 +1158,11 @@ const PWASuccessStories = () => {
                         onClick={(e) => {
                           e.stopPropagation();
                           if (study.title === "TradersCircuit") {
-                            navigateTo("/projects/traderscircuit");
+                            navigate("/projects/traderscircuit");
                           } else if (study.title === "Prosperty") {
-                            navigateTo("/projects/prosperty");
+                            navigate("/projects/prosperty");
                           } else if (study.title === "GoodTimes") {
-                            navigateTo("/projects/goodtimes");
+                            navigate("/projects/goodtimes");
                           }
                         }}
                       >
@@ -1180,6 +1183,7 @@ const PWASuccessStories = () => {
 
 // Mid-Page CTA
 const PWAInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1218,7 +1222,7 @@ const PWAInlineCTA = () => {
 
             <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">
                 <Eye className="w-6 h-6 flex-shrink-0" />
@@ -1308,6 +1312,7 @@ const PWAFAQs = () => {
 
 // Final CTA Section
 const PWAFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1360,7 +1365,7 @@ const PWAFinalCTA = () => {
           >
             <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" />
@@ -1389,7 +1394,7 @@ const PWAFinalCTA = () => {
 export const PWADevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1401,11 +1406,16 @@ export const PWADevelopment = () => {
         <PWABenefits />
       </section>
 
-      {/* How PWAs Work */}
+       {/* Case Studies */}
       <section className="bg-card">
-        <HowPWAsWork />
+        <PWASuccessStories />
       </section>
 
+      {/* How PWAs Work */}
+      {/* <section className="bg-card">
+        <HowPWAsWork />
+      </section> */}
+
       {/* Development Process */}
       <section className="bg-background">
         <PWAProcess />
@@ -1421,11 +1431,6 @@ export const PWADevelopment = () => {
         <PWATechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-card">
-        <PWASuccessStories />
-      </section>
-
       <HireDeveloperSection
         title="Augment Your Team with Top PWA Developers"
         description="Build fast, installable, and offline-first Progressive Web Apps that feel like native mobile apps."
@@ -1455,14 +1460,14 @@ export const PWADevelopment = () => {
 
 
       {/* Mid-Page CTA */}
-      <section className="bg-background">
+      {/* <section className="bg-background">
         <PWAInlineCTA />
-      </section>
+      </section> */}
 
       {/* FAQs */}
-      <section className="bg-background">
+      {/* <section className="bg-background">
         <PWAFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-card">
@@ -1471,7 +1476,7 @@ export const PWADevelopment = () => {
 
       {/* Footer */}
       <section className="bg-background">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );