KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix navigation

Browse Source
This commit is contained in:
priyanshuvish
2025-08-28 17:05:42 +05:30
parent 7136f1b3e6
commit a2f4dc1a3e
4 changed files with 239 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -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 />} />
@@ -121,6 +123,8 @@ export default function App() {
<Route path="*" element={<NotFound />} />
</Routes>
<Footer />
{/* Add AIChatbot to all pages */}
<AIChatbot />
</div>
@@ -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 />
</>
);
}

201
src/components/BookingModal.tsx Normal file
View File

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

82
src/components/Navigation.tsx
View File

@@ -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

4
src/styles/globals.css
View File

@@ -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),