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

pages/AndroidAppDevelopment.tsx

@@ -39,7 +39,7 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import androidVectorImage from "../src/images/android-vector.png";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import ranoutofImage from "../src/images/ranoutof.webp"
 import tradersCircuitImage from "../src/images/traders-circuit.webp";
@@ -49,6 +49,7 @@ import awsLogoImage from "../src/images/aws-logo.png";
 
 // Android Hero Section with Android device mockups and Android vector
 const AndroidHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -169,7 +170,7 @@ const AndroidHeroWithCTA = () => {
             >
               <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">
                   <svg
@@ -782,6 +783,7 @@ const AndroidTechStack = () => {
 
 // Android Case Studies
 const AndroidCaseStudies = () => {
+  const navigate = useNavigate();
   const caseStudies = [
     {
       title: "Household Management Revolution",
@@ -905,7 +907,7 @@ const AndroidCaseStudies = () => {
                       variant="ghost"
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
-                      onClick={() => navigateTo(study.buttonLink)}
+                      onClick={() => navigate(study.buttonLink)}
                     >
                       <span className="text-sm font-medium">
                         VIEW CASE STUDY
@@ -925,6 +927,7 @@ const AndroidCaseStudies = () => {
 
 // Mid-Page CTA
 const AndroidInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -969,7 +972,7 @@ const AndroidInlineCTA = () => {
 
             <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">
                 <svg
@@ -997,6 +1000,7 @@ const AndroidInlineCTA = () => {
 
 // Hire Android Developers Section
 const HireAndroidDevelopers = () => {
+  const navigate = useNavigate();
   const developerTypes = [
     {
       title: "Senior Android Developer",
@@ -1115,7 +1119,7 @@ const HireAndroidDevelopers = () => {
         >
           <ShimmerButton
             className="px-8 py-4"
-            onClick={() => navigateTo("/hire-talent/android-app-developers")}
+            onClick={() => navigate("/hire-talent/android-app-developers")}
           >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1213,6 +1217,7 @@ const AndroidFAQs = () => {
 
 // Final CTA Section
 const AndroidFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1277,7 +1282,7 @@ const AndroidFinalCTA = () => {
           >
             <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">
                 <svg
@@ -1318,7 +1323,7 @@ const AndroidFinalCTA = () => {
 export const AndroidAppDevelopment = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1330,6 +1335,11 @@ export const AndroidAppDevelopment = () => {
         <AndroidKeyBenefits />
       </section>
 
+      {/* Case Studies */}
+      <section className="bg-background">
+        <AndroidCaseStudies />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <AndroidProcessTimeline />
@@ -1345,15 +1355,10 @@ export const AndroidAppDevelopment = () => {
         <AndroidTechStack />
       </section>
 
-      {/* Case Studies */}
-      <section className="bg-background">
-        <AndroidCaseStudies />
-      </section>
-
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidInlineCTA />
-      </section>
+      </section> */}
 
       {/* Hire Android Developers */}
       <section className="bg-background">
@@ -1361,9 +1366,9 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <AndroidFAQs />
-      </section>
+      </section> */}
 
       {/* Final CTA */}
       <section className="bg-background">
@@ -1371,8 +1376,8 @@ export const AndroidAppDevelopment = () => {
       </section>
 
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );