Merge branch 'main' of http://git.wdipl.com/PriyanshuVishwakarma/KLC-Website into parth-dev

package.json

@@ -29,6 +29,7 @@
             "@radix-ui/react-toggle": "^1.1.2",
             "@radix-ui/react-toggle-group": "^1.1.2",
             "@radix-ui/react-tooltip": "^1.1.8",
+            "@reduxjs/toolkit": "^2.9.0",
             "@tailwindcss/postcss": "^4.1.12",
             "class-variance-authority": "^0.7.1",
             "clsx": "*",
@@ -43,6 +44,7 @@
             "react-day-picker": "^8.10.1",
             "react-dom": "^18.3.1",
             "react-hook-form": "^7.55.0",
+            "react-redux": "^9.2.0",
             "react-resizable-panels": "^2.1.7",
             "react-router-dom": "^7.8.2",
             "react-slick": "^0.31.0",

src/App.tsx

@@ -1,46 +1,34 @@
-import React from 'react';
+import { Route, Routes, useNavigate } from "react-router-dom";
-import { Routes, Route } from "react-router-dom";
+import { OurExpertise } from "./components/about/OurExpertise";
-import { AuthProvider } from "./components/AuthContext";
+import { OurImpact } from "./components/about/OurImpact";
-import { CartProvider } from "./components/CartContext";
+import { OurVision } from "./components/about/OurVision";
-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 { 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 { ManagementDevelopment } from "./components/services/ManagementDevelopment";
-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 { 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 { AboutUs } from './components/AboutUs';
 import { Services } from './components/Services';
@@ -143,26 +131,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">
@@ -170,12 +141,14 @@ function NotFound() {
         <p className="text-body-lg text-muted mb-8">
           The page you're looking for doesn't exist.
         </p>
-        <button
+        <div className="flex items-center justify-center">
-          onClick={() => window.location.href = '/'}
+          <button
-          className="brand-button-system"
+            onClick={() => navigate('/')}
-        >
+            className="brand-button-system"
-          Back to Home
+          >
-        </button>
+            Back to Home
+          </button>
+        </div>
       </div>
     </div>
   );

src/components/BookFacility.tsx

@@ -227,7 +227,7 @@ export function BookFacility() {
     return (
       <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
         <div className="pt-40 pb-16">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="max-w-2xl mx-auto text-center">
               <div 
                 className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"
@@ -295,7 +295,7 @@ export function BookFacility() {
     return (
       <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
         <div className="pt-40 pb-16">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="max-w-2xl mx-auto text-center">
               <div 
                 className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"
@@ -355,7 +355,7 @@ export function BookFacility() {
     return (
       <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
         <div className="pt-40 pb-16">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="max-w-4xl mx-auto">
               {/* Confirmation Header */}
               <div className="text-center mb-8">
@@ -637,7 +637,7 @@ export function BookFacility() {
       </section>
       
       <div id="booking-section" className="py-8 lg:py-12">
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="max-w-6xl mx-auto">
             {/* Back Button */}
             <Button

src/components/README-ReusableCarousel.md

@@ -197,7 +197,7 @@ const trainingConfig: CarouselConfig = {
 export function TrainingSection() {
   return (
     <section className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
-      <div className="container mx-auto section-margin-x">
+      <div className="mx-auto section-margin-x">
         <ReusableCarousel 
           items={trainingPrograms}
           config={trainingConfig}

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;
@@ -188,7 +189,7 @@ export default function StackedOfferSection({
         className="sticky top-0 py-20 min-h-screen flex items-center justify-center z-10" 
         style={{ backgroundColor: '#FFFFFF' }}
       >
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {/* Heading */}
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">

src/components/VirtualTour.tsx

@@ -417,7 +417,7 @@ export function VirtualTour() {
         </button>
 
         {/* Hero Content */}
-        <div className="relative z-10 container mx-auto section-margin-x h-full flex flex-col justify-center">
+        <div className="relative z-10 mx-auto section-margin-x h-full flex flex-col justify-center">
           <div className="max-w-6xl mx-auto text-center space-y-12">
             
             {/* Main Content */}
@@ -469,7 +469,7 @@ export function VirtualTour() {
 
       {/* Facility Stats Card */}
       <div className="relative z-30 -mt-20 mb-12">
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="flex justify-center">
             <Card className="border border-border/30 shadow-lg rounded-xl overflow-hidden max-w-4xl w-full" style={{ backgroundColor: 'var(--color-bg-white)' }}>
               <CardContent className="p-6">
@@ -527,7 +527,7 @@ export function VirtualTour() {
 
       {/* Virtual Tour Section */}
       <section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {!isVirtualTourActive ? (
             /* Tour Preview */
             <div className="text-center max-w-7xl mx-auto space-y-16">
@@ -1215,7 +1215,7 @@ export function VirtualTour() {
 
       {/* FAQ Section */}
       <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center max-w-3xl mx-auto space-y-6 mb-16">
             <Badge 
               className="text-body px-4 py-2"
@@ -1303,7 +1303,7 @@ export function VirtualTour() {
           background: 'linear-gradient(to right, var(--color-primary), var(--color-primary), rgba(4, 4, 91, 0.9))'
         }}
       >
-        <div className="container mx-auto section-margin-x text-center">
+        <div className="mx-auto section-margin-x text-center">
           <div className="max-w-4xl mx-auto space-y-8">
             <h2 className="text-h2 text-white">
               Ready to Transform Your Team?

src/components/about/OurExpertise.tsx

@@ -118,7 +118,7 @@ export function OurExpertise() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -158,7 +158,7 @@ export function OurExpertise() {
 
         {/* Statistics Section - Embedded in Hero */}
         <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">152+</div>
@@ -193,7 +193,7 @@ export function OurExpertise() {
 
       {/* Expertise Overview - Clean Standard Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16">
             <h2 className="text-h2 mb-6">Four Pillars of Excellence</h2>
             <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
@@ -475,7 +475,7 @@ export function OurExpertise() {
 
       {/* Consulting & Advisory Section - Reusable Carousel Design */}
       <section id="consulting" className="py-24" style={{ backgroundColor: 'rgba(247, 247, 253, 0.3)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {/* Using the new reusable carousel component */}
           <ConsultingServicesCarousel consultingServices={consultingServices} />
         </div>
@@ -483,7 +483,7 @@ export function OurExpertise() {
 
       {/* Leadership Development Section - Split Layout */}
       <section id="leadership-development" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {/* Leadership Development Framework - Our Vision Style */}
           <div className="max-w-7xl mx-auto mb-16">
             <div className="grid lg:grid-cols-3 gap-16 items-start">
@@ -690,7 +690,7 @@ export function OurExpertise() {
 
       {/* Platform Features Section - Redesigned Layout */}
       <section id="platform-features" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {/* Header */}
           <div className="text-center mb-20">
             <Badge 
@@ -981,7 +981,7 @@ export function OurExpertise() {
 
       {/* Case Studies Section - Success Stories */}
       <section id="case-studies" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16">
             <Badge 
               className="mb-6 text-body px-4 py-2"

src/components/about/OurImpact.tsx

@@ -283,7 +283,7 @@ export function OurImpact() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -323,7 +323,7 @@ export function OurImpact() {
 
         {/* Statistics Section - Embedded in Hero */}
         <div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20" ref={statsRef}>
-          <div className="container mx-auto section-margin-x py-12">
+          <div className="mx-auto section-margin-x py-12">
             <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">
@@ -364,7 +364,7 @@ export function OurImpact() {
 
       {/* Partners Section - Redesigned According to JSON Config */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
 
 
           {/* Statistics Section - Landing Page Style */}
@@ -577,7 +577,7 @@ export function OurImpact() {
 
       {/* Additional Metrics Section - Redesigned */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16">
             <Badge 
               className="mb-6 text-body px-4 py-2"

src/components/about/OurVision.tsx

@@ -176,7 +176,7 @@ export function OurVision() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -216,7 +216,7 @@ export function OurVision() {
 
         {/* Vision Statistics Section - Embedded in Hero */}
         <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">3</div>
@@ -241,7 +241,7 @@ export function OurVision() {
 
       {/* Vision Pillars - Redesigned */}
       <section id="vision-pillars" className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16">
             <Badge 
               className="mb-6 text-body px-4 py-2"
@@ -396,7 +396,7 @@ export function OurVision() {
 
       {/* How Our Work Aligns - Redesigned Interactive Timeline */}
       <section className="py-20" style={{ background: 'linear-gradient(135deg, rgba(247, 247, 253, 0.3) 0%, rgba(248, 195, 1, 0.05) 100%)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16">
             <Badge 
               className="mb-6 text-body px-4 py-2"
@@ -587,7 +587,7 @@ export function OurVision() {
 
       {/* Leadership Framework CTA - Redesigned */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="max-w-7xl mx-auto">
             <div className="grid lg:grid-cols-2 gap-16 items-center">
               {/* Content Side */}

src/components/services/Consulting.tsx

@@ -198,7 +198,7 @@ export function Consulting() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -237,7 +237,7 @@ export function Consulting() {
         </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">96%</div>
@@ -265,7 +265,7 @@ export function Consulting() {
 
       {/* Who It's For Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
             <div className="lg:pr-8">
               <h2 className="text-h2 mb-6 text-black leading-tight">
@@ -326,7 +326,7 @@ export function Consulting() {
 
       {/* Expected Outcomes Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               Expected <span className="text-primary">Outcomes</span>
@@ -532,7 +532,7 @@ export function Consulting() {
 
       {/* Our Approach Section - Carousel Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
             
             {/* Left Side - Title, Description & Navigation */}

src/components/services/CultureCompetence.tsx

@@ -202,7 +202,7 @@ export function CultureCompetence() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -241,7 +241,7 @@ export function CultureCompetence() {
         </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">87%</div>
@@ -269,7 +269,7 @@ export function CultureCompetence() {
 
       {/* Who It's For Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
             <div className="lg:pr-8">
               <h2 className="text-h2 mb-6 text-black leading-tight">
@@ -330,7 +330,7 @@ export function CultureCompetence() {
 
       {/* Expected Outcomes Section */}
       <section className="py-20" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               Expected <span className="text-primary">Outcomes</span>
@@ -536,7 +536,7 @@ export function CultureCompetence() {
 
       {/* Our Approach Section - Carousel Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
             
             {/* Left Side - Title, Description & Navigation */}

src/components/services/ExecutiveCoaching.tsx

@@ -198,7 +198,7 @@ export function ExecutiveCoaching() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -237,7 +237,7 @@ export function ExecutiveCoaching() {
         </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">91%</div>
@@ -265,7 +265,7 @@ export function ExecutiveCoaching() {
 
       {/* Who It's For Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
             <div className="lg:pr-8">
               <h2 className="text-h2 mb-6 text-black leading-tight">
@@ -326,7 +326,7 @@ export function ExecutiveCoaching() {
 
       {/* Expected Outcomes Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               Expected <span className="text-primary">Outcomes</span>
@@ -532,7 +532,7 @@ export function ExecutiveCoaching() {
 
       {/* Our Approach Section - Carousel Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
             
             {/* Left Side - Title, Description & Navigation */}

src/components/services/LeadershipDevelopment.tsx

@@ -202,7 +202,7 @@ export function LeadershipDevelopment() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -241,7 +241,7 @@ export function LeadershipDevelopment() {
         </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">94%</div>
@@ -269,7 +269,7 @@ export function LeadershipDevelopment() {
 
       {/* Who It's For Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
             <div className="lg:pr-8">
               <h2 className="text-h2 mb-6 text-black leading-tight">
@@ -330,7 +330,7 @@ export function LeadershipDevelopment() {
 
       {/* Expected Outcomes Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               Expected <span className="text-primary">Outcomes</span>
@@ -536,7 +536,7 @@ export function LeadershipDevelopment() {
 
       {/* Our Approach Section - Carousel Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
             
             {/* Left Side - Title, Description & Navigation */}

src/components/services/LearningFacility.tsx

@@ -517,7 +517,7 @@ export function LearningFacility() {
 
         {/* Centered content */}
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -562,7 +562,7 @@ export function LearningFacility() {
 
         {/* Stat strip */}
         <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-3 gap-8 text-center max-w-4xl mx-auto">
               <div>
                 <div className="text-h2-white mb-2">2 Acres</div>
@@ -583,7 +583,7 @@ export function LearningFacility() {
 
       {/* What We Offer Section */}
       <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               What We <span className="text-primary">Offer</span>
@@ -662,7 +662,7 @@ export function LearningFacility() {
 
       {/* Who It's For Section - match Services page (left intro + right accordion list) */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {/* Our Expertise "Our Services" style - horizontal carousel cards */}
           <div className="max-w-7xl mx-auto">
             {/* Header with eyebrow and controls */}
@@ -812,7 +812,7 @@ export function LearningFacility() {
 
       {/* Facility Features Section */}
       <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="mb-12 relative max-w-7xl mx-auto">
             <div className="flex-1 max-w-3xl">
               <BrandedTag text="FACILITY FEATURES" />
@@ -916,7 +916,7 @@ export function LearningFacility() {
 
       {/* Amenities Section */}
       <section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               World-Class <span className="text-primary">Amenities</span>
@@ -988,7 +988,7 @@ export function LearningFacility() {
 
       {/* Virtual Tour Section */}
       <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           {!isVirtualTourActive ? (
             /* Tour Preview */
             <div className="max-w-7xl mx-auto space-y-12">

src/components/services/ManagementDevelopment.tsx

@@ -199,7 +199,7 @@ export function ManagementDevelopment() {
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
+          <div className="mx-auto section-margin-x">
             <div className="text-center max-w-5xl mx-auto">
               <div className="branded-tag-system-white mb-8 justify-center">
                 <div className="dot"></div>
@@ -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>
@@ -266,7 +266,7 @@ export function ManagementDevelopment() {
 
       {/* Who It's For Section */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
             <div className="lg:pr-8">
               <h2 className="text-h2 mb-6 text-black leading-tight">
@@ -327,7 +327,7 @@ export function ManagementDevelopment() {
 
       {/* Expected Outcomes Section - Redesigned to Match Reference */}
       <section className="py-20" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="text-center mb-16 max-w-4xl mx-auto">
             <h2 className="text-h2 mb-6">
               Expected <span className="text-primary">Outcomes</span>
@@ -533,7 +533,7 @@ export function ManagementDevelopment() {
 
       {/* Our Approach Section - Carousel Design */}
       <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
-        <div className="container mx-auto section-margin-x">
+        <div className="mx-auto section-margin-x">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
             
             {/* Left Side - Title, Description & Navigation */}

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/services/baseQuery.ts

@@ -0,0 +1,15 @@
+import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const rawBaseQuery = fetchBaseQuery({
+  baseUrl: 'http://localhost:3000/api',
+});
+
+const baseQueryWithReauth = async (args: any, api: any, extraOptions: any) => {
+  const result = await rawBaseQuery(args, api, extraOptions);
+
+  // Optional: reauthentication logic if result.error?.status === 401
+
+  return result;
+};
+
+export default baseQueryWithReauth;

src/services/storeSwitchToDashboard.tsx

@@ -0,0 +1,37 @@
+// storeSwitchToDashboard.service.ts
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+export type ContactUsFormData = {
+  t_id: string;
+  name: string;
+  email: string;
+  country: string;
+  phone_number: string;
+  service: string;
+  budget: string;
+  message: string;
+  development_stage: string;
+  startTime: string;
+  nda_signing: string | boolean;
+  from_page: string;
+  ip?: string;
+  user_agent?: string;
+  contact_us_attachment?: File;
+};
+
+export const storeSwitchToDashboard = createApi({
+  reducerPath: "storeSwitchToDashboard",
+  baseQuery: baseQueryWithReauth,
+  endpoints: (builder) => ({
+    storeSwitchToDashboard: builder.mutation<void, FormData>({
+      query: (formData) => ({
+        url: "/api/store-contact-us-data",
+        method: "POST",
+        body: formData,
+      }),
+    }),
+  }),
+});
+
+export const { useStoreSwitchToDashboardMutation } = storeSwitchToDashboard;

src/store/Store.tsx

@@ -0,0 +1,16 @@
+// store.ts
+import { configureStore } from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import { storeSwitchToDashboard } from '../services/storeSwitchToDashboard';
+
+export const store = configureStore({
+  reducer: {
+    [storeSwitchToDashboard.reducerPath]: storeSwitchToDashboard.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(storeSwitchToDashboard.middleware),
+});
+
+setupListeners(store.dispatch);
+
+export default store;

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);
+  }
 }