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

pages/Solutions.tsx

@@ -1,31 +1,31 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
-import { Footer } from "../components/Footer";
-import { ProcessSection } from "../components/ProcessSection";
-import { FAQSection } from "../components/FAQSection";
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
-import { Button } from "../components/ui/button";
-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 { 
-  Rocket, Target, Building, Zap, Shield, Users, Star, 
-  ArrowRight, ChevronRight, Clock, TrendingUp, Layers, 
-  Layout, Monitor, Lock, RefreshCcw, ShieldCheck,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, ZapIcon, Video, MessageCircle,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, 
-  Bot, Server, Database, Briefcase, Factory, Cpu, 
-  PieChart, BarChart3, Workflow, Wrench, Gauge
+import {
+  Building,
+  Calendar,
+  CheckCircle,
+  ChevronRight,
+  Eye,
+  Handshake,
+  Lightbulb,
+  RefreshCcw,
+  Rocket,
+  Shield,
+  Target,
+  TrendingUp,
+  Workflow
 } from "lucide-react";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { useNavigate } from "react-router-dom";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
+  const navigate = useNavigate();
   return (
     <section className="relative py-20 overflow-hidden bg-black">
       <div className="container mx-auto px-6 lg:px-8">
@@ -65,7 +65,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('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigate('/contact/schedule-a-discovery-call')}>
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Schedule Strategy Call</span>
@@ -75,7 +75,7 @@ const HeroWithCTA = () => {
                 variant="secondary"
                 size="lg"
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigate('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>Success Stories</span>
@@ -360,6 +360,8 @@ const TabbedSolutionDisplay = () => {
     }
   ];
 
+  const navigate = useNavigate();
+
   return (
     <section className="py-32 bg-background">
       <div className="container mx-auto px-6 lg:px-8">
@@ -396,7 +398,7 @@ const TabbedSolutionDisplay = () => {
                 viewport={{ once: true }}
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
-                onClick={() => navigateTo(solution.link)}
+                onClick={() => navigate(solution.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">
@@ -440,6 +442,7 @@ const TabbedSolutionDisplay = () => {
 
 // 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">
@@ -482,7 +485,7 @@ const InlineCTA = () => {
             <div className="flex flex-col 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/schedule-a-discovery-call')}
+                onClick={() => navigate('/contact/schedule-a-discovery-call')}
               >
                 <div className="inline-flex items-center gap-3">
                   <Calendar className="w-6 h-6 flex-shrink-0" />
@@ -529,7 +532,7 @@ const solutionsFAQs = [
 export function Solutions() {
   return (
     <div className="dark min-h-screen bg-background">
-      <Navigation />
+      {/* <Navigation /> */}
       <HeroWithCTA />
       <HorizontalTagScroller />
       <SideBySideContentWithIcons />
@@ -541,7 +544,7 @@ export function Solutions() {
         subtitle="Get answers to common questions about our strategic business solutions."
         faqs={solutionsFAQs}
       />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }