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

pages/AboutWDI.tsx

@@ -9,7 +9,6 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import {
   ArrowRight, Users, Globe, Award, Target, Heart, Lightbulb,
   Rocket, TrendingUp, CheckCircle, Star, Coffee, Monitor,
@@ -18,9 +17,11 @@ import {
 } from "lucide-react";
 import { Helmet } from "react-helmet-async";
 import { CarouselTestimonials } from "@/components/CarouselTestimonials";
+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>
@@ -106,7 +107,7 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/services')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/services')}>
                 <div className="inline-flex items-center gap-2">
                   <Briefcase className="w-4 h-4 flex-shrink-0" />
                   <span>Explore Our Services</span>
@@ -116,7 +117,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4 h-auto"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View Our Portfolio</span>
@@ -298,6 +299,7 @@ const ImpactNumbersSection = () => {
 
 // Learn More About WDI Section
 const LearnMoreSection = () => {
+  const navigate = useNavigate();
   const sections = [
     {
       title: "Our History",
@@ -373,7 +375,7 @@ const LearnMoreSection = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(section.link)}
+                onClick={() => navigate(section.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">
@@ -541,6 +543,7 @@ const MissionSection = () => {
 
 // Updated CTA Section
 const InlineCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="py-20 bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -584,8 +587,8 @@ const InlineCTA = () => {
             <div className="flex flex-col sm:flex-row items-start 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')}
-                onClick={() => navigateTo("/start-a-project")}
+                // onClick={() => navigate('/contact')}
+                onClick={() => navigate("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Mail className="w-6 h-6 flex-shrink-0" />
@@ -597,7 +600,7 @@ const InlineCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-xl px-10 py-5 rounded-2xl h-[56px]"
-                onClick={() => navigateTo('/services')}
+                onClick={() => navigate('/services')}
               >
                 <Briefcase className="w-6 h-6 flex-shrink-0" />
                 <span>Explore Our Services</span>
@@ -637,7 +640,7 @@ const aboutWDIFAQs = [
 export const AboutWDI = () => {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* {/* <Navigation /> */}
       <HeroWithCTA />
       <WhyChooseWDISection />
       <ImpactNumbersSection />
@@ -651,7 +654,7 @@ export const AboutWDI = () => {
         subtitle="Get answers to common questions about our company and mission."
         faqs={aboutWDIFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 };