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

pages/UserResearchTesting.tsx

@@ -37,11 +37,12 @@ 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";
 
 // User Research & Testing Hero Section
 const ResearchHeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -127,7 +128,7 @@ const ResearchHeroWithCTA = () => {
               className="flex flex-col sm:flex-row gap-4"
             >
               <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">
                   <Users className="w-5 h-5 flex-shrink-0" />
@@ -887,6 +888,7 @@ const ResearchCaseStudies = () => {
 
 // Mid-Page CTA
 const ResearchInlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -921,7 +923,7 @@ const ResearchInlineCTA = () => {
             </p>
             
             <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">
                 <MessageCircle className="w-6 h-6 flex-shrink-0" />
@@ -976,6 +978,8 @@ const HireResearchers = () => {
     }
   ];
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32">
       <div className="container mx-auto px-6 lg:px-8">
@@ -1050,7 +1054,7 @@ const HireResearchers = () => {
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <ShimmerButton className="text-lg px-8 py-4"
-            onClick={() => navigateTo("/hire-talent/user-research-testing-developers")}
+            onClick={() => navigate("/hire-talent/user-research-testing-developers")}
             >
               <div className="inline-flex items-center gap-2">
                 <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1141,6 +1145,7 @@ const ResearchFAQs = () => {
 
 // Final CTA Section
 const ResearchFinalCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1189,7 +1194,7 @@ const ResearchFinalCTA = () => {
             className="space-y-8"
           >
             <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" />
@@ -1218,7 +1223,7 @@ const ResearchFinalCTA = () => {
 export const UserResearchTesting = () => {
   return (
     <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}
       
       {/* Hero Section */}
       <section className="bg-black">
@@ -1229,6 +1234,11 @@ export const UserResearchTesting = () => {
       <section className="bg-background">
         <ResearchBenefits />
       </section>
+
+       {/* Case Studies */}
+      <section className="bg-background">
+        <ResearchCaseStudies />
+      </section>
       
       {/* Research Process */}
       <section className="bg-card">
@@ -1245,15 +1255,10 @@ export const UserResearchTesting = () => {
         <ResearchTools />
       </section>
       
-      {/* Case Studies */}
-      <section className="bg-background">
-        <ResearchCaseStudies />
-      </section>
-      
       {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <ResearchInlineCTA />
-      </section>
+      </section> */}
       
       {/* Hire Researchers */}
       <section className="bg-background">
@@ -1261,9 +1266,9 @@ export const UserResearchTesting = () => {
       </section>
       
       {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
         <ResearchFAQs />
-      </section>
+      </section> */}
       
       {/* Final CTA */}
       <section className="bg-background">
@@ -1271,8 +1276,8 @@ export const UserResearchTesting = () => {
       </section>
       
       {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
       </section>
     </div>
   );