From a2f4dc1a3e4e616536b274746fae2537a4f935cb Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 28 Aug 2025 17:05:42 +0530
Subject: [PATCH] fix navigation

---
 src/App.tsx                     |   6 +-
 src/components/BookingModal.tsx | 201 ++++++++++++++++++++++++++++++++
 src/components/Navigation.tsx   |  82 +++++--------
 src/styles/globals.css          |   4 +-
 4 files changed, 239 insertions(+), 54 deletions(-)
 create mode 100644 src/components/BookingModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 501c93c..7785ff3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -55,6 +55,8 @@ export default function App() {
           className="min-h-screen main-content" 
           style={{ backgroundColor: '#FFFFFF' }}
         >
+
+           <Navigation />
           <Routes>
             {/* Home Page */}
             <Route path="/" element={<HomePage />} />
@@ -120,6 +122,8 @@ export default function App() {
             {/* 404 Page */}
             <Route path="*" element={<NotFound />} />
           </Routes>
+
+            <Footer />
           
           {/* Add AIChatbot to all pages */}
           <AIChatbot />
@@ -133,7 +137,6 @@ export default function App() {
 function HomePage() {
   return (
     <>
-      <Navigation />
       <HeroSection />
       <StatsSection />
       <LogosSection />
@@ -144,7 +147,6 @@ function HomePage() {
       <InsightsSection />
       <WhitepapersSection />
       <CTABannerSection />
-      <Footer />
     </>
   );
 }
diff --git a/src/components/BookingModal.tsx b/src/components/BookingModal.tsx
new file mode 100644
index 0000000..c3828fa
--- /dev/null
+++ b/src/components/BookingModal.tsx
@@ -0,0 +1,201 @@
+import React, { useState } from "react";
+import { Calendar } from "lucide-react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
+
+interface BookingFormData {
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  role: string;
+  teamSize: string;
+  facilityZone: string;
+  additionalRequirements: string;
+}
+
+interface BookingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialFacilityZone?: string;
+}
+
+export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: BookingModalProps) {
+  const [bookingForm, setBookingForm] = useState<BookingFormData>({
+    companyName: '',
+    contactName: '',
+    email: '',
+    phone: '',
+    role: '',
+    teamSize: '',
+    facilityZone: initialFacilityZone,
+    additionalRequirements: ''
+  });
+
+  const handleBookingSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Booking form submitted:', bookingForm);
+    // Here you would typically send the form data to your backend
+    alert('Booking request submitted successfully! We will contact you within 24 hours.');
+    onClose();
+  };
+
+  const updateFormField = (field: keyof BookingFormData, value: string) => {
+    setBookingForm(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        onClose();
+      }
+    }}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-h3 mb-2">Book Our Learning Facility</DialogTitle>
+          <DialogDescription className="text-body text-muted">
+            Submit your booking request and we'll get back to you within 24 hours to confirm availability and discuss your requirements.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <form onSubmit={handleBookingSubmit} className="space-y-6 mt-6">
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="companyName" className="text-body font-medium">Company/Organization Name *</Label>
+              <Input
+                id="companyName"
+                value={bookingForm.companyName}
+                onChange={(e) => updateFormField('companyName', e.target.value)}
+                placeholder="Enter company name"
+                required
+                className="text-body"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="contactName" className="text-body font-medium">Contact Person *</Label>
+              <Input
+                id="contactName"
+                value={bookingForm.contactName}
+                onChange={(e) => updateFormField('contactName', e.target.value)}
+                placeholder="Enter your full name"
+                required
+                className="text-body"
+              />
+            </div>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-body font-medium">Email Address *</Label>
+              <Input
+                id="email"
+                type="email"
+                value={bookingForm.email}
+                onChange={(e) => updateFormField('email', e.target.value)}
+                placeholder="your.email@company.com"
+                required
+                className="text-body"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="phone" className="text-body font-medium">Phone Number</Label>
+              <Input
+                id="phone"
+                value={bookingForm.phone}
+                onChange={(e) => updateFormField('phone', e.target.value)}
+                placeholder="+1 (555) 123-4567"
+                className="text-body"
+              />
+            </div>
+          </div>
+          
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="role" className="text-body font-medium">Your Role/Position</Label>
+              <Input
+                id="role"
+                value={bookingForm.role}
+                onChange={(e) => updateFormField('role', e.target.value)}
+                placeholder="e.g., Training Manager, HR Director"
+                className="text-body"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
+              <Select value={bookingForm.teamSize} onValueChange={(value) => updateFormField('teamSize', value)}>
+                <SelectTrigger className="text-body">
+                  <SelectValue placeholder="Select group size" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1-10">1-10 participants</SelectItem>
+                  <SelectItem value="11-25">11-25 participants</SelectItem>
+                  <SelectItem value="26-50">26-50 participants</SelectItem>
+                  <SelectItem value="51-80">51-80 participants</SelectItem>
+                  <SelectItem value="80+">80+ participants</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
+            <Select value={bookingForm.facilityZone} onValueChange={(value) => updateFormField('facilityZone', value)}>
+              <SelectTrigger className="text-body">
+                <SelectValue placeholder="Select preferred zone (optional)" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="amphitheater">Training Amphitheater (80-120 people)</SelectItem>
+                <SelectItem value="collaboration">Collaboration Suites (4-8 people)</SelectItem>
+                <SelectItem value="outdoor">Outdoor Learning Pavilion (20-40 people)</SelectItem>
+                <SelectItem value="multiple">Multiple zones needed</SelectItem>
+                <SelectItem value="flexible">Flexible - advise best option</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="requirements" className="text-body font-medium">Additional Requirements</Label>
+            <Textarea
+              id="requirements"
+              value={bookingForm.additionalRequirements}
+              onChange={(e) => updateFormField('additionalRequirements', e.target.value)}
+              placeholder="Please share any specific requirements, preferred dates, catering needs, accommodation requirements, etc."
+              rows={4}
+              className="text-body resize-none"
+            />
+          </div>
+          
+          <div className="flex flex-col sm:flex-row gap-3 justify-end pt-4">
+            <Button 
+              type="button" 
+              variant="outline" 
+              onClick={onClose}
+              className="text-body"
+            >
+              Cancel
+            </Button>
+            <Button 
+              type="submit"
+              className="text-body px-8"
+              style={{
+                backgroundColor: 'var(--color-primary)',
+                color: 'white',
+                fontFamily: 'var(--font-family-base)'
+              }}
+            >
+              <Calendar className="w-4 h-4 mr-2" />
+              Submit Booking Request
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index a3dc475..e208679 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,14 +1,39 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from './ui/button';
+import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
+import {
+  ArrowRight,
+  BookMarked,
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  GraduationCap,
+  Heart,
+  LayoutDashboard,
+  Lightbulb,
+  LogOut,
+  Menu,
+  Podcast,
+  Settings,
+  ShoppingCart,
+  Star,
+  Target,
+  TrendingUp,
+  User,
+  Users
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useAuth } from './AuthContext';
+import { useCart } from './CartContext';
+import { navigateTo } from './Router';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
   DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from './ui/dropdown-menu';
 import {
   Sheet,
@@ -17,50 +42,6 @@ import {
   SheetTitle,
   SheetTrigger,
 } from './ui/sheet';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
-import { navigateTo } from './Router';
-import { useAuth } from './AuthContext';
-import { useCart } from './CartContext';
-import { ImageWithFallback } from './figma/ImageWithFallback';
-import { PrimaryCTAButton } from './PrimaryCTAButton';
-import { StandardCTAButton } from './StandardCTAButton';
-import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
-import {
-  Menu,
-  ChevronDown,
-  ChevronRight,
-  Building2,
-  User,
-  Settings,
-  LogOut,
-  LayoutDashboard,
-  Users,
-  Target,
-  Award,
-  Lightbulb,
-  GraduationCap,
-  BookOpen,
-  Video,
-  FileText,
-  Eye,
-  Heart,
-  MapPin,
-  Calendar,
-  Play,
-  Home,
-  Monitor,
-  Headphones,
-  Globe,
-  Download,
-  Clock,
-  TrendingUp,
-  Star,
-  BookMarked,
-  Podcast,
-  Building,
-  ShoppingCart,
-  ArrowRight
-} from 'lucide-react';
 
 interface NavigationProps {
   currentPage?: string;
@@ -598,7 +579,8 @@ export function Navigation({ currentPage }: NavigationProps) {
                     className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 group"
                     style={{
                       fontFamily: 'var(--font-family-base)',
-                      color: '#04045B'
+                      color: '#04045B',
+                      backgroundColor: '#04045b',
                     }}
                   >
                     Start Leadership Journey
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b6bf00a..5df1d49 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2470,7 +2470,7 @@ html {
 
 /* Management Development Section - Glassmorphic Download Button */
 .management-dev-glassmorphic-btn {
-  background: rgba(4, 4, 91, 0.15) !important; /* Semi-transparent blue */
+  background: #04045b !important; /* Semi-transparent blue */
   backdrop-filter: blur(12px) !important;
   -webkit-backdrop-filter: blur(12px) !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
@@ -2508,7 +2508,7 @@ html {
 
 /* Enhanced hover effect with glassmorphism */
 .management-dev-glassmorphic-btn:hover {
-  background: rgba(4, 4, 91, 0.25) !important;
+  /* background: rgba(4, 4, 91, 0.25) !important; */
   border-color: rgba(255, 255, 255, 0.3) !important;
   box-shadow: 
     0 12px 40px rgba(4, 4, 91, 0.2),