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

2025-09-05 12:55:58 +05:30
parent f31dc15ef4 a43225db9b
commit 339bc27d4e
21 changed files with 2023 additions and 1878 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,46 +1,34 @@
-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 { 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
-          onClick={() => window.location.href = '/'}
-          className="brand-button-system"
-        >
-          Back to Home
-        </button>
+        <div className="flex items-center justify-center">
+          <button
+            onClick={() => navigate('/')}
+            className="brand-button-system"
+          >
+            Back to Home
+          </button>
+        </div>
      </div>
    </div>
  );
--- a/src/components/BookFacility.tsx
+++ b/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
--- a/src/components/README-ReusableCarousel.md
+++ b/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}
--- a/src/components/StackedOfferSection.tsx
+++ b/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">
--- a/src/components/VirtualTour.tsx
+++ b/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?
--- a/src/components/about/OurExpertise.tsx
+++ b/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"
--- a/src/components/about/OurImpact.tsx
+++ b/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"
--- a/src/components/about/OurVision.tsx
+++ b/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 */}
--- a/src/components/services/Consulting.tsx
+++ b/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 */}
--- a/src/components/services/CultureCompetence.tsx
+++ b/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 */}
--- a/src/components/services/ExecutiveCoaching.tsx
+++ b/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 */}
--- a/src/components/services/LeadershipDevelopment.tsx
+++ b/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 */}
--- a/src/components/services/LearningFacility.tsx
+++ b/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">
--- a/src/components/services/ManagementDevelopment.tsx
+++ b/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 */}
--- a/src/main.tsx
+++ b/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";

--- a/src/services/baseQuery.ts
+++ b/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;
--- a/src/services/storeSwitchToDashboard.tsx
+++ b/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;
--- a/src/store/Store.tsx
+++ b/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;
--- a/src/styles/globals.css
+++ b/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);
+  }
 }