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

add same modal in learning facility

Browse Source
This commit is contained in:
priyanshuvish
2025-09-30 16:53:39 +05:30
parent d3e301cbbb
commit d2548f2408
4 changed files with 573 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AboutUs.tsx
View File

@@ -293,7 +293,7 @@ export function AboutUs() {
<div className="w-full section-margin-x">
<div className="max-w-6xl">
{/* Back Navigation */}
<div className="mb-8">
{/* <div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
@@ -302,7 +302,7 @@ export function AboutUs() {
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
</div> */}
<div className="mb-8">
<h1 className="text-h1-white">

899
src/components/LearningFacilityNew.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'motion/react';
// import { Button } from '../ui/button';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent } from './ui/card';
@@ -15,6 +14,7 @@ import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { TestimonialsSection } from './TestimonialsSection';
import { CTABannerSection } from './CTABannerSection';
import kautilyaVirtualTourImage from '../assets/Kautilya.png';
import {
ArrowRight,
CheckCircle,
@@ -292,6 +292,38 @@ interface BookingForm {
additionalRequirements: string;
}
// Facility data for BookingModal
const facilities = [
{
id: 'learning-facility',
name: 'Learning Facility',
description: 'A purpose-built campus for immersive leadership learning. State-of-the-art facilities designed to foster transformation, collaboration, and growth.',
capacity: '80-120 people',
icon: Building,
features: [
'State-of-the-art training halls',
'Advanced AV systems',
'Flexible seating arrangements',
'High-speed connectivity',
'Professional learning environment'
],
videoUrl: 'https://example.com/virtual-tour'
}
];
// Booking Form Data Interface for BookingModal
interface BookingFormData {
companyName: string;
contactName: string;
email: string;
phone: string;
role: string;
teamSize: string;
facilityType: string;
preferredDate: string;
additionalRequirements: string;
}
export function LearningFacilityNew() {
// Deluxe Living & Recreation Carousel state and functionality
const [currentSlide, setCurrentSlide] = useState(0);
@@ -304,6 +336,10 @@ export function LearningFacilityNew() {
// Hero Background Image Carousel state and functionality
const [currentHeroBackground, setCurrentHeroBackground] = useState(0);
// Booking Modal state
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null);
// Conference/Classroom room background images array for hero section
const heroBackgroundImages = [
{
@@ -402,18 +438,7 @@ export function LearningFacilityNew() {
};
const [currentTourStop, setCurrentTourStop] = useState(0);
const [isVirtualTourActive, setIsVirtualTourActive] = useState(false);
const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
const [expandedTourCard, setExpandedTourCard] = useState<string | null>(null);
const [bookingForm, setBookingForm] = useState<BookingForm>({
companyName: '',
contactName: '',
email: '',
phone: '',
role: '',
teamSize: '',
facilityZone: '',
additionalRequirements: ''
});
useEffect(() => {
console.log('LearningFacility component mounted'); // Debug log
@@ -422,7 +447,7 @@ export function LearningFacilityNew() {
// Listen for custom booking modal event from CTAPopupModal
const handleOpenBookingModal = () => {
console.log('Custom booking modal event received'); // Debug log
setIsBookingModalOpen(true);
handleBookNow();
};
window.addEventListener('openBookingModal', handleOpenBookingModal);
@@ -431,7 +456,7 @@ export function LearningFacilityNew() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('autoBooking') === 'true') {
console.log('Auto-opening booking modal from URL parameter'); // Debug log
setTimeout(() => setIsBookingModalOpen(true), 100);
setTimeout(() => handleBookNow(), 100);
}
return () => {
@@ -469,40 +494,15 @@ export function LearningFacilityNew() {
setCurrentTourStop(index);
};
const handleBookingSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Booking submitted:', bookingForm);
setIsBookingModalOpen(false);
setBookingForm({
companyName: '',
contactName: '',
email: '',
phone: '',
role: '',
teamSize: '',
facilityZone: '',
additionalRequirements: ''
});
// Clean up URL parameter
const url = new URL(window.location.href);
url.searchParams.delete('autoBooking');
window.history.replaceState({}, '', url.toString());
// Here you would typically send the booking request to your backend
alert('Booking request submitted successfully! We will contact you within 24 hours.');
const handleBookNow = () => {
// Set the first facility as default for booking
setSelectedFacility(facilities[0]);
setIsModalOpen(true);
};
const handleBookingModalClose = (open: boolean) => {
console.log('Booking modal close triggered, open:', open); // Debug log
setIsBookingModalOpen(open);
if (!open) {
// Clean up URL parameter when closing
const url = new URL(window.location.href);
url.searchParams.delete('autoBooking');
window.history.replaceState({}, '', url.toString());
}
const handleCloseModal = () => {
setIsModalOpen(false);
setSelectedFacility(null);
};
return (
@@ -555,10 +555,7 @@ export function LearningFacilityNew() {
<Button
variant="outline"
onClick={() => {
console.log('Book Facility button clicked');
setIsBookingModalOpen(true);
}}
onClick={handleBookNow}
data-booking-trigger
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300"
style={{
@@ -603,8 +600,6 @@ export function LearningFacilityNew() {
</div>
</section>
{/* Enhanced Our Story Timeline Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
@@ -735,7 +730,6 @@ export function LearningFacilityNew() {
</div>
</section>
{/* Deluxe Living & Recreation Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
@@ -779,9 +773,6 @@ export function LearningFacilityNew() {
{/* Carousel Container */}
<div className="relative max-w-7xl mx-auto">
{/* Navigation Controls - Positioned at bottom right */}
{/* Carousel Container */}
<div className="overflow-hidden" style={{ paddingBottom: '80px' }}>
<div
@@ -841,281 +832,11 @@ export function LearningFacilityNew() {
</section>
{/* Booking Modal */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle className="text-h3">Book Learning Facility</DialogTitle>
<DialogDescription>
Submit your facility booking request with your preferred dates, team size, and specific requirements. We'll contact you within 24 hours to confirm availability and discuss details.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleBookingSubmit} className="space-y-4 pt-4">
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="companyName">Company Name</Label>
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e: any) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="contactName">Contact Name</Label>
<Input
id="contactName"
value={bookingForm.contactName}
onChange={(e: any) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
required
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={bookingForm.email}
onChange={(e: any) => setBookingForm({ ...bookingForm, email: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="phone">Phone</Label>
<Input
id="phone"
value={bookingForm.phone}
onChange={(e: any) => setBookingForm({ ...bookingForm, phone: e.target.value })}
required
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="role">Your Role</Label>
<Input
id="role"
value={bookingForm.role}
onChange={(e: any) => setBookingForm({ ...bookingForm, role: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="teamSize">Team Size</Label>
<Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger>
<SelectValue placeholder="Select size" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1-10">1-10 people</SelectItem>
<SelectItem value="11-25">11-25 people</SelectItem>
<SelectItem value="26-50">26-50 people</SelectItem>
<SelectItem value="51-80">51-80 people</SelectItem>
<SelectItem value="80+">80+ people</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div>
<Label htmlFor="facilityZone">Preferred Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger>
<SelectValue placeholder="Select zone" />
</SelectTrigger>
<SelectContent>
<SelectItem value="training-amphitheater">Training Amphitheater</SelectItem>
<SelectItem value="collaboration-suites">Collaboration Suites</SelectItem>
<SelectItem value="outdoor-pavilion">Outdoor Pavilion</SelectItem>
<SelectItem value="residential-quarters">Residential Quarters</SelectItem>
<SelectItem value="flexible">Flexible / Any Zone</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="requirements">Additional Requirements</Label>
<Textarea
id="requirements"
value={bookingForm.additionalRequirements}
onChange={(e: any) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
placeholder="Tell us about your event, special requirements, catering needs, etc."
rows={3}
/>
</div>
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1"
style={{
backgroundColor: 'var(--color-primary)',
color: 'white'
}}
>
Submit Booking Request
</Button>
<Button
type="button"
variant="outline"
onClick={() => setIsBookingModalOpen(false)}
>
Cancel
</Button>
</div>
</form>
</DialogContent>
</Dialog>
{/* Booking Modal */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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: any) => setBookingForm({ ...bookingForm, 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={() => setIsBookingModalOpen(false)}
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>
<BookingModal
facility={selectedFacility}
isOpen={isModalOpen}
onClose={handleCloseModal}
/>
{/* Testimonials Section - Using home page testimonials with custom headers */}
<TestimonialsSection
@@ -1255,7 +976,7 @@ export function LearningFacilityNew() {
<div className="flex justify-center">
<Button
variant="outline"
onClick={() => setIsBookingModalOpen(true)}
onClick={handleBookNow}
className="text-body px-4 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 transition-colors w-full"
style={{
fontFamily: 'var(--font-family-base)'
@@ -1276,4 +997,518 @@ export function LearningFacilityNew() {
</div>
);
}
// Utility functions for calendar
const getDaysInMonth = (date: Date) => {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};
const getFirstDayOfMonth = (date: Date) => {
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
};
const isDateAvailable = (date: Date) => {
// Simple availability check - you can replace this with your actual logic
const today = new Date();
today.setHours(0, 0, 0, 0);
return date >= today;
};
const formatDate = (date: Date) => {
return date.toISOString().split('T')[0];
};
// Modal Component for Virtual Tour and Booking
function BookingModal({
facility,
isOpen,
onClose
}: {
facility: typeof facilities[0] | null;
isOpen: boolean;
onClose: () => void;
}) {
const [bookingForm, setBookingForm] = useState<BookingFormData>({
companyName: '',
contactName: '',
email: '',
phone: '',
role: '',
teamSize: '',
facilityType: facility?.name || '',
preferredDate: '',
additionalRequirements: ''
});
// Calendar state
const [currentMonth, setCurrentMonth] = useState(new Date());
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
// Lock body scroll when modal is open
React.useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = '15px'; // Prevent layout shift from scrollbar
} else {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
}
// Cleanup on unmount or when modal closes
return () => {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
};
}, [isOpen]);
const handleFormSubmit = (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 soon.');
onClose();
};
const updateFormField = (field: keyof BookingFormData, value: string) => {
setBookingForm(prev => ({ ...prev, [field]: value }));
};
// Calendar functions
const handleDateSelect = (date: Date) => {
if (isDateAvailable(date)) {
setSelectedDate(date);
updateFormField('preferredDate', formatDate(date));
}
};
const navigateMonth = (direction: 'prev' | 'next') => {
setCurrentMonth(prev => {
const newMonth = new Date(prev);
if (direction === 'prev') {
newMonth.setMonth(prev.getMonth() - 1);
} else {
newMonth.setMonth(prev.getMonth() + 1);
}
return newMonth;
});
};
const renderCalendar = () => {
const daysInMonth = getDaysInMonth(currentMonth);
const firstDay = getFirstDayOfMonth(currentMonth);
const days = [];
const monthNames = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
// Empty cells for days before the first day of the month
for (let i = 0; i < firstDay; i++) {
days.push(<div key={`empty-${i}`} className="h-6" />);
}
// Days of the month
for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
const isAvailable = isDateAvailable(date);
const isSelected = selectedDate &&
date.getFullYear() === selectedDate.getFullYear() &&
date.getMonth() === selectedDate.getMonth() &&
date.getDate() === selectedDate.getDate();
days.push(
<button
key={day}
type="button"
onClick={() => handleDateSelect(date)}
disabled={!isAvailable}
className={`
h-6 w-6 rounded text-xs font-medium transition-all duration-200 flex items-center justify-center
${isSelected
? 'bg-primary text-white shadow-sm'
: isAvailable
? 'hover:bg-blue-50 hover:text-primary text-gray-700'
: 'text-gray-300 cursor-not-allowed'
}
`}
style={{
backgroundColor: isSelected ? 'var(--color-primary)' : undefined,
color: isSelected ? 'white' : undefined
}}
>
{day}
</button>
);
}
return (
<div className="bg-white rounded-lg border border-gray-200 p-3">
{/* Calendar Header */}
<div className="flex items-center justify-between mb-3">
<button
type="button"
onClick={() => navigateMonth('prev')}
className="p-1 rounded hover:bg-gray-100 transition-colors"
>
<ChevronLeft className="w-3 h-3 text-gray-600" />
</button>
<h4 className="text-sm font-semibold text-gray-900">
{monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
</h4>
<button
type="button"
onClick={() => navigateMonth('next')}
className="p-1 rounded hover:bg-gray-100 transition-colors"
>
<ChevronRight className="w-3 h-3 text-gray-600" />
</button>
</div>
{/* Day Names */}
<div className="grid grid-cols-7 gap-1 mb-2">
{dayNames.map((day, index) => (
<div key={`day-${index}`} className="h-6 flex items-center justify-center">
<span className="text-xs font-medium text-gray-500">{day}</span>
</div>
))}
</div>
{/* Calendar Grid */}
<div className="grid grid-cols-7 gap-1 mb-3">
{days}
</div>
</div>
);
};
if (!isOpen || !facility) return null;
return (
<div
className="fixed inset-0 bg-black/60 flex items-center justify-center p-2 lg:p-4 z-popup-modal virtual-space-modal-overlay"
onClick={onClose}
>
<div
className="bg-white rounded-xl lg:rounded-2xl max-w-5xl w-full h-[85vh] overflow-hidden virtual-space-modal-container flex flex-col"
onClick={(e) => e.stopPropagation()}
>
{/* Modal Header - Compact */}
<div
className="flex items-center justify-between p-4 lg:p-6 border-b flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.02)' }}
>
<div className="flex items-center gap-3 lg:gap-4">
<div
className="w-10 h-10 lg:w-12 lg:h-12 rounded-lg flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
<facility.icon className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
</div>
<div>
<h2 className="text-body lg:text-subhead mb-1">
Kautilya Leadership Centre
</h2>
<p className="text-small text-muted">
Capacity: {facility.capacity} people
</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={onClose}
className="rounded-full w-8 h-8 lg:w-10 lg:h-10 p-0 hover:bg-gray-100"
>
<X className="w-4 h-4 lg:w-5 lg:h-5" />
</Button>
</div>
{/* Modal Content - Side by Side Layout No Scroll */}
<div className="grid grid-cols-1 lg:grid-cols-2 flex-1 min-h-0">
{/* Left Side - Virtual Tour */}
<div className="p-3 lg:p-6 border-r border-gray-100 flex flex-col min-h-0 overflow-y-auto">
<div className="flex flex-col h-full space-y-2 lg:space-y-3">
{/* Video Section - Compact */}
<div className="flex-shrink-0">
<div className="flex items-center gap-2 mb-2">
<Play className="w-4 h-4 text-primary" />
<h3 className="text-small lg:text-body font-semibold">Virtual Tour</h3>
</div>
{/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */}
<div className="aspect-video rounded-lg overflow-hidden bg-gray-100 shadow-md relative">
<div
id={`virtual-tour-container-${facility.id}`}
className="w-full h-full relative"
data-facility-id={facility.id}
data-facility-name={facility.name}
data-tour-type="360-viewer"
>
<ImageWithFallback
src={kautilyaVirtualTourImage}
alt={`${facility.name} Virtual Tour`}
className="w-full h-full object-cover"
/>
</div>
{/* Interactive Controls Overlay (optional) */}
<div className="absolute bottom-2 left-2 right-2 flex justify-between items-center pointer-events-none">
<div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
<span className="text-white text-xs">360° Virtual Tour</span>
</div>
<div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
<span className="text-white text-xs">Click & Drag to Explore</span>
</div>
</div>
</div>
</div>
{/* Compact Info Section */}
<div className="flex-1 min-h-0 space-y-2 lg:space-y-3">
{/* About - Compact */}
<div className="bg-gray-50 rounded-lg p-2 lg:p-3">
<h4 className="text-small font-semibold mb-1">About This Space</h4>
<p className="text-xs lg:text-small text-muted leading-relaxed line-clamp-2">
{facility.description}
</p>
</div>
{/* Features - Compact */}
<div className="bg-gray-50 rounded-lg p-2 lg:p-3">
<h4 className="text-small font-semibold mb-2">Key Features</h4>
<div className="space-y-1">
{facility.features.slice(0, 3).map((feature, index) => (
<div key={index} className="flex items-center gap-2">
<div
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
/>
<span className="text-xs lg:text-small">{feature}</span>
</div>
))}
</div>
</div>
{/* Quick Stats - Compact */}
<div className="grid grid-cols-2 gap-2 p-2 lg:p-3 bg-blue-50 rounded-lg">
<div className="text-center">
<div className="text-xs lg:text-small font-semibold text-primary">Capacity</div>
<div className="text-xs lg:text-small text-muted">{facility.capacity}</div>
</div>
<div className="text-center">
<div className="text-xs lg:text-small font-semibold text-primary">Zone</div>
<div className="text-xs lg:text-small text-muted">Premium</div>
</div>
</div>
{/* Action Button - Compact */}
<Button
variant="outline"
onClick={() => navigateTo('/learning-facility')}
className="w-full h-8 lg:h-10 text-xs lg:text-small"
>
<Building className="w-3 h-3 lg:w-4 lg:h-4 mr-1" />
View All Facilities
</Button>
</div>
</div>
</div>
{/* Right Side - Booking Form */}
<div className="p-4 lg:p-6 flex flex-col min-h-0 overflow-y-auto">
<form onSubmit={handleFormSubmit} className="flex flex-col h-full">
{/* Form Header */}
<div className="flex items-center gap-3 mb-4 flex-shrink-0">
<Calendar className="w-5 h-5 text-primary" />
<h3 className="text-subhead">Book This Space</h3>
</div>
{/* Form Content with Compact Spacing */}
<div className="flex-1 min-h-0 space-y-4 overflow-y-auto pr-2 virtual-space-modal-scroll">
{/* Company Information Section */}
<div className="space-y-3">
<div className="space-y-1">
<h4 className="text-small font-medium text-primary">Company Information</h4>
<div className="w-10 h-0.5 bg-primary"></div>
</div>
<div className="space-y-2">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
<Label htmlFor="companyName" className="text-xs font-normal text-black mb-1 block">
Company Name *
</Label>
<Input
id="companyName"
required
value={bookingForm.companyName}
onChange={(e) => updateFormField('companyName', e.target.value)}
placeholder="Company"
className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
/>
</div>
<div>
<Label htmlFor="contactName" className="text-xs font-normal text-black mb-1 block">
Contact Person *
</Label>
<Input
id="contactName"
required
value={bookingForm.contactName}
onChange={(e) => updateFormField('contactName', e.target.value)}
placeholder="Name"
className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
/>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
<Label htmlFor="email" className="text-xs font-normal text-black mb-1 block">
Email Address *
</Label>
<Input
id="email"
type="email"
required
value={bookingForm.email}
onChange={(e) => updateFormField('email', e.target.value)}
placeholder="email@company.com"
className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
/>
</div>
<div>
<Label htmlFor="phone" className="text-xs font-normal text-black mb-1 block">
Phone Number *
</Label>
<Input
id="phone"
required
value={bookingForm.phone}
onChange={(e) => updateFormField('phone', e.target.value)}
placeholder="+91 98765 43210"
className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
/>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
<Label htmlFor="role" className="text-xs font-normal text-black mb-1 block">
Your Role *
</Label>
<Select value={bookingForm.role} onValueChange={(value: string) => updateFormField('role', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Role" className="text-gray-400 opacity-50" />
</SelectTrigger>
<SelectContent>
<SelectItem value="ceo">CEO/Founder</SelectItem>
<SelectItem value="hr-director">HR Director</SelectItem>
<SelectItem value="training-manager">Training Manager</SelectItem>
<SelectItem value="operations-manager">Operations Manager</SelectItem>
<SelectItem value="executive-assistant">Executive Assistant</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="teamSize" className="text-xs font-normal text-black mb-1 block">
Expected Team Size *
</Label>
<Select value={bookingForm.teamSize} onValueChange={(value: string) => updateFormField('teamSize', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Size" className="text-gray-400 opacity-50" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1-5">1-5 people</SelectItem>
<SelectItem value="6-15">6-15 people</SelectItem>
<SelectItem value="16-30">16-30 people</SelectItem>
<SelectItem value="31-50">31-50 people</SelectItem>
<SelectItem value="50+">50+ people</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
</div>
{/* Booking Details Section */}
<div className="space-y-3">
<div className="space-y-1">
<h4 className="text-small font-medium text-primary">Select Your Date</h4>
<div className="w-10 h-0.5 bg-primary"></div>
</div>
<div className="space-y-3">
{/* Calendar Date Selection */}
<div className="space-y-2">
<Label className="text-xs font-normal text-black">
Choose Your Preferred Date *
</Label>
{renderCalendar()}
{selectedDate && (
<div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
<div className="flex items-center gap-2">
<Calendar className="w-3 h-3 text-green-600" />
<span className="text-xs font-medium text-green-800">
Selected: {selectedDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
</span>
</div>
</div>
)}
</div>
{/* Additional Requirements */}
<div>
<Label htmlFor="additionalRequirements" className="text-xs font-normal text-black mb-1 block">
Additional Requirements
</Label>
<Textarea
id="additionalRequirements"
value={bookingForm.additionalRequirements}
onChange={(e) => updateFormField('additionalRequirements', e.target.value)}
placeholder="Special setup, AV equipment, catering..."
rows={2}
className="text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50 resize-none"
/>
</div>
</div>
</div>
</div>
{/* Form Actions */}
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3 flex-shrink-0">
<Button
type="submit"
disabled={!selectedDate}
className="flex-1 h-9 text-sm font-medium bg-primary hover:bg-primary/90 disabled:bg-gray-300 disabled:cursor-not-allowed text-white border-0 rounded shadow-sm hover:shadow-md transition-all duration-200"
style={{
backgroundColor: selectedDate ? 'var(--color-primary)' : '#d1d5db',
color: 'white'
}}
>
<Calendar className="w-3 h-3 mr-2" />
{selectedDate ? 'Submit Request' : 'Select Date First'}
</Button>
<Button
type="button"
variant="outline"
onClick={onClose}
className="px-4 h-9 text-sm font-normal border border-gray-300 hover:border-gray-400 hover:bg-gray-50 rounded transition-all duration-200"
>
Cancel
</Button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}

4
src/components/Services.tsx
View File

@@ -125,7 +125,7 @@ export function Services() {
<div className="w-full section-margin-x">
<div className="max-w-6xl">
{/* Back Navigation */}
<div className="mb-8">
{/* <div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
@@ -134,7 +134,7 @@ export function Services() {
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
</div> */}
<div className="mb-8">
<h1 className="text-h1-white">

4
src/components/services/LeadershipPipelineDevelopment.tsx
View File

@@ -213,7 +213,7 @@ export function LeadershipPipelineDevelopment() {
<div className="w-full section-margin-x">
<div className="max-w-4xl">
{/* Back Navigation */}
{/* <div className="mb-8">
<div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
@@ -222,7 +222,7 @@ export function LeadershipPipelineDevelopment() {
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div> */}
</div>
<div className="mb-8">
<h1 className="text-h1-white">