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

pages/DesignExperience.tsx

@@ -13,7 +13,6 @@ import {
   UserPlus,
   Users
 } from "lucide-react";
-import { navigateTo } from "../App";
 import { FAQSection } from "../components/FAQSection";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
@@ -23,9 +22,11 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <Helmet>
@@ -119,7 +120,7 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/start-a-project')}
+                onClick={() => navigate('/start-a-project')}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-5 h-5 flex-shrink-0" />
@@ -129,7 +130,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-5 h-5 flex-shrink-0" />
                 <span>View Design Portfolio</span>
@@ -360,6 +361,7 @@ const SideBySideContentWithIcons = () => {
 
 // Service Categories Grid
 const TabbedServiceDisplay = () => {
+  const navigate = useNavigate();
   const services = [
     {
       title: "UI/UX Design",
@@ -435,7 +437,7 @@ const TabbedServiceDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(service.link)}
+                onClick={() => navigate(service.link)}
               >
                 <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                   <div className="flex flex-col items-start space-y-6">
@@ -464,6 +466,7 @@ const TabbedServiceDisplay = () => {
 
 // Updated CTA Section with new design
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -506,8 +509,8 @@ const InlineCTA = () => {
             <div className="flex flex-col items-center gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
-                onClick={() => navigateTo("/start-a-project")}
+                // onClick={() => navigate('/contact/schedule-a-discovery-call')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <PenTool className="w-6 h-6 flex-shrink-0" />
@@ -529,6 +532,7 @@ const InlineCTA = () => {
 
 // Design Specialists Section
 const HireDevelopersSection = () => {
+  const navigate = useNavigate();
   const specialists = [
     {
       title: "UI/UX Designers",
@@ -637,7 +641,7 @@ const HireDevelopersSection = () => {
                     <div className="p-8 pt-0 mt-auto space-y-3">
                       <ShimmerButton
                         className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
-                        onClick={() => navigateTo(specialist.link)}
+                        onClick={() => navigate(specialist.link)}
                       >
                         <div className="inline-flex items-center justify-center gap-2">
                           <UserPlus className="w-4 h-4 flex-shrink-0" />
@@ -683,7 +687,7 @@ const designExperienceFAQs = [
 export function DesignExperience() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -696,7 +700,7 @@ export function DesignExperience() {
         subtitle="Get answers to common questions about our design and user experience services."
         faqs={designExperienceFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }