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

components/HeroBanner.tsx

@@ -1,7 +1,7 @@
 import { Button } from "./ui/button";
 import { GridPattern } from "./GridPattern";
 import { ChevronRight } from "lucide-react";
-import { navigateTo } from "../App";
+import { useNavigate } from "react-router-dom";
 
 interface HeroBannerProps {
   category?: string;
@@ -24,6 +24,7 @@ export function HeroBanner({
   primaryCTA,
   secondaryCTA
 }: HeroBannerProps) {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 lg:py-32 bg-[#0E0E0E] overflow-hidden">
       <GridPattern />
@@ -54,7 +55,7 @@ export function HeroBanner({
             <Button
               size="lg"
               className="bg-gradient-to-r from-[#E5195E] to-[#C41653] hover:from-[#C41653] hover:to-[#A31348] text-white font-semibold px-8 py-4 h-auto text-base"
-              onClick={() => navigateTo(primaryCTA.href)}
+              onClick={() => navigate(primaryCTA.href)}
             >
               {primaryCTA.text}
             </Button>
@@ -64,7 +65,7 @@ export function HeroBanner({
                 variant="secondary"
                 size="lg"
                 className="bg-white/5 hover:bg-white/10 text-white border-white/20 hover:border-white/30 font-medium px-8 py-4 h-auto text-base"
-                onClick={() => navigateTo(secondaryCTA.href)}
+                onClick={() => navigate(secondaryCTA.href)}
               >
                 {secondaryCTA.text}
                 <ChevronRight className="w-4 h-4 ml-2" />