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

pages/PredictiveAnalyticsForecasting.tsx

@@ -47,11 +47,13 @@ import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { AIStrategyTargetAudience } from "./AIStrategyConsulting";
 
 // Predictive Analytics & Forecasting Hero Section
 const PredictiveAnalyticsHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -140,7 +142,7 @@ const PredictiveAnalyticsHeroWithCTA = () => {
             >
               <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">
                   <TrendingUp className="w-5 h-5 flex-shrink-0" />
@@ -670,14 +672,12 @@ const PredictiveAnalyticsProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                  } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                    } flex-col lg:gap-16 gap-8`}
                 >
                   <div
-                    className={`flex-1 ${
-                      isEven ? "lg:text-right" : "lg:text-left"
-                    } text-center lg:text-left`}
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
+                      } text-center lg:text-left`}
                   >
                     <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -1009,10 +1009,9 @@ const PredictiveAnalyticsTechStack = () => {
               >
                 <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
                   <div
-                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
-                      colorClasses[tech.color as keyof typeof colorClasses] ||
+                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
                       "bg-accent/20 text-accent border-accent/30"
-                    }`}
+                      }`}
                   >
                     <IconComponent className="w-6 h-6" />
                   </div>
@@ -1173,6 +1172,7 @@ const PredictiveAnalyticsCaseStudies = () => {
 
 // Mid-Page CTA
 const PredictiveAnalyticsInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1211,7 +1211,7 @@ const PredictiveAnalyticsInlineCTA = () => {
 
             <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" />
@@ -1476,6 +1476,7 @@ const PredictiveAnalyticsFAQs = () => {
 
 // Final CTA Section
 const PredictiveAnalyticsFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1528,7 +1529,7 @@ const PredictiveAnalyticsFinalCTA = () => {
           >
             <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">
                 <Telescope className="w-6 h-6 flex-shrink-0" />
@@ -1558,7 +1559,7 @@ const PredictiveAnalyticsFinalCTA = () => {
 export const PredictiveAnalyticsForecasting = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
 
       {/* Hero Section */}
       <section className="bg-black">
@@ -1570,6 +1571,11 @@ export const PredictiveAnalyticsForecasting = () => {
         <PredictiveAnalyticsBenefits />
       </section>
 
+      {/* Tech Stack */}
+      <section className="bg-card">
+        <PredictiveAnalyticsTechStack />
+      </section>
+
       {/* Development Process */}
       <section className="bg-card">
         <PredictiveAnalyticsProcess />
@@ -1580,9 +1586,9 @@ export const PredictiveAnalyticsForecasting = () => {
         <PredictiveAnalyticsServices />
       </section>
 
-      {/* Tech Stack */}
+      {/* Target Audience */}
       <section className="bg-card">
-        <PredictiveAnalyticsTechStack />
+        <AIStrategyTargetAudience />
       </section>
 
       {/* Case Studies */}
@@ -1612,7 +1618,7 @@ export const PredictiveAnalyticsForecasting = () => {
 
       {/* Footer */}
       <section className="bg-card">
-        <Footer />
+        {/* <Footer /> */}
       </section>
     </div>
   );