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

resp fixes

Browse Source
This commit is contained in:
priyanshuvish
2025-09-02 18:48:56 +05:30
parent a2f4dc1a3e
commit c37a70dfec
17 changed files with 1005 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/components/services/LearningFacility.tsx
View File

@@ -14,7 +14,7 @@ import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { TestimonialsSection } from '../TestimonialsSection';
import { CTABannerSection } from '../CTABannerSection';
import {
import {
ArrowRight,
CheckCircle,
Calendar,
@@ -55,7 +55,7 @@ const offerings = [
features: ["4 fully-equipped halls", "Flexible seating arrangements", "Advanced AV systems", "Natural lighting"]
},
{
title: "Technology Infrastructure",
title: "Technology Infrastructure",
description: "Cutting-edge technology to support modern learning and collaboration",
icon: Monitor,
features: ["High-speed connectivity", "Interactive displays", "Video conferencing", "Digital whiteboards"]
@@ -305,11 +305,11 @@ export function LearningFacility() {
// Facility Features Carousel state and functionality
const [currentSlide, setCurrentSlide] = useState(0);
const carouselRef = useRef<HTMLDivElement>(null);
// Virtual Tour Carousel state and functionality
const [currentTourSlide, setCurrentTourSlide] = useState(0);
const tourCarouselRef = useRef<HTMLDivElement>(null);
// Responsive carousel settings
const getCarouselSettings = () => {
if (typeof window !== 'undefined') {
@@ -400,22 +400,22 @@ export function LearningFacility() {
useEffect(() => {
console.log('LearningFacility component mounted'); // Debug log
window.scrollTo(0, 0);
// Listen for custom booking modal event from CTAPopupModal
const handleOpenBookingModal = () => {
console.log('Custom booking modal event received'); // Debug log
setIsBookingModalOpen(true);
};
window.addEventListener('openBookingModal', handleOpenBookingModal);
// Also check if we should auto-open the booking modal based on URL parameters
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);
}
return () => {
window.removeEventListener('openBookingModal', handleOpenBookingModal);
};
@@ -456,12 +456,12 @@ export function LearningFacility() {
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.');
};
@@ -469,7 +469,7 @@ export function LearningFacility() {
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);
@@ -511,14 +511,14 @@ export function LearningFacility() {
</p>
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<PrimaryCTAButton
<PrimaryCTAButton
text="Take Virtual Tour"
onClick={handleStartTour}
ariaLabel="Take virtual tour"
className="primary-cta-button-blue cta-text-white"
/>
<Button
<Button
variant="outline"
onClick={() => {
console.log('Book Facility button clicked');
@@ -727,10 +727,10 @@ export function LearningFacility() {
audience.title.includes('Corporate')
? 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=640&h=640&fit=crop'
: audience.title.includes('Learning')
? 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?w=640&h=640&fit=crop'
: audience.title.includes('Professional')
? 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=640&h=640&fit=crop'
: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=640&h=640&fit=crop'
? 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?w=640&h=640&fit=crop'
: audience.title.includes('Professional')
? 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=640&h=640&fit=crop'
: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=640&h=640&fit=crop'
}
alt={`${audience.title} visual`}
className="w-full h-full object-cover"
@@ -799,7 +799,7 @@ export function LearningFacility() {
Facility <span className="text-primary">Features</span>
</h2>
<p className="text-body-lg text-muted leading-relaxed">
Every aspect of our facility is designed to enhance learning outcomes
Every aspect of our facility is designed to enhance learning outcomes
and provide an exceptional experience for participants and facilitators.
</p>
</div>
@@ -837,7 +837,7 @@ export function LearningFacility() {
{/* Carousel Container */}
<div className="overflow-hidden" style={{ paddingBottom: '80px' }}>
<div
<div
ref={carouselRef}
className="flex transition-transform duration-500 ease-in-out gap-6"
style={{ transform: `translateX(-${currentSlide * slideWidth}%)` }}
@@ -853,26 +853,26 @@ export function LearningFacility() {
feature.title.toLowerCase().includes('wifi')
? 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('coffee') || feature.title.toLowerCase().includes('café') || feature.title.toLowerCase().includes('cafe')
? 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('parking') || feature.title.toLowerCase().includes('car')
? 'https://images.unsplash.com/photo-1518306727298-4c17e1bf8cff?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('security') || feature.title.toLowerCase().includes('safety')
? 'https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('bed') || feature.title.toLowerCase().includes('accommodation') || feature.title.toLowerCase().includes('stay')
? 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('nature') || feature.title.toLowerCase().includes('outdoor')
? 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('meeting') || feature.title.toLowerCase().includes('room') || feature.title.toLowerCase().includes('facility')
? 'https://images.unsplash.com/photo-1557800636-894a64c1696f?w=480&h=320&fit=crop&auto=format&dpr=2'
: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=480&h=320&fit=crop&auto=format&dpr=2'
? 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('parking') || feature.title.toLowerCase().includes('car')
? 'https://images.unsplash.com/photo-1518306727298-4c17e1bf8cff?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('security') || feature.title.toLowerCase().includes('safety')
? 'https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('bed') || feature.title.toLowerCase().includes('accommodation') || feature.title.toLowerCase().includes('stay')
? 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('nature') || feature.title.toLowerCase().includes('outdoor')
? 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('meeting') || feature.title.toLowerCase().includes('room') || feature.title.toLowerCase().includes('facility')
? 'https://images.unsplash.com/photo-1557800636-894a64c1696f?w=480&h=320&fit=crop&auto=format&dpr=2'
: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=480&h=320&fit=crop&auto=format&dpr=2'
}
alt={`${feature.title} image`}
className="w-full h-full object-cover"
/>
</div>
<h3 className="text-h4 mb-4">{feature.title}</h3>
<p className="text-body text-muted mb-6">{feature.description}</p>
<div className="space-y-2">
@@ -901,66 +901,68 @@ export function LearningFacility() {
World-Class <span className="text-primary">Amenities</span>
</h2>
<p className="text-body-lg text-muted">
Premium amenities and services to ensure comfort, productivity, and an
Premium amenities and services to ensure comfort, productivity, and an
exceptional learning environment for all participants.
</p>
</div>
<div className="relative overflow-hidden w-screen" aria-label="Amenities ticker" style={{ marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' }}>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0,1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row1-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
</div>
<div className="relative w-full">
<div className="relative overflow-hidden">
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
key={`amenity-row1-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<Icon className="w-6 h-6 text-primary" />
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
</div>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-right mt-4" style={{ animationDuration: '30s' }}>
{[0,1].map((loop) => (
<div key={`amenities-loop-bottom-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row2-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
);
})}
</div>
))}
</div>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-right mt-4" style={{ animationDuration: '30s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-bottom-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
key={`amenity-row2-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<Icon className="w-6 h-6 text-primary" />
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
);
})}
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Virtual Tour Section */}
@@ -1009,10 +1011,10 @@ export function LearningFacility() {
{/* Carousel Container */}
<div className="relative overflow-hidden">
<div
<div
ref={tourCarouselRef}
className="flex transition-transform duration-700 ease-in-out"
style={{
style={{
transform: `translateX(-${currentTourSlide * tourSlideWidth}%)`,
width: `${(virtualTourStops.length / tourCardsPerView) * 100}%`
}}
@@ -1071,7 +1073,7 @@ export function LearningFacility() {
Preview complete? Launch the full interactive tour to navigate each zone.
</div>
<div className="hero-slide-button">
<PrimaryCTAButton
<PrimaryCTAButton
text="Start Interactive Tour"
onClick={handleStartTour}
ariaLabel="Start interactive virtual tour"
@@ -1085,7 +1087,7 @@ export function LearningFacility() {
<div className="max-w-6xl mx-auto">
{/* Tour Header */}
<div className="text-center mb-8">
<Badge
<Badge
className="text-small px-4 py-2 mb-4"
style={{
backgroundColor: 'rgba(4, 4, 91, 0.1)',
@@ -1112,7 +1114,7 @@ export function LearningFacility() {
className="w-full h-full object-cover"
/>
</div>
{/* Navigation Arrows */}
<button
onClick={handlePrevStop}
@@ -1121,7 +1123,7 @@ export function LearningFacility() {
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={handleNextStop}
disabled={currentTourStop === virtualTourStops.length - 1}
@@ -1181,11 +1183,10 @@ export function LearningFacility() {
<button
key={index}
onClick={() => handleJumpToStop(index)}
className={`w-3 h-3 rounded-full transition-all ${
index === currentTourStop
? 'bg-primary w-8'
: 'bg-gray-300 hover:bg-gray-400'
}`}
className={`w-3 h-3 rounded-full transition-all ${index === currentTourStop
? 'bg-primary w-8'
: 'bg-gray-300 hover:bg-gray-400'
}`}
/>
))}
</div>
@@ -1211,7 +1212,7 @@ export function LearningFacility() {
<>
<DialogHeader className="pb-6">
<div className="text-center space-y-4">
<div
<div
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
@@ -1235,7 +1236,7 @@ export function LearningFacility() {
className="w-full h-full object-cover"
/>
<div className="absolute top-6 left-6">
<Badge
<Badge
className="text-body px-4 py-2"
style={{
backgroundColor: 'var(--color-accent)',
@@ -1295,7 +1296,7 @@ export function LearningFacility() {
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>
@@ -1303,7 +1304,7 @@ export function LearningFacility() {
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e) => setBookingForm({...bookingForm, companyName: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
required
/>
</div>
@@ -1312,7 +1313,7 @@ export function LearningFacility() {
<Input
id="contactName"
value={bookingForm.contactName}
onChange={(e) => setBookingForm({...bookingForm, contactName: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
required
/>
</div>
@@ -1325,7 +1326,7 @@ export function LearningFacility() {
id="email"
type="email"
value={bookingForm.email}
onChange={(e) => setBookingForm({...bookingForm, email: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, email: e.target.value })}
required
/>
</div>
@@ -1334,7 +1335,7 @@ export function LearningFacility() {
<Input
id="phone"
value={bookingForm.phone}
onChange={(e) => setBookingForm({...bookingForm, phone: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, phone: e.target.value })}
required
/>
</div>
@@ -1346,13 +1347,13 @@ export function LearningFacility() {
<Input
id="role"
value={bookingForm.role}
onChange={(e) => setBookingForm({...bookingForm, role: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, role: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="teamSize">Team Size</Label>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({...bookingForm, teamSize: value})}>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger>
<SelectValue placeholder="Select size" />
</SelectTrigger>
@@ -1369,7 +1370,7 @@ export function LearningFacility() {
<div>
<Label htmlFor="facilityZone">Preferred Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({...bookingForm, facilityZone: value})}>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger>
<SelectValue placeholder="Select zone" />
</SelectTrigger>
@@ -1388,7 +1389,7 @@ export function LearningFacility() {
<Textarea
id="requirements"
value={bookingForm.additionalRequirements}
onChange={(e) => setBookingForm({...bookingForm, additionalRequirements: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
placeholder="Tell us about your event, special requirements, catering needs, etc."
rows={3}
/>
@@ -1426,7 +1427,7 @@ export function LearningFacility() {
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">
@@ -1434,26 +1435,26 @@ export function LearningFacility() {
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e) => setBookingForm({...bookingForm, companyName: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, contactName: e.target.value})}
onChange={(e) => 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>
@@ -1461,40 +1462,40 @@ export function LearningFacility() {
id="email"
type="email"
value={bookingForm.email}
onChange={(e) => setBookingForm({...bookingForm, email: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, phone: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, role: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, teamSize: value})}>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select group size" />
</SelectTrigger>
@@ -1508,10 +1509,10 @@ export function LearningFacility() {
</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) => setBookingForm({...bookingForm, facilityZone: value})}>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select preferred zone (optional)" />
</SelectTrigger>
@@ -1524,29 +1525,29 @@ export function LearningFacility() {
</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) => setBookingForm({...bookingForm, additionalRequirements: e.target.value})}
onChange={(e) => 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"
<Button
type="button"
variant="outline"
onClick={() => setIsBookingModalOpen(false)}
className="text-body"
>
Cancel
</Button>
<Button
<Button
type="submit"
className="text-body px-8"
style={{
@@ -1564,7 +1565,7 @@ export function LearningFacility() {
</Dialog>
{/* Testimonials Section - Using home page testimonials with custom headers */}
<TestimonialsSection
<TestimonialsSection
title="Guest Experiences"
subtitle="Hear from clients and partners who have experienced the transformational power of our purpose-built learning environment."
tagText="Facility Excellence"