type error fix

src/App.tsx

@@ -1,52 +1,35 @@
-import React from 'react';
-import { Routes, Route } from "react-router-dom";
-import { AuthProvider } from "./components/AuthContext";
-import { CartProvider } from "./components/CartContext";
-import { Navigation } from "./components/Navigation";
-import HeroSection from "./components/HeroSection";
-import { StatsSection } from "./components/StatsSection";
-import { LogosSection } from "./components/LogosSection";
-import { ServicesSection } from "./components/ServicesSection";
-import { VirtualSpaceSection } from "./components/VirtualSpaceSection";
-import { TestimonialsSection } from "./components/TestimonialsSection";
-import { UpcomingWebinarsSection } from "./components/UpcomingWebinarsSection";
-import { InsightsSection } from "./components/InsightsSection";
-import { CTABannerSection } from "./components/CTABannerSection";
-import { WhitepapersSection } from "./components/WhitepapersSection";
-import { Footer } from "./components/Footer";
+import { Route, Routes, useNavigate } from "react-router-dom";
+import { OurExpertise } from "./components/about/OurExpertise";
+import { OurImpact } from "./components/about/OurImpact";
+import { OurVision } from "./components/about/OurVision";
 import { AIChatbot } from "./components/AIChatbot";
+import { Articles } from "./components/Articles";
+import { AuthProvider } from "./components/AuthContext";
+import { BlogDetail } from "./components/BlogDetail";
+import { Blogs } from "./components/Blogs";
+import { Cart } from "./components/Cart";
+import { CartProvider } from "./components/CartContext";
+import { Contact } from "./components/Contact";
+import { CorporateSignIn } from "./components/CorporateSignIn";
+import { CorporateSignUp } from "./components/CorporateSignUp";
+import { Footer } from "./components/Footer";
 import { LeadershipJourneyPage } from "./components/LeadershipJourneyPage";
-import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment";
+import { LearningOnline } from "./components/LearningOnline";
+import { Navigation } from "./components/Navigation";
+import { ProgrammeDetail } from "./components/ProgrammeDetail";
+import { SelfLearnerSignIn } from "./components/SelfLearnerSignIn";
+import { SelfLearnerSignUp } from "./components/SelfLearnerSignUp";
 import { Consulting } from "./components/services/Consulting";
 import { CultureCompetence } from "./components/services/CultureCompetence";
 import { ExecutiveCoaching } from "./components/services/ExecutiveCoaching";
-import { ManagementDevelopment } from "./components/services/ManagementDevelopment";
+import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment";
 import { LearningFacility } from "./components/services/LearningFacility";
-import { OurVision } from "./components/about/OurVision";
-import { OurExpertise } from "./components/about/OurExpertise";
-import { OurImpact } from "./components/about/OurImpact";
-import { Contact } from "./components/Contact";
-import { Cart } from "./components/Cart";
-import { CorporateSignIn } from "./components/CorporateSignIn";
-import { SelfLearnerSignIn } from "./components/SelfLearnerSignIn";
-import { CorporateSignUp } from "./components/CorporateSignUp";
-import { SelfLearnerSignUp } from "./components/SelfLearnerSignUp";
-import { ProgrammeDetail } from "./components/ProgrammeDetail";
-import { Articles } from "./components/Articles";
-import { Blogs } from "./components/Blogs";
-import { BlogDetail } from "./components/BlogDetail";
-import { Webinars } from "./components/Webinars";
-import { WebinarsPage } from "./components/WebinarsPage";
-import WebinarsListing from "./components/WebinarsListing";
-import WebinarDetail from "./components/WebinarDetail";
-import { LearningOnline } from "./components/LearningOnline";
+import { ManagementDevelopment } from "./components/services/ManagementDevelopment";
 import { Terms } from "./components/Terms";
+import { Webinars } from "./components/Webinars";
+import WebinarsListing from "./components/WebinarsListing";
+import { WebinarsPage } from "./components/WebinarsPage";
 import HomePage from './pages/HomePage';
-// import EnrollPlaceholder from "./components/EnrollPlaceholder";
-// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder";
-// import DashboardPlaceholder from "./components/DashboardPlaceholder";
-// import CheckoutPlaceholder from "./components/CheckoutPlaceholder";
-// import HomePage from "./components/HomePage";
 
 export default function App() {
   return (
@@ -134,26 +117,9 @@ export default function App() {
   );
 }
 
-// Home Page Component (extracted from your default landing page)
-// function HomePage() {
-//   return (
-//     <>
-//       <HeroSection />
-//       <StatsSection />
-//       <LogosSection />
-//       <ServicesSection />
-//       <VirtualSpaceSection />
-//       <TestimonialsSection />
-//       <UpcomingWebinarsSection />
-//       <InsightsSection />
-//       <WhitepapersSection />
-//       <CTABannerSection />
-//     </>
-//   );
-// }
-
 // 404 Not Found Component
 function NotFound() {
+  const navigate = useNavigate();
   return (
     <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#FFFFFF' }}>
       <div className="text-center">
@@ -161,13 +127,15 @@ function NotFound() {
         <p className="text-body-lg text-muted mb-8">
           The page you're looking for doesn't exist.
         </p>
+        <div className="flex items-center justify-center">
           <button
-          onClick={() => window.location.href = '/'}
+          onClick={()=> navigate('/')}
           className="brand-button-system"
         >
           Back to Home
         </button>
         </div>
       </div>
+    </div>
   );
 }

src/components/StackedOfferSection.tsx

@@ -22,6 +22,7 @@ export type StackedOfferCard = {
   subtitle?: string;
   description?: string;
   badge?: string;
+  color?: string;
   features?: string[];
   stats?: Array<{ label: string; value: string }>;
   icon?: React.ComponentType<any>;
@@ -108,7 +109,7 @@ export default function StackedOfferSection({
 
   // Constants - Increased card height from 400px to 480px
   const CARD_HEIGHT = 480;
-  const SCROLL_PER_CARD = 200; // Pixels to scroll for each card
+  const SCROLL_PER_CARD = 500; // Pixels to scroll for each card
 
   useEffect(() => {
     let ticking = false;

src/components/services/ManagementDevelopment.tsx

@@ -238,7 +238,7 @@ export function ManagementDevelopment() {
         </div>
 
         <div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
-          <div className="container mx-auto section-margin-x py-8">
+          <div className=" mx-auto section-margin-x py-8">
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
               <div>
                 <div className="text-h2-white mb-2">85%</div>

src/main.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+import App from "./App";
 import "../src/styles/globals.css";
 import { BrowserRouter } from "react-router-dom";
 

src/styles/globals.css

@@ -344,13 +344,13 @@
     border: none;
     cursor: pointer;
     background-color: var(--color-primary);
-    color: var(--color-black);
+    color: var(--background);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   }
 
   .brand-button-system:hover {
     background-color: #030359;
-    color: var(--color-black);
+    color: var(--background);
     transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   }
@@ -5286,4 +5286,8 @@ html {
     width: 3rem;
     height: 3rem;
   }
+  .text-h2-white {
+   font-size: calc(var(--font-h2) * 0.8); /* reduce by 20% */
+    line-height: calc(var(--line-height-h2) * 0.9);
+  }
 }